Mint an NFT from a React dApp
Time to set up our dApp to actually mint an NFT when the buy button is clicked.
.mint is called on our connectedContract with an object containing a value property. The value property is the NFTs cost in gwei.
Then to polish everything up, we’ll add a loading state, and link the user to the transaction on Etherscan using useToast
Instructor: [0:00] Currently, our Buy button is not connected to our smart contract. Let's wire it up to mint an NFT when a user clicks on it. First, we'll come into our buy component and add a new function. We'll call this function buyTicket, const buyTicket equals async.
[0:20] We'll add a try catch block, try catch error console.log. Then here we'll check that we have our connected contract again. If not connected contract, just return early. Otherwise, we'll create a new variable called buy transaction.
[0:41] Const buy transaction equals await connectedContract.mint. Unlike our other contract function calls, we're going to pass this an object with a field of value. Our NFT tickets are going to be .08 ETH. However, we need to represent this value in Gwei. We'll multiply it by 10 to the 18th power.
[1:07] Then we'll wrap this value in a string. Come down below and we'll wait for this transaction to resolve, await buy transaction.wait. Then we'll want to add toast notifications for when transactions succeed or fail. Come up to the top of the file, import useToast from Chakra UI.
[1:29] Come back down into our buy component. Say, const toast equals useToast. Then we'll come back down to our function and add a success toast after the transaction succeeds. We'll paste in a toast notification we used earlier.
[1:46] It's a toast with the title of success, and the description is a link to the Rinkeby block explorer. We'll also add an error notification to the catch block. One last thing we want to do before trying this out is add a loading state for our button.
[2:00] We'll come up to the top of our file and add a new state, const buy transaction pending. Set buy transaction pending equals useState. We'll set it to false. Then we'll come down to our function, buyTicket. Inside of the try block, we're going to say, set buy transaction pending.
[2:22] We'll set it to true. Then once the transaction resolves below, we'll set it to false. We'll come down into the catch block and set it to false there as well. Let's go down to our markup and find the button. We'll add a loading state, isLoading. We'll set that to buy transaction pending. We'll also give the button an on-click prop and set that to buy ticket.
[2:52] If we go into the browser and click Buy Ticket, we see we're prompted by metamask and it tells us it's going to cost .08 ETH to mint this NFT, as well as the estimated gas costs. We come down and click Confirm. You can see our button is in a loading state.
[3:09] You can see the success notification. If we click the link and go to Ether scan, we can see details about this transaction, its hash, it was a success, our contract address, our token symbol, and the value of .08 Ether.
[3:29] If we go to OpenSea Testnets and check out our wallet, you can see we now have a new NFT called NFTicks with the token ID of one.
[3:38] In summary, we added a new buy ticket function to our component, added it as the onClick callback for our Buy Ticket button. Then minted a new NFT by sending .08 ETH from our metamask wallet to our smart contract.