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.

We’re adding a single JavaScript function that will invoke our NFT.sol contract to mint our token and then place it on sale in our Market.sol contract (neither of these contracts is mentioned in detail here, that’s for another day).  

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.

async function createSale(url) {
const web3Modal = new Web3Modal();
const connection = await web3Modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
const signer = provider.getSigner();

Again, using Ethers, we’ll instantiate an object in JS that helps us talk to the NFT contract on-chain.

let contract = new ethers.Contract(nftaddress, NFT.abi, signer);

 

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 tx.

let transaction = await contract.createToken(url);

let tx = await transaction.wait();

 

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.

let event = tx.events[0];
let value = event.args[2];
let tokenId = value.toNumber();

const price = ethers.utils.parseEther(formInput.price);

Here we instantiate the Market.sol contract as we did earlier for the NFT.sol contract.

contract = new ethers.Contract(nftmarketaddress, Market.abi, signer);

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.

transaction = await contract.createSale(tokenId, nftaddress, price);

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.

const createSaleTX = await transaction.wait();
router.push('/');