Design your version of NFT

As we all know, blockchain was in the talk among the people and became famous in the world with trading bitcoin as well as developing apps. People also came across a new thing called NFT using this developers started having an NFT marketplace, developing games, etc. So in this blog, I will be giving details about how I learned to design my own version of NFT as well as a customized NFT of my own name. Before that, I will start with what exactly NFT is followed by that will be the steps to create NFT.

NFT is called a Non-fungible token. It is considered a unique asset in the blockchain world which consist of a unique number as well as metadata. They cannot be replicated and can be used as real-world tangible assets for example artwork and real estate where they can be used for buying, selling, and trading avoiding the probability of fraud. It is also said to be a digital representation of real-world things like art, music, pictures, etc

1. In this blog I will be explaining how to create your NFT in terms of image or of your name.

2. To begin with I would like to talk about the below syntax which you can see in the image below which we run in the command prompt you will be running the command after creating the folder for your project.

3. So for our project, we are using a hardhat which is an environment used basically for doing various activities such as developing, testing, and debugging the app using Ethereum blockchains.

4. Then the hardhat file will be created with all required config to run the blockchain application.

5. It will ask you about creating the gitgnore file while creating the config file for the blockchain application so we enter y.

6. The gitgnore file is used for committing the project to GitHub.

7. After that, a set of files will be created in the folder as seen below.

8. It might even ask for some dependency as you can see in the above image to install the waffle file so you need to run the below command.

9. Also, run the below syntax which is used for installing the openzepplin file that helps to create a secured smart contract.

npm install @openzeppelin/contracts

10. After installing everything is ready to create the dapp that helps you to create the NFT of your chosen image or you can create an NFT of your name which I will be showing in the below steps.

11. When you create a hardhat file it will create a sample project with a smart contract named Greeter that displays the statement “hello hardhat”.

12. To check whether the smart contract is working properly or not we will run the below command.

13. The above command compiles the solidity as well as deploys the smart contract in the local environment.

14. To run the contract, we need a JavaScript file which is the sample-script.js in the above command.

15. As we can see in the below image that the smart contract of the sample project is successfully deployed or else it will throw an error if some configuration or dependent file is missing.

16. The hardhat creates a local blockchain in your computer which helps developers with testing the dapp.

Now let’s create our own smart contract in which we will define and develop the logic to create our own NFT.

17. In line 1 we define the compiler version to compile the smart contract.

18. Then we see the import statement at line number 4 which helps us to face the debugging challenges.

19. Like in the object-oriented we have a concept called class in the smart contract we code the same way in solidity as you can see in line number 6.

20. By defining the contract within which all the business logic is written.

21. Then we used the syntax constructor in line number 7 where we used the console syntax to display the statement so basically this contract will display a statement saying that “this is my NFT”.

22. The next step is creating the run js file under the script directory which will be used to run the smart contract.

23. Now let’s investigate the syntax which we have used to run the smart contract.

24. So, in line number 2, the syntax in the above image is used for compiling the smart contract and generating a necessary file for implementing the dapp.

25. As I said the js file compiles and deploys the smart contract.

26. Then line number 3 in the above image will deploy the smart contract in the local blockchain created by the hardhat.

27. Then the syntax in line 4 we wait for the contract to be deployed officially in the blockchain.

28. Then in line 5, we use the console log stamen which displays at which address the contract is deployed.

29. Finally, you save all the files in the folder and run the below syntax in the terminal.

After that, you will see the below output if there is no error in the code.

30. Now we will make changes in our contract by first importing the ERC721URIStorage that is created by the open zeppelin.

Erc721 is a free open standard that allows developers to build NFT on the Ethereum blockchain. It is also defined as a pillar of the environment that will manage the NFT in any of the marketplaces which are worth of thousand dollars. It is also like a library that provides us the base based on which we can customize the entire NFT.

31. After importing we will use the ERC721 in our contract to create NFT for that we will use the syntax “is” that will import all the properties of ERC721 such as functions and variables that are defined in the ERC721URIstorage.

32. We are using two things in our contract one the counter variable and the ERC721 constructor.

33. As you can see in the above image inside the contract function, we have defined the counter variable which will keep the count of the NFT generated in the variable “_tokenIds”.

34. After that, we used the constructor in which we pass the NFT names as well as the symbol, and then for just testing purposes, we have written the console log to display the statement.

35. Now let’s look at the other part which is the makeanepicNFTs function which is the second half part of the contract function.

36. So in the function in the first line, we define the variable which can keep the count as well as provide a unique number to every NFT created.

