Minting NFTs – A Quick Guide to Creating an Interface for Your Community to Mint NFTs Using Web 3.0
Table of Contents
Introduction to minting Nfts
Minting NFTs using web3 has been trendy in recent times. However, many people don’t know an easy method to mint their NFTs, even though they have wonderful collections and the potential to excel in this space.
In this guide, we will go from zero to integrating Web3 with a dApp, to enable your community to mint NFTs you’ve created.
Here we’ll be minting NFTs on the Ethereum blockchain. However, the concepts described here can just as easily be applied to other blockchains.
Setting Things Up
This guide assumes that you’ve already created your Smart Contract on Ethereum blockchain, and now you’re moving forward with the web app for minting interface.
Here is a boilerplate for you to get started with – it contains the boilerplate to allow minting NFTs.
prerequisites For Minting NFTs
You’ll need git, nodejs, and npm installed to follow along with this tutorial.
The example app uses React and Reactstrap for the user interface, taking advantage of the components provided. If you’re already a React developer, you should feel right at home. If you prefer a different framework, no worries, as you can follow along with equivalent concepts of your framework of choice. We’ll keep this guide focused on managing NFT assets and smart contract interactions, which will apply to any UI framework or design pattern.
First Step is to Get the Code
Firstly, we need to get the code to work with.
Let’s have a look at the example repository!
- Clone the minting-demo repository:
2. Then, install the JavaScript dependencies with npm
3. Next, start the development server for the React web app
This command will keep running, so keep the terminal open while exploring the app.
Once the server has started, it will print the URL of the app. The URL is http://localhost:3000, but you may see a different URL if you’ve already got something listening on port 3000.
4. Now, navigate to the URL shown in the last command’s output if the browser doesn’t open automatically.
You should see a page that looks something like this:
5. And lastly, get some testnet Ether from Chainlink Faucets, depending on which testnet you’ve deployed your contract on.
Blockchain Gas Fee to
For minting NFTs, we need to pay an additional amount on top of the cost of NFT; this is the gas fee. Miners charge a fee for operations that change the blockchain’s state.
Note: You’ll need to connect the same wallet with the app in which you put the testnet Ether.
Diving Deep into the Code for minting nfts
Furthermore, the code mainly uses the Web3 library to interact with our smart contract and Reactstrap to create UI components.
the Folder Structure
The file ./src/App.js declares the root route and redirects every other route back to root. The page that you see in the browser is in the ./src/pages/Home.jsx file (React component). The file ./config.json contains all the required variables of our smart contract.
The main component – Home
This script/component/file contains all the logic and UI for minting NFTs. The minting process has three steps:
Step 1: Define Our Variables
Starting off, the process of minting NFTs needs some variables like your Metamask wallet address, our contract’s ABI, and the contract’s address.
ABI (Application Binary Interface) is the interface to interact with the smart contract you have already deployed. Our ABI, along with the smart contract’s address and other required information, is stored in ./config.json
In the example above, our contract address is : 0x9384f2471d3Ac6Fc22d36CB15012F9DA4333481F
Step 2: Connect Wallet function
Secondly, the function connectWallet initiates a connection with Metamask wallet (if installed) and confirms if the current network is Ethereum It then creates a smart contract object with the provided ABI and contract address.
By clicking on the Connect Wallet button, you allow the site to connect with your wallet and read the wallet address. By doing so, Web3 now knows who will be minting the NFT(s).
Step 3: Mint NFT function
Ultimately, the function mintNFTs initiates a transaction on our contract.
Note that the contract.methods.mint() function is the same function you’ve written in your smart contract. Yours may differ in name or number of parameters.
Gas Limit
For simplicity, we’ve put the gas limit as hardcoded 285,000 and price-per-NFT as 0.02 ETH. Here, the account is the user’s wallet address, and the counter is the number of tokens the user has selected from the UI.
Confirmation on Minting NFTs
Afterwards, Metamask prompts the user about a transaction initiated and asks for confirmation. You can see in the image below that the function is MINT with the cost of the number of NFTs multiplied by price-per-NFT (0.02 ETH in this case).
Wait for ~20 seconds; the transaction takes a little time to get approved. Once the transaction goes through, you can see a prompt on UI stating that the NFT has been minted.
Congratulations on successfully minting nfts from your collection. You can see the newly created transaction on your contract at Etherscan.io (remember to switch your choice of testnet)
GenITeam specializes in building NFT games as well as minting NFTs. If you are interested in building your next blockchain game or are in need of minting NFT services, please contact us to book a free appointment with our gaming consultant.
