How to ask the metamask user to switch its network?

Question

Some web3 enabled websites ask you to switch your network on metamask. How can I do so? Some other websites also allow you to add a network you don't have (for example https://chainlist.org/). I would like to do it too. Example:

I am using react and web3 react (https://www.npmjs.com/package/web3-react), which means I am using ethers.js under the hood.

Thank you very much, Thomas

Answer 1

Here is an example how to make your website to ask the users so they can add and switch to the Matic network:

window.ethereum.request({
    method: "wallet_addEthereumChain",
    params: [{
        chainId: "0x89",
        rpcUrls: ["https://rpc-mainnet.matic.network/"],
        chainName: "Matic Mainnet",
        nativeCurrency: {
            name: "MATIC",
            symbol: "MATIC",
            decimals: 18
        },
        blockExplorerUrls: ["https://polygonscan.com/"]
    }]
});

Answer 2

This works for me on desktop. On mobile whole button disapperas:

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import Blockies from "react-blockies";
import { makeStyles } from '@material-ui/core/styles';
import { useWeb3Modal } from "../hooks/web3";
import { isMobile, Provider } from "web3modal";
import Link from 'next/link'
if (isMobile){print = "ppppp"}
const abi = require('../config/abi.json');
const abi_1155 = require('../config/abi_1155.json');
const truncateAddress = (address) => {
  return address.slice(0, 6) + "..." + address.slice(-4);
};
const ConnectWallet = ({ signerAddress, contract_1155, contract_721, setContract_1155, setContract_721, setSignerAddress , setNetworkId, SetProvider}) => {
  const classes = useStyles();
  // const [isWaiting, setWaiting] = useState(false)
  // const [isSent, setSent] = useState(false)
  // const [walletNotDetected, setWalletNotDetected] = useState(false)
const { connectWallet, disconnectWallet, provider, error } = useWeb3Modal();
useEffect(() => {
    const getAddress = async () => {
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      setSignerAddress(address);
  const networkId = await provider.getNetwork();
  console.log(networkId)
  setNetworkId(networkId);

  // if(chainId !== 8001)


  // for erc721 mainnet and testnet
  setContract_721(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi));

  // for erc1155 mainnet
  if (networkId == "137") setContract_1155(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi_1155));
  // for erc1155 testnet
  else setContract_1155(new ethers.Contract("0x002606386e5D884e338A5ac351D3A79260bB65CD", abi_1155));

  console.log(contract_721, contract_1155)
}
if (provider) getAddress();
else setSignerAddress("");

}, [provider]);
const handleClickConnect = async () => {
    await connectWallet();
  };
const handleClickAddress = () => {
    disconnectWallet();
  };
return (
    <button
      className={classes.btn}
      onClick={signerAddress ? handleClickAddress : handleClickConnect}>
      <Blockies
        className={classes.img}
        seed={signerAddress.toLowerCase()}
        size={8}
        scale={3}
      />
     <div>
        {signerAddress ? truncateAddress(signerAddress) : "Connect Wallet"} 
      </div>
    </button>
  );
}
const useStyles = makeStyles((theme) => ({
  btn: {
    background: 'rgb(183,192,238)',
    cursor: 'pointer',
    border: 0,
    outline: 'none',
    borderRadius: 9999,
    height: 35,
    display: 'flex',
    alignItems: 'center'
  },
  img: {
    borderRadius: 999,
    marginRight: 5
  }
}));
export default ConnectWallet;