javascript - How to integrate WalletConnect in your Dapp using web3-react? - Stack Overflow

admin管理员组

文章数量:1405553

I've been trying to integrate WalletConnect by following this documentation of web3-react.

The configuration that I'm using for the connector is as follows:

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,
});

Also, the versions of packages are as follows:

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

When I use the activate function from useWeb3React() as explained in below code:

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

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

It was able to generate QR Code, also I was able to successfully scan through MetaMask app on my Mobile Phone and on the mobile app it shows successfully connected.

Though, on the console logs of the Web App it shows a warning saying

Warning: Suppressed stale connector activation [object Object]

Thus, It fails to receive address inside the account variable.

Important Note: I'm using the similar code with InjectedConnector and it is working perfectly fine for MetaMask.

Though the above problem also appears with other wallets. These are the wallets I am facing the problem with:

1. WalletConnect
2. WalletLink (Coinbase Wallet)
3. Portis

I've been trying to integrate WalletConnect by following this documentation of web3-react.

The configuration that I'm using for the connector is as follows:

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,
});

Also, the versions of packages are as follows:

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

When I use the activate function from useWeb3React() as explained in below code:

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

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

It was able to generate QR Code, also I was able to successfully scan through MetaMask app on my Mobile Phone and on the mobile app it shows successfully connected.

Though, on the console logs of the Web App it shows a warning saying

Warning: Suppressed stale connector activation [object Object]

Thus, It fails to receive address inside the account variable.

Important Note: I'm using the similar code with InjectedConnector and it is working perfectly fine for MetaMask.

Though the above problem also appears with other wallets. These are the wallets I am facing the problem with:

1. WalletConnect
2. WalletLink (Coinbase Wallet)
3. Portis

• javascript
• reactjs
• ethereum
• web3-react

Share Improve this question Follow edited Nov 21, 2022 at 19:24 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked May 19, 2021 at 6:40 Utkarsh GuptaUtkarsh Gupta 11111 gold badge22 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I solved it in two ways:

1. Calling the activate function multiple times in subsequent lines

2. Setting a delay on calling the activate function, something like this

   setTimeout(() => activate(...), 500)
   

I'm not sure about your code structure so I don't know to what extend this helps. But stale connector object issue is something that I have resolved using the above two methods.

本文标签： javascriptHow to integrate WalletConnect in your Dapp using web3reactStack Overflow