react toastify does not show rejected promise error

Question

I have an NFT contract and want to call buyNft

    // since contract is passed from outer scope, I need to create a new constant as an inner obj

    const _contract = contract;
    const buyNft = useCallback(
      async (tokenId: number, value: number) => {
        try {
          const result = await _contract!.buyNft(tokenId, {
            value: ethers.utils.parseEther(value.toString()),
          });
          await toast.promise(result!.wait(), {
            pending: "Processing",
            success: "Nft is yours!",
            error: "Processing error",
          });
        } catch (error) {
          console.error("eror in buying nfts", error);
        }
      },
      [_contract]
    );

I set the NFT price as 2 ethers. since I don't have enough funds I get this error caught in catch block and logged:

{
    "code": -32603,
    "message": "Internal JSON-RPC error.",
    "data": {
        "code": -32000,
        "message": "err: insufficient funds for gas * price + value: address 0x66b88C3EC66045f2b16d280A8f1Ab15A60E263C6 have 1463394195830528787 want 2000000000000000000 (supplied gas 15010499)"
    },
}

But I want to let the user know that there has been an error. Currently nothing happens. I click on buy button and nothing happens

score 0 · Answer 1 · answered Feb 12 '23 at 06:27

two things

1- I should not have used the await here

    // removed the await
    const result = _contract!.buyNft(tokenId, {
        value: ethers.utils.parseEther(value.toString()),
    });

2- I had to remove the wait()

    await toast.promise(result, {
        pending: "Processing transaction",
        success: "Nft is yours!",
        error: "Processing error",
     });

react toastify does not show rejected promise error

1 Answers1