CODEWITHSUNDEEP
typescriptnext.jssolidityweb3jsethers.js
Mouza AlShehhi
Mouza AlShehhi

Reputation: 15

Uncaught (in promise) TypeError: receipt.confirmations is not a function in ethers.js

I'm working on a nextjs (13) project where I'm using ethers.js (V6) to interact with my Ethereum smart contract. I'm trying to mint an NFT by calling the safeMint function from my contract, but I keep encountering this error:

Uncaught (in promise) TypeError: receipt.confirmations is not a function
    at Web3Provider.txListener (provider.js:1156:36)
    at eval (base-provider.js:1959:32)

Here is the relevant part of my component written in typescript:

 const mintToken = async () => {
    if (!uri || !price) {
      setError("URI and Price are required");
      return;
    }
    setLoading(true);
    setError(null);

    try {
      // Connect to the Ethereum provider
      const provider = new Web3Provider(window.ethereum);
      const signer = provider.getSigner();

      // Contract ABI and address
      const contractAddress = "CONTRACT_ADDRESS";
      const contractABI = ContractArtifact.abi;

      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer as any
      );
      const tx = await contract.safeMint(uri, ethers.parseEther(price));

      // Wait for the transaction to be mined
      const receipt = await tx.wait();

      // Log the receipt to check its structure
      console.log(receipt);

      const tokenId = receipt.events[0].args[2].toNumber(); 

      setTokenId(tokenId);
      setLoading(false);
    } catch (err) {
      setError("Error minting token: " + (err as Error).message);
      setLoading(false);
    }
  };

I am really not sure what could be causing the receipt.confirmations is not a function error. I have tried many different other ways of calling the function and always arrived at the same error.

Any help would be greatly appreciated!

Upvotes: 0

Views: 187

Answers (1)

sir adek
sir adek

Reputation: 1

This is a problem I've noticed happens on certain networks' RPC. A workaround that has proven to work is to explicitly get the transaction response using the .getTransaction() method, then call the .wait() method on the result. After making the change, your code should look like this:

const mintToken = async () => {
if (!uri || !price) {
  setError("URI and Price are required");
  return;
}
setLoading(true);
setError(null);

try {
  // Connect to the Ethereum provider
  const provider = new Web3Provider(window.ethereum);
  const signer = provider.getSigner();

  // Contract ABI and address
  const contractAddress = "CONTRACT_ADDRESS";
  const contractABI = ContractArtifact.abi;

  const contract = new ethers.Contract(
    contractAddress,
    contractABI,
    signer as any
  );
  const _tx = await contract.safeMint(uri, ethers.parseEther(price));
  const tx = await _tx.getTransaction(); // notice how I explitly get the transaction response here.

  // Wait for the transaction to be mined
  const receipt = await tx.wait();

  // Log the receipt to check its structure
  console.log(receipt);

  const tokenId = receipt.events[0].args[2].toNumber(); 

  setTokenId(tokenId);
  setLoading(false);
} catch (err) {
  setError("Error minting token: " + (err as Error).message);
  setLoading(false);
}
};

Upvotes: 0

Related Questions