How can I migrate web3-react and walletconnect v1 to walletconnect v2?

Question

I'm having a hard time migrating from my Dapp using walletconnect to walletconnect v2.

I was originally using the version below. "@web3-react/core": "^6.1.9", "@web3-react/walletconnect-connector": "^6.2.13",

The original code is below.

1. connectoer.js

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

export const WalletConnect = new WalletConnectConnector({
  rpcUrl: `${process.env.REACT_APP_INFURA}`,
  bridge: "https://bridge.walletconnect.org",
  qrcode: true,
  supportedChainIds: [1],
});

2. walletconnect.js

import { useWeb3React } from "@web3-react/core";
import { WalletConnect } from "../../../lib/connectors";

const { activate } = useWeb3React();

async function connectWalletHandler() {
    const provider = WalletConnect;
    }
    try {
      await activate(provider);
    } catch (error) {
      console.log(error);
    }
  }

I tried to convert the connector in various ways by looking at the official documentation of walletconnect, but failed.

Is there any good way? :(

I tried the methods suggested in the official documentation, but all failed.

https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/dapps#web3-react

Answer 1

Yes.

You just need to migrate the packages according to walletconnectV2. Mostly react and react-dom packages. Just need to makes sure you use the new libs of all providers like metamask,coinbase etc. it won't work if code has old dependecies.

Below is an example of how to get the new walletconnect v2 working.

https://codesandbox.io/p/sandbox/example-k57i0p?file=%2Fconnectors%2FwalletConnectV2.ts%3A4%2C43

Please refer to the package.json file and match your versions also.

You need to signup on walletconnect and create a new project to get the projectId needed for new setup.

https://cloud.walletconnect.com/app

Mainly you just need to change the connecter and activate function.

import { initializeConnector } from '@web3-react/core'
import { WalletConnect as WalletConnectV2 } from '@web3- 
react/walletconnect-v2'

export const [walletConnectV2, hooks] = 
initializeConnector(
(actions) =>
new WalletConnectV2({
  actions,
  options: {
    projectId: process.env.walletConnectProjectId,
    chains: [1],
    optionalChains : [4],
    showQrModal: true,
  },
})
)

Now you don't need to get activate from useWeb3React and call with provider as argumnent.

const { activate } = useWeb3React();

change the activate function by importing the connector and just call and send optional desiredChainId as parameter.

await walletConnectV2.activate(desiredChainId)