chore: Add error handling for setCorrectChain

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -84,8 +84,8 @@ import useBridging from '../../../hooks/bridge/useBridging';
 ///: END:ONLY_INCLUDE_IF
 import { ReceiveModal } from '../../multichain/receive-modal';
 import {
-  setActiveNetwork,
   setSwitchedNetworkDetails,
+  setActiveNetworkWithError,
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   sendMultichainTransaction,
   setDefaultHomeActiveTabName,
@@ -328,13 +328,20 @@ const CoinButtons = ({
 
   const setCorrectChain = useCallback(async () => {
     if (currentChainId !== chainId) {
-      const networkConfigurationId = networks[chainId];
-      await dispatch(setActiveNetwork(networkConfigurationId));
-      await dispatch(
-        setSwitchedNetworkDetails({
-          networkClientId: networkConfigurationId,
-        }),
-      );
+      try {
+        const networkConfigurationId = networks[chainId];
+        await dispatch(setActiveNetworkWithError(networkConfigurationId));
+        await dispatch(
+          setSwitchedNetworkDetails({
+            networkClientId: networkConfigurationId,
+          }),
+        );
+      } catch (err) {
+        console.error(`Failed to switch chains.
+        Target chainId: ${chainId}, Current chainId: ${currentChainId}.
+        ${err}`);
+        throw err;
+      }
     }
   }, [currentChainId, chainId, networks, dispatch]);
 
@@ -384,7 +391,6 @@ const CoinButtons = ({
 
   const handleSwapOnClick = useCallback(async () => {
     await setCorrectChain();
-
     ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
     global.platform.openTab({
       url: `${mmiPortfolioUrl}/swap`,

ui/pages/asset/components/token-buttons.tsx

@@ -36,9 +36,9 @@ import useBridging from '../../../hooks/bridge/useBridging';
 
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import {
-  setActiveNetwork,
   showModal,
   setSwitchedNetworkDetails,
+  setActiveNetworkWithError,
 } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
@@ -123,14 +123,22 @@ const TokenButtons = ({
   }, [token.isERC721, token.address, dispatch]);
 
   const setCorrectChain = async () => {
+    // If we aren't presently on the chain of the asset, change to it
     if (currentChainId !== token.chainId) {
-      const networkConfigurationId = networks[token.chainId];
-      await dispatch(setActiveNetwork(networkConfigurationId));
-      await dispatch(
-        setSwitchedNetworkDetails({
-          networkClientId: networkConfigurationId,
-        }),
-      );
+      try {
+        const networkConfigurationId = networks[token.chainId];
+        await dispatch(setActiveNetworkWithError(networkConfigurationId));
+        await dispatch(
+          setSwitchedNetworkDetails({
+            networkClientId: networkConfigurationId,
+          }),
+        );
+      } catch (err) {
+        console.error(`Failed to switch chains.
+        Target chainId: ${token.chainId}, Current chainId: ${currentChainId}.
+        ${err}`);
+        throw err;
+      }
     }
   };
 
@@ -271,7 +279,6 @@ const TokenButtons = ({
           }
           onClick={async () => {
             await setCorrectChain();
-
             ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
             global.platform.openTab({
               url: `${mmiPortfolioUrl}/swap`,

ui/store/actions.ts

@@ -2492,6 +2492,23 @@ export function setActiveNetwork(
   };
 }
 
+export function setActiveNetworkWithError(
+  networkConfigurationId: string,
+): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
+  return async (dispatch) => {
+    log.debug(`background.setActiveNetwork: ${networkConfigurationId}`);
+    try {
+      await submitRequestToBackground('setActiveNetwork', [
+        networkConfigurationId,
+      ]);
+    } catch (error) {
+      logErrorWithMessage(error);
+      dispatch(displayWarning('Had a problem changing networks!'));
+      throw new Error('Had a problem changing networks!');
+    }
+  };
+}
+
 export async function setActiveNetworkConfigurationId(
   networkConfigurationId: string,
 ): Promise<undefined> {