Merge remote-tracking branch 'origin/main' into feat/lw-10249-revamp-…

…multi-wallet-recovery-phrase-screen
input-output-hk · Apr 30, 2024 · c7cb91e · c7cb91e
2 parents 5e88ba4 + cc27d08
commit c7cb91e
Show file tree

Hide file tree

Showing 36 changed files with 607 additions and 453 deletions.
diff --git a/.github/workflows/build-dev-preview.yml b/.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

diff --git a/.github/workflows/ci.yml b/.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

diff --git a/.github/workflows/e2e-tests-linux.yml b/.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

diff --git a/.github/workflows/e2e-tests-win.yml b/.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

diff --git a/.github/workflows/packages-staking.yml b/.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
diff --git a/.github/workflows/post-integration.yml b/.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

diff --git a/.github/workflows/smoke-tests.yml b/.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

diff --git a/.github/workflows/staking-chromatic.yml b/.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

diff --git a/apps/browser-extension-wallet/package.json b/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",

diff --git a/apps/browser-extension-wallet/src/assets/icons/paste.component.svg b/apps/browser-extension-wallet/src/assets/icons/paste.component.svg
diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/events.ts b/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,

diff --git a/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts b/apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/types.ts
@@ -59,7 +59,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 PostHogMultiWalletActionsValueType = Partial<Record<PostHogActionsKeys, PostHogAction>>;
 export type PostHogOnboardingActionsType = Partial<Record<OnboardingFlows, PostHogOnboardingActionsValueType>>;

diff --git a/...et/src/views/browser-view/features/multi-wallet/create-wallet/steps/NewRecoveryPhrase.tsx b/...et/src/views/browser-view/features/multi-wallet/create-wallet/steps/NewRecoveryPhrase.tsx
@@ -1,6 +1,6 @@
 import { MnemonicStage, MnemonicVideoPopupContent, WalletSetupMnemonicStepRevamp } from '@lace/core';
 import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
 import { wordlists } from 'bip39';
 import { WarningModal } from '@src/views/browser-view/components';
@@ -10,27 +10,26 @@ import { useWalletManager } from '@hooks/useWalletManager';
 import { useAnalyticsContext } from '@providers/AnalyticsProvider';
 import { PostHogAction } from '@lace/common';
 import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
-import { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker';
+import { postHogMultiWalletActions, postHogOnboardingActions } from '@providers/AnalyticsProvider/analyticsTracker';
 
 const wordList = wordlists.english;
-
-interface State {
-  isResetMnemonicModalOpen: boolean;
-  resetMnemonicStage: MnemonicStage;
-}
+const COPY_PASTE_TOOLTIP_URL = `${process.env.FAQ_URL}?question=best-practices-for-using-the-copy-to-clipboard-paste-from-clipboard-recovery-phrase-features`;
 
 export const NewRecoveryPhrase = (): JSX.Element => {
   const history = useHistory();
   const { t } = useTranslation();
   const { generatedMnemonic, data } = useCreateWallet();
   const { createWallet, walletRepository } = useWalletManager();
   const analytics = useAnalyticsContext();
-  const [state, setState] = useState<State>(() => ({
-    isResetMnemonicModalOpen: false,
-    resetMnemonicStage: 'writedown'
-  }));
+  const [currentSetupMnemonicStage, setCurrentSetupMnemonicStage] = useState<MnemonicStage>('writedown');
+  const [isResetMnemonicModalOpen, setIsResetMnemonicModalOpen] = useState(false);
 
-  const [isBackFromNextStep, setIsBackFromNextStep] = useState(false);
+  const handleReadMoreOnClick = () => {
+    currentSetupMnemonicStage === 'writedown'
+      ? // TODO: LW-10251 Use multi wallet events
+        analytics.sendEventToPostHog(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_READ_MORE_CLICK)
+      : analytics.sendEventToPostHog(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
+  };
 
   const walletSetupMnemonicStepTranslations = {
     writePassphraseTitle: t('core.walletSetupMnemonicStepRevamp.writePassphraseTitle'),
@@ -41,7 +40,22 @@ export const NewRecoveryPhrase = (): JSX.Element => {
     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 mnemonicVideoPopupContentTranslations = {
@@ -59,6 +73,7 @@ export const NewRecoveryPhrase = (): JSX.Element => {
   }, [data]);
 
   const saveWallet = useCallback(async () => {
+    void analytics.sendEventToPostHog(postHogMultiWalletActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
     const { source } = await createWallet(data);
     // move this to name-password setup submit handle after order changes
     await analytics.sendEventToPostHog(PostHogAction.MultiWalletCreateEnterWalletClick);
@@ -75,10 +90,17 @@ export const NewRecoveryPhrase = (): JSX.Element => {
     <>
       <WalletSetupMnemonicStepRevamp
         mnemonic={data.mnemonic}
-        onReset={(resetStage) => {
-          setState((s) => ({ ...s, isResetMnemonicModalOpen: true, resetMnemonicStage: resetStage }));
-          resetStage === 'input' && setIsBackFromNextStep(false);
+        mnemonicStage={currentSetupMnemonicStage}
+        onStageChange={(nextStage) => {
+          if (nextStage === 'input') {
+            setCurrentSetupMnemonicStage(nextStage);
+            void analytics.sendEventToPostHog(postHogMultiWalletActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK);
+          } else {
+            setIsResetMnemonicModalOpen(true);
+          }
         }}
+        onBack={() => history.goBack()}
+        onNext={saveWallet}
         renderVideoPopupContent={({ onClose }) => (
           <MnemonicVideoPopupContent
             translations={mnemonicVideoPopupContentTranslations}
@@ -91,12 +113,6 @@ export const NewRecoveryPhrase = (): JSX.Element => {
             }}
           />
         )}
-        onNext={saveWallet}
-        onStepNext={(mnemonicStage: MnemonicStage) => {
-          mnemonicStage === 'writedown'
-            ? analytics.sendEventToPostHog(postHogMultiWalletActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK)
-            : analytics.sendEventToPostHog(postHogMultiWalletActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
-        }}
         translations={walletSetupMnemonicStepTranslations}
         suggestionList={wordList}
         passphraseInfoLink={`${process.env.FAQ_URL}?question=what-happens-if-i-lose-my-recovery-phrase`}
@@ -109,32 +125,20 @@ export const NewRecoveryPhrase = (): JSX.Element => {
         onPasteFromClipboard={() =>
           analytics.sendEventToPostHog(postHogMultiWalletActions.create.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK)
         }
-        isBackFromNextStep={isBackFromNextStep}
       />
-      {state.isResetMnemonicModalOpen && (
+      {isResetMnemonicModalOpen && (
         <WarningModal
           header={t('browserView.walletSetup.mnemonicResetModal.header')}
           content={t('browserView.walletSetup.mnemonicResetModal.content')}
-          visible={state.isResetMnemonicModalOpen}
+          visible={isResetMnemonicModalOpen}
           cancelLabel={t('browserView.walletSetup.mnemonicResetModal.cancel')}
           confirmLabel={t('browserView.walletSetup.mnemonicResetModal.confirm')}
           onCancel={() => {
-            setState((s) => ({
-              ...s,
-              isResetMnemonicModalOpen: false
-            }));
+            setIsResetMnemonicModalOpen(false);
           }}
           onConfirm={() => {
-            if (state.resetMnemonicStage === 'writedown') {
-              history.goBack();
-              return;
-            }
-
-            setState({
-              resetMnemonicStage: 'writedown',
-              isResetMnemonicModalOpen: false
-            });
-
+            setIsResetMnemonicModalOpen(false);
+            setCurrentSetupMnemonicStage('writedown');
             generatedMnemonic();
           }}
         />

diff --git a/...c/views/browser-view/features/multi-wallet/restore-wallet/steps/RestoreRecoveryPhrase.tsx b/...c/views/browser-view/features/multi-wallet/restore-wallet/steps/RestoreRecoveryPhrase.tsx
@@ -1,6 +1,6 @@
 import { WalletSetupMnemonicVerificationStepRevamp } from '@lace/core';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { wordlists } from 'bip39';
 import { Wallet } from '@lace/cardano';
 import { useHistory } from 'react-router-dom';
@@ -18,6 +18,7 @@ import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
 
 const wordList = wordlists.english;
 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`;
 
 export const RestoreRecoveryPhrase = (): JSX.Element => {
   const { t } = useTranslation();
@@ -33,8 +34,8 @@ export const RestoreRecoveryPhrase = (): JSX.Element => {
   const [mnemonicLength, setMnemonicLength] = useState<number>(DEFAULT_MNEMONIC_LENGTH);
 
   useEffect(() => {
-    setMnemonic(Array.from({ length: mnemonicLength }).map(() => ''));
-  }, [mnemonicLength]);
+    setMnemonic(Array.from({ length: mnemonicLength }, () => ''));
+  }, [mnemonicLength, setMnemonic]);
 
   const clearSecrets = useCallback(() => {
     for (let i = 0; i < data.mnemonic.length; i++) {
@@ -43,6 +44,10 @@ export const RestoreRecoveryPhrase = (): JSX.Element => {
     data.password = '';
   }, [data]);
 
+  const handleReadMoreOnClick = () => {
+    void analytics.sendEventToPostHog(postHogOnboardingActions.restore.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
+  };
+
   const walletSetupMnemonicStepTranslations = {
     writePassphraseTitle: t('core.walletSetupMnemonicStepRevamp.writePassphraseTitle'),
     enterPassphrase: t('core.walletSetupMnemonicStepRevamp.enterPassphrase'),
@@ -52,7 +57,22 @@ export const RestoreRecoveryPhrase = (): JSX.Element => {
     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 onSubmitForm = useCallback(async () => {