Adding Custom Network using JS, walletconnect

[Umair72Raza]

Hi, I am new to blockchain and wallet connect
Background:
I am trying to connect account to my dApp using walletconnect. I am using meta mask as the wallet app on my mobile. My contracts are deployed on Polygon Amoy Test net and therefore, I am bound to use the same for the interactions with the contracts. The problem is that this is a custom network. Most of the users may not have added this as a custom network. I am using Vanilla JS, reown's app kit.
RPC URL
https://rpc-amoy.polygon.technology
Chain ID:
80002
Currency Symbol:
MATIC

Below is the code of basic configurations of dApp

`
const metadata = {
name: 'AppKit',
description: 'AppKit Example',
url: 'https://reown.com/appkit', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/179229932']
};

const polygonAmoyTestnet = {
id: 'eip155:80002', // Matching the format used for Polygon Mainnet
chainId: 80002,
name: 'Polygon Amoy Testnet',
currency: 'MATIC', // Mapping the 'nativeCurrency' to 'currency' like in the first object
explorerUrl: 'https://www.oklink.com/amoy', // Using the Oklink explorer URL
rpcUrl: 'https://rpc-amoy.polygon.technology', // Using the provided RPC URL
chainNamespace: 'eip155', // Keeping the same namespace as for Polygon
testnet: true // Keeping the testnet flag
};

// 3. Create a AppKit instance
const modal = createAppKit({
adapters: [new EthersAdapter()],
networks: [ polygonAmoyTestnet],
metadata,
projectId,
allowUnsupportedChain: true,
features: {
email: false, // default to true
socials: [],
emailShowWallets: true, // default to true
},

});
`

Problem Scenario:
Say a user does not have the Polygon amoy test net custom network added in their wallet and they scan the wallet connect QR code on my dApp. they'll get the prompt on the Mobile wallet to confirm connection. On confirmation, the Account gets connected and the dApp but the network is not detected and I see this pop up.

a: clicking on the option does not do anything (like prompting on the wallet to add a network or anything else).

b: There is another case that if the user has some balance of MATIC, the balance is shown with "Unknown Network" and on reload I see the "Polygon Amoy Testnet" Network.

On reload

I am using the button below for connecting the mobile wallet using walletconnect
<w3m-button></w3m-button>

I have tried to add a button on clicking which I try to add network in mobile wallet using this code below
`
document.getElementById("switch-network").addEventListener('click', async() =>
{
// await modal.switchNetwork(polygonAmoyTestnet)
const address = modal.getAddress();
console.log("got ADRESS ", address)
const walletProvider = await modal.getWalletProvider();
provider = new ethers.BrowserProvider(walletProvider);
const network = await provider.getNetwork();
console.log("network", network.chainId);
console.log("ethers.toBeHex(polygonAmoyTestnet.chainId)",ethers.toBeHex(polygonAmoyTestnet.chainId))

if (network.chainId !== 80002) {
    try {
        // Try switching to the desired network
        console.log("switch network");
        await modal.switchNetwork(polygonAmoyTestnet)
        const signer = await provider.getSigner();
        console.log("signer", signer)
        // await provider.send("wallet_switchEthereumChain",  [{ chainId: ethers.toBeHex(polygonAmoyTestnet.chainId) }]);
    } catch (switchError) {
        // If the network is not added, request the user to add it
        if (switchError.code === 4902) {
            try {
                console.log("adding in the meta mask")
                await provider.send("wallet_addEthereumChain", [{
                    chainId: ethers.toBeHex(80002),
                    chainName: 'Polygon Amoy Testnet',
                    nativeCurrency: {
                        name: 'MATIC',
                        symbol: 'MATIC',
                        decimals: 18
                    },
                    rpcUrls: ['https://rpc-amoy.polygon.technology'],
                    blockExplorerUrls: ['https://www.oklink.com/amoy']
                }]);
            } catch (addError) {
                console.error('Failed to add network', addError);
            }
        }
    }
}

})`

All it does is switch the network and if switching fails, it does not prompt me on the app to add the network.

Question:
How can I make prompt the app to add the network using the dApp.