[Redesign] Display empty Tx history when we receive non-200 response …

…from respective APIs (#2692) Signed-off-by: Emre Bogazliyanlioglu <[email protected]>
wormhole-foundation · Sep 23, 2024 · ac38e59 · ac38e59
1 parent e6e8665
commit ac38e59
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 61 deletions.
diff --git a/wormhole-connect/src/hooks/useTransactionHistoryMayan.ts b/wormhole-connect/src/hooks/useTransactionHistoryMayan.ts
@@ -130,37 +130,43 @@ const useTransactionHistoryMayan = (
           `${config.mayanApi}/v3/swaps?trader=${address}&offset=${offset}&limit=${limit}`,
         );
 
-        const resPayload = await res.json();
-
-        if (!cancelled) {
-          const resData = resPayload?.data;
-
-          if (resData?.length > 0) {
-            setTransactions((txs) => {
-              const parsedTxs = parseTransactions(resData);
-
-              if (txs && txs.length > 0) {
-                // We need to keep track of existing tx hashes to prevent duplicates in the final list
-                const existingTxs = new Set<string>();
-                txs.forEach((tx: Transaction) => {
-                  if (tx?.txHash) {
-                    existingTxs.add(tx.txHash);
-                  }
-                });
-
-                // Add the new set transactions while filtering out duplicates
-                return txs.concat(
-                  parsedTxs.filter(
-                    (tx: Transaction) => !existingTxs.has(tx.txHash),
-                  ),
-                );
-              }
-              return parsedTxs;
-            });
-          }
-
-          if (resData?.length < limit) {
-            setHasMore(false);
+        // If the fetch was unsuccessful, return an empty set
+        if (res.status !== 200) {
+          setIsFetching(false);
+          setTransactions([]);
+        } else {
+          const resPayload = await res.json();
+
+          if (!cancelled) {
+            const resData = resPayload?.data;
+
+            if (resData) {
+              setTransactions((txs) => {
+                const parsedTxs = parseTransactions(resData);
+
+                if (txs && txs.length > 0) {
+                  // We need to keep track of existing tx hashes to prevent duplicates in the final list
+                  const existingTxs = new Set<string>();
+                  txs.forEach((tx: Transaction) => {
+                    if (tx?.txHash) {
+                      existingTxs.add(tx.txHash);
+                    }
+                  });
+
+                  // Add the new set transactions while filtering out duplicates
+                  return txs.concat(
+                    parsedTxs.filter(
+                      (tx: Transaction) => !existingTxs.has(tx.txHash),
+                    ),
+                  );
+                }
+                return parsedTxs;
+              });
+            }
+
+            if (resData?.length < limit) {
+              setHasMore(false);
+            }
           }
         }
       } catch (error) {

diff --git a/wormhole-connect/src/hooks/useTransactionHistoryWHScan.ts b/wormhole-connect/src/hooks/useTransactionHistoryWHScan.ts
@@ -252,35 +252,41 @@ const useTransactionHistoryWHScan = (
           { headers },
         );
 
-        const resPayload = await res.json();
-
-        if (!cancelled) {
-          const resData = resPayload?.operations;
-          if (resData.length > 0) {
-            setTransactions((txs) => {
-              const parsedTxs = parseTransactions(resData);
-              if (txs && txs.length > 0) {
-                // We need to keep track of existing tx hashes to prevent duplicates in the final list
-                const existingTxs = new Set<string>();
-                txs.forEach((tx: Transaction) => {
-                  if (tx?.txHash) {
-                    existingTxs.add(tx.txHash);
-                  }
-                });
-
-                // Add the new set transactions while filtering out duplicates
-                return txs.concat(
-                  parsedTxs.filter(
-                    (tx: Transaction) => !existingTxs.has(tx.txHash),
-                  ),
-                );
-              }
-              return parsedTxs;
-            });
-          }
+        // If the fetch was unsuccessful, return an empty set
+        if (res.status !== 200) {
+          setIsFetching(false);
+          setTransactions([]);
+        } else {
+          const resPayload = await res.json();
+
+          if (!cancelled) {
+            const resData = resPayload?.operations;
+            if (resData) {
+              setTransactions((txs) => {
+                const parsedTxs = parseTransactions(resData);
+                if (txs && txs.length > 0) {
+                  // We need to keep track of existing tx hashes to prevent duplicates in the final list
+                  const existingTxs = new Set<string>();
+                  txs.forEach((tx: Transaction) => {
+                    if (tx?.txHash) {
+                      existingTxs.add(tx.txHash);
+                    }
+                  });
+
+                  // Add the new set transactions while filtering out duplicates
+                  return txs.concat(
+                    parsedTxs.filter(
+                      (tx: Transaction) => !existingTxs.has(tx.txHash),
+                    ),
+                  );
+                }
+                return parsedTxs;
+              });
+            }
 
-          if (resData?.length < pageSize) {
-            setHasMore(false);
+            if (resData?.length < pageSize) {
+              setHasMore(false);
+            }
           }
         }
       } catch (error) {

diff --git a/wormhole-connect/src/views/v2/TxHistory/index.tsx b/wormhole-connect/src/views/v2/TxHistory/index.tsx
@@ -15,6 +15,7 @@ import config from 'config';
 import PoweredByIcon from 'icons/PoweredBy';
 import useTransactionHistory from 'hooks/useTransactionHistory';
 import { setRoute as setAppRoute } from 'store/router';
+import { trimAddress } from 'utils';
 import { joinClass } from 'utils/style';
 import TxHistoryItem from 'views/v2/TxHistory/Item';
 
@@ -117,8 +118,10 @@ const TxHistory = () => {
       return <></>;
     } else if (transactions.length === 0) {
       return (
-        <Typography textAlign="center">
-          No transactions found for the address {sendingWallet.address}
+        <Typography color={theme.palette.text.secondary} textAlign="center">
+          {`No transactions found for the wallet ${trimAddress(
+            sendingWallet.address,
+          )}`}
         </Typography>
       );
     }