37. It is also used over here to store the contract value.

38. In the above statement, we are minting the contract means we are creating the contract by passing the sender address which is passed in a secured way by using msg. sender as well as passing the token id assigned to the NFT.

39. You need your wallet connected for all this to happen as it just does not call the contract anonymously instead it will log in to the wallet and authenticate itself.

40. Then we are setting a value that is data associated with the unique identifier in the above image you can see it is set to meow as this a dummy NFT we are creating.

41. In later stages you will see how the data changes in the above function which major role in the appearance of the NFT.

42. Then the console statement is basically to show us whether the NFT is minted or not and also by whom.

43. Then we are incrementing the value of the token to keep the count of the tokens to keep the record of all the NFTs created in the program.

44. Also maintains the unique identifier for each NFT which means the new NFT does not use the identifier of the NFT that is already minted.

45. The next step is to create data for the NFT which will be done by the JSON file.

46. So now as you can see in the above image, we created data for our NFT. As we can see every NFT has a name, description, and link.

47. There is some standard requirement of a platform like open sea if it is not met then the image appears broken on the platform.

Note: for the URL of the image, you need to right-click on the image which is in the format “png” or “jpg”. You will image the address link that you need to paste.

48. Then we paste the data into the JSON keeper.

49. Get the link that will be generated by the JSON keeper we will copy this link.

50. Then paste it into the settokenURI function .in the below image you can see the data “meow” which we will replace with the link.

51. After pasting the data this is how the settokenURI will look as shown below.

52. After that, we are trying to call the function makeAnEpicNFT() in the run, js file which will help us to create the NFT when we run the program.

53. As you can see in the above image, we are calling the makeAnEpicNFT function and storing the value in the variable in txn, and then waiting for it to mint the NFT.

54. So, in the above function we are minting two NFTs. In the same way, we can mint as many as we want.

55. Now it’s time to execute the project using the below syntax.

56. After running the syntax, we should get the below output if there is no error in the syntax.

57. As you can see from the image below, we have called the function two times so the NFT are generated twice below.

58. Currently, we are running the NFT on the local chain to be visible in the marketplace we need to run it in the actual network for that we need to do some kind of transaction and that transaction will need ether for minting the NFT that is saving data.

59. The next step is to tell the miners in the blockchain to deploy the contract so we need a quick node as a platform on which we will develop the blockchain application.

60. So, you create an account in the quick node which will give you an API key for the test net.

61. It does broadcast about the contract as we are going to make a dummy NFT just to learn we will be using the Rinkeby network for that you will need a fake facet which you can get from Mycrypto, the official goerli.

62. Now let’s create another js file to run the contract on the actual testnet.

63. It will be similar to the run js file and name it deploy.js

64. Then make some changes in the hardhat configuration file to use the env variable in a secured way in which we will pass the quick node API key and goerli network private key.

65. For that we will need to do is install the dotenv package by running the below command which is

66. It will help us to use the env variable in the hardhat config file so after that we need to create a .env file in your project file which will look like as below

67. In the quick node key, we add the API URL that we get from the quick node after creating the account, and then in the private key part, we paste the wallet account address.

68. Then in your gitgnore file add the .env file that is

69. To login into the blockchain, we will need the private key which will help us to log in to the blockchain. After all the changes are made, we need to save all the files.

70. Then execute it using the below syntax mentioning the network name.

71. After executing the above syntax we will see the contract is deployed as shown below if everything in the code is perfectly fine then you will see the below output

72. When you go to Opensea or Rarible site you have to enter the below address.

73. So, this is how you can create your customized image NFT is created in the marketplace.

74. Now in the second half, we will see how to create the NFT of your name or use your design using SVG. It is another type of image using code

75. An example of the code for SVG is presented below.

