setState in not calling after event triggered in ethers.js

Question

I have a little portfolio dApp that mints NFTs.

After a successful mint, I want the UI to display the tokenId of the minted NFT.

I'm minting successfully and the event is being triggered - {tokenId} logs, but setNFTzMinted is never called.

const askContractToMintNft = async () => {
  try {
    const { ethereum } = window;

    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      // 3 params we need to connect to our contract
      const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, myEpicNft.abi, signer);

      console.log("Going to pop wallet now to pay gas...")
      let nftTxn = await connectedContract.makeAnEpicNFT();
      setIsLoading(true);

      console.log("Mining...please wait.")
      await nftTxn.wait();
      setIsLoading(false);
      console.log(`Mined, see transaction: https://rinkeby.etherscan.io/tx/${nftTxn.hash}`);
      await connectedContract.on("NewEpicNFTMinted", (from, tokenId) => {
        console.log({tokenId});
        setNFTzMinted(tokenId.toNumber());
      });
      console.log({NFTzMinted})
    } else {
      console.log("Ethereum object doesn't exist!");
    }
  } catch (error) {
    console.log(error)
  }
}

Does anyone know what is going on? I could always run my view function to get the tokenId, but it seems like an extra step.

I feel like the callback function on connectedContract should work.

Thanks! JVj

Answer 1

My problem was that I called await nftTxn.wait() before connectContract.on(...).

The event emitted before nftTxn.wait() finished.

Thanks for the help will post more code next time to start!

The code below works as expected.

const askContractToMintNft = async () => {
  try {
    const { ethereum } = window;

    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      // 3 params we need to connect to our contract
      const connectedContract = new ethers.Contract(CONTRACT_ADDRESS, myEpicNft.abi, signer);

      console.log("Going to pop wallet now to pay gas...")
      let nftTxn = await connectedContract.makeAnEpicNFT();
      setIsLoading(true);
      connectedContract.on("NewEpicNFTMinted", (from, tokenId) => {
        console.log('NewEpicNFTMinted');
        console.log({tokenId});
        setNFTzMinted(tokenId.toNumber());          
      });
      console.log("Mining...please wait.")
      await nftTxn.wait();
      setIsLoading(false);
      console.log(`Mined, see transaction: https://rinkeby.etherscan.io/tx/${nftTxn.hash}`);
      
      
      console.log({NFTzMinted})
    } else {
      console.log("Ethereum object doesn't exist!");
    }
  } catch (error) {
    console.log(error)
  }

}