feat/network switch component (#311)

* Add <NetworkSwitch/> component

* Add story for `<NetworkSwitch />` component

* feat(hooks): add `useChainId()`

* feat(utils): add `switchNetwork()`

* refactor(useWallet): use util method

`switchNetwork()`

* Add changeset

Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: swellander

.changeset/angry-pianos-destroy.md

@@ -0,0 +1,6 @@
+---
+'@web3-ui/core': minor
+'@web3-ui/hooks': minor
+---
+
+Add `NetworkSwitch` component and `useChainId` hook

packages/core/src/components/NetworkSwitch/NetworkSwitch.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { NetworkSwitch } from '.';
+import { NETWORKS } from '@web3-ui/core';
+
+const { mainnet, rinkeby, ropsten, polygon } = NETWORKS;
+
+const networks = [mainnet, rinkeby, ropsten, polygon];
+
+export default {
+  title: 'Core/NetworkSwitch',
+  component: NetworkSwitch,
+};
+
+export const Default = () => {
+  return <NetworkSwitch networks={networks} />;
+};

packages/core/src/components/NetworkSwitch/NetworkSwitch.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CHAIN_ID_TO_NETWORK } from '@web3-ui/hooks';
+import { Select, SelectProps } from '@chakra-ui/react';
+import { useChainId } from '@web3-ui/hooks/src/hooks';
+import { switchNetwork } from '@web3-ui/hooks/src/utils';
+
+export interface NetworkSwitchProps {
+  /**
+   * The chain IDs (in base 10) that the component should display as options
+   */
+  networks: number[];
+}
+
+/**
+ * A component to switch between a number of specified networks.
+ */
+export const NetworkSwitch: React.FC<NetworkSwitchProps & SelectProps> = ({
+  networks,
+  ...props
+}) => {
+  const chainId = useChainId();
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+    const networkNum = Number(e.target.value);
+    switchNetwork(networkNum);
+  };
+  return (
+    <Select {...props} value={Number(chainId)} onChange={handleChange}>
+      {networks.map((network) => (
+        <option value={network}>{CHAIN_ID_TO_NETWORK[network]}</option>
+      ))}
+    </Select>
+  );
+};

packages/core/src/components/NetworkSwitch/index.ts

@@ -0,0 +1 @@
+export { NetworkSwitch } from './NetworkSwitch';

packages/hooks/src/hooks/index.ts

@@ -5,3 +5,4 @@ export { useTokenBalance } from './useTokenBalance';
 export { useReadOnlyProvider } from './useReadOnlyProvider';
 export { useReadOnlyContract } from './useReadOnlyContract';
 export { usePoller } from './usePoller';
+export { useChainId } from './useChainId';

packages/hooks/src/hooks/useChainId.ts

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+export const useChainId = (): string | undefined => {
+  const [chainId, setChainId] = useState<string | undefined>();
+  useEffect(() => {
+    window.ethereum.on('chainChanged', setChainId);
+    window.ethereum.request({ method: 'eth_chainId' }).then(setChainId);
+  }, []);
+  return chainId;
+};

packages/hooks/src/hooks/useWallet.ts

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { CHAIN_ID_TO_NETWORK, NETWORKS } from '..';
 import { Web3Context } from '../Provider';
+import { switchNetwork } from '../utils';
 
 /**
  * @dev Hook to get the current web3 context including information about the connection and other helper methods.
@@ -36,31 +37,7 @@ export function useWallet() {
   }, [userAddress, provider]);
 
   const switchToCorrectNetwork = async () => {
-    if (window.ethereum) {
-      try {
-        console.log('chainId', { chainId });
-        console.log('requiredNetwork', { network });
-        const hexNetwork = network?.toString(16);
-        // check if the chain to connect to is installed
-        await window.ethereum.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId: `0x${hexNetwork}` }], // chainId must be in hexadecimal numbers
-        });
-      } catch (error) {
-        console.error(error);
-        // This error code indicates that the chain has not been added to MetaMask.
-        // If it is not, then install it into the user's MetaMask
-        // @ts-expect-error unknown error type
-        if (error.code === 4902) {
-          alert('Please add the network to your MetaMask');
-        }
-      }
-    } else {
-      // if window.ethereum is undefined then MetaMask is not installed
-      alert(
-        'Switching networks automatically is only supported in MetaMask. Please consider installing it: https://metamask.io/download.html'
-      );
-    }
+    if (network) switchNetwork(network);
   };
 
   return {

packages/hooks/src/utils.ts

@@ -0,0 +1,19 @@
+export const convertToHexStr = (num: number) => num.toString(16);
+
+export const switchNetwork = async (networkId: number) => {
+  const networkHex = `0x${convertToHexStr(networkId)}`;
+  if (window.ethereum) {
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: networkHex }],
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    alert(
+      'Switching networks automatically is only supported in MetaMask. Please consider installing it: https://metamask.io/download.html'
+    );
+  }
+};