From 92756042c99b6108f7d4fa92aa1743731ef1fcc7 Mon Sep 17 00:00:00 2001
From: Kevin Davis <65736142+thekidnamedkd@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:08:34 +0200
Subject: [PATCH] fix: APP-3070 - Update WC network switch flow via dAppConnect
 (#1330)

* wip: show possible solution for aligning WC network with app network

* chore: add more detail to comments, default chain in WAGMI as mainnet

* chore: remove extra console.log

* chore: move global network switch to network error modal flow

* chore: remove extra console.log

* chore: refactor WC connector + switch to be more defensive

* chore: refactor to use wagmi hook directly, remove custom switchNetwork

* chore: remove console logs, unneeded connector hooks
---
 src/app.tsx                               |  1 +
 src/containers/networkErrorMenu/index.tsx | 24 +++++------
 src/hooks/useSwitchNetwork.tsx            | 50 -----------------------
 src/index.tsx                             |  2 +-
 4 files changed, 14 insertions(+), 63 deletions(-)
 delete mode 100644 src/hooks/useSwitchNetwork.tsx

diff --git a/src/app.tsx b/src/app.tsx
index a3a58e840..cf41f1c52 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -44,6 +44,7 @@ export const App: React.FC = () => {
   // further refactoring of layout (see further below).
   const {pathname} = useLocation();
   const {methods, status, network, address, provider} = useWallet();
+
   useMonitoring();
 
   // Initialize feature flags using the initial URL
diff --git a/src/containers/networkErrorMenu/index.tsx b/src/containers/networkErrorMenu/index.tsx
index 32169d9a2..401c7d82f 100644
--- a/src/containers/networkErrorMenu/index.tsx
+++ b/src/containers/networkErrorMenu/index.tsx
@@ -9,11 +9,11 @@ import {useAlertContext} from 'context/alert';
 import {useGlobalModalContext} from 'context/globalModals';
 import {useNetwork} from 'context/network';
 import useScreen from 'hooks/useScreen';
-import {useSwitchNetwork} from 'hooks/useSwitchNetwork';
 import {useWallet} from 'hooks/useWallet';
 import WalletIcon from 'assets/images/wallet.svg';
-import {CHAIN_METADATA} from 'utils/constants';
+import {CHAIN_METADATA, SupportedNetworks} from 'utils/constants';
 import {handleClipboardActions, shortenAddress} from 'utils/library';
+import {useSwitchChain} from 'wagmi';
 
 interface INetworkErrorMenuState {
   onClose?: () => void;
@@ -26,8 +26,9 @@ export const NetworkErrorMenu = () => {
   const {onClose, onSuccess} = modalState ?? {};
 
   const {network} = useNetwork();
-  const {switchWalletNetwork} = useSwitchNetwork();
-  const {address, ensName, ensAvatarUrl, connectorName} = useWallet();
+  const {switchChain} = useSwitchChain();
+  const {address, ensName, ensAvatarUrl} = useWallet();
+
   const {isDesktop} = useScreen();
   const {t} = useTranslation();
   const {alert} = useAlertContext();
@@ -38,7 +39,8 @@ export const NetworkErrorMenu = () => {
   };
 
   const handleSwitchNetwork = () => {
-    switchWalletNetwork();
+    const currentChain = CHAIN_METADATA[network as SupportedNetworks]?.id;
+    switchChain({chainId: currentChain});
     close();
     onSuccess?.();
   };
@@ -86,13 +88,11 @@ export const NetworkErrorMenu = () => {
             </Trans>
           </WarningDescription>
         </WarningContainer>
-        {connectorName === 'MetaMask' && (
-          <Button onClick={handleSwitchNetwork} size="lg" variant="primary">
-            {t('alert.wrongNetwork.buttonLabel', {
-              network: CHAIN_METADATA[network].name,
-            })}
-          </Button>
-        )}
+        <Button onClick={handleSwitchNetwork} size="lg" variant="primary">
+          {t('alert.wrongNetwork.buttonLabel', {
+            network: CHAIN_METADATA[network].name,
+          })}
+        </Button>
       </ModalBody>
     </ModalBottomSheetSwitcher>
   );
diff --git a/src/hooks/useSwitchNetwork.tsx b/src/hooks/useSwitchNetwork.tsx
deleted file mode 100644
index 7c6af6e5d..000000000
--- a/src/hooks/useSwitchNetwork.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {useNetwork} from 'context/network';
-import {CHAIN_METADATA} from 'utils/constants';
-import {toHex} from 'utils/library';
-
-type ErrorType = {
-  code: number;
-};
-
-export const useSwitchNetwork = () => {
-  const {network} = useNetwork();
-
-  const switchWalletNetwork = async () => {
-    // Check if MetaMask is installed
-    if (window.ethereum) {
-      try {
-        // check if the chain to connect to is installed
-        await window.ethereum.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{chainId: toHex(CHAIN_METADATA[network].id)}], // chainId must be in hexadecimal numbers
-        });
-      } catch (error) {
-        if ((error as ErrorType).code === 4902) {
-          try {
-            await window.ethereum.request({
-              method: 'wallet_addEthereumChain',
-              params: [
-                {
-                  chainName: CHAIN_METADATA[network].name,
-                  chainId: toHex(CHAIN_METADATA[network].id),
-                  rpcUrls: CHAIN_METADATA[network].publicRpc,
-                  nativeCurrency: CHAIN_METADATA[network].nativeCurrency,
-                },
-              ],
-            });
-          } catch (addError) {
-            console.error(addError);
-          }
-        }
-        console.error(error);
-      }
-    } else {
-      // if no window.ethereum then MetaMask is not installed
-      alert(
-        'MetaMask is not installed. Please consider installing it: https://metamask.io/download.html'
-      );
-    }
-  };
-
-  return {switchWalletNetwork};
-};
diff --git a/src/index.tsx b/src/index.tsx
index f18ef0cb8..ba369fb7e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,7 +32,7 @@ import {App} from './app';
 import {aragonGateway} from 'utils/aragonGateway';
 import {HttpTransport} from 'viem';
 
-const chains = [base, mainnet, polygon, arbitrum, sepolia] as [
+const chains = [mainnet, polygon, base, arbitrum, sepolia] as [
   Chain,
   ...Chain[],
 ];