0

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

2
  • This is fundamentally a question about React hooks. This question should be moved to StackOverflow, and it should include more details about the code. Oct 18 '21 at 14:42
  • Would need to see a bit more of your code to know for sure. Might be that your console.log({NFTzMinted}) is getting called before the state has updated.
    – highrankin
    Oct 18 '21 at 14:43
0

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)
  }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.