如何让 Wagmi useWaitForTransaction 等待 Metamask（在 Hardhat 上运行）？

Question

我正在使用 Wagmi 的 useWaitForTransaction 和 Metamask，在本地 Hardhat 节点上运行。当我签署一笔交易时，它几乎立即在前端返回成功，但在 Metamask 上它仍然处于待处理状态。

Metamask 的交易处理有一些逻辑吗？如何使前端看起来与 Metamask 同步？

我的组件：

  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>
      </>
    )
  }

我尝试设置更高的确认并将安全帽设置为自动我，但它不一样。

Answer 1

所以看起来是因为 Hardhat 本地网络不挖掘区块或其他东西。因为在

useWaitForTransaction

中，当你将

confirmations

更改为

2

而不是

1

时，它永远不会成功。 解决方案是您需要在

hardhat.config.js

中启用自动挖矿

networks: {
  hardhat: {
    mining: {
      auto: true,
      interval: 1000
    }
  }
}

之后，将

confirmations

中的

useWaitForTransaction

更改为任何更高的数字，例如

5

之类的，然后就可以正常工作了。