Alchemy Login

NFT Minter Component

The NFT Minter component allows the user to Mint an NFT and subsequently view it on Ploygonscan

Suggest Edits

The NFTs Minter component allows users to mint NFTs directly through your dapp and smart contracts. The component comes with a

APIs:

  • pinJSONToIPFS
  • pinFileToIPFS

Extra libraries:
- react-dropzone

Implementation:

  1. Create the component file:
    In your create-web3-dapp frontend>components folder, create a new file named nftMinter.jsx and paste inside the code contained in the component preview component's code tab.

  2. Import the smart contract ABI and address
    To mint an NFT we'll need the address and application binary interface (abi) ADD LINK, of an ERC721 (or similar) smart contract.

ABIs are obtained by building a smart contract. The address, by deploying it.

If you've built and deployed your smart contracts using the smart contracts backpack custom scripts, learn here how to get your ABIs. ADD LINK.

Once you've obtained your smart contract address and ABIs, create a new folder and name it "contracts_abi" in your create-web3-dapp frontend directory, and move in it your abi JSON file.

In the nftCreator.jsx file, substitute now the import statement at the top, with your abi file path:

// Import the ABI obtained when compiling your smart contracts using a Blockchain development environment
// Learn how to build you smart contracts using create-web3-dapp on https://docs.alchemy.com/create-web3-dapp
import NFTContactAbi from "YOUR ABI FILE PATH. e.g ../utils/abi/CreateWeb3DappNFT.json";

Now look for the contractAddress variable at line 69, and substitute its value with your contract address:

 // Replace with your smart contract address. Remember, you can create one using create-web3-dapp
        const contractAddress = "YOUR-ERC721-SMART-CONTRACT-ADDRESS";
  1. Add your metadata URL and NFT Image
    To display the image and attributes of your NFTs on marketplaces like OpenSea, or the Alchemy NFT API, you'll need to pass an URL containing a JSON object that follows the OpenSea Metadata standard.

To create your own NFT metadata JSON object, create a new .JSON file, and paste-modify the following code:

{
    "description": "An NFT minted using a createweb3dapp.com React template", 
    "external_url": "https://createweb3dapp.com", 
    "image": "https://ipfs.filebase.io/ipfs/QmQxh5GeGBUcSYAYgpZFXoAumZWahZqTtVcxWhtWtixjZY", 
    "name": "cw3d super user",
    "attributes": [ 
        {
            "trait_type": "Rare",
            "value": "Very rare"
        },
        {
            "trait_type": "Cool",
            "value": "Also"
        },
        {
            "trait_type": "Ok",
            "value": 5
        }
     ]
  }

Then upload it on an IPFS service like Pinata or Filebase, and obtain its gateway link.

Once you've obtained your IPFS URL, look for the mintTx variable (line 41) in your nftMinter.jsx file, and substitute the placeholder URL with your IPFS Gateway URL: 

 // Replace with an url pointing to a .JSON file containing the NFTs metadata.
// Make sure to follow the OpenSea standard https://docs.opensea.io/docs/metadata-standards

const mintTx = await NFTContract.safeMint("YOUR-METADATA-URL", address);

Congratulations! If your metadata is formatted as shown, you should now be able to mint your NFTs through your cw3d dapp.

If you want to display your NFT image inside the component (line 53), you'll need to paste its image inside the public>static folder of your cw3d dapp and modify the example URL as shown:

<img className={styles.nft_image} src={"/static/YOUR-NFT-IMAGE-NAME"} />

  1. Add the styles
    In your create-web3-dapp frontend>styles folder, create a new file named NftCreator.module.css and paste it inside the code contained in the [component preview component's styles tab (https://createweb3dapp.com/nfts#NFTCreator).

  2. Include the component
    To import the NFT creator in your dapp, navigate to the page, in your frontend>pages folder, where you want to implement the NFT Creator, and import it:

import NFTCreatorPage from "../components/nftCreator.jsx"

and add its tag to the return value of your NextJS page function:

import NFTCreatorPage from "../components/nft-creator";

export default function Home() {
  return (
    <>
      <NFTCreatorPage/>
    </>
  );
}
  1. Start your application:

Congratulations! Now cd in your frontend folder, run the following command in your terminal to start your cw3d application:

 npm run dev

And Enjoy your newly imported NFT Creator!

Component explanation:

The NFTs Minter component is a React component that allows the user to mint a unique token ERC721 NFT Token. The component uses the useAccount and useSigner hooks from the "wagmi" library to access the user's address and signer, respectively. It also uses the useState hook from the React library to manage the state of the transaction hash of the minting process.

When the user clicks on the "Mint NFT" button, the mintNFT function is executed. This function first checks the network chain ID to make sure it's the correct one. If it's not, the function tries to switch to the correct network using the switchNetwork function from the "wagmi" library.

The function then sets up a contract object using the ethers library by providing the contract address, the ABI (Application Binary Interface), and the signer. The ABI is a JSON representation of the smart contract's functions and variables.

Next, the function calls the safeMint method on the contract object and passes it the IPFS (InterPlanetary File System) as tokenURI of the NFT mint function, as well as the user's Ethereum address. The safeMint method is used to mint a new NFT, and it requires a tokenURI containing the NFT Metadata the NFT data and the Ethereum address of the user who is minting the NFT.

The mintTx variable is set to the result of the safeMint method, and its hash is saved in the state using setTxHash. The function then waits for the transaction to complete using the wait method on mintTx. Once the transaction is complete, the txHash state is set to null.

The component displays an NFT image and a title, followed by a button to mint the NFT. If the user's wallet is disconnected, it displays a message to connect the wallet. If the minting process is underway, it displays a message indicating that the transaction is underway and provides a link to Mumbai Polygon Scan, a blockchain explorer, to see the transaction details.

Updated 9 days ago