NFT Creator Component

The NFT Creator component allows users to create and mint NFTs directly through your dapp. The component comes with a handy drag-and-drop module to allow users to select their NFTs image as well as inputs to specify NFT metadata. The component also directly plugs into an ERC721 smart contract inside your project.

APIs:

• pinJSONToIPFS
• pinFileToIPFS

Extra libraries:

• react-dropzone

Implementation:

Instructions for how to add the NFT Creator Component to your CW3D project.

1. Install the extra libraries
   The NFT Creator component leverages libraries that are not installed by default in the CW3D starter code. Run the following command in the frontend folder of your CW3D project to install them:

npm install react-dropzone 
or
yarn add react-dropzone

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

3. 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";

4. Implement the pingJSONToIPFS API:
   In your create-web3-dapp frontend>pages>api folder, create a new file named pinJSONToIPFS.js and paste inside the code contained in the [component preview component's API tab] (https://createweb3dapp.com/nfts#NFTCreator).

5. Implement the pinFileToJSON API:
   In your create-web3-dapp frontend>pages>api folder, create a new file named pinJSONToIPFS.js and paste inside the code contained in the [component preview component's API tab] (https://createweb3dapp.com/nfts#NFTCreator).

6. Create your Pinata JWD Token:

To upload your NFT image and Metadata to IPFS, the NFT creator APIs we just implemented, are using Pinata, an IPFS pinning service that will take care of storing your data. To use it though, we'll need to create a Pinata account and add the JWD token to the .env.local file.

Navigate to app.pinata.cloud and create a new account if you haven't already.

Once logged in, navigate to the "Developers" tab and create a new key.

Pinata will now ask you to select the write and read privileges, as well as the name of the newly created API key. Under "API Endpoint Access", make sure to give access to the following endpoints:

• pinFileToIPFS
• pinJSONToIPFS

Click on the "Create Key" button will create your new Key, and show you the API Key, Secret and JWT. Before closing this window, make sure to copy the JWT token.

Great, one last step! In the .env.local file inside your cw3d project folder, add a new Environment variable named "PINATA_JWT" and past the copied JWT token as its value:

ALCHEMY_API_KEY= YOUR API KEY
ALCHEMY_NETWORK=ETH_MAINNET
NEXT_PUBLIC_DEFAULT_CHAIN= mainnet
PINATA_JWT= YOUR JWT TOKEN

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

8. 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/>
    </>
  );
}

9. 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:

This component allows a user to create a non-fungible token (NFT) by inputting information such as its name, description, external URL, and image.

It uses hooks from the "wagmi" library to access the user's Ethereum account address and signer, and the "alchemy-sdk" to interact with you smart contract that governs the creation of NFTs. The "useDropzone" hook from the "react-dropzone" library is used to handle the uploading of the NFT's image.

When the user inputs the information and uploads the image, the component uses the "mintNFT" function to mint the NFT. The function first checks the current blockchain network and switches to the specified network if it's not already on that network. It then creates a contract object using the provided smart contract's address and ABI, and mints the NFT by calling the "safeMint" method of the contract. It also passing the NFT's metadata URL and the user's Ethereum account address. The "generateMetadata" function is used to create the metadata URL, which is done by first pinning the image file to IPFS and then pinning the metadata JSON to IPFS.

The component also provides the ability to add and update the NFT's attributes. The state variables "NFTName", "NFTDescription", "externalURL", "imageURL", "imageFile", and "NFTAttributes" are used to store the NFT's information and are updated with the "setNFTName", "setNFTDescription", "setExternalURL", "setImageURL", "setImageFile", and "updateAttribute" functions respectively.