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

Question

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

Espousal

Answer 1

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.

Alexis