0

I'm trying to improve UX by showing a spinner while a transaction gets resolver, however my flow is breaking. What am I doing wrong here?

    // WITHDRAWALS
    if (currentTab == "withdrawal") {
      if (
        contractInfo.qitbalance > BigNumber.from(0) &&
        inputValue !== "" &&
        Date.now() / 1000 > contractInfo.lockupEnds
      ) {
        if (ethers.utils.parseEther(inputValue).toBigInt() > 0) {
          const QITconnect = QIT.connect(library.getSigner());
          try {
            await QITconnect.requestWithdrawal(ethers.utils.parseUnits(inputValue, 6))
              .then((tx: any) => {
                //action prior to transaction being mined
                console.log("Transaction pending");
                console.log(tx);
                library.provider
                  .waitForTransaction(tx.hash)
                  .then(() => {
                    //action after transaction is mined
                    console.log("Transaction mined");
                  })
                  .catch(() => {
                    //action if transaction fails
                    console.log("Transaction failed");
                  });
              })
              .catch(() => {
                //action to perform when user clicks "reject"
                console.log("Transaction rejected");
              });
          } catch (error: any) {
            setShow(true);
            console.log("User rejected transaction");
          }
        }
      }
    }

This is what's happening immediately.

1 Answer 1

0

I fixed it by using .wait() on the transaction. So in my case it looked like this:

    // WITHDRAWALS
    if (currentTab == "withdrawal") {
      if (
        contractInfo.qitbalance > BigNumber.from(0) &&
        inputValue !== "" &&
        Date.now() / 1000 > contractInfo.lockupEnds
      ) {
        if (ethers.utils.parseEther(inputValue).toBigInt() > 0) {
          const QITconnect = QIT.connect(library.getSigner());
          try {
            const transaction = await QITconnect.requestWithdrawal(
              ethers.utils.parseUnits(inputValue, 6)
            );
            setShow(true);
            const receipt = await transaction.wait();
            setShow(false);
            console.log(receipt);
          } catch (error: any) {
            setShow(true);
            console.log("User rejected transaction");
          }
        }
      }
    }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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