The Ultimate RainbowKit Integration Tutorial for Web3 Developers (Part 2)

Importing the NFT Smart Contract

For this, we’ll be using an NFTs smart contract deployed at this address  (0x9472E4E14342f52c62e74096dcA193a6a5D14be4 ) on the Sepolia Tesnet. I've verified the contract, and you can check out the source code on Etherscan if you're interested.

Getting the Contract ABI

In addition to the contract address, we'll require its ABI (What's an ABI). To obtain it, go to the verified contract on etherscan and copy the ABI. Next, create a new folder named constant within the src directory and create a new file inside it named index.js. Copy and paste the copied ABI into index.js.

Interacting With the Contract

Let’s read the totalSupply of the NFT. The smart contract utilized in this tutorial includes a variable named totalSupply, responsible for tracking the overall number of minted NFT. To monitor the totalSupply variable, we need to invoke a function with the same name. We'll utilize the useReadContract hook from our Wagmi node package for this purpose.

Since we want to display the Nft total supply on the page, let’s render it as shown:

Implementing the Minting Functionality

Now, let's incorporate the logic to enable NFT minting! We'll begin by adding a button to the page. Additionally, we'll set up a function called 'minting' to be triggered when someone clicks the button. To execute the NFT minting process, we'll call the createNewNFT function on our smart contract. For this task, we'll leverage the useWriteContract hook from wagmi.

Let's refine the user interface. Upon a successful NFT mint, users will receive a link to review their NFT transaction on Etherscan. To implement this, we'll employ the useWaitForTransactionReceipt hook from wagmi to obtain the transaction hash.

Testing the dApp

To test the dApp, click on the Connect button, and select any of the available wallets provided by Rainbowkit (for this guide, we'll use Metamask). Once selected, you should be able to connect your wallet and establish a connection to the Sepolia testnet, as demonstrated.

Make sure you have some Sepolia ETH in your account once connected.

After obtaining some ETH, click the MintNFT button. Confirm the transaction request in your wallet, and you should be able to successfully mint an NFT.

By now, you should have observed that we have successfully minted an NFT, updating the NFT count accordingly.

We can then verify this by clicking on View Etherscan, and this should redirect us to our minted NFT transaction on the Sepolia testnet as shown: