feat(suite): no search results screen for nfts and hidden tokens

trezor · Dec 19, 2024 · 7aa29d0 · 7aa29d0
1 parent cd7eef8
commit 7aa29d0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx b/packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx
@@ -9,6 +9,7 @@ import { getTokens } from 'src/utils/wallet/tokenUtils';
 
 import { NoTokens } from '../tokens/common/NoTokens';
 import NftsTable from './NftsTable/NftsTable';
+import { NoSearchResultsWrapped } from '../tokens/common/TokensTable/TokensTable';
 
 type EvmNftsTablesProps = {
     selectedAccount: SelectedAccountLoaded;
@@ -73,14 +74,24 @@ export const NftsTablesSection = ({
     };
 
     if (isShown) {
-        return areNoShownNfts ? (
-            <NoTokens isNft={true} title={<Translation id={getNoTokensTitle()} />} />
-        ) : (
+        if (areNoShownNfts) {
+            if (searchQuery) {
+                return <NoSearchResultsWrapped />;
+            }
+
+            return <NoTokens isNft={true} title={<Translation id={getNoTokensTitle()} />} />;
+        }
+
+        return (
             <NftsTable selectedAccount={selectedAccount} isShown={isShown} verified nfts={nfts} />
         );
     }
 
     if (areNoHiddenNfts && areNoUnverifiedNfts) {
+        if (searchQuery) {
+            return <NoSearchResultsWrapped />;
+        }
+
         return <NoTokens isNft={true} title={<Translation id="TR_HIDDEN_NFT_EMPTY" />} />;
     }
 

diff --git a/packages/suite/src/views/wallet/tokens/common/TokensTable/TokensTable.tsx b/packages/suite/src/views/wallet/tokens/common/TokensTable/TokensTable.tsx
@@ -12,6 +12,18 @@ import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarket
 import { TokenRow } from './TokenRow';
 import { DropdownRow } from '../../DropdownRow';
 
+const NoSearchResults = () => (
+    <Paragraph margin={{ top: spacings.xxl, bottom: spacings.xxl }} align="center">
+        <Translation id="TR_NO_SEARCH_RESULTS" />
+    </Paragraph>
+);
+
+export const NoSearchResultsWrapped = () => (
+    <Card paddingType="none" overflow="hidden">
+        <NoSearchResults />
+    </Card>
+);
+
 interface TokensTableProps {
     account: Account;
     tokensWithBalance: EnhancedTokenInfo[];
@@ -39,9 +51,7 @@ export const TokensTable = ({
     return (
         <Card paddingType="none" overflow="hidden">
             {tokensWithBalance.length === 0 && tokensWithoutBalance.length === 0 && searchQuery ? (
-                <Paragraph margin={{ top: spacings.xxl, bottom: spacings.xxl }} align="center">
-                    <Translation id="TR_NO_SEARCH_RESULTS" />
-                </Paragraph>
+                <NoSearchResults />
             ) : (
                 <Table
                     margin={{ top: spacings.xs }}

diff --git a/packages/suite/src/views/wallet/tokens/hidden-tokens/HiddenTokensTable.tsx b/packages/suite/src/views/wallet/tokens/hidden-tokens/HiddenTokensTable.tsx
@@ -9,7 +9,7 @@ import { useSelector } from 'src/hooks/suite';
 import { Translation } from 'src/components/suite';
 
 import { NoTokens } from '../common/NoTokens';
-import { TokensTable } from '../common/TokensTable/TokensTable';
+import { NoSearchResultsWrapped, TokensTable } from '../common/TokensTable/TokensTable';
 
 interface HiddenTokensTableProps {
     selectedAccount: SelectedAccountLoaded;
@@ -46,7 +46,13 @@ export const HiddenTokensTable = ({ selectedAccount, searchQuery }: HiddenTokens
     return (
         <Column gap={spacings.xxl}>
             {hiddenTokensCount === 0 && unverifiedTokensCount === 0 && (
-                <NoTokens title={<Translation id="TR_HIDDEN_TOKENS_EMPTY" />} />
+                <>
+                    {searchQuery ? (
+                        <NoSearchResultsWrapped />
+                    ) : (
+                        <NoTokens title={<Translation id="TR_HIDDEN_TOKENS_EMPTY" />} />
+                    )}
+                </>
             )}
             {hiddenTokensCount > 0 && (
                 <TokensTable