feat: added switch network method

index.d.ts

@@ -1 +1,2 @@
 declare module 'eth-provider';
+declare module '@myetherwallet/mewconnect-web-client';

package.json

@@ -28,21 +28,23 @@
     "@lingui/react": "^3.13.0",
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
+    "@myetherwallet/mewconnect-web-client": "^2.2.0-beta.16",
     "@toruslabs/torus-embed": "^1.19.0",
     "@walletconnect/web3-provider": "^1.7.1",
+    "axios": "^0.25.0",
     "eth-provider": "^0.10.0",
     "ethereum-blockies-base64": "^1.0.2",
-    "react-intl": "^5.24.3",
-    "walletlink": "^2.4.0",
-    "web3modal": "^1.9.5",
     "ethers": "^5.5.3",
     "graphql": "^16.2.0",
     "graphql-ws": "^5.5.5",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",
+    "react-intl": "^5.24.3",
     "reflect-metadata": "^0.1.13",
-    "subscriptions-transport-ws": "^0.11.0"
+    "subscriptions-transport-ws": "^0.11.0",
+    "walletlink": "^2.4.0",
+    "web3modal": "^1.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

src/layouts/WalletWidget.tsx

@@ -16,7 +16,8 @@ import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 import { ColorModeContext } from './MainLayout';
 
 export default function WalletWidget() {
-  const { connectWallet, disconnectWallet, currentAccount, connected, chainId } = useWeb3Context();
+  const { connectWallet, disconnectWallet, currentAccount, connected, chainId, switchNetwork } =
+    useWeb3Context();
 
   const { name: ensName, avatar: ensAvatar } = useGetEns(currentAccount);
   const ensNameAbbreviated = ensName
@@ -72,6 +73,11 @@ export default function WalletWidget() {
     setAnchorEl(null);
   };
 
+  const handleSwitchNetwork = () => {
+    switchNetwork(137);
+    setAnchorEl(null);
+  };
+
   return (
     <div>
       <Button
@@ -144,6 +150,13 @@ export default function WalletWidget() {
           </ListItemIcon>
           <ListItemText>Disconnect Wallet</ListItemText>
         </MenuItem>
+        <Divider />
+        <MenuItem onClick={handleSwitchNetwork}>
+          <ListItemIcon>
+            <RemoveCircleOutlineRoundedIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>SwitchNetwork</ListItemText>
+        </MenuItem>
       </Menu>
     </div>
   );

src/libs/web3-data-provider/Web3ContextProvider.tsx

@@ -1,6 +1,7 @@
 import { JsonRpcProvider, Network, Web3Provider } from '@ethersproject/providers';
 import { providers } from 'ethers';
 import React, { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 import Web3Modal from 'web3modal';
 
 export type Web3Data = {
@@ -11,6 +12,7 @@ export type Web3Data = {
   provider: JsonRpcProvider | undefined;
   web3Modal: Web3Modal;
   chainId: number;
+  switchNetwork: (chainId: number) => Promise<void>;
 };
 
 export type Web3ContextData = {
@@ -39,6 +41,7 @@ export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ chil
   const [connected, setConnected] = useState(false);
   const [chainId, setChainId] = useState(1);
   const [currentAccount, setCurrentAccount] = useState('');
+  const [web3Provider, setWeb3Provider] = useState(null as any);
 
   const [web3Modal, setWeb3Modal] = useState<Web3Modal>(undefined as unknown as Web3Modal);
 
@@ -75,6 +78,7 @@ export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ chil
   // web 3 modal
   const connectWallet = useCallback(async () => {
     const providerInstance = await web3Modal.connect();
+    setWeb3Provider(providerInstance);
     await initSubscriptions(providerInstance);
 
     const ethProvider = new providers.Web3Provider(providerInstance);
@@ -97,8 +101,47 @@ export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ chil
     web3Modal.clearCachedProvider();
     setConnected(false);
     setCurrentAccount('');
+    if (web3Provider) {
+      if (web3Provider.close) {
+        await web3Provider.close();
+      } else if (web3Provider.disconnect) {
+        web3Provider.disconnect();
+      } else {
+        console.log('provider: ', web3Provider)
+      }
+    }
   }, [provider, web3Modal, connected]);
 
+  const switchNetwork = async (newChainId: number) => {
+    if (provider) {
+      try {
+        await provider.send('wallet_switchEthereumChain', [
+          { chainId: `0x${newChainId.toString(16)}` },
+        ]);
+      } catch (switchError) {
+        console.log(switchError);
+        const networkInfo = getNetworkConfig(newChainId);
+        // @ts-expect-error to correctly type we should add a conditional here to check instanceof Error
+        if (switchError.code === 4902) {
+          try {
+            await provider.send('wallet_addEthereumChain', [
+              {
+                chainId: `0x${newChainId.toString(16)}`,
+                chainName: networkInfo.name,
+                nativeCurrency: networkInfo.baseAssetSymbol,
+                rpcUrls: [...networkInfo.publicJsonRPCUrl, networkInfo.publicJsonRPCWSUrl],
+                blockExplorerUrls: networkInfo.explorerLink,
+              },
+            ]);
+          } catch (addError) {
+            console.log(addError);
+            // TODO: handle error somehow
+          }
+        }
+      }
+    }
+  };
+
   const web3ProviderData = useMemo(
     () => ({
       connectWallet,
@@ -108,6 +151,7 @@ export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ chil
       currentAccount,
       web3Modal,
       chainId,
+      switchNetwork,
     }),
     [connectWallet, disconnectWallet, provider, connected, currentAccount, web3Modal, chainId]
   );

src/libs/web3-data-provider/modalOptions.ts

@@ -4,6 +4,7 @@ import ethProvider from 'eth-provider';
 import { getNetworkConfig, getSupportedChainIds } from 'src/utils/marketsAndNetworksConfig';
 import WalletLink from 'walletlink';
 import Web3Modal from 'web3modal';
+import MewConnect from '@myetherwallet/mewconnect-web-client';
 
 const POLLING_INTERVAL = 12000;
 const APP_NAME = 'Aave';
@@ -36,12 +37,26 @@ export const getWeb3Modal = (networkId: number) => {
         options: {
           appName: APP_NAME,
           appLogoUrl: APP_LOGO_URL,
-          url: networkConfig.privateJsonRPCUrl || networkConfig.publicJsonRPCUrl[0],
+          rpc: supportedChainIds.reduce((acc, network) => {
+            const config = getNetworkConfig(network);
+            acc[network] = config.privateJsonRPCUrl || config.publicJsonRPCUrl[0];
+            return acc;
+          }, {} as { [networkId: number]: string }),
         },
       },
       frame: {
         package: ethProvider, // required
       },
+      mewconnect: {
+        package: MewConnect, // required
+        options: {
+          rpc: supportedChainIds.reduce((acc, network) => {
+            const config = getNetworkConfig(network);
+            acc[network] = config.privateJsonRPCUrl || config.publicJsonRPCUrl[0];
+            return acc;
+          }, {} as { [networkId: number]: string }),
+        },
+      },
     },
   });
 };