Handle pending transaction (useWeb3Contract)

Moralis General
#1

I execute contract function via useWeb3Contract method in react-moralis

I want to display some loader while transaction is pending and not confirmed yet .

part of code:

const {
        runContractFunction: someFunction,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: contractAbi,
        ...
        },
    });

I execute someFunction on form submission:

...
onSubmit={async (e) => {
    e.preventDefault();
    await someFunction({
        onSuccess: async (tx) => {
            await handleSuccess(tx);
        },
    });
}

Then, i have the following expression:

{isFetching || isLoading ? ( <Loader />) : (<div>Some content</div>)}

But i can see <Loader /> only when metamask pops up to confirm transaction. After i confirmed sending, loader disappearing and doesn’t show on the page anymore.

I’ve tried different ways with only isFetching or isLoading params in expression, but it also doesn’t work

How can i handle pending transaction and show loader in a proper way while user’s tx is pending and not confirmed yet? In that case, whats the difference between isFetching or isLoading if they both working in the same way?

#2

You can handle pending transactions in this way and use waitingTx to show/hide the loader.

  const [waitingTx, setWaitingTx] = useState();
  useEffect(() => {
    async function init() {
      console.log("waiting for conformation");
      setWaitingTx(true);
      const tx = await data.wait();
      setWaitingTx(false);
      console.log("tx:", tx);
    }
    data && init();
    console.log("data:", data);
  }, [data]);