How to mint NFT using ethers.js?

Question

I'm a beginner in blockchain dev...

I'm using the famous Hashlips ERC721 smart contract (available here: https://github.com/HashLips/hashlips_nft_contract/blob/main/contract/SimpleNft_flat.sol ).

The SC is working great via Remix.

Now I want to be able to interact with that SC from a Sveltekit app I made, using the ethers.js library. Unfortunately, I cannot figure out how to send the transaction :-(.

Here is my code:

<script>
  import token from "../images/token.gif";
  import { onMount } from "svelte";
  import abi from "../data/abi.json";
  import { ethers } from "ethers";
  import { signerAddressStore } from "../stores/signerAddressStore";
  import { signerStore } from "../stores/signerStore";
  import { contractStore } from "../stores/contractStore";

  let isConnected = false;
  let contractData = {
    cost: "",
    maxSupply: "",
    totalSupply: "",
  };

  onMount(async function () {
    await connectMetamask();
    await getContract();
    console.log(signer);
  });

  let provider, signer;

  const connectMetamask = async () => {
    try {
      provider = new ethers.providers.Web3Provider(window.ethereum);
      await provider.send("eth_requestAccounts", []);
      signer = provider.getSigner();
      const address = await signer.getAddress();
      signerAddressStore.set(address);
      signerStore.set(signer);
      isConnected = true;
    } catch (error) {
      isConnected = false;
      console.log(error);
    }
  };

  const getContract = async () => {
    const contractAddress = import.meta.env.VITE_CONTRACT_ADDRESS;
    const contractAbi = abi;
    const contract = new ethers.Contract(contractAddress, contractAbi, signer);
    contractStore.set(contract);

    contractData.cost =
      parseInt(await $contractStore.cost()) / 1000000000000000000;
    contractData.maxSupply = parseInt(await $contractStore.maxSupply());
    contractData.totalSupply = parseInt(await $contractStore.totalSupply());

    console.log(contractData);
  };

  const mint = async () => {

    const tx = {
      from: $signerAddressStore,
      to: import.meta.env.VITE_CONTRACT_ADDRESS,
      value: ethers.utils.parseEther("0.02"),
      nonce: await provider.getTransactionCount($signerAddressStore, "latest"),
      gasLimit: "3000000",
      gasPrice: ethers.utils.hexlify(parseInt(await provider.getGasPrice())),
    };

    try {
      await $contractStore.mint(1);
      await $signerStore.sendTransaction(tx);
    } catch (error) {
      console.log(error);
    }
  };

</script>

Here is the error I get:

Error: cannot estimate gas; transaction may fail or may require manual gas limit [ See: https://links.ethers.org/v5-errors-UNPREDICTABLE_GAS_LIMIT ]

I don't understand how to proceed...

Anyone could help me?

Answer 1

First, make sure that the contract address is right. Next, try removing gasPrice, gasLimit and nonce from your transaction and let Metamask calculate those for you.

Just try to execute the transaction with

// create provider from Metamask
const provider = new ethers.providers.Web3Provider(window.ethereum)
// get the account that will pay for the trasaction
const signer = provider.getSigner()

let contract = new ethers.Contract(
      contractAddress,
      abi,
      signer
    )


const tx = await contract.mint(1);

console.log('transaction :>> ', tx)
// wait for the transaction to actually settle in the blockchain
await tx.wait()