Merge branch 'main' into fix/lw-10344-cleanup-analytics-event

.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

@@ -37,7 +37,10 @@ env:
 
 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

.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

.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

.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/providers/AnalyticsProvider/analyticsTracker/events.ts

@@ -16,14 +16,18 @@ export const postHogOnboardingActions: PostHogOnboardingActionsType = {
     RECOVERY_PHRASE_INTRO_WATCH_VIDEO_CLICK: PostHogAction.OnboardingCreateSaveRecoveryPhraseIntroPlayVideoClick,
     RECOVERY_PHRASE_INTRO_VIDEO_GOTIT_CLICK: PostHogAction.OnboardingCreateKeepWalletSecureGotItClick,
     RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK: PostHogAction.OnboardingCreateSaveRecoveryPhraseCopyToClipboardClick,
-    RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK: PostHogAction.OnboardingCreateEnterRecoveryPhrasePasteFromClipboardClick
+    RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK:
+      PostHogAction.OnboardingCreateEnterRecoveryPhrasePasteFromClipboardClick,
+    RECOVERY_PHRASE_COPY_READ_MORE_CLICK: PostHogAction.OnboardingCreateSaveRecoveryPhraseCopyReadMoreClick,
+    RECOVERY_PHRASE_PASTE_READ_MORE_CLICK: PostHogAction.OnboardingCreateEnterRecoveryPhrasePasteReadMoreClick
   },
   restore: {
     SETUP_OPTION_CLICK: PostHogAction.OnboardingRestoreClick,
     ENTER_WALLET: PostHogAction.OnboardingRestoreEnterWalletClick,
     ENTER_RECOVERY_PHRASE_NEXT_CLICK: PostHogAction.OnboardingRestoreEnterRecoveryPhraseNextClick,
     RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK:
-      PostHogAction.OnboardingRestoreEnterRecoveryPhrasePasteFromClipboardClick
+      PostHogAction.OnboardingRestoreEnterRecoveryPhrasePasteFromClipboardClick,
+    RECOVERY_PHRASE_PASTE_READ_MORE_CLICK: PostHogAction.OnboardingRestoreEnterRecoveryPhrasePasteReadMoreClick
   },
   hw: {
     SETUP_OPTION_CLICK: PostHogAction.OnboardingHWClick,

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts

@@ -58,7 +58,9 @@ export type PostHogActionsKeys =
   | 'RECOVERY_PHRASE_INTRO_VIDEO_GOTIT_CLICK'
   | 'RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK'
   | 'RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK'
-  | 'RECOVERY_PASSPHRASE_VERIFICATION_NEXT_CLICK';
+  | 'RECOVERY_PASSPHRASE_VERIFICATION_NEXT_CLICK'
+  | 'RECOVERY_PHRASE_COPY_READ_MORE_CLICK'
+  | 'RECOVERY_PHRASE_PASTE_READ_MORE_CLICK';
 export type PostHogOnboardingActionsValueType = Partial<Record<PostHogActionsKeys, PostHogAction>>;
 export type PostHogOnboardingActionsType = Partial<Record<OnboardingFlows, PostHogOnboardingActionsValueType>>;
 export type PostHogPersonProperties = {

apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity, sonarjs/cognitive-complexity, max-statements, sonarjs/no-duplicate-string, unicorn/no-nested-ternary */
 import React, { Suspense, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { wordlists } from 'bip39';
 import { useTimeSpentOnPage, useWalletManager } from '@hooks';
 import {
@@ -22,6 +22,9 @@ import * as process from 'process';
 import { SendOnboardingAnalyticsEvent, SetupType } from '../types';
 import { isScriptAddress } from '@cardano-sdk/wallet';
 import { getWalletFromStorage } from '@src/utils/get-wallet-from-storage';
+import { toast } from '@lace/common';
+import Copy from '@src/assets/icons/copy.component.svg';
+import Paste from '@src/assets/icons/paste.component.svg';
 
 const WalletSetupModeStep = React.lazy(() =>
   import('@lace/core').then((module) => ({ default: module.WalletSetupModeStep }))
@@ -51,6 +54,9 @@ export interface WalletSetupWizardProps {
 }
 
 const DEFAULT_MNEMONIC_LENGTH = 24;
+const COPY_PASTE_TOOLTIP_URL = `${process.env.FAQ_URL}?question=best-practices-for-using-the-copy-to-clipboard-paste-from-clipboard-recovery-phrase-features`;
+
+const twoSecondsToastDuration = 1.5;
 
 export const WalletSetupWizard = ({
   onCancel,
@@ -61,9 +67,8 @@ export const WalletSetupWizard = ({
   const [currentStep, setCurrentStep] = useState<WalletSetupSteps>(initialStep);
   const [mnemonicLength, setMnemonicLength] = useState<number>(DEFAULT_MNEMONIC_LENGTH);
   const [mnemonic, setMnemonic] = useState<string[]>([]);
-  const [resetMnemonicStage, setResetMnemonicStage] = useState<MnemonicStage | ''>('');
+  const [currentSetupMnemonicStage, setCurrentSetupMnemonicStage] = useState<MnemonicStage>('writedown');
   const [isResetMnemonicModalOpen, setIsResetMnemonicModalOpen] = useState(false);
-  const [isBackFromNextStep, setIsBackFromNextStep] = useState(false);
   const walletName = getWalletFromStorage()?.name;
   const { createWallet } = useWalletManager();
   const analytics = useAnalyticsContext();
@@ -83,6 +88,17 @@ export const WalletSetupWizard = ({
     );
   }, [mnemonicLength, setupType]);
 
+  const handleReadMoreOnClick = () => {
+    if (setupType === SetupType.RESTORE) {
+      sendAnalytics(postHogOnboardingActions.restore.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
+      return;
+    }
+
+    currentSetupMnemonicStage === 'writedown'
+      ? sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_READ_MORE_CLICK)
+      : sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
+  };
+
   const walletSetupMnemonicStepTranslations = {
     writePassphraseTitle: t('core.walletSetupMnemonicStepRevamp.writePassphraseTitle'),
     enterPassphrase: t('core.walletSetupMnemonicStepRevamp.enterPassphrase'),
@@ -92,7 +108,22 @@ export const WalletSetupWizard = ({
     passphraseError: t('core.walletSetupMnemonicStepRevamp.passphraseError'),
     enterPassphraseLength: t('core.walletSetupMnemonicStepRevamp.enterPassphraseLength'),
     copyToClipboard: t('core.walletSetupMnemonicStepRevamp.copyToClipboard'),
-    pasteFromClipboard: t('core.walletSetupMnemonicStepRevamp.pasteFromClipboard')
+    pasteFromClipboard: t('core.walletSetupMnemonicStepRevamp.pasteFromClipboard'),
+    copyPasteTooltipText: (
+      <Trans
+        i18nKey="core.walletSetupMnemonicStepRevamp.copyPasteTooltipText"
+        components={{
+          a: (
+            <a
+              href={COPY_PASTE_TOOLTIP_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleReadMoreOnClick}
+            />
+          )
+        }}
+      />
+    )
   };
 
   const walletSetupModeStepTranslations = {
@@ -189,12 +220,6 @@ export const WalletSetupWizard = ({
     moveForward();
   };
 
-  const handleCloseMnemonicResetModal = () => {
-    setIsResetMnemonicModalOpen(false);
-    setResetMnemonicStage('');
-    setIsBackFromNextStep(false);
-  };
-
   const renderedMnemonicStep = () => {
     if ([SetupType.RESTORE, SetupType.FORGOT_PASSWORD].includes(setupType)) {
       const isMnemonicSubmitEnabled = util.validateMnemonic(util.joinMnemonicWords(mnemonic));
@@ -209,20 +234,33 @@ export const WalletSetupWizard = ({
           suggestionList={wordList}
           defaultMnemonicLength={DEFAULT_MNEMONIC_LENGTH}
           onSetMnemonicLength={(value: number) => setMnemonicLength(value)}
-          onPasteFromClipboard={() =>
-            sendAnalytics(postHogOnboardingActions[setupType]?.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK)
-          }
+          onPasteFromClipboard={() => {
+            sendAnalytics(postHogOnboardingActions[setupType]?.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK);
+            toast.notify({
+              duration: twoSecondsToastDuration,
+              text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'),
+              icon: Paste
+            });
+          }}
         />
       );
     }
 
     return (
       <WalletSetupMnemonicStepRevamp
         mnemonic={mnemonic}
-        onReset={(resetStage) => {
-          setResetMnemonicStage(resetStage);
-          resetStage === 'input' ? setIsResetMnemonicModalOpen(true) : onCancel();
+        mnemonicStage={currentSetupMnemonicStage}
+        onStageChange={(nextStage) => {
+          if (nextStage === 'input') {
+            setCurrentSetupMnemonicStage(nextStage);
+            void sendAnalytics(postHogOnboardingActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK);
+          } else {
+            setIsResetMnemonicModalOpen(true);
+            void sendAnalytics(postHogOnboardingActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
+          }
         }}
+        onBack={onCancel}
+        onNext={moveForward}
         renderVideoPopupContent={({ onClose }) => (
           <MnemonicVideoPopupContent
             translations={mnemonicVideoPopupContentTranslations}
@@ -233,21 +271,26 @@ export const WalletSetupWizard = ({
             }}
           />
         )}
-        onNext={moveForward}
-        onStepNext={(mnemonicStage) => {
-          mnemonicStage === 'writedown'
-            ? sendAnalytics(postHogOnboardingActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK)
-            : sendAnalytics(postHogOnboardingActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
-        }}
         translations={walletSetupMnemonicStepTranslations}
         suggestionList={wordList}
         passphraseInfoLink={`${process.env.FAQ_URL}?question=what-happens-if-i-lose-my-recovery-phrase`}
         onWatchVideoClick={() => sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_INTRO_WATCH_VIDEO_CLICK)}
-        onCopyToClipboard={() => sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK)}
-        onPasteFromClipboard={() =>
-          sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK)
-        }
-        isBackFromNextStep={isBackFromNextStep}
+        onCopyToClipboard={() => {
+          sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK);
+          toast.notify({
+            duration: twoSecondsToastDuration,
+            text: t('core.walletSetupMnemonicStepRevamp.recoveryPhraseCopied'),
+            icon: Copy
+          });
+        }}
+        onPasteFromClipboard={() => {
+          sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK);
+          toast.notify({
+            duration: twoSecondsToastDuration,
+            text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'),
+            icon: Paste
+          });
+        }}
       />
     );
   };
@@ -265,7 +308,6 @@ export const WalletSetupWizard = ({
       {currentStep === WalletSetupSteps.Register && (
         <WalletSetupNamePasswordStepRevamp
           onBack={() => {
-            setIsBackFromNextStep(true);
             moveBack();
           }}
           onNext={handleSubmit}
@@ -280,13 +322,13 @@ export const WalletSetupWizard = ({
           visible={isResetMnemonicModalOpen}
           cancelLabel={t('browserView.walletSetup.mnemonicResetModal.cancel')}
           confirmLabel={t('browserView.walletSetup.mnemonicResetModal.confirm')}
-          onCancel={handleCloseMnemonicResetModal}
+          onCancel={() => {
+            setIsResetMnemonicModalOpen(false);
+          }}
           onConfirm={() => {
-            handleCloseMnemonicResetModal();
             setMnemonic(util.generateMnemonicWords());
-            if (resetMnemonicStage === 'writedown') {
-              moveBack();
-            }
+            setIsResetMnemonicModalOpen(false);
+            setCurrentSetupMnemonicStage('writedown');
           }}
         />
       )}