Add auto-configuration of networks in Metamask/Hana wallets

[bbist]

Is your feature request related to a problem? Please describe. The Nexus portal needs us to explicitly add RPC endpoint of the chain in Metamask. It would be better to have automatic configuration of Metamask/Hana wallets, so that user's don't have to explicitly configure supported networks.

Describe the solution you'd like Here's a way to do it for metamask. Not sure if it's also possible to do something similar for hana.

import { EnumBlockchainNetwork } from '@interfaces/chain';
import { toast } from 'react-toastify';
import { getChainInfo } from './blockchainInfo';

declare let window: any;
export const switchChainInMetamask = async (network: EnumBlockchainNetwork) => {
  const { name, symbol, logoUrl, explorerUrl, rpcUrls, chainId } = getChainInfo(network);

  // Desktop and MetaMask!
  if (window.ethereum && window.ethereum.isMetaMask) {
    // Switch Network
    try {
      await window.ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: chainId }],
      });
      return true;
    } catch (error: any) {
      // Error Code 4902 means the network we're trying to switch is not available so we have to add it first
      if (error.code == 4902) {
        try {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainId: chainId,
                chainName: name,
                rpcUrls,
                // iconUrls: [logoUrl],
                blockExplorerUrls: [explorerUrl],
                nativeCurrency: {
                  name: symbol,
                  symbol: symbol,
                  decimals: 18,
                },
              },
            ],
          });
          return true;
        } catch (error: any) {
          return false;
        }
      } else {
        return false;
      }
    }
  } else {
    return false;
  }
};

export default switchChainInMetamask;

Add auto-configuration of networks for

• [x] MetaMask
• [ ] Hana

[duyphanz]

At current, we only 2 networks ICON and BSC. So, I suggest that if the user clicks on the connect wallet button and select connect to MetaMask then, we will pop up a MetaMask UI to request the user to approve adding the BSC network configuration. Let me know your thoughts.

But in case we have one more network using MetaMask (ex: Harmony) in the future as well. We will need to specify what is the behavior when the user clicks the connect MetaMask wallet button because we have 2 networks using MetaMask at the same time and we don't know what the network user intends to connect. Please notice about this case.

/cc @CyrusVorwald-ICON @RiseBlock @bbist

[RiseBlock]

Let's prioritize to implement BSC flow for now. For the scenario we have more than 1 option a new UI/UX needs to be discussed. Will review later.