From f6576801d47d896311d7c2fa96a9ec23c30ffbab Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Tue, 24 May 2022 18:30:46 +0200
Subject: [PATCH] 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
---
 .../templates/add-ethereum-chain.js           |  5 ++--
 .../networks-form/networks-form.js            |  7 ++---
 ui/pages/swaps/index.js                       | 29 ++++++++++++++-----
 ui/pages/swaps/swaps.util.js                  | 11 +++----
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/ui/pages/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmation/templates/add-ethereum-chain.js
index db7dac420..c417a1111 100644
--- a/ui/pages/confirmation/templates/add-ethereum-chain.js
+++ b/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),
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
index 08afc4415..402437c86 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ b/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 {
diff --git a/ui/pages/swaps/index.js b/ui/pages/swaps/index.js
index bae9e6cbd..1ade6f4bb 100644
--- a/ui/pages/swaps/index.js
+++ b/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 =
diff --git a/ui/pages/swaps/swaps.util.js b/ui/pages/swaps/swaps.util.js
index c0993b63f..446e6eff5 100644
--- a/ui/pages/swaps/swaps.util.js
+++ b/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) } };