feat: add search text box to tokens page (#986)

* feat: add search text box to tokens page

* feat: add empty search component

* refactor: simplify asset portfolio component

* test: fix asset portfolio test

* feat: add search by ticker

Author: greatertomi

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -449,6 +449,8 @@
   "browserView.assets.startYourWeb3Journey": "Start your Web3 journey. Just add some digital assets to get started.",
   "browserView.assets.totalWalletBalance": "Total wallet balance",
   "browserView.assets.portfolioBalanceToolTip": "Approximate value of all tokens with available fiat pair",
+  "browserView.assets.emptySearch": "No results matching your search",
+  "browserView.assets.searchPlaceholder": "Search by name, policy ID or fingerprint",
   "browserView.assetDetails.title": "Token detail",
   "browserView.assetDetails.price": "Price",
   "browserView.assetDetails.assetPrice": "Token price",

apps/browser-extension-wallet/src/views/browser-view/components/EmptySearch/EmptySearch.module.scss

@@ -0,0 +1,15 @@
+@import '../../../../../../../packages/common/src/ui/styles/theme.scss';
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: size_unit(5) 0;
+  width: 100%;
+  position: relative;
+}
+
+.text {
+  color: var(--text-color-secondary);
+}

apps/browser-extension-wallet/src/views/browser-view/components/EmptySearch/EmptySearch.tsx

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import Empty from '@assets/icons/empty.svg';
+import { Image } from 'antd';
+import styles from './EmptySearch.module.scss';
+
+export const EmptySearch = ({ text }: { text: string }): ReactElement => (
+  <div className={styles.container}>
+    <Image preview={false} src={Empty} />
+    <div className={styles.text}>{text}</div>
+  </div>
+);

apps/browser-extension-wallet/src/views/browser-view/components/EmptySearch/index.ts

@@ -0,0 +1 @@
+export { EmptySearch } from './EmptySearch';

apps/browser-extension-wallet/src/views/browser-view/components/index.ts

@@ -8,3 +8,4 @@ export * from './SideMenu';
 export * from './WarningModal';
 export * from './SocialNetworks';
 export * from './WalletUsedAddressesDrawer';
+export * from './EmptySearch';

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/Assets.tsx

@@ -281,6 +281,7 @@ export const Assets = ({ topSection }: AssetsProps): React.ReactElement => {
       totalAssets={fullAssetList?.length ?? 0}
     />
   );
+
   const drawers = (
     <>
       <AssetActivityDetails

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/AssetsPortfolio/AssetPortfolioContent.tsx

@@ -0,0 +1,106 @@
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import { SearchBox } from '@lace/ui';
+import { EmptySearch, FundWalletBanner } from '@views/browser/components';
+import { Skeleton } from 'antd';
+import { AssetTable, IRow } from '@lace/core';
+import { CONTENT_LAYOUT_ID } from '@components/Layout';
+import { LACE_APP_ID } from '@utils/constants';
+import { IAssetDetails } from '@views/browser/features/assets/types';
+import { useTranslation } from 'react-i18next';
+import { useWalletStore } from '@stores';
+import styles from './AssetsPortfolio.module.scss';
+
+const MIN_ASSETS_COUNT_FOR_SEARCH = 10;
+
+const searchTokens = (data: IAssetDetails[], searchValue: string) => {
+  const fields = ['name', 'policyId', 'fingerprint', 'ticker'] as const;
+  const lowerSearchValue = searchValue.toLowerCase();
+
+  return data.filter((item) =>
+    fields.some((field) => field in item && item[field] && item[field].toLowerCase().includes(lowerSearchValue))
+  );
+};
+
+interface AssetPortfolioContentProps {
+  assetList: IRow[];
+  totalAssets: number;
+  isPortfolioBalanceLoading: boolean;
+  onRowClick: (id: string) => void;
+  onTableScroll: () => void;
+  isPopupView: boolean;
+}
+
+export const AssetPortfolioContent = ({
+  assetList,
+  totalAssets,
+  isPortfolioBalanceLoading,
+  onRowClick,
+  onTableScroll,
+  isPopupView
+}: AssetPortfolioContentProps): ReactElement => {
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [currentAssets, setCurrentAssets] = useState<{
+    data: IAssetDetails[];
+    total: number;
+  }>({
+    data: assetList,
+    total: totalAssets
+  });
+  const { walletInfo } = useWalletStore();
+
+  useEffect(() => {
+    setCurrentAssets({
+      data: searchValue ? currentAssets.data : assetList,
+      total: searchValue ? currentAssets.total : totalAssets
+    });
+  }, [assetList, currentAssets.data, currentAssets.total, searchValue, totalAssets]);
+
+  const handleSearch = useCallback(
+    (value: string) => {
+      const filteredAssets = searchTokens(assetList, value);
+      setSearchValue(value);
+      setCurrentAssets({ data: filteredAssets, total: filteredAssets.length });
+    },
+    [assetList]
+  );
+
+  return (
+    <>
+      {assetList?.length > MIN_ASSETS_COUNT_FOR_SEARCH && (
+        <div className={styles.searchBoxContainer}>
+          <SearchBox
+            placeholder={t('browserView.assets.searchPlaceholder')}
+            onChange={handleSearch}
+            data-testid="assets-search-input"
+            value={searchValue}
+            onClear={() => setSearchValue('')}
+          />
+        </div>
+      )}
+      {searchValue && currentAssets.total === 0 && <EmptySearch text={t('browserView.assets.emptySearch')} />}
+      {!searchValue && currentAssets.total === 0 && (
+        <FundWalletBanner
+          title={t('browserView.assets.welcome')}
+          subtitle={t('browserView.assets.startYourWeb3Journey')}
+          prompt={t('browserView.fundWalletBanner.prompt')}
+          walletAddress={walletInfo.addresses[0].address.toString()}
+        />
+      )}
+      {
+        <Skeleton loading={isPortfolioBalanceLoading || !currentAssets.data}>
+          {currentAssets.total > 0 && (
+            <AssetTable
+              rows={currentAssets.data}
+              onRowClick={onRowClick}
+              totalItems={currentAssets.total}
+              scrollableTargetId={isPopupView ? CONTENT_LAYOUT_ID : LACE_APP_ID}
+              onLoad={onTableScroll}
+              popupView={isPopupView}
+            />
+          )}
+        </Skeleton>
+      }
+    </>
+  );
+};

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/AssetsPortfolio/AssetsPortfolio.module.scss

@@ -13,3 +13,9 @@
     width: 1000px;
   }
 }
