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

@@ -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

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>
   );

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[],
 ];