DEV Community

Cover image for Minting NFT Using Bi-conomy SDK+ NFT Storage + React-Js
Neeraj Choubisa
Neeraj Choubisa

Posted on

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

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

// Contract based on
// 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)
       returns (uint256)

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

       return newItemId;
Enter fullscreen mode Exit fullscreen mode

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

import { NFTStorage } from "";


export const mintNFT = async (
) => {

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

  const metadata = await;

  return metadata.url;

Enter fullscreen mode Exit fullscreen mode

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(


          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;

Enter fullscreen mode Exit fullscreen mode

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

- txHashGenerated 
- txHashChanged 
- txMined
- error
Enter fullscreen mode Exit fullscreen mode

you can use them to track / status of transaction .

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

import {
} 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(

      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(

      let txParams = {
        data: data?.data,
        to: contractInstance.address,
        from: ethers.utils.getAddress(address),
        signatureType: "EIP712_SIGN",

      let smartAccount = await getSmartAccount();

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

      const txHash = await txResponse.wait();

Enter fullscreen mode Exit fullscreen mode

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

Happy Coding ....

Top comments (0)