web3开发dApp通过WalletConnect连接Trust Wallet后智能合约交互异常

核心问题排查 #

• 问题1：WalletConnectProvider 实例未触发连接初始化
  WalletConnect 不同于 MetaMask 注入的 window.ethereum 会自动维持连接状态，创建完 Provider 实例后必须主动调用 enable() 方法，触发钱包扫码连接流程，完成后才能正常发起签名、合约调用类请求。你当前代码仅完成了实例创建就直接传入 Web3，没有执行连接激活步骤。
• 问题2：合约实例未跟随 Provider 刷新
  你切换 Provider 后只更新了全局 W3 实例，如果你的 contract 对象是提前用旧 Provider 初始化的，就会依然绑定原来的提供者，导致新选的 WalletConnect 不会被实际调用。
• 问题3：send 方法参数缺失&错误捕获不全
  WalletConnect 对交易参数的兼容性弱于 MetaMask，未显式传入 gas 相关参数时可能出现钱包端无法识别交易的问题；同时你当前的错误回调没有打印具体异常，无法定位是用户拒绝签名、链ID不匹配还是连接断开类问题。

修正后的代码示例 #

首先修改 provider 选择逻辑，改为异步方法并添加连接激活逻辑：

// 修改为异步方法，确保连接完成后再返回
export const schooseProvider = async (providerType) => {
  console.log("schooseProvider: ", providerType );
  if(providerType === "MetaMask"){ 
      console.log("Selected Provider: ", window.ethereum)
      W3 = new Web3(window.ethereum) 
      // 同样建议主动请求账户授权，保持逻辑统一
      await window.ethereum.request({ method: 'eth_requestAccounts' })
  }
  else if(providerType === "WalletConnect"){
     const wcProvider = new WalletConnectProvider({
      infuraId: '20c6beb49cd1402db84120a858bc74af',
      bridge: 'https://bridge.walletconnect.org',
      supportedChainIds,
      rpc: {
          3: 'https://ropsten.infura.io/v3/20c6beb49cd1402db84120a858bc74af'
          }
      })
      console.log("Selected Provider: ", wcProvider)
      // 关键：触发WalletConnect连接，会弹出二维码让用户扫码
      await wcProvider.enable()
      W3 = new Web3(wcProvider)
  }
  // 切换Provider后必须重新初始化合约实例，绑定新的Web3对象
  window.contract = new W3.eth.Contract(contractAbi, contractAddress)
}

然后优化 approve 方法，补全参数和错误捕获：

export const approve = async (account) => {
    try{
        store.dispatch(updateAproveButtonsLoader(true))
        // 可选：提前估算gas，避免交易参数异常
        const gas = await contract.methods.approve(stakeAddress,'10000000000000000000000000000000000000000000000000').estimateGas({from: account})
        await contract.methods.approve(stakeAddress,'10000000000000000000000000000000000000000000000000').send({
          from: account,
          gas: gas
        })
        .once('receipt', function(receipt){
            store.dispatch(updateApproveButtonsLoader(false))
            store.dispatch(updateApproved(true))
            checkAllowence(account)
        })
        .on('error', (error) => {
            store.dispatch(updateApproveButtonsLoader(false))
            // 打印具体错误方便定位
            console.log("Approve error: ", error)
        })
    }
    catch(error){
        store.dispatch(updateApproveButtonsLoader(false))
        console.log("Approve catch error: ", error)
    }
}

额外注意事项 #

• 要确保 WalletConnectProvider 实例在连接过程中不会被垃圾回收，建议挂在全局变量上存储，避免页面交互时实例丢失导致连接断开
• 如果你的 dApp 支持多链，要提前确认用户钱包当前链ID和你配置的 supportedChainIds 匹配，避免跨链交易异常

内容的提问来源于stack exchange，提问作者Yura Dukhno