Fix Vortex automatically tries to switch to polygon network

src/components/Nabla/useSwapForm.tsx

@@ -60,7 +60,7 @@ export const useSwapForm = () => {
 
     const network = getCaseSensitiveNetwork(initialValues.network);
     if (network !== selectedNetwork) {
-      setSelectedNetwork(network);
+      setSelectedNetwork(network, true);
     }
 
     const initialFromToken = getInputTokenDetails(network, initialValues.from as InputTokenType);

src/components/NetworkSelector/index.tsx

@@ -91,7 +91,7 @@ export const NetworkSelector = ({ disabled }: { disabled?: boolean }) => {
   useClickOutside(dropdownRef, () => setIsOpen(false));
 
   const handleNetworkSelect = (network: Networks) => {
-    setSelectedNetwork(network);
+    setSelectedNetwork(network, true);
     setIsOpen(false);
   };
 

src/contexts/network.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'preact';
 import { useContext, useState, useEffect, useCallback } from 'preact/hooks';
-import { useSwitchChain } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 import { useLocalStorage, LocalStorageKeys } from '../hooks/useLocalStorage';
 import { WALLETCONNECT_ASSETHUB_ID } from '../constants/constants';
 import { useOfframpActions } from '../stores/offrampStore';
@@ -10,15 +10,15 @@ import { useSep24Actions } from '../stores/sep24Store';
 interface NetworkContextType {
   walletConnectPolkadotSelectedNetworkId: string;
   selectedNetwork: Networks;
-  setSelectedNetwork: (network: Networks) => void;
+  setSelectedNetwork: (network: Networks, resetState?: boolean) => Promise<void>;
   networkSelectorDisabled: boolean;
   setNetworkSelectorDisabled: (disabled: boolean) => void;
 }
 
 const NetworkContext = createContext<NetworkContextType>({
   walletConnectPolkadotSelectedNetworkId: WALLETCONNECT_ASSETHUB_ID,
   selectedNetwork: Networks.AssetHub,
-  setSelectedNetwork: () => null,
+  setSelectedNetwork: async () => undefined,
   networkSelectorDisabled: false,
   setNetworkSelectorDisabled: () => null,
 });
@@ -38,21 +38,28 @@ export const NetworkProvider = ({ children }: NetworkProviderProps) => {
 
   const { resetOfframpState } = useOfframpActions();
   const { cleanup: cleanupSep24Variables } = useSep24Actions();
-  const { switchChain } = useSwitchChain();
+  const { switchChainAsync } = useSwitchChain();
+  const { chain: connectedEvmChain } = useAccount();
 
   const setSelectedNetwork = useCallback(
-    (network: Networks) => {
-      resetOfframpState();
-      cleanupSep24Variables();
+    async (network: Networks, resetState = false) => {
+      if (resetState) {
+        resetOfframpState();
+        cleanupSep24Variables();
+      }
       setSelectedNetworkState(network);
       setSelectedNetworkLocalStorage(network);
 
-      // Will only switch chain on the EVM conneted wallet case.
+      // Will only switch chain on the EVM connected wallet case.
       if (isNetworkEVM(network)) {
-        switchChain({ chainId: getNetworkId(network) });
+        // Only switch chain if the network is different from the current one
+        // see https://github.com/wevm/wagmi/issues/3417
+        if (!connectedEvmChain || connectedEvmChain.id !== getNetworkId(network)) {
+          await switchChainAsync({ chainId: getNetworkId(network) });
+        }
       }
     },
-    [switchChain, setSelectedNetworkLocalStorage, resetOfframpState, cleanupSep24Variables],
+    [connectedEvmChain, switchChainAsync, setSelectedNetworkLocalStorage, resetOfframpState, cleanupSep24Variables],
   );
 
   // Only run on first render

src/hooks/offramp/useSubmitOfframp.ts

@@ -1,8 +1,5 @@
 import { useCallback } from 'preact/compat';
-import { polygon } from 'wagmi/chains';
-import { useSwitchChain } from 'wagmi';
 
-import { getNetworkId, isNetworkEVM } from '../../helpers/networks';
 import { useVortexAccount } from '../useVortexAccount';
 import { useNetwork } from '../../contexts/network';
 import { useEventsContext } from '../../contexts/events';
@@ -22,8 +19,7 @@ import { useSep24Actions } from '../../stores/sep24Store';
 import { showToast, ToastMessage } from '../../helpers/notifications';
 
 export const useSubmitOfframp = () => {
-  const { selectedNetwork } = useNetwork();
-  const { switchChainAsync, switchChain } = useSwitchChain();
+  const { selectedNetwork, setSelectedNetwork } = useNetwork();
   const { trackEvent } = useEventsContext();
   const { address } = useVortexAccount();
   const { checkAndWaitForSignature, forceRefreshAndWaitForSignature } = useSiweContext();
@@ -48,7 +44,6 @@ export const useSubmitOfframp = () => {
       }
 
       (async () => {
-        switchChain({ chainId: polygon.id });
         setOfframpStarted(true);
 
         trackEvent({
@@ -60,10 +55,7 @@ export const useSubmitOfframp = () => {
         });
 
         try {
-          // For substrate, we only have AssetHub only now. Thus no need to change.
-          if (isNetworkEVM(selectedNetwork)) {
-            await switchChainAsync({ chainId: getNetworkId(selectedNetwork) });
-          }
+          await setSelectedNetwork(selectedNetwork);
 
           setOfframpStarted(true);
 
@@ -142,7 +134,6 @@ export const useSubmitOfframp = () => {
       offrampStarted,
       offrampState,
       setOfframpInitiating,
-      switchChain,
       setOfframpStarted,
       trackEvent,
       selectedNetwork,
@@ -154,7 +145,7 @@ export const useSubmitOfframp = () => {
       setInitialResponseSEP24,
       setUrlIntervalSEP24,
       cleanupSEP24,
-      switchChainAsync,
+      setSelectedNetwork,
     ],
   );
 };