Minting NFT Using Bi-conomy SDK+ NFT Storage + React-Js

Let's Start with Contract Writing first with solidity + openzeppelin Contracts :-

// Contract based on https://docs.openzeppelin.com/contracts/4.x/erc721
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.12;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract GasLessNFT is ERC721URIStorage, Ownable {
   using Counters for Counters.Counter;
   Counters.Counter private _tokenIds;

   constructor() ERC721("Biconomy-NFT", "BNFT") {}

   function mintNFT(address recipient, string memory tokenURI)
       public
       returns (uint256)
   {
       _tokenIds.increment();

       uint256 newItemId = _tokenIds.current();
       _mint(recipient, newItemId);
       _setTokenURI(newItemId, tokenURI);

       return newItemId;
   }
}

Completed with smart contract creation . Now get the contract Address and Contract ABI by deploying contract on respective network .

---

Let setup NF.Storage System for creating CID Content Identity for the Nft Metadata .

npm install nft.storage

import { NFTStorage } from "nft.storage";

const NFT_STORAGE_KEY = process.env.REACT_APP_NFT_STORAGE_API;

export const mintNFT = async (
  name,description,link,supply,image
) => {

  // First we use the nft.storage client library to add the image and metadata to IPFS / Filecoin
  const client = new NFTStorage({ token: NFT_STORAGE_KEY });
  const nft = {
    image,
    name,
    description,
    properties: { `// this are the attributes you want to see in your NFT .`
      supply,
      link
    }
  }

  const metadata = await client.store(nft);

  return metadata.url;
};

---

Now Let's come to third part of transaction or Mint NFT by smart account offered by Biconomy Sdk .

1. Creating Smart Account :-

import SmartAccount from "@biconomy/smart-account";
function getSmartAccount(){
 const walletProvider = new ethers.providers.Web3Provider(window.ethereum);

const wallet = new SmartAccount(

        walletProvider,
        {

          activeNetworkId: 80001,
          supportedNetworksIds: supportedChains,
          networkConfig: [
            {
              chainId: 80001, // Polygon Testnet Chain ID
              dappAPIKey:ACCOUNT_ABSTRACTION_KEY_TESTNET,// you will get it from biconomy dashboard after registering 
            },
          ],
        }
      );

// After getting wallet now initialise the smart wallet 
let smartAccount = await wallet.init();
return smartAccount;
}

There are some events associated to the smart account for the transaction state :-

- txHashGenerated 
- txHashChanged 
- txMined
- error

you can use them to track / status of transaction .

Now Let's mint the NFT using this smart Account.

import {
  nftContractABI,
  nftContractAddress,
} from "../Utils/contracts-constant";

 const getBiconomyProvider = async () => {
    // biconomy object creation
    const biconomy = new Biconomy(window.ethereum, {
      apiKey: API_KEY, //get it from biconomy dashboard 
      debug: true,
      strictMode: true,
      contractAddresses: [nftContractAddress],

    });
    await biconomy.init();
    return biconomy;
  };

const getInstance = async () => {
    try {
      const biconomy = await getBiconomyProvider();
      // To create contract instances you can do:
      const contractInstance = new ethers.Contract(
        nftContractAddress,
        nftContractABI,
        biconomy.ethersProvider
      );

      return contractInstance;
    } catch (error) {
      console.log("No instance get");
    }
  };

let metadataURI = await mintNFT(name, description, link, supply, image);

let contractInstance = await getInstance();

      const data = await contractInstance.populateTransaction.mintNFT(
        address,
        metadataURI
      );

      let txParams = {
        data: data?.data,
        to: contractInstance.address,
        //@ts-ignore
        from: ethers.utils.getAddress(address),
        signatureType: "EIP712_SIGN",
      };

      let smartAccount = await getSmartAccount();

      const txResponse = await smartAccount.sendTransaction({ transaction: txParams});

      const txHash = await txResponse.wait();

So here we generate the NFT using SMart Account and Gasless NFT Creation .

---

Happy Coding ....