76. Then you are supposed to encode it to base 64 by using the link (https://www.utilities-online.info/base64utm_source=buildspace.so&utm_medium=buildspace_project)

77. Then create a link with help of base64 encoded SVG. This link will be used to create data for the nft which we will need.

78. It will look like this:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIj4KICAgIDxzdHlsZT4uYmFzZSB7IGZpbGw6IHdoaXRlOyBmb250LWZhbWlseTogc2VyaWY7IGZvbnQtc2l6ZTogMTRweDsgfTwvc3R5bGU+CiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJQaW5rIiAvPgogICAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGNsYXNzPSJiYXNlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BaXNod2FyeWEgQWR5YW50aGF5YTwvdGV4dD4KPC9zdmc+

79. If you paste the link to the browser, you will see an image in the browser. As you can see in the below image

80. The next step is to convert it into JSON metadata this will be done by adding the above link in the image of the metadata.

81. Then paste the JSON data into the encode the into base64 .it will look like this below

82. Then copy the link and paste it to the end of the link again like this

data:application/json;base64,ewogICAgIm5hbWUiOiAiTXkgY3V0ZSBsaXR0bGUgZmFpcnkgIiwKICAgICJkZXNjcmlwdGlvbiI6ICJJIGFtIG1hZ2ljLiBtYWtlIGEgY29tbWFuZCBhbmQgeW91ciB3aXNoIHdpbGwgYmUgZnVsZmlsbGVkIiwKICAgICJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SW5oTmFXNVpUV2x1SUcxbFpYUWlJSFpwWlhkQ2IzZzlJakFnTUNBek5UQWdNelV3SWo0S0lDQWdJRHh6ZEhsc1pUNHVZbUZ6WlNCN0lHWnBiR3c2SUhkb2FYUmxPeUJtYjI1MExXWmhiV2xzZVRvZ2MyVnlhV1k3SUdadmJuUXRjMmw2WlRvZ01UUndlRHNnZlR3dmMzUjViR1UrQ2lBZ0lDQThjbVZqZENCM2FXUjBhRDBpTVRBd0pTSWdhR1ZwWjJoMFBTSXhNREFsSWlCbWFXeHNQU0pRYVc1cklpQXZQZ29nSUNBZ1BIUmxlSFFnZUQwaU5UQWxJaUI1UFNJMU1DVWlJR05zWVhOelBTSmlZWE5sSWlCa2IyMXBibUZ1ZEMxaVlYTmxiR2x1WlQwaWJXbGtaR3hsSWlCMFpYaDBMV0Z1WTJodmNqMGliV2xrWkd4bElqNUJhWE5vZDJGeWVXRWdRV1I1WVc1MGFHRjVZVHd2ZEdWNGRENEtQQzl6ZG1jKyIKfQ==,

83. After pasting the above link we will see the below image as follows

84. Then we pass the above link into the settokenURI function and implement the NFT into the marketplace like open sea or rarible etc.

85. So, it will look like this

_setTokenURI(newItemId,”data:application/json;base64,ewogICAgIm5hbWUiOiAiTXkgY3V0ZSBsaXR0bGUgZmFpcnkgIiwKICAgICJkZXNjcmlwdGlvbiI6ICJJIGFtIG1hZ2ljLiBtYWtlIGEgY29tbWFuZCBhbmQgeW91ciB3aXNoIHdpbGwgYmUgZnVsZmlsbGVkIiwKICAgICJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SW5oTmFXNVpUV2x1SUcxbFpYUWlJSFpwWlhkQ2IzZzlJakFnTUNBek5UQWdNelV3SWo0S0lDQWdJRHh6ZEhsc1pUNHVZbUZ6WlNCN0lHWnBiR3c2SUhkb2FYUmxPeUJtYjI1MExXWmhiV2xzZVRvZ2MyVnlhV1k3SUdadmJuUXRjMmw2WlRvZ01UUndlRHNnZlR3dmMzUjViR1UrQ2lBZ0lDQThjbVZqZENCM2FXUjBhRDBpTVRBd0pTSWdhR1ZwWjJoMFBTSXhNREFsSWlCbWFXeHNQU0pRYVc1cklpQXZQZ29nSUNBZ1BIUmxlSFFnZUQwaU5UQWxJaUI1UFNJMU1DVWlJR05zWVhOelBTSmlZWE5sSWlCa2IyMXBibUZ1ZEMxaVlYTmxiR2x1WlQwaWJXbGtaR3hsSWlCMFpYaDBMV0Z1WTJodmNqMGliV2xrWkd4bElqNUJhWE5vZDJGeWVXRWdRV1I1WVc1MGFHRjVZVHd2ZEdWNGRENEtQQzl6ZG1jKyIKfQ==,

“)

86. Just make a small change in your smart contract and save it. Then you are good to go to implement it by using the below syntax

87. Then you will get below output again after creating that you will get below output again

88. Using the above contract address we are going to search on the site https://goerli.pixxiti.com and you will be able to see your name nft in this marketplace.

So here I conclude the steps of creating the NFT so go on and create your version of NFT. If you like this please comment and like the blog. Also for more reference, you can get the content and steps from the build space.

New to trading? Try crypto trading bots or copy trading