Add network or switch network button for Metamask

button.tsx

  interface AddEthereumChainParameter {
    chainId: string; // A 0x-prefixed hexadecimal string
    chainName: string;
    nativeCurrency: {
      name: string;
      symbol: string; // 2-6 characters long
      decimals: 18;
    };
    rpcUrls: string[];
    blockExplorerUrls?: string[];
    iconUrls?: string[]; // Currently ignored.
  }

  const provider = useProvider() as JsonRpcProvider | undefined;
  const chainId = useChainId(provider);

  const goerliChainParam: AddEthereumChainParameter = {
    chainId: '0x5',
    chainName: 'Goerli Test Network',
    nativeCurrency:  { name: 'Ethereum', symbol: 'ETH', decimals: 18 },
    rpcUrls: ['https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'],
    blockExplorerUrls: ['https://goerli.etherscan.io']
  }

  const mumbaiChainParam: AddEthereumChainParameter = {
    // See: https://docs.matic.network/docs/develop/network-details/network
  }

  // onClick handler
  await provider.send('wallet_addEthereumChain', [goerliChainParam]);