Create, Deploy and Mint Smart Contract (ERC-721) with NodeJS + Hardhat + Walletconnect + Web3modal

We will create from scratch ERC-721 smartcontract, deploy it to Ethereum Goerli network using Hardhat + Solidity. For minting we will use NextJs + WalletConnect + Web3Modal Before we start, I would like to mention, that you can use any network you want. With the help of this article, you can deploy to Mainnet also. Smartcontract repo (erc721): https://github.com/gapon2401/erc721 Mint page repo (erc721-mint): https://github.com/gapon2401/erc721-mint Smartcontract: Etherscan Goerli link We need to go through the following steps to reach our goal: Creating NFT (ERC-721) smartcontract Configure hardhat.config.ts and .env Create deploy function Create tests Gas price for deployment and minting the smartcontract Creating images and metadata for NFT Deploy and verify smartcontract Create demo website for minting (optional) Deep dive and customize Step 1. Creating NFT (ERC-721) smartcontract Create new project and install — Ethereum development environment. Let’s call this project . https://hardhat.org erc721 In command line run npx hardhat Select . Create a Typescript project In order to continue you will be asked to install some dependencies. The text may vary on the hardhat version. I will run the following, because I will use : yarn yarn add -D hardhat@^2.10.2 @nomicfoundation/hardhat-toolbox@^1.0.1 We will use template for ERC-721 smartcontract, where all necessary functions have been implemented. You can take a look on it: https://www.openzeppelin.com/ https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC721/ERC721.sol Install openzeppelin packages and dotenv: yarn add -D @openzeppelin/contracts dotenv Remove everything from the folder and create a file with the contents: contracts ERC721Contract.sol https://gist.github.com/gapon2401/d6bf2f0eef9b7e6721b98028f890004e If you have any difficulties with the code above, feel free to read more about the . Here is the summary: Solidity — on deployment we will set the base URI for all tokens, name and a symbol to the token collection. constructor — is our function, which will create new NFT’s for us. Only owner of the contract can call it. mintByOwner — public mint. mint — owner of the contract can change the base URI for tokens setBaseURI —owner can call this function to transfer money from the contract to it’s own wallet address withdraw All other necessary functions are inhereted in this contract from openzeppelin. The price of the tokens will be 0.1 ETH: uint256 public constant PRICE = 100000000000000000; Configure hardhat.config.ts and .env Step 2. Install the following dependencies in order to escape the errors in developing 😲 yarn add -D ethers @nomiclabs/hardhat-etherscan @typechain/hardhat hardhat-gas-reporter solidity-coverage @types/chai @types/mocha typescript ts-node @nomicfoundation/hardhat-chai-matchers chai @nomicfoundation/hardhat-network-helpers typechain @nomiclabs/hardhat-waffle @typechain/ethers-v5 @nomiclabs/hardhat-ethers Now configure your : hardhat.config.ts https://gist.github.com/gapon2401/4bd368815c075954f7cac6b43e1cd687 What do we have here: — we specified the settings and enabled optimization solidity — networks, that we are going to use networks — will show us gas units, that we need to spend for deployment or calling the functions gasReporter — plugin for integration with Etherscan’s contract verification service etherscan The next step is to create file in project root. You have to create 5 variables: .env — the private key of the wallet, that wil be the owner of the contract PRIVATE_KEY -etherscan key. Register on and on the page create and copy your key: ETHERSCAN_API_KEY https://etherscan.io https://etherscan.io/myapikey — Are we going to use gas reporter or not. We will use it REPORT_GAS=1 and — use or for getting the urls. GOERLI_URL MAINNET_URL https://infura.io/ https://www.alchemy.com/ For instance, infura URL for : MAINNET_URL Infura URL for : GOERLI_URL Now compile the code with the command: npx hardhat compile After that command some new folders will appear: , , . artifacts cache typechain-types Step 3. Create deploy function It’s time to write deploy function, we will use tasks for it. Remove folder , we don’t need it. scripts Create the folder and the file inside it: tasks deploy.ts https://gist.github.com/gapon2401/6dbb24a1308479d934897abf743c32e1 In this task we get smartcontract and deploy it. After the deployment in console we will see the address of the contract. We will come back to that function later. Create tests Step 4. We will write the tests for every exteral/public function. Clear the folder and create inside it with the contents: test index.ts https://gist.github.com/gapon2401/47162e377dde919f06108905ecdb847f Run . npx hardhat test You should get similar to that: All tests passed successfully! Gas price for deployment and minting the smartcontract Step 5. For determine the price of deployment and minting functions we have used module . It was enabled by default in , that’s why after all tests were passed, we got the table: hardhat-gas-reporter hardhat.config.ts In the table we can see the gas consumption for methods and deployment. This is the units of gas we need to deploy the contract. How much it will cost in ETH? Use the formula: (gas units) * (gas price per unit) = gas fee in gwei In this formula we don’t know the amount of . gas price per unit You can use or any other website to find this information. At the moment of writing this article, gas price is 17. https://ethgasstation.info/ The value can change greatly depending on the time of day. It may be 2 or 10 or 50 🙃. Be careful. So, the average cost will be: Deployment = 1 697 092 * 17 = 28 850 564 gwei = 0,028850564 ETH mint = 88 753 * 17 = 1 508 801 gwei = 0,001508801 ETH mintByOwner = 91 060 * 17 = 1 548 020 gwei = 0,001548020 ETH setBaseURI = 32 153 * 17 = 546 601 gwei = 0,000546601 ETH withdraw = 30 421 * 17 = 517 157 gwei = 0,000517157 ETH Now the ETH/USD price is $1 592, it means that deployment to mainnet will cost about $46 and calling a function will cost about $2.4. mint Creating images and metadata for NFT Step 6. Images and metadata for NFTs can be stored on your server or in . IPFS We will cover the first case. Assume, that you have a domain https://my-domain.com All NFT images will store here: https://my-domain.com/collection/assets/ All metadata here: https://my-domain.com/collection/metadata/ So, the base URI for our smartcontract will be https://my-domain.com/collection/metadata/ In our smartcontract by default all token URI’s will be counted from 0. Therefore, files for metadata should be like this: 0.json 1.json .... 1234.json If you use function, then you can change the name of the file for specific NFT, and it can be like this: mintByOwner custom.json Upload NFT images on your server. They should be available by links: https://my-domain.com/collection/assets/0.png https://my-domain.com/collection/assets/1.png https://my-domain.com/collection/assets/2.png Now create metadata for NFT’s. Here is an example of one file : 0.json { "name": "Test NFT #0", "image": "https://my-domain.com/collection/assets/0.png" } Pay attention, that in we have defined the link to the image, which has been upoaded to the server. image about opensea metadata and available values in it. Read more Upload your metadata files, so they should be available by links: https://my-domain.com/collection/metadata/0.json https://my-domain.com/collection/metadata/1.json https://my-domain.com/collection/metadata/2.json Step 7. Deploy and verify smartcontract Everything is ready for deployment. Take a look on our , we’ve specified as tasks/deploy.ts baseUri https://my-domain.com/collection/metadata/ This is because all our metadata is available by this address. Here you can change the and the of the collection. name symbol In command line run: npx hardhat deploy --network goerli This command will deploy smartcontract to Goerli network. If you want to deploy to mainnet, you can run: npx hardhat deploy --network mainnet All these networks were described on file. hardhat.config.ts After the deployment you will get the following in your console: My smartcontract address is: 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a From now, it is available on etherscan testnet: https://goerli.etherscan.io/address/0xc191B6505B16EBe5D776fb30EFbfe41A9252023a We need to verify our smartcontract, so everyone can check the code. Wait about 5 minutes and try to verify it. If you get an error while verifying, don’t worry, just try to wait more time. In Mainnet I was waiting for 10–15 minutes. In general verify function looks like this: npx hardhat verify --network Let’s try to determine, what to specify in our verify function: - goerli will be my contract address 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a — this is our base URI. You will find it in tasks/deploy.ts "https://my-domain.com/collection/metadata/" — name of the token collection, that was specified in deployment: "My ERC721 name" — symbol of the token collection, that was specified in deployment: "MyERC721Symbol" Arguments should be the same, that were in !!! tasks/deploy.ts So, in command line I will run: npx hardhat verify --network goerli 0xc191B6505B16EBe5D776fb30EFbfe41A9252023a "https://my-domain.com/collection/metadata/" "My ERC721 name" "MyERC721Symbol" The result should be the next: On you can check the code of deployed smartcontract. this page 🥳We have finished with the smartcontract. Here is the , where you can find all the code. repo Step 8. Create demo website for minting This will be our second project . erc721-mint For demo website I will use . NextJS To speed up the development clone my repository: https://github.com/gapon2401/erc721-mint Install all dependencies: yarn install Open file and fill in the variables: .env — address of your smartcontract from the paragraph Deploy and verify smartcontract. NEXT_PUBLIC_SMARTCONTRACT_ADDRESS — the network, where your smartcontract was deployed. We need this to switch the network. Specify , because we have deployed our smartcontact there. NEXT_PUBLIC_SMARTCONTRACT_NETWORK goerli — network endpoint. You can use to get the url. NEXT_PUBLIC_SMARTCONTRACT_INFURA_URL https://infura.io Go to your dashboard, select your project and copy : Api Key In our first smartcontract project open the file: erc721 artifacts/contracts/ERC721Contract.sol/ERC721Contract.json Copy : abi In current project open the file: erc721-mint src/components/smartcontract.ts Replace the value. abi Everything is done! 🎉 You can run the project and try to use it! yarn dev In the next section I will cover the main components. Step 9 (optional). Deep dive and customize Take a look on main components: src/components/smartcontract.ts Contains information about the smartcontract. It's better to dynamically load this file from the server, because we want our web page loads as soon as possible. In this demo mint form appears after the page loads. 2. This component communicates with blockchain. There are some functions and variables stored in React Context: src/components/Web3Provider.tsx - has user connected the wallet or not connected - the state of reconnecting isConnecting - function for connecting to network connect() – function for reconnecting. Cached provider will be used, that was selected by user at the last time reconnect() – function for disconnecting network – selected by user disconnect() : goerli, mainnet etc network – provider for communicating with the wallet: metamask, ledger, tokenary, etc provider - the owner of the wallet signer – ID of the selected network chainId – your wallet address accountId - error message for web3Modal error This component displays form for minting. Function is called after the user clicks on the mint button. Now look at the code: src/components/MintForm.tsx mint() const transactionResponse = await Contract.mint({ value: ethers.utils.parseEther('0.1'), }) We are calling function from the smartcontract and send 0.1 ETH to it, because this function requires exactly that value. mint What if we want to call mintByOwner ? We can do it like this: const transactionResponse = await Contract.mintByOwner( '0x01234566', 'token_uri' ) But pay attention, that this function can be called only by the owner of the contract. Why? We have used modifier in smartcontract: onlyOwner function mintByOwner(address to, string calldata tokenUri) external onlyOwner A few more words about that function. - this is the address, for which you want to mint token. Make sure to write full address. 0x01234566 - this is custom token URI. In our deployed smartcontract the full address to token metadata looks like: token_uri ${baseUri + token_uri}.json Remember, we have specified : baseUri https://my-domain.com/collection/metadata/ So, the full address to metadata with token URI equals will be: token_url https://my-domain.com/collection/metadata/token_url.json Also, we don't need to pay for this transaction, except gas price. Function . prepareNetwork() On first connection this function can propose to change the network. In this function are used only and networks. You can change it, if you need, here: goerli mainnet chainId: smartContract.network === 'goerli' ? '0x5' : '0x1', Function . getBalanceOf This function checks is it enough money on the wallet to make a transaction. In the file you may find commented code in two places: /* reconnect ,*/ and /* Reconnect to the wallet */ // useEffect(() => { // ;(async () => { // await reconnect() // })() // }, [reconnect]) Uncomment it to make reconnections every time the page reloads. Thank you for reading! ❤