Fix an edge case with missing top assets in Swaps (#14688)

* If there is no array of top assets in a response, use an empty array

* Set a default empty array for 2 functions, remove an unnecessary condition

* Redirect a user from Swaps to the homepage if they switch to a chain that is not supported in Swaps

* Fix errors in the UI Console when it's not a swaps chain

ui/pages/confirmation/templates/add-ethereum-chain.js

@@ -71,9 +71,8 @@ const INVALID_CHAIN = {
 
 async function getAlerts(pendingApproval) {
   const alerts = [];
-  const safeChainsList = await fetchWithCache(
-    'https://chainid.network/chains.json',
-  );
+  const safeChainsList =
+    (await fetchWithCache('https://chainid.network/chains.json')) || [];
   const matchedChain = safeChainsList.find(
     (chain) =>
       chain.chainId === parseInt(pendingApproval.requestData.chainId, 16),

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -328,15 +328,14 @@ const NetworksForm = ({
       }
 
       try {
-        safeChainsList = await fetchWithCache(
-          'https://chainid.network/chains.json',
-        );
+        safeChainsList =
+          (await fetchWithCache('https://chainid.network/chains.json')) || [];
       } catch (err) {
         log.warn('Failed to fetch the chainList from chainid.network', err);
         providerError = err;
       }
 
-      if (providerError || !Array.isArray(safeChainsList)) {
+      if (providerError) {
         warningKey = 'failedToFetchTickerSymbolData';
         warningMessage = t('failedToFetchTickerSymbolData');
       } else {

ui/pages/swaps/index.js

@@ -157,11 +157,21 @@ export default function Swap() {
   const showSmartTransactionsErrorMessage =
     currentSmartTransactionsError && !smartTransactionsErrorMessageDismissed;
 
-  if (networkAndAccountSupports1559) {
-    // This will pre-load gas fees before going to the View Quote page.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useGasFeeEstimates();
-  }
+  useEffect(() => {
+    const leaveSwaps = async () => {
+      await dispatch(prepareToLeaveSwaps());
+      // We need to wait until "prepareToLeaveSwaps" is done, because otherwise
+      // a user would be redirected from DEFAULT_ROUTE back to Swaps.
+      history.push(DEFAULT_ROUTE);
+    };
+
+    if (!isSwapsChain) {
+      leaveSwaps();
+    }
+  }, [isSwapsChain, dispatch, history]);
+
+  // This will pre-load gas fees before going to the View Quote page.
+  useGasFeeEstimates();
 
   const {
     balance: ethBalance,
@@ -223,6 +233,9 @@ export default function Swap() {
 
   // eslint-disable-next-line
   useEffect(() => {
+    if (!isSwapsChain) {
+      return undefined;
+    }
     fetchTokens(chainId)
       .then((tokens) => {
         dispatch(setSwapsTokens(tokens));
@@ -240,7 +253,7 @@ export default function Swap() {
     return () => {
       dispatch(prepareToLeaveSwaps());
     };
-  }, [dispatch, chainId, networkAndAccountSupports1559]);
+  }, [dispatch, chainId, networkAndAccountSupports1559, isSwapsChain]);
 
   const hardwareWalletUsed = useSelector(isHardwareWallet);
   const hardwareWalletType = useSelector(getHardwareWalletType);
@@ -353,7 +366,9 @@ export default function Swap() {
   ]);
 
   if (!isSwapsChain) {
-    return <Redirect to={{ pathname: DEFAULT_ROUTE }} />;
+    // A user is being redirected outside of Swaps via the async "leaveSwaps" function above. In the meantime
+    // we have to prevent the code below this condition, which wouldn't work on an unsupported chain.
+    return <></>;
   }
 
   const isStxNotEnoughFundsError =

ui/pages/swaps/swaps.util.js

@@ -420,11 +420,12 @@ export async function fetchAggregatorMetadata(chainId) {
 
 export async function fetchTopAssets(chainId) {
   const topAssetsUrl = getBaseApi('topAssets', chainId);
-  const response = await fetchWithCache(
-    topAssetsUrl,
-    { method: 'GET', headers: clientIdHeader },
-    { cacheRefreshTime: CACHE_REFRESH_FIVE_MINUTES },
-  );
+  const response =
+    (await fetchWithCache(
+      topAssetsUrl,
+      { method: 'GET', headers: clientIdHeader },
+      { cacheRefreshTime: CACHE_REFRESH_FIVE_MINUTES },
+    )) || [];
   const topAssetsMap = response.reduce((_topAssetsMap, asset, index) => {
     if (validateData(TOP_ASSET_VALIDATORS, asset, topAssetsUrl)) {
       return { ..._topAssetsMap, [asset.address]: { index: String(index) } };