This article is Part II of a two-part series; check out Part I first if you need to. As a reminder, this code is adapted from the excellent tutorial by Nader Dabit here. If you’re even remotely interested in NFT App development, start with that tutorial!
So, we’ve created the JSX elements necessary to render our form and upload either a link or an NFT image. Now we need to ensure the data we’ve captured ends up in ERC721 format on the blockchain. We’re using EVM-compatible blockchains, so Ethereum, Polygon and Moonriver would be suitable for this. Given the cost of gas at the time of writing in January 2022, the latter two would be better choices for your users than Ethereum.
Connecting to the Blockchain
As with all transactions on the blockchain, we mark the function as
async to manage the asynchronous response we will get. We’ll then instantiate a connection to the User’s blockchain wallet using the library Web3Modal. Following this, we’ll create an Ethers
provider object to help us neatly manage further transactions from the user wallet.
Again, using Ethers, we’ll instantiate an object in JS that helps us talk to the NFT contract on-chain.
Creating our NFT on-chain
Finally, we send the first of two transactions. Firstly, we create our NFT token inside the NFT.sol contract on-chain. The App will prompt the User to sign a transaction at this point in the UX. We’ll
await the transaction results and store them in variable
Listing our NFT for sale on-chain
If we’re here, that means we now have an NFT on-chain and can list it for sale on our Market.sol contract. To complete this listing, we need to store some of the values from our
tx object and the form.
Here we instantiate the Market.sol contract as we did earlier for the NFT.sol contract.
Finally, we send a tx to the blockchain to create our sale. This line will prompt the second of the transactions for the User to sign.
That’s it. We now have a new listing on the NFT Market if our transaction was successful. We prompt the Nextjs router to take us back to the home page of the App, where we can see our listing.