Merge branch 'main' into feat/sanchonet

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

@@ -46,36 +46,13 @@ jobs:
         run: ./decrypt_secret.sh
         env:
           WALLET_1_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
-      - name: Downgrade chrome
-        run: |
-          wget -q -O /tmp/chrome.deb http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_120.0.6099.216-1_amd64.deb \
-            && sudo apt install -y --allow-downgrades /tmp/chrome.deb \
-            && rm /tmp/chrome.deb
       - name: Build dist version of Lace
         uses: ./.github/shared/build
         with:
           LACE_EXTENSION_KEY: ${{ secrets.MANIFEST_PUBLIC_KEY }}
       - name: Start XVFB
         run: |
           Xvfb :99 &
-      - name: setup chromedriver
-        uses: nanasess/setup-chromedriver@v2
-        with:
-          chromedriver-version: '120.0.6099.216'
-      - name: Start Chrome driver
-        run: |
-          if [ ${BROWSER} == "chrome" ]; then
-            chromedriver -port=4444 &
-          else
-            echo "Skipping start of ChromeDriver"
-          fi
-      - name: Start Edge driver
-        run: |
-          if [ ${BROWSER} == "edge" ]; then
-            ${EDGEWEBDRIVER}/msedgedriver -port=4444 &
-          else
-            echo "Skipping start of EdgeDriver"
-          fi
       - name: Execute E2E tests
         id: e2e-tests
         working-directory: ./packages/e2e-tests

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

@@ -99,20 +99,6 @@ jobs:
       - name: Install dependencies
         working-directory: ./packages/e2e-tests
         run: yarn config set httpTimeout 300000 && yarn install --check-cache --immutable
-      - name: Start Chrome driver
-        run: |
-          if [ ${BROWSER} == "chrome" ]; then
-            ${CHROMEWEBDRIVER}\chromedriver.exe -port=4444 &
-          else
-            echo "Skipping start of ChromeDriver"
-          fi
-      - name: Start Edge driver
-        run: |
-          if [ ${BROWSER} == "edge" ]; then
-            ${EDGEWEBDRIVER}\msedgedriver.exe -port=4444 &
-          else
-            echo "Skipping start of EdgeDriver"
-          fi
       - name: Execute E2E tests
         working-directory: ./packages/e2e-tests
         id: e2e-tests

.github/workflows/smoke-tests.yml

@@ -29,13 +29,6 @@ jobs:
       - name: Start XVFB
         run: |
           Xvfb :99 &
-      - name: Start Chrome driver
-        run: |
-          if [ ${BROWSER} == "chrome" ]; then
-            ${CHROMEWEBDRIVER}/chromedriver -port=4444 &
-          else
-            echo "Skipping start of ChromeDriver"
-          fi
       - name: Execute E2E tests
         id: e2e-tests
         working-directory: ./packages/e2e-tests

.github/workflows/staking-chromatic.yml

@@ -0,0 +1,67 @@
+name: Lace Staking Chromatic
+
+on:
+  pull_request:
+    paths:
+      - packages/staking/**
+  push:
+    paths:
+      - packages/staking/**
+    branches:
+      - main
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: 🧰 Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: 'yarn'
+
+      - name: 📝 Cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ~/.yarn/berry/cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: 💽 Install dependencies
+        run: yarn --immutable --inline-builds
+
+      - name: 🧑‍🔬 Build
+        run: yarn workspaces foreach -Rpt -v --from '@lace/staking' run build
+
+      - name: 🧑‍🔬 Linter
+        working-directory: ./packages/staking
+        run: yarn lint
+
+      - name: 👩‍🔬 Tests
+        working-directory: ./packages/staking
+        run: yarn test-storybook:ci
+
+      - name: 🌍 Publish to Chromatic
+        if: github.ref != 'refs/heads/main'
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_LACE_STAKING_TOKEN }}
+          workingDir: ./packages/staking
+          buildScriptName: build-storybook
+          onlyChanged: true
+
+      - name: 🌍 Publish to Chromatic and auto accept changes
+        if: github.ref == 'refs/heads/main'
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_LACE_STAKING_TOKEN }}
+          autoAcceptChanges: true
+          workingDir: ./packages/staking
+          onlyChanged: true

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 import { Button, PostHogAction } from '@lace/common';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,6 @@ import { UserPromptService } from '@lib/scripts/background/services';
 import { DAPP_CHANNELS } from '@src/utils/constants';
 import { of, take } from 'rxjs';
 import { runtime } from 'webextension-polyfill';
-import { Skeleton } from 'antd';
 
 export const ConfirmTransaction = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -87,17 +86,13 @@ export const ConfirmTransaction = (): React.ReactElement => {
 
   useOnBeforeUnload(disallowSignTx);
 
-  const onError = useCallback(() => {
-    setConfirmTransactionError(true);
-  }, []);
-
   return (
     <Layout
       layoutClassname={cn(confirmTransactionError && styles.layoutError)}
       pageClassname={styles.spaceBetween}
       title={!confirmTransactionError && txType && t(`core.${txType}.title`)}
     >
-      {req && txType ? <ConfirmTransactionContent txType={txType} onError={onError} /> : <Skeleton loading />}
+      {req && txType && <ConfirmTransactionContent txType={txType} onError={() => setConfirmTransactionError(true)} />}
       {!confirmTransactionError && (
         <div className={styles.actions}>
           <Button

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/DappTransactionContainer.tsx

@@ -20,7 +20,8 @@ export const DappTransactionContainer = withAddressBookContext(({ errorMessage }
     walletInfo,
     inMemoryWallet,
     blockchainProvider: { assetProvider },
-    walletUI: { cardanoCoin }
+    walletUI: { cardanoCoin },
+    walletState
   } = useWalletStore();
   const {
     signTxRequest: { request },
@@ -52,7 +53,8 @@ export const DappTransactionContainer = withAddressBookContext(({ errorMessage }
     createAssetList,
     createMintedAssetList,
     req: request,
-    walletInfo
+    walletInfo,
+    walletState
   });
 
   // TODO: merge with the upper skeleton check

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/__tests__/ConfirmTransaction.test.tsx

@@ -7,7 +7,6 @@ const mockUseWalletStore = jest.fn();
 const error = 'error in getSignTxData';
 const mockConsumeRemoteApi = jest.fn();
 const mockConfirmTransactionContent = jest.fn(() => <span data-testid="ConfirmTransactionContent" />);
-const mockGetTitleKey = jest.fn();
 const mockGetTxType = jest.fn();
 const mockUseDisallowSignTx = jest.fn();
 const mockUseViewsFlowContext = jest.fn();
@@ -89,7 +88,6 @@ jest.mock('../utils.ts', () => {
   return {
     __esModule: true,
     ...original,
-    getTitleKey: mockGetTitleKey,
     getTxType: mockGetTxType
   };
 });
@@ -163,8 +161,6 @@ describe('Testing ConfirmTransaction component', () => {
     }));
     mockGetTxType.mockReset();
     mockGetTxType.mockReturnValue(txType);
-    mockGetTitleKey.mockReset();
-    mockGetTitleKey.mockImplementation((val) => val);
 
     const signTxData = { tx: { id: 'test-tx-id' } };
     mockConsumeRemoteApi.mockReset();

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/__tests__/hooks.test.tsx

@@ -32,6 +32,7 @@ import { AddressListType } from '@src/views/browser-view/features/activity';
 import { WalletInfo } from '@src/types';
 import * as Core from '@cardano-sdk/core';
 import { TransactionWitnessRequest } from '@cardano-sdk/web-extension';
+import { mockWalletState } from '@src/utils/mocks/test-helpers';
 
 jest.mock('@stores', () => ({
   ...jest.requireActual<any>('@stores'),
@@ -333,7 +334,8 @@ describe('Testing hooks', () => {
           addressList,
           walletInfo,
           createAssetList,
-          createMintedAssetList
+          createMintedAssetList,
+          walletState: mockWalletState
         })
       );
     });
@@ -371,7 +373,8 @@ describe('Testing hooks', () => {
           addressList,
           walletInfo,
           createAssetList,
-          createMintedAssetList
+          createMintedAssetList,
+          walletState: mockWalletState
         })
       );
     });

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/hooks.ts

@@ -20,6 +20,8 @@ import { AddressListType } from '@src/views/browser-view/features/activity';
 import { allowSignTx, pubDRepKeyToHash, disallowSignTx } from './utils';
 import { useWalletStore } from '@stores';
 import { TransactionWitnessRequest } from '@cardano-sdk/web-extension';
+import { useComputeTxCollateral } from '@hooks/useComputeTxCollateral';
+import { ObservableWalletState } from '@hooks/useWalletState';
 
 export const useCreateAssetList = ({
   assets,
@@ -102,6 +104,7 @@ const getAssetNameFromMintMetadata = (asset: MintedAsset, metadata: Wallet.Carda
     return typeof assetMetadataName === 'string' ? assetMetadataName : undefined;
   }
 };
+
 export const useCreateMintedAssetList = ({
   assets,
   outputs,
@@ -158,7 +161,7 @@ export const useCreateMintedAssetList = ({
 
 export const useDisallowSignTx = (
   req: TransactionWitnessRequest<Wallet.WalletMetadata, Wallet.AccountMetadata>
-): ((close?: boolean) => void) => useCallback((close?: boolean) => disallowSignTx(req, close), [req]);
+): ((close?: boolean) => void) => useCallback(() => disallowSignTx(req), [req]);
 
 export const useAllowSignTx = (
   req: TransactionWitnessRequest<Wallet.WalletMetadata, Wallet.AccountMetadata>
@@ -180,7 +183,7 @@ export const useSignWithHardwareWallet = (
       await HardwareLedger.LedgerKeyAgent.establishDeviceConnection(Wallet.KeyManagement.CommunicationType.Web);
       allow();
     } catch {
-      disallow();
+      disallow(false);
       redirectToSignFailure({});
     }
   }, [allow, disallow, redirectToSignFailure]);
@@ -193,18 +196,22 @@ export const useTxSummary = ({
   addressList,
   walletInfo,
   createAssetList,
-  createMintedAssetList
+  createMintedAssetList,
+  walletState
 }: {
   addressList: AddressListType[];
   walletInfo: WalletInfo;
   req: TransactionWitnessRequest<Wallet.WalletMetadata, Wallet.AccountMetadata>;
   createAssetList: (txAssets: Wallet.Cardano.TokenMap) => Wallet.Cip30SignTxAssetItem[];
   createMintedAssetList: (txAssets: AssetsMintedInspection) => Wallet.Cip30SignTxAssetItem[];
+  walletState: ObservableWalletState | null;
 }): Wallet.Cip30SignTxSummary | undefined => {
   const [txSummary, setTxSummary] = useState<Wallet.Cip30SignTxSummary | undefined>();
+  const tx = useMemo(() => req?.transaction.toCore(), [req?.transaction]);
+  const txCollateral = useComputeTxCollateral(walletState, tx);
 
   useEffect(() => {
-    if (!req) {
+    if (!tx) {
       setTxSummary(void 0);
       return;
     }
@@ -214,7 +221,6 @@ export const useTxSummary = ({
         burned: assetsBurnedInspector
       });
 
-      const tx = req.transaction.toCore();
       const { minted, burned } = await inspector(tx as Wallet.Cardano.HydratedTx);
       const isMintTransaction = minted.length > 0 || burned.length > 0;
 
@@ -250,11 +256,12 @@ export const useTxSummary = ({
         outputs: txSummaryOutputs,
         type: txType,
         mintedAssets: createMintedAssetList(minted),
-        burnedAssets: createMintedAssetList(burned)
+        burnedAssets: createMintedAssetList(burned),
+        collateral: txCollateral ? Wallet.util.lovelacesToAdaString(txCollateral.toString()) : undefined
       });
     };
     getTxSummary();
-  }, [req, walletInfo.addresses, createAssetList, createMintedAssetList, setTxSummary, addressList]);
+  }, [tx, walletInfo.addresses, createAssetList, createMintedAssetList, setTxSummary, addressList, txCollateral]);
 
   return txSummary;
 };
@@ -300,9 +307,9 @@ export const useCexplorerBaseUrl = (): string => {
   const { CEXPLORER_BASE_URL, CEXPLORER_URL_PATHS } = config();
 
   useEffect(() => {
-    const newUrl = `${CEXPLORER_BASE_URL[environmentName]}/${CEXPLORER_URL_PATHS.Tx}`;
-    if (newUrl !== explorerBaseUrl) {
-      setExplorerBaseUrl(newUrl);
+    const explorerUrl = `${CEXPLORER_BASE_URL[environmentName]}/${CEXPLORER_URL_PATHS.Tx}`;
+    if (explorerUrl !== explorerBaseUrl) {
+      setExplorerBaseUrl(explorerUrl);
     }
   }, [CEXPLORER_BASE_URL, CEXPLORER_URL_PATHS.Tx, environmentName, explorerBaseUrl]);
 

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/proposal-procedures/UpdateCommitteeActionContainer.tsx

@@ -5,7 +5,6 @@ import { UpdateCommitteeAction } from '@lace/core';
 import { useWalletStore } from '@src/stores';
 import { SignTxData } from '../types';
 import { useCexplorerBaseUrl } from '../hooks';
-import { drepIDasBech32FromHash } from '../utils';
 
 interface Props {
   dappInfo: SignTxData['dappInfo'];

apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx

@@ -20,7 +20,8 @@ import { BrowserViewSections } from '@lib/scripts/types';
 import { useWalletActivities } from '@hooks/useWalletActivities';
 import {
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
-  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
+  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY,
+  STAKING_BROWSER_PREFERENCES_LS_KEY
 } from '@utils/constants';
 import { withSignTxConfirmation } from '@lib/wallet-api-ui';
 import { isMultidelegationSupportedByDevice } from '@views/browser/features/staking';
@@ -86,6 +87,10 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     multidelegationFirstVisitSincePortfolioPersistence,
     { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
   ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
+
+  const [stakingBrowserPreferencesPersistence, { updateLocalStorage: setStakingBrowserPreferencesPersistence }] =
+    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY);
+
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
@@ -97,6 +102,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     <OutsideHandlesProvider
       {...{
         analytics,
+        stakingBrowserPreferencesPersistence,
+        setStakingBrowserPreferencesPersistence,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
         multidelegationFirstVisitSincePortfolioPersistence,