Missing or invalid. emit() chainId: eip155:11155111. & Cannot convert undefined or null to object at Function.keys (<anonymous>)

[kamal9494]

im using

"@web3-react/walletconnect-v2": "^8.5.1",

After i successfully logging in through WalletConnect from MetaMask app. when i change the network (to any supported network) in MetaMask.

these errors occurred.

Uncaught (in promise) Error: Missing or invalid. emit() chainId: eip155:11155111
    at ps.isValidEmit (index.ts:54:1)

Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Yt (index.ts:54:1)
    at un (index.ts:54:1)
    at ps.isValidUpdate (index.ts:54:1)

walletConnectV2.ts

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

import { MAINNET_CHAINS, URLS } from '../web3-react-utils/chains';

import { TESTNET_CHAINS } from '../web3-react-utils/chains';
import { ALLOWED_NETWORK_ID, ENVIRONMENT } from '../constants';

const [mainnet, ...optionalMainnetChains] =
  Object?.keys(MAINNET_CHAINS).map(Number);

const [testnet, ...optionalTestnetChains] =
  Object?.keys(TESTNET_CHAINS).map(Number);

const projectId =
  ENVIRONMENT !== 'testnet'
    ? 'mainnet_id'
    : 'testnet_id';

export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
  (actions) =>
    new WalletConnectV2({
      actions,
      // defaultChainId: ALLOWED_NETWORK_ID,
      options: {
        projectId: projectId,
        chains: [ENVIRONMENT === 'mainnet' ? mainnet : testnet],
        showQrModal: true,
        optionalChains:
          ENVIRONMENT === 'mainnet'
            ? optionalMainnetChains
            : optionalTestnetChains,
        rpcMap: URLS,
        rpc: URLS,
      },
    })
);

[m-Jawa-d]

This issue could be due to the way the chains and optionalChains are configured in your WalletConnect V2 connector setup. Here's a step-by-step guide to resolve this issue:

Understanding the Issue:

Chain ID Validation: The error message Uncaught (in promise) Error: Missing or invalid. emit() chainId: eip155:11155111 suggests that the WalletConnect V2 connector is not properly handling the chain ID after the network switch. WalletConnect V2 expects a specific format and the correct chain ID to be emitted, which is not happening here.

Undefined Object Conversion: The TypeError: Cannot convert undefined or null to object indicates that there's an attempt to access or manipulate a null or undefined value. This usually happens when the expected data structure isn't properly defined.

Solution:

Check Chain Configuration: Ensure that the chains and optionalChains arrays are properly populated with valid chain IDs and that the rpcMap is correctly set up to map chain IDs to RPC URLs.

const [mainnet, ...optionalMainnetChains] =
  Object.keys(MAINNET_CHAINS || {}).map(Number);

const [testnet, ...optionalTestnetChains] =
  Object.keys(TESTNET_CHAINS || {}).map(Number);

Ensure that MAINNET_CHAINS and TESTNET_CHAINS are defined and not empty.

Emit Correct Chain ID: If the chain ID isn't properly emitted after switching, you might need to manually set the chain ID in the WalletConnectV2 options:

export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
  (actions) =>
    new WalletConnectV2({
      actions,
      options: {
        projectId: projectId,
        chains: [ENVIRONMENT === 'mainnet' ? mainnet : testnet],
        showQrModal: true,
        optionalChains:
          ENVIRONMENT === 'mainnet'
            ? optionalMainnetChains
            : optionalTestnetChains,
        rpcMap: URLS,
        defaultChainId: ENVIRONMENT === 'mainnet' ? mainnet : testnet, // Ensure default chain ID is set
      },
    })
);

Update WalletConnect V2: Ensure you're using the latest version of @web3-react/walletconnect-v2 and its dependencies. There might have been updates or bug fixes that address the issue.

Handle Chain Switching Logic: You may need to add custom logic to handle chain switching to ensure the correct chain ID is emitted and validated. Here’s an example:

walletConnectV2.provider.on('chainChanged', (chainId) => {
  actions.update({ chainId: Number(chainId) });
});

walletConnectV2.provider.on('disconnect', () => {
  actions.resetState();
});

Test Different Environments: Test your implementation in both mainnet and testnet environments to ensure that the configuration is correct and consistent across different environments.

Final Code Example: Here is the final example incorporating the changes mentioned above:

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

import { MAINNET_CHAINS, URLS } from '../web3-react-utils/chains';
import { TESTNET_CHAINS } from '../web3-react-utils/chains';
import { ALLOWED_NETWORK_ID, ENVIRONMENT } from '../constants';

const [mainnet, ...optionalMainnetChains] = Object.keys(MAINNET_CHAINS || {}).map(Number);
const [testnet, ...optionalTestnetChains] = Object.keys(TESTNET_CHAINS || {}).map(Number);

const projectId = ENVIRONMENT !== 'testnet' ? 'mainnet_id' : 'testnet_id';

export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>(
  (actions) =>
    new WalletConnectV2({
      actions,
      options: {
        projectId: projectId,
        chains: [ENVIRONMENT === 'mainnet' ? mainnet : testnet],
        showQrModal: true,
        optionalChains:
          ENVIRONMENT === 'mainnet'
            ? optionalMainnetChains
            : optionalTestnetChains,
        rpcMap: URLS,
        defaultChainId: ENVIRONMENT === 'mainnet' ? mainnet : testnet,
      },
    })
);

// Handling chain switching
walletConnectV2.provider.on('chainChanged', (chainId) => {
  actions.update({ chainId: Number(chainId) });
});

walletConnectV2.provider.on('disconnect', () => {
  actions.resetState();
});

This setup should help you resolve the errors you're encountering when switching networks with WalletConnect V2 and MetaMask. Ensure all dependencies are up-to-date and test thoroughly in both mainnet and testnet environments.

[kamal9494]

Didn't Work! @m-Jawa-d

• MAINNET_CHAINS or TESTNET_CHAINS are not NULL.
• I'm using the latest version, which is 8.5.1.

This is how I encountered the error:

Logged in using WalletConnect V2 (scanned the QR code with the MetaMask app). After logging in, I switched the network to any supported network in the MetaMask app and then saw these errors.