如何使用 web3-react 將 WalletConnect 集成到您的 Dapp 中？

Question

我一直在嘗試按照web3-react的文檔來集成WalletConnect 。

我用於連接器的配置如下：

import { WalletConnectConnector } from '@web3-react/walletconnect-connector';

export const walletconnect = new WalletConnectConnector({
  rpc: { 1: RPC_URLS[1], 4: RPC_URLS[4] },
  infuraId: INFURA_TOKEN,
  bridge: BRIDGE_URL,
  qrcode: true,
  pollingInterval: 15000,
});

另外，包的版本如下：

"@web3-react/core": "^6.0.9",
"@web3-react/walletconnect-connector": "^6.2.0",

當我使用useWeb3React()中的activate function 時，如下代碼所述：

const { connector, activate, active, account } = useWeb3React();

activate(walletconnect, undefined, true)
    .catch((error) => {
        if (error instanceof UnsupportedChainIdError) {
            activate(walletconnect)
        } else {
            console.log('Pending Error Occured')
        }
    })

它能夠生成二維碼，我也能夠通過手機上的 MetaMask 應用程序成功掃描，並且在顯示成功連接的移動應用程序上。

雖然，在 Web 應用程序的控制台日志上，它顯示警告說

Warning: Suppressed stale connector activation [object Object]

因此，它無法在account變量中接收地址。

重要提示：我正在使用與InjectedConnector類似的代碼，它對MetaMask 工作得非常好。

雖然上述問題也出現在其他錢包中。 這些是我面臨問題的錢包：

1. 錢包連接
2. WalletLink（Coinbase 錢包）
3. 波蒂斯

任何建議都會對我有很大幫助。

Answer 1

我在開發 tagprotocol.com 時也遇到了同樣的問題，但是我通過兩種方式解決了它：

1. 在后續行中多次調用激活 function （我知道聽起來很奇怪）

2. 在調用激活 function 時設置延遲，類似這樣

   setTimeout(() => 激活(...), 500)

我不確定你的代碼結構，所以我不知道這有什么幫助。 但是我已經使用上述兩種方法解決了過時的連接器 object 問題。 在評論中告訴我。