DEV Community

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

Posted on

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

#biconomy #nftstorage #solidity #web3

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; } }
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 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; };
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( 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; }
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 { 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();
Enter fullscreen mode Exit fullscreen mode

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

Happy Coding ....

Top comments (0)