From ac38e59bb4051fe210ab945282a2f5cf4d3f4d53 Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Mon, 23 Sep 2024 17:18:27 +0300 Subject: [PATCH] [Redesign] Display empty Tx history when we receive non-200 response from respective APIs (#2692) Signed-off-by: Emre Bogazliyanlioglu --- .../src/hooks/useTransactionHistoryMayan.ts | 68 ++++++++++--------- .../src/hooks/useTransactionHistoryWHScan.ts | 62 +++++++++-------- .../src/views/v2/TxHistory/index.tsx | 7 +- 3 files changed, 76 insertions(+), 61 deletions(-) diff --git a/wormhole-connect/src/hooks/useTransactionHistoryMayan.ts b/wormhole-connect/src/hooks/useTransactionHistoryMayan.ts index d1358c68d..f7cfc63dc 100644 --- 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(); - 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(); + 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 index 27a279782..e0f9d8fe0 100644 --- 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(); - 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(); + 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 index c4f17b1a4..33dfac4f3 100644 --- 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 ( - - No transactions found for the address {sendingWallet.address} + + {`No transactions found for the wallet ${trimAddress( + sendingWallet.address, + )}`} ); }