SOLVED: No RPC Url available for chainId: 137 when using Web3Modal and WalletConnect

SOLVED: No RPC Url available for chainId: 137 when using Web3Modal and WalletConnect

Context:

In our application we are using @walletconnect/web3-provider and web3Modal to connect to Polygon.

So, according to provider options for walletconnect it will go like following:

const providerOptions = {
    walletconnect: {
        package: WalletConnectProvider,
        options: {
            infuraId: process.env.myINFURA_ID,
        },
        display: {
            description: "Scan with a wallet to connect",
        },
    },
};

const web3Modal = new Web3Modal({
  network: "mainnet", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

const provider = await web3Modal.connect();

const web3 = new Web3(provider);

And surprisingly this was working fine on a computer with Metamask extension on chrome. But on mobile we encountered the following: Uncaught (in promise) Error: No RPC Url available for chainId: 137. Looking further, I found that this error is emitted by walletconnect/web3-provider's updateRpcUrl function.

Solution:

Fortunately, someone had asked the same question on stackoverflow. And this answer had a comment which told the solution.

However, according to the documentation the rpc object could be passed in the argument object while creating an instance of WalletConnectProvider only, and we don't do that while using web3Modal and the comment had not described how to pass rpc object via web3Modal.

Now seeing that infuraId is passed in options object, I passed the rpc object in options along with infuraId like so:

const providerOptions = {
    walletconnect: {
        package: WalletConnectProvider,
        options: {
            infuraId: process.env.myINFURA_ID,
            rpc: {
                1: "https://mainnet.infura.io/v3/" + process.env.myINFURA_ID,
                42: "https://kovan.infura.io/v3/" + process.env.myINFURA_ID,
                137: "https://polygon-mainnet.infura.io/v3/" + process.env.myINFURA_ID,
                80001: "https://rpc-mumbai.matic.today",
            },
        },
        display: {
            description: "Scan with a wallet to connect",
        },
    },
};

And, the error got resolved. All the data is being fetched from smartcontracts as it should be.

Conclusion:

In WalletConnectProvider documentation, it says that it needs one of two things. Either infuraId or rpc mapping. With infuraId it can support chainId's: Mainnet (1), Ropsten (3), Rinkeby(4), Goerli (5) and Kovan (42). Hence, for polygon, chainId 137 it needed RPC mapping. How was it working on computer without the mapping still remains a mystery.