feat(suite): add empty state for cases when there are no "visible" tr…

…ansactions
trezor · Feb 11, 2025 · 1a1a06d · 1a1a06d
1 parent f20a46b
commit 1a1a06d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -88,6 +88,11 @@ export default defineMessages({
         defaultMessage: 'No transactions',
         id: 'TR_ACCOUNT_IS_EMPTY_TITLE',
     },
+    TR_NO_VISIBLE_TRANSACTIONS: {
+        defaultMessage:
+            "No transactions to show. If you're looking for a specific transaction, check the <tabLink>Hidden tokens tab</tabLink>—but be cautious, as hidden tokens may carry risks.",
+        id: 'TR_NO_VISIBLE_TRANSACTIONS',
+    },
     TR_ACCOUNT_PASSPHRASE_DISABLED: {
         defaultMessage: 'Change passphrase settings to use this device',
         id: 'TR_ACCOUNT_PASSPHRASE_DISABLED',

diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/WalletTransactionList.tsx b/packages/suite/src/views/wallet/transactions/TransactionList/WalletTransactionList.tsx
@@ -1,10 +1,54 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
+import styled from 'styled-components';
+
+import { Card, Column, Link } from '@trezor/components';
+import { typography } from '@trezor/theme';
+
+import { goto } from 'src/actions/suite/routerActions';
+import { Translation } from 'src/components/suite';
 import { Account, WalletAccountTransaction } from 'src/types/wallet';
 
 import { TransactionList } from './TransactionList';
 import { useVisibleTransactions } from './useFetchTransactions';
 
+const NoResults = styled.div`
+    text-align: center;
+    color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
+    ${typography.hint}
+`;
+
+export const NoVisibleTransactions = () => {
+    const dispatch = useDispatch();
+
+    return (
+        <Card>
+            <NoResults>
+                <Column alignItems="center">
+                    <Translation
+                        id="TR_NO_VISIBLE_TRANSACTIONS"
+                        values={{
+                            tabLink: (chunks: ReactNode[]) => (
+                                <Link
+                                    onClick={event => {
+                                        event.preventDefault();
+                                        dispatch(
+                                            goto('wallet-tokens-hidden', { preserveParams: true }),
+                                        );
+                                    }}
+                                >
+                                    {chunks}
+                                </Link>
+                            ),
+                        }}
+                    />
+                </Column>
+            </NoResults>
+        </Card>
+    );
+};
+
 interface TransactionListProps {
     symbol: WalletAccountTransaction['symbol'];
     account: Account;
@@ -25,6 +69,10 @@ export const WalletTransactionList = ({
         numberOfPagesRequested: visiblePages,
     });
 
+    if (!result.isLoading && result.visibleTransactions.length === 0) {
+        return <NoVisibleTransactions />;
+    }
+
     return (
         <TransactionList
             customPageFetching

diff --git a/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts b/packages/suite/src/views/wallet/transactions/TransactionList/useFetchTransactions.ts
@@ -5,6 +5,7 @@ import {
     getIsPhishingTransaction,
     selectNetworkTokenDefinitions,
 } from '@suite-common/token-definitions';
+import { DiscoveryStatus } from '@suite-common/wallet-constants';
 import {
     fetchAllTransactionsForAccountThunk,
     fetchTransactionsPageThunk,
@@ -14,7 +15,7 @@ import {
 } from '@suite-common/wallet-core';
 import { getSynchronize } from '@trezor/utils';
 
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useDiscovery, useDispatch, useSelector } from 'src/hooks/suite';
 import { Account, WalletAccountTransaction } from 'src/types/wallet';
 
 import { shouldAttemptToLoadNextPageForVisibleTransactions } from './transaction-fetch-utils';
@@ -154,6 +155,7 @@ export const useVisibleTransactions = ({
     const allTransactions = useSelector(state =>
         selectAccountTransactionsWithNulls(state, account.key),
     );
+    const { discovery } = useDiscovery();
 
     const {
         fetchedAll,
@@ -215,5 +217,6 @@ export const useVisibleTransactions = ({
         visibleTransactions,
         visibleTotal: totalPossiblyVisible,
         isFetching: isFetching || transactionsIsLoading,
+        isLoading: discovery && discovery?.status !== DiscoveryStatus.COMPLETED, // NOTE: loading indicates that the state of the data is unknown and we are "loading for the first time"
     };
 };