web3-react icon indicating copy to clipboard operation
web3-react copied to clipboard

Walletconect v2 chains not supported

Open damianlluch opened this issue 1 year ago • 0 comments

Hi, I'm upgrading from the 6.x library to 8x and I'm having problems with the walletconnectv2 connector.

I get this error:

Error connecting to wallet: Error: Invalid chainId 5. Make sure the default chain is included in "chains" - chains specified in "optionalChains" may not be selected as default, as they may not be supported by the wallet.

Connector Code:

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

export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
  (actions) =>
    new WalletConnectV2({
      actions,
      options: {
        projectId:"......",
        chains: [1, 56, 43114, 106, 137],
        optionalChains: [5, 80001, 421613, 97, 43113, 111],
        showQrModal: true,
      },
    })
)

hook code

const connect = useCallback(
    async (walletName, chainId) => {
      let chain: IChainState | null = null;
      let connector: MetaMask | WalletConnect;

      // Metamask NOT found
      if (walletName === 'Metamask' && typeof window?.ethereum === 'undefined') {
        console.warn('Web3 injection not found!');
        notifyError({
          title: 'Provider not found',
          message: 'Provider was not found, please try again',
        });
        return;
      }

      // Connect to metamask and recover chain state
      if (walletName === 'Metamask') {
        connector = metaMask;
        await switchChainOrAdd([getAddChainParameters(chainId.id)]);
        chain = { ...recoverChainState(chainId.id), provider: Web3?.givenProvider };
      }

      // Connect to walletconnect and recover chain state
      if (walletName === 'Trust Wallet') {
        connector = walletConnectV2;
        const params = getAddChainParameters(chainId.id);
        chain = {
          id: params?.chainId,
          name: params?.chainName,
          icon: params?.iconUrls?.[0] ?? '<icon>',
          chainRsp: '<ChainRsp>',
          currency: params?.nativeCurrency?.symbol,
          provider: Web3?.givenProvider,
          txScan: '<ScanuRL>',
          rpcUrl: 'https://gateway.tenderly.co/public/goerli',
          defaultChainId: params?.chainId,
        };
      }
      console.log(chainId, 'chainId')

      try {
        localStorage.setItem(
          'Wallet',
          JSON.stringify({ name: walletName, chainId: network.provider, expireDate: dayjs().add(2, 'hour').format() })
        );
        chainDispatch({ type: 'chainSwitch', payload: chain });
        await connector.activate(chainId.id);
      } catch (e) {
        console.error('Error connecting to wallet:', e);
        setError(e instanceof Error ? e : new Error('Failed to connect to the wallet'));
      }
    },
    [chainDispatch]
  );

With Metamask I have it working, the problem is with WalletConnectV2. For this reason I understand that it does not show the modal.

Any suggestions?

Thank you

damianlluch avatar Feb 14 '24 09:02 damianlluch