MetaMask Web3: is there any way to make sure website user is connected to a particular network?

user_624869 0
Viewed 2731

I am developing an application that uses the MATIC token on the MATIC network. I want to make sure the user is connected to this network with MetaMask, is this possible?

Right now in my client.js attached to my html page, I just have the following:

let accounts, web3, contract;

if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
} else {
    alert("Hello! Consider adding an ethereum wallet such as MetaMask to fully use this website.");
}
accounts = ethereum.request({ method: 'eth_requestAccounts' });
web3 = new Web3();

The issue is that if the user tries to interact with other features of the website, they could attempt to use ETH, which could make them lose their token and just not have the feature work. So I want to prompt them to get onto the MATIC network.

Is there any way to get them onto this network automatically, without having them need to put it into MetaMask manually? Would help reduce friction. enter image description here

This is the MATIC network I've been using on my backend server.js for this application:

const WEB3_PROVIDER = "https://polygon-rpc.com" 
// https://blog.polygon.technology/polygon-rpc-gateway-will-provide-a-free-high-performance-connection-to-the-polygon-pos-blockchain/

if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
    console.log("web3 already initialized.");
} else {
    // set the provider you want from Web3.providers
    web3 = new Web3(new Web3.providers.HttpProvider(WEB3_PROVIDER));
    console.log("New web3 object initialized.");
}
web3js metamask javascript
1 Answers

you can check user network like this using your web3 instance (web3 document):

const yourNetworkId = '137'
web3.eth.net.getId()
.then((networkId) => {
  if (networkId != yourNetworkId) {
    // MetaMask network is wrong
  }
})
.catch((err) => {
  // unable to retrieve network id
});

in order to add network programmatically (metamask document):

ethereum.request({
    method: 'wallet_addEthereumChain',
    params: [{ 
        chainId: web3.utils.toHex('137'),
        chainName: 'Polygon',
        nativeCurrency: {
            name: 'MATIC',
            symbol: 'MATIC',
            decimals: 18
        },
        rpcUrls: ['https://polygon-rpc.com'],
        blockExplorerUrls: ['https://www.polygonscan.com']
    }],
})
.then(() => console.log('network added'))
.catch(() => console.log('could not add network'))

and if you want to set Metamask network programmatically (Metamask document):

ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: web3.utils.toHex('137') }],
})
.then(() => console.log('network has been set'))
.catch((e) => {
    if (e.code === 4902) {
       console.log('network is not available, add it')
    } else {
       console.log('could not set network')
    }
})

also you can listen chainChanged event on Metamask to detect when user changes Metamask network (metamask document):

ethereum.on("chainChanged", () => {
    // if network was wrong, you can open a modal to disable activity and ask
    // user to change network back to Polygon or even change it yourself on 
    // user clicking a button, but i don't suggest setting network by yourself
    // without users permission because users may using other dApps on other
    // networks at the same time which changing network immediately on chainChanged
    // would be a bad UX
})
user_115902270
Related