+
+.searchBoxContainer {
+  @media (max-width: $breakpoint-popup) {
+    margin-top: size_unit(3);
+  }
+}

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/AssetsPortfolio/AssetsPortfolio.tsx

@@ -2,12 +2,11 @@ import { Skeleton } from 'antd';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AssetTable, IRow, SendReceive } from '@lace/core';
-import { CONTENT_LAYOUT_ID } from '@components/Layout/ContentLayout';
+import { IRow, SendReceive } from '@lace/core';
 import { SectionTitle } from '@components/Layout/SectionTitle';
-import { APP_MODE_POPUP, AppMode, LACE_APP_ID } from '@src/utils/constants';
+import { APP_MODE_POPUP, AppMode } from '@src/utils/constants';
 import { compactNumberWithUnit } from '@src/utils/format-number';
-import { FundWalletBanner, PortfolioBalance } from '@src/views/browser-view/components';
+import { PortfolioBalance } from '@src/views/browser-view/components';
 import { useCurrencyStore } from '@providers/currency';
 import { useWalletStore } from '@src/stores';
 import { useFetchCoinPrice } from '@hooks/useFetchCoinPrice';
@@ -18,6 +17,7 @@ import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import styles from './AssetsPortfolio.module.scss';
 import BigNumber from 'bignumber.js';
 import { SendFlowTriggerPoints } from '../../../send-transaction';
+import { AssetPortfolioContent } from './AssetPortfolioContent';
 
 const MINUTES_UNTIL_WARNING_BANNER = 3;
 
@@ -49,7 +49,6 @@ export const AssetsPortfolio = ({
   const analytics = useAnalyticsContext();
   const { t } = useTranslation();
   const {
-    walletInfo,
     walletUI: { canManageBalancesVisibility, areBalancesVisible }
   } = useWalletStore();
   const { fiatCurrency } = useCurrencyStore();
@@ -105,7 +104,7 @@ export const AssetsPortfolio = ({
           isBalanceVisible={areBalancesVisible || portfolioBalanceAsBigNumber.eq(0)}
         />
       </div>
-      {isPopupView && totalAssets > 0 && (
+      {isPopupView && portfolioBalanceAsBigNumber.gt(0) && (
         <SendReceive
           leftButtonOnClick={openSend}
           rightButtonOnClick={handleRedirectToReceive}
@@ -118,25 +117,14 @@ export const AssetsPortfolio = ({
           }}
         />
       )}
-      <Skeleton loading={isPortfolioBalanceLoading || !assetList}>
-        {portfolioBalanceAsBigNumber.gt(0) ? (
-          <AssetTable
-            rows={assetList}
-            onRowClick={onRowClick}
-            totalItems={totalAssets}
-            scrollableTargetId={isPopupView ? CONTENT_LAYOUT_ID : LACE_APP_ID}
-            onLoad={onTableScroll}
-            popupView={isPopupView}
-          />
-        ) : (
-          <FundWalletBanner
-            title={t('browserView.assets.welcome')}
-            subtitle={t('browserView.assets.startYourWeb3Journey')}
-            prompt={t('browserView.fundWalletBanner.prompt')}
-            walletAddress={walletInfo.addresses[0].address.toString()}
-          />
-        )}
-      </Skeleton>
+      <AssetPortfolioContent
+        totalAssets={totalAssets}
+        assetList={assetList}
+        isPortfolioBalanceLoading={isPortfolioBalanceLoading}
+        onRowClick={onRowClick}
+        onTableScroll={onTableScroll}
+        isPopupView={isPopupView}
+      />
     </Skeleton>
   );
 };

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/AssetsPortfolio/__tests__/AssetsPortfolio.test.tsx

@@ -148,7 +148,6 @@ describe('AssetsPortfolio', () => {
       />
     );
     expect(queryByTestId('asset-table')).not.toBeInTheDocument();
-    expect(queryByTestId('fund-wallet-banner-mock')).not.toBeInTheDocument();
     expect(queryByTestId('section-title-counter')).toHaveTextContent('(0)');
   });