Intermediate

How to mint an NFT on Mumbai and then Polygon

To mint an NFT on Mumbai (testnet) and then on Polygon/Matic mainnet. You will need Node, Yarn and Git installed to follow this workshop. The workshop will guide you through the process of setting up a local development environment, generating a deployer account, getting testnet currency, deploying your NFT contract, minting NFTs, sending NFTs and deploying to the mainnet. The workshop will also explain how to check your contract on OpenSea’s Matic viewer and Polygonscan. Finally, the workshop will guide you through the process of building and uploading your frontend and sharing it with your friends. The FAQs section will provide answers to common issues that may arise during the workshop.

Build, mint, and send around your own ERC721 (NFT) on Mumbai (testnet) and then on Polygon/Matic mainnet!

Quick Start

Required: Node plus Yarn and Git

git clone https://github.com/austintgriffith/scaffold-eth.git matic-nft-tutorial

cd matic-nft-tutorial

It is very important that you checkout the matic-nft-tutorial branch of 🏗 scaffold-eth:

git checkout matic-nft-tutorial

yarn install

We will need to generate a deployer account:

yarn generate

This will create a new mnemonic and you can get this deployer address using the command:

yarn account

Go to https://faucet.matic.network to get some Mumbai-MATIC (testnet currency).

Confirm that your account has the funds needed for the rest of the tutorial: (check on https://mumbai.polygonscan.com)

Compile and deploy your NFT contract:

yarn deploy

To point the frontend at mumbai we will also need to edit targetNetwork in packages/react-app/src/App.jsx:

yarn start

Minting:

Edit the mint script mint.js in packages/hardhat/scripts and update the toAddress to your frontend address (wallet address in the top right or localhost:3000).

in a new terminal window run the mint script:

cd matic-nft-tutorial
yarn mint

You should see your collectibles show up on the frontend if you minted to the correct address:

Open an incognito window and navigate to http://localhost:3000 (You’ll notice it has a new wallet address).

Send an NFT to the incognito window address:

Inspect the Debug Contracts tab to figure out what address is the owner of YourCollectible?

Edit your deployment script deploy.js in packages/hardhat/scripts

Edit your smart contract YourCollectible.sol in packages/hardhat/contracts

Edit your frontend App.jsx in packages/react-app/src

Installing a new package to your frontend? You need to cd packages/react-app and then yarn add PACKAGE

Mainnet Deploy!

Ready to deploy to MATIC mainnet?

Change the defaultNetwork in packages/hardhat/hardhat.config.js to matic

View your deployer address using yarn account to ensure you have some Matic. (You can exchange for Matic tokens on UniSwap using the bridge: Polygon Wallet Suite ).

Deploy your NFT smart contract:

yarn deploy

Edit your frontend App.jsx in packages/react-app/src to change the targetNetwork to Matic:

You should see the correct network in the frontend:

Ready to mint a batch of “L2” NFTs for reals?

Edit the mint script mint.js in packages/hardhat/scripts and update the toAddress to your MetaMask address (or other secure mainnet wallet).

yarn mint

Once minted, you should be able to see them in your Frontend.

Maticscan Contract

Feel free to also check your contract address on Polygonscan (extractible from the terminal where you deployed the contract).

Ship the app!

build and upload your frontend and share the url with your friends…

# build it:

yarn build

# upload it:

yarn surge

yarn s3

yarn ipfs

Share your public url with a friend and ask them for their address to send them a collectible :

FAQs

What happens if I run into a chainID error? Under packages/hardhat/deployments, make sure that your chainID for your desired chain to deploy to is correct. The chainID file is located under their respective chain folders. For Matic, the correct chainID is 134. For Mumbai, the correct chainID is 80001.

What happens if I run into a gas error? This can be caused by many things. First check if you do have enough gas to deploy on your various networks. Then, try to raise the gasPrice as shown below under packages/hardhat/hardhat.config.js.