`TypeError: txStatus.on is not a function` error, ethereum boilerplate

Moralis General
#1

Set up the ethereum-boilerplate and the completely untouched code was returning the following error on attempting transfers:

TypeError: txStatus.on is not a function

The transactions were still going through (Metamask balance updates) but the boilerplate UI gets stuck with a continuous spinner and no notifications. The relevant code is below:

const txStatus = await Moralis.transfer(options);

txStatus
      .on("transactionHash", (hash) => {
        openNotification({
          message: "🔊 New Transaction",
          description: `${hash}`,
        });
        console.log("🔊 New Transaction", hash);
      })
      .on("receipt", (receipt) => {
        openNotification({
          message: "📃 New Receipt",
          description: `${receipt.transactionHash}`,
        });
        console.log("🔊 New Receipt: ", receipt);
        setIsPending(false);
      })
      .on("error", (error) => {
        openNotification({
          message: "📃 Error",
          description: `${error.message}`,
        });
        console.error(error);
        setIsPending(false);
      });

A Moralis team member on discord mentioned that it might be due to switching from Web3.js to ethers that .on was not working and that wait would be better. So I refactored the code as below:

const txStatus = await Moralis.transfer(options);

    await txStatus.wait("transactionHash", (hash) => {
      openNotification({
        message: "🔊 New Transaction",
        description: `${hash}`,
      });
      console.log("🔊 New Transaction", hash);
    });
    await txStatus.wait("receipt", (receipt) => {
      openNotification({
        message: "📃 New Receipt",
        description: `${receipt.transactionHash}`,
      });
      console.log("🔊 New Receipt: ", receipt);
      setIsPending(false);
    });
    await txStatus.wait("error", (error) => {
      openNotification({
        message: "📃 Error",
        description: `${error.message}`,
      });
      console.error(error);
      setIsPending(false);
    });
    console.log(txStatus);

This removes errors in the console but the stuck UI is still a problem. Logging txStatus returns a valid transaction object. Any help would be appreciated

Terminal has no warnings
Moralis: 1.3.5
React-Moralis: 1.3.2
Node: 16.13.1

Thanks for taking the time to go through this.

1 Like
Ethereum Boilerplate Questions
#2

Im looking at this now as well. I tried wait, as well as then from that await Moralis.transfer(options) as well. I get error on console as well as stuck transfer button spinner loader.

If I find something ill post here. Thanks

1 Like
#3

Can you post your code?

#4

Ok simplify it a bit… im using react however i needed to see it work so I simplified it.

Check this doc, and break it down from there, and then rebuild it up on working code:
https://docs.moralis.io/moralis-dapp/sending-assets/resolve-transfer

However I replaced that set of code with txStatus.on is not a function with this code broken down into basic callback response from looking at that doc above. This worked notification shown, and spinner loader stopped. Im going to build on this from here… hope this helps!

setIsPending(true);
    const txStatus = await Moralis.transfer(options);
    const result = await txStatus.wait();
    if (result) {
      console.log(result);
      console.log(result.blockHash);
      openNotification({
        message: "🔊 New Transaction",
        description: `${result.blockHash}`,
      });
      setIsPending(false);
    }