使用 Wagmi Action 中的 waitForTransactionReceipt 方法来等待交易结果

[Wujerry]

场景

在 task4 和 task5 中需要上架 NFT, 在 ERC721 协议下需要先在 NFT 合约中进行授权 approve 操作， 然后在 Market 合约中进行 上架 操作。

1. 授权
2. 上架

以上两笔交易可以使用 Wagmi 的 useWriteContract 方法来处理。

// 授权
const approveHash = await writeContractAsync({    
     ...config,
      functionName: 'approve',   
    })
// 上架
const listResult = await writeContractAsync({
      ...config,
      functionName: 'list', 
    })

问题

使用上述方法点击上架按钮， 钱包弹窗两次，我们都点击了确认允许， 但是上架却失败了。然后再点击一次上架按钮， 上架成功。Interesting ？？？

分析

通过观察控制台可以发现， 第一次点击上架的时候， 授权交易是成功的，但是上架交易却失败了。但是第二次点击上架按钮又成功了，那么问题来了， why ？
重新查看 Wagmi 文档的 Write to Contract 。我们发现文档中使用了 useWaitForTransactionReceipt hook 来查询交易结果。那么 writeContractAsync 返回的是什么呢？ 是这笔交易的Hash, writeContractAsync 方法调用的成功并不是 这笔交易的成功，需要等待交易最终打包确认后，也就是授权操作的成功，才可以继续调用后面的上架操作。
继续查看文档可以发现 ， 有一个 waitForTransactionReceipt可以达到查询交易结果的目的。

解决方法

import { waitForTransactionReceipt } from 'wagmi'

//...
// 授权
const approveHash = await writeContractAsync({    
     ...config,
      functionName: 'approve',   
    })
//------等待交易打包结果--------
await waitForTransactionReceipt({
      hash: approveResult, // 交易hash
    })
// 上架
const listResult = await writeContractAsync({
      ...config,
      functionName: 'list', 
    })