Merge branch 'main' into feat/lw-10261-track-cancel-event-dapp-connector

.github/workflows/build-dev-preview.yml

@@ -5,7 +5,10 @@ on:
 jobs:
   build:
     name: Build + test
-    runs-on: ubuntu-22.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/ci.yml

@@ -13,7 +13,10 @@ permissions:
 jobs:
   buildAndTest:
     name: Build & Test
-    runs-on: ubuntu-20.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

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

@@ -34,10 +34,14 @@ env:
   NETWORK: ${{ github.event.inputs.network || 'preprod' }}
   RUN: ${{ github.run_number }}
   DISPLAY: ':99.0'
+  NODE_OPTIONS: --max-old-space-size=16384
 
 jobs:
   tests:
-    runs-on: ubuntu-22.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -70,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}
@@ -79,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

@@ -36,7 +36,10 @@ env:
 
 jobs:
   build-extension-linux:
-    runs-on: ubuntu-22.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -151,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/packages-staking.yml

@@ -15,11 +15,11 @@ on:
 jobs:
   build_staking:
     name: Build Staking Center
-    runs-on: ubuntu-22.04
-    container: mcr.microsoft.com/playwright:v1.32.2-jammy
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
-      - name: Setup Build Essential
-        run: apt-get update && apt-get install build-essential -y
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -46,19 +46,3 @@ jobs:
         run: yarn workspace @lace/staking test:unit
       - name: Build Staking dist
         run: yarn workspace @lace/staking build
-#        TODO fix ladle build
-#      - name: Build Ladle
-#        run: yarn workspace @lace/staking story:build
-#      - name: Upload Ladle artifacts
-#        uses: actions/upload-artifact@v4
-#        with:
-#          name: staking-ladle
-#          path: packages/staking/build
-#      - name: Run visual regression
-#        continue-on-error: true
-#        run: yarn workspace @lace/staking test:vr
-#      - name: Upload visual regression
-#        uses: actions/upload-artifact@v4
-#        with:
-#          name: staking-visual-regression
-#          path: packages/staking/.lostpixel

.github/workflows/post-integration.yml

@@ -7,7 +7,10 @@ on:
 
 jobs:
   publish:
-    runs-on: ubuntu-20.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/smoke-tests.yml

@@ -17,7 +17,10 @@ env:
 jobs:
   smokeTests:
     name: Smoke Tests
-    runs-on: ubuntu-22.04
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -54,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 }}

.github/workflows/staking-chromatic.yml

@@ -14,7 +14,10 @@ on:
 jobs:
   chromatic-deployment:
     if: github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

apps/browser-extension-wallet/package.json

@@ -39,14 +39,14 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@cardano-sdk/cardano-services-client": "0.19.1",
-    "@cardano-sdk/core": "0.30.1",
-    "@cardano-sdk/dapp-connector": "0.12.15",
-    "@cardano-sdk/input-selection": "0.12.28",
-    "@cardano-sdk/tx-construction": "0.18.4",
+    "@cardano-sdk/cardano-services-client": "0.19.2",
+    "@cardano-sdk/core": "0.30.2",
+    "@cardano-sdk/dapp-connector": "0.12.16",
+    "@cardano-sdk/input-selection": "0.12.29",
+    "@cardano-sdk/tx-construction": "0.18.5",
     "@cardano-sdk/util": "0.15.1",
-    "@cardano-sdk/wallet": "0.37.2",
-    "@cardano-sdk/web-extension": "0.27.2",
+    "@cardano-sdk/wallet": "0.37.3",
+    "@cardano-sdk/web-extension": "0.27.3",
     "@emurgo/cip14-js": "~3.0.1",
     "@koralabs/handles-public-api-interfaces": "^1.6.6",
     "@lace/cardano": "0.1.0",

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/useEnterKeyPress.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-lonely-if */
 /* eslint-disable sonarjs/no-duplicate-string */
 import { walletRoutePaths } from '@routes/wallet-paths';
 import { useEffect } from 'react';