Add switchToCorrectNetwork method (#125)

* Add `switchToCorrectNetwork` method

* Add `ts-ignore` for error type in switchToCorrectNetwork

add `any` type to error in catch handler

add any type to error in catch handler

* Add network in Web3ContextType

* Make requested changes and remove unnecessary changes

* Run `yarn changeset`

Author: naz3eh

.changeset/long-buses-brush.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': minor
+---
+
+Added a new method "switchToCorrectNetwork" to the useWallet hook. This method allows the user to switch to the required network without manually heading over to the MetaMask and switching the network. Users can use this function by directly passing this method in the click handler of a button.

packages/hooks/src/Provider.tsx

@@ -13,6 +13,7 @@ export interface Web3ContextType {
   connected: boolean;
   provider?: ethers.providers.Web3Provider | null;
   correctNetwork: boolean;
+  network: number;
 }
 
 export const Web3Context = React.createContext<Web3ContextType | undefined>(undefined);

packages/hooks/src/hooks/useWallet.ts

@@ -22,16 +22,56 @@ export function useWallet() {
     connected,
     provider,
     correctNetwork,
+    network,
   } = context;
 
   React.useEffect(() => {
     if (userAddress && provider && chainId === NETWORKS.mainnet) {
-      provider.lookupAddress(userAddress).then((address) => {
+      provider.lookupAddress(userAddress).then(address => {
         setEns(address as string);
       });
     }
   }, [userAddress, provider]);
 
+  const switchToCorrectNetwork = async () => {
+    if (window.ethereum) {
+      try {
+        console.log('chainId', { chainId });
+        console.log('requiredNetwork', { network });
+        // check if the chain to connect to is installed
+        await window.ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: `0x${network}` }], // 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
+        if (error.code === 4902) {
+          try {
+            await window.ethereum.request({
+              method: 'wallet_addEthereumChain',
+              params: [
+                {
+                  chainId: '0x61',
+                  rpcUrl: 'https://data-seed-prebsc-1-s1.binance.org:8545/',
+                },
+              ],
+            });
+          } catch (addError) {
+            console.error(addError);
+          }
+        }
+      }
+    } 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'
+      );
+    }
+  };
+
   return {
     connectWallet,
     disconnectWallet,
@@ -44,5 +84,6 @@ export function useWallet() {
     connected,
     provider,
     correctNetwork,
+    switchToCorrectNetwork,
   };
 }

packages/hooks/src/stories/ConnectWallet.stories.tsx

@@ -10,7 +10,14 @@ export default {
 const portisDappId = '512893f6-6436-44c3-b0dc-6caccab984bb';
 
 const DefaultUsingProvider = () => {
-  const { connection, connectWallet, disconnectWallet, connected, correctNetwork } = useWallet();
+  const {
+    connection,
+    connectWallet,
+    disconnectWallet,
+    connected,
+    correctNetwork,
+    switchToCorrectNetwork,
+  } = useWallet();
 
   useEffect(() => {
     if (!correctNetwork) {
@@ -24,6 +31,11 @@ const DefaultUsingProvider = () => {
         <Button onClick={disconnectWallet}>Disconnect wallet</Button>
         <p>{connection.ens || connection.userAddress}</p>
         <p>Connected to the correct network: {correctNetwork ? 'Yes' : 'no'}</p>
+        {!correctNetwork && (
+          <Button colorScheme='teal' mt={2} onClick={switchToCorrectNetwork}>
+            Switch to correct network
+          </Button>
+        )}
       </div>
     );
   }
@@ -59,7 +71,8 @@ export const WithPortisProvider = () => (
       {
         portis: {
           display: {
-            logo: 'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
+            logo:
+              'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
             name: 'Portis',
             description: 'Connect to Portis App',
           },
@@ -82,7 +95,8 @@ export const PortisAuthereumProvider = () => (
       {
         portis: {
           display: {
-            logo: 'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
+            logo:
+              'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
             name: 'Portis',
             description: 'Connect to Portis App',
           },