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

…ansactions
trezor · Feb 13, 2025 · c04e9eb · c04e9eb
1 parent 9eeb555
commit c04e9eb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
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. If you're searching for a specific transaction, check <tabLink>Hidden tokens</tabLink>. Be cautious—hidden tokens may be associated with scams.",
+        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,45 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
+import { Card, Column, Link, Text } from '@trezor/components';
+
+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';
 
+export const NoVisibleTransactions = () => {
+    const dispatch = useDispatch();
+
+    return (
+        <Card>
+            <Column alignItems="center">
+                <Text typographyStyle="hint" variant="tertiary">
+                    <Translation
+                        id="TR_NO_VISIBLE_TRANSACTIONS"
+                        values={{
+                            tabLink: (chunks: ReactNode[]) => (
+                                <Link
+                                    onClick={event => {
+                                        event.preventDefault();
+                                        dispatch(
+                                            goto('wallet-tokens-hidden', { preserveParams: true }),
+                                        );
+                                    }}
+                                >
+                                    {chunks}
+                                </Link>
+                            ),
+                        }}
+                    />
+                </Text>
+            </Column>
+        </Card>
+    );
+};
+
 interface TransactionListProps {
     symbol: WalletAccountTransaction['symbol'];
     account: Account;
@@ -25,6 +60,10 @@ export const WalletTransactionList = ({
         numberOfPagesRequested: visiblePages,
     });
 
+    if (!result.isLoading && result.visibleTransactions.length === 0) {
+        return <NoVisibleTransactions />;
+    }
+
     return (
         <TransactionList
             key={account.key} // NOTE: ensure that transaction list is unmounted when account key changes