0

I am using Wagmi's useWaitForTransaction together with Metamask, running on local Hardhat node. When I sign a transaction it almost immediately returns successful on the front end, but on Metamask it is still pending.

Is there some logic to Metamask's transaction handling? How can I make the frontend to appear to be in sync with Metamask?

My component:

  function WethApproval() {
    const [approvalLimit, setApprovalLimit] = useState(0);

    const approveWeth = useContractWrite({
      ...wethContractConfig,
      functionName: 'approve',
      onSuccess(data) {
        console.log('approve success hash ', data);
      }
    });

    const { data: approveTx, isError, isLoading } = useWaitForTransaction({
      hash: approveWeth?.data?.hash,
      confirmations: 1,
      onSuccess(data) {
        console.log('approve tx successful data ', data);
      },
      onError(err) {
        console.log('approve tx error data ', err);
      }
    });

    function ActionButton() {
        if (approveWeth.isLoading) {
          return (
            <button disabled={true}>
              Confirm in Metamask
            </button>
          )
        }

        if (!approveWeth.data) {
          return (
            <button onClick={() => {
              approveWeth?.write({ args: [_grantee, _approvalLimit] })
            }}> 
              Approve
            </button>
          )
        }

        console.log('approval tx = ', approveTx)
        if (approveTx?.status=="success") {
          return (
          <button disabled={true}>
            Receipt &nbsp; : &nbsp; {JSON.stringify(approveTx?.transactionHash)}
          </button>
        );
        }

        console.log('others');
        return (
          <button disabled={true}>Pending... </button>
        )
    }

    return (
      <>
        <div className='relative mb-6'>
          <label>
            <div>
              Change Allowance&nbsp;:&nbsp;
              <input type="text" placeholder="WETH"
                onChange={(e) => { setApprovalLimit(e.target.value) }}
              />
              {
                <ActionButton/>
              }
            </div>
          </label>
        </div>
      </>
    )
  }

1 Answer 1

0

Try to increase the confirmation blocks, I don't figure out yet how to sync them with the metamask ones, but go around 3 blocks.

const { data: approveTx, isError, isLoading } = useWaitForTransaction({
      hash: approveWeth?.data?.hash,
      confirmations: 3,
      onSuccess(data) {
        console.log('approve tx successful data ', data);
      },
      onError(err) {
        console.log('approve tx error data ', err);
      }
    });

Your Answer

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

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