Merge remote-tracking branch 'origin/main' into chore/lw-10236-use-dr…

…ep-registration-tracker

.github/workflows/e2e-tests-linux.yml

@@ -34,6 +34,7 @@ env:
   NETWORK: ${{ github.event.inputs.network || 'preprod' }}
   RUN: ${{ github.run_number }}
   DISPLAY: ':99.0'
+  NODE_OPTIONS: --max-old-space-size=16384
 
 jobs:
   tests:
@@ -73,7 +74,7 @@ jobs:
           eval "$runCommand";
       - name: Create allure properties
         if: always()
-        working-directory: ./packages/e2e-tests/reports/allure/results
+        working-directory: './packages/e2e-tests/reports/allure/results'
         run: |
           echo "
           env=${NETWORK}
@@ -82,19 +83,20 @@ jobs:
           platform=Linux
           " > environment.properties
       - name: Publish allure report to S3
-        uses: andrcuns/allure-publish-action@v1.0.1
+        uses: andrcuns/allure-publish-action@v2.6.0
         if: always()
         env:
           GITHUB_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           AWS_ACCESS_KEY_ID: ${{ secrets.E2E_AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.E2E_AWS_SECRET_ACCESS_KEY }}
         with:
           storageType: s3
-          resultsGlob: './packages/e2e-tests/reports/allure/results/*'
+          resultsGlob: './packages/e2e-tests/reports/allure/results'
           bucket: lace-e2e-test-results
           prefix: 'all/linux/${BROWSER}/${RUN}'
           copyLatest: true
           ignoreMissingResults: true
+          baseUrl: 'https://${{ secrets.E2E_REPORTS_USER }}:${{ secrets.E2E_REPORTS_PASSWORD }}@${{ secrets.E2E_REPORTS_URL }}'
       - name: Publish artifacts (logs, reports, screenshots)
         uses: actions/upload-artifact@v4
         if: always()

.github/workflows/e2e-tests-win.yml

@@ -154,19 +154,20 @@ jobs:
           name: test-artifacts
           path: ./packages/e2e-tests
       - name: Publish allure report to S3
-        uses: andrcuns/allure-publish-action@v1.0.1
+        uses: andrcuns/allure-publish-action@v2.6.0
         if: always()
         env:
           GITHUB_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           AWS_ACCESS_KEY_ID: ${{ secrets.E2E_AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.E2E_AWS_SECRET_ACCESS_KEY }}
         with:
           storageType: s3
-          resultsGlob: './packages/e2e-tests/reports/allure/results/*'
+          resultsGlob: './packages/e2e-tests/reports/allure/results'
           bucket: lace-e2e-test-results
           prefix: 'all/windows/${BROWSER}/${RUN}'
           copyLatest: true
           ignoreMissingResults: true
+          baseUrl: 'https://${{ secrets.E2E_REPORTS_USER }}:${{ secrets.E2E_REPORTS_PASSWORD }}@${{ secrets.E2E_REPORTS_URL }}'
       - name: Add link to summary
         if: always()
         run: |

.github/workflows/smoke-tests.yml

@@ -57,7 +57,7 @@ jobs:
           platform=Linux
           " > environment.properties
       - name: Publish allure report to S3
-        uses: andrcuns/allure-publish-action@v2.4.0
+        uses: andrcuns/allure-publish-action@v2.6.0
         if: always()
         env:
           GITHUB_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

apps/browser-extension-wallet/src/features/nfts/components/NftDetail.tsx

@@ -10,13 +10,17 @@ import { NftDetail as NftDetailView } from '@lace/core';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
 import { SendFlowTriggerPoints, useOutputInitialState } from '@src/views/browser-view/features/send-transaction';
-import { DEFAULT_WALLET_BALANCE, SEND_NFT_DEFAULT_AMOUNT } from '@src/utils/constants';
+import { APP_MODE_POPUP, DEFAULT_WALLET_BALANCE, SEND_NFT_DEFAULT_AMOUNT } from '@src/utils/constants';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useAnalyticsContext } from '@providers';
 import { buttonIds } from '@hooks/useEnterKeyPress';
+import { withNftsFoldersContext } from '../context';
 
-export const NftDetail = (): React.ReactElement => {
-  const { inMemoryWallet } = useWalletStore();
+export const NftDetail = withNftsFoldersContext((): React.ReactElement => {
+  const {
+    inMemoryWallet,
+    walletUI: { appMode }
+  } = useWalletStore();
   const { t } = useTranslation();
   const analytics = useAnalyticsContext();
 
@@ -33,12 +37,6 @@ export const NftDetail = (): React.ReactElement => {
 
   const amount = useMemo(() => Wallet.util.calculateAssetBalance(bigintBalance, assetInfo), [assetInfo, bigintBalance]);
 
-  const nftDetailTranslation = {
-    tokenInformation: t('core.nftDetail.tokenInformation'),
-    attributes: t('core.nftDetail.attributes'),
-    setAsAvatar: t('core.nftDetail.setAsAvatar')
-  };
-
   const handleOpenSend = () => {
     // eslint-disable-next-line camelcase
     analytics.sendEventToPostHog(PostHogAction.SendClick, { trigger_point: SendFlowTriggerPoints.NFTS });
@@ -64,11 +62,11 @@ export const NftDetail = (): React.ReactElement => {
       {assetInfo && (
         <NftDetailView
           {...nftDetailSelector(assetInfo)}
+          isPopup={appMode === APP_MODE_POPUP}
           amount={amount}
-          translations={nftDetailTranslation}
           title={<h2 className={styles.secondaryTitle}>{assetInfo.nftMetadata?.name ?? assetInfo.fingerprint}</h2>}
         />
       )}
     </Drawer>
   );
-};
+});

apps/browser-extension-wallet/src/features/nfts/components/Nfts.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable unicorn/no-useless-undefined */
+/* eslint-disable unicorn/no-useless-undefined, max-statements */
 import { useAssetInfo, useRedirection } from '@hooks';
 import { useWalletStore } from '@src/stores';
 import { Button, useObservable } from '@lace/common';
@@ -8,7 +8,7 @@ import isNil from 'lodash/isNil';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './Nfts.module.scss';
-import { NftFolderItemProps, NftItemProps, NftList, NftListProps, NftsItemsTypes } from '@lace/core';
+import { ListEmptyState, NftFolderItemProps, NftItemProps, NftList, NftListProps, NftsItemsTypes } from '@lace/core';
 import { ContentLayout } from '@src/components/Layout';
 import { FundWalletBanner } from '@src/views/browser-view/components';
 import { walletRoutePaths } from '@routes';
@@ -23,6 +23,11 @@ import { RenameFolderType } from '@views/browser/features/nfts';
 import { NftFolderConfirmationModal } from '@views/browser/features/nfts/components/NftFolderConfirmationModal';
 import RemoveFolderIcon from '@assets/icons/remove-folder.component.svg';
 import { useAnalyticsContext, useCurrencyStore } from '@providers';
+import { SearchBox } from '@lace/ui';
+import { Skeleton } from 'antd';
+import { useNftSearch } from '@hooks/useNftSearch';
+
+const MIN_ASSET_COUNT_FOR_SEARCH = 10;
 
 export const Nfts = withNftsFoldersContext((): React.ReactElement => {
   const redirectToNftDetail = useRedirection<{ params: { id: string } }>(walletRoutePaths.nftDetail);
@@ -33,6 +38,7 @@ export const Nfts = withNftsFoldersContext((): React.ReactElement => {
   const { walletInfo, inMemoryWallet } = useWalletStore();
   const { t } = useTranslation();
   const assetsInfo = useAssetInfo();
+  const { isSearching, handleSearch, filteredResults } = useNftSearch(assetsInfo);
   const assetsBalance = useObservable(inMemoryWallet.balance.utxo.total$, DEFAULT_WALLET_BALANCE.utxo.total$);
   const analytics = useAnalyticsContext();
   const { fiatCurrency } = useCurrencyStore();
@@ -44,6 +50,10 @@ export const Nfts = withNftsFoldersContext((): React.ReactElement => {
     utils: { deleteRecord }
   } = useNftsFoldersContext();
 
+  const [searchValue, setSearchValue] = useState('');
+
+  const [hasRecordedAnalytics, setHasRecordedAnalytics] = useState(false);
+
   const onSelectNft = useCallback(
     (nft) => {
       analytics.sendEventToPostHog(PostHogAction.NFTsImageClick);
@@ -121,6 +131,16 @@ export const Nfts = withNftsFoldersContext((): React.ReactElement => {
     setSelectedFolderId(undefined);
   }, []);
 
+  const handleNftSearch = (searchItems: NftItemProps[], value: string) => {
+    setSearchValue(value);
+    if (!hasRecordedAnalytics) {
+      analytics.sendEventToPostHog(PostHogAction.NFTsSearchType);
+      setHasRecordedAnalytics(true);
+    }
+
+    handleSearch(searchItems, value);
+  };
+
   return (
     <>
       <ContentLayout
@@ -153,7 +173,24 @@ export const Nfts = withNftsFoldersContext((): React.ReactElement => {
         <div className={styles.nfts}>
           <div className={styles.content} data-testid="nft-list-container">
             {items.length > 0 ? (
-              <NftList items={items} rows={2} />
+              <>
+                {items.length >= MIN_ASSET_COUNT_FOR_SEARCH && (
+                  <SearchBox
+                    placeholder={t('browserView.nfts.searchPlaceholder')}
+                    onChange={(value) => handleNftSearch(nfts, value)}
+                    data-testid="nft-search-input"
+                    value={searchValue}
+                    onClear={() => setSearchValue('')}
+                  />
+                )}
+                <Skeleton loading={isSearching}>
+                  {searchValue !== '' && filteredResults.length > 0 && <NftList items={filteredResults} rows={2} />}
+                  {searchValue !== '' && filteredResults.length === 0 && (
+                    <ListEmptyState message={t('core.assetSelectorOverlay.noMatchingResult')} icon="sad-face" />
+                  )}
+                  {searchValue === '' && <NftList items={items} rows={2} />}
+                </Skeleton>
+              </>
             ) : (
               <FundWalletBanner
                 title={t('browserView.nfts.fundWalletBanner.title')}

apps/browser-extension-wallet/src/hooks/useNftSearch.ts

@@ -0,0 +1,46 @@
+import { useMemo, useState } from 'react';
+import { NftItemProps } from '@lace/core';
+import { AssetOrHandleInfoMap } from './useAssetInfo';
+import { Cardano } from '@cardano-sdk/core';
+import debounce from 'lodash/debounce';
+
+const DEBOUNCE_TIME = 1000;
+
+interface NftSearchResultProps {
+  isSearching: boolean;
+  filteredResults: NftItemProps[];
+  handleSearch: (items: NftItemProps[], searchValue: string) => void;
+}
+
+export const searchNfts = (
+  data: NftItemProps[],
+  searchValue: string,
+  assetsInfo: AssetOrHandleInfoMap
+): NftItemProps[] =>
+  data.filter(
+    (item) =>
+      item.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      item.assetId === searchValue ||
+      assetsInfo.get(Cardano.AssetId(item.assetId)).policyId === searchValue
+  );
+
+export const useNftSearch = (assetsInfo: AssetOrHandleInfoMap): NftSearchResultProps => {
+  const [isSearching, setIsSearching] = useState(false);
+  const [filteredResults, setFilteredResults] = useState<NftItemProps[]>([]);
+  const searchDebounced = useMemo(
+    () =>
+      debounce((items: NftItemProps[], searchValue: string) => {
+        const filteredNfts = searchNfts(items, searchValue, assetsInfo);
+        setFilteredResults(filteredNfts);
+        setIsSearching(false);
+      }, DEBOUNCE_TIME),
+    [assetsInfo]
+  );
+
+  const handleSearch = (items: NftItemProps[], searchValue: string) => {
+    setIsSearching(true);
+    searchDebounced(items, searchValue);
+  };
+
+  return { isSearching, filteredResults, handleSearch };
+};