LW-10244: Port HW onboarding revamp to multi wallet (#1130)

* feat: revamp multi wallet connect flow

* fix: account selection options behind modal

* fix: redirect to assets after successfull HW restoration

* test: fix multi-wallet hardware flow tests

* fix: handle properly the case of rejecting key export

* fix: update lock file

* fix: typescript error in tests

* test: fix failing multi-wallet hardware flow tests

* fix: translations change

---------

Co-authored-by: John Oshalusi <john.oshalusi@iohk.io>
Co-authored-by: januszjanus <janusz.janus@iohk.io>

Author: 3 people

apps/browser-extension-wallet/package.json

@@ -88,6 +88,7 @@
     "zustand": "3.5.14"
   },
   "devDependencies": {
+    "@cardano-sdk/hardware-ledger": "0.9.3",
     "@emurgo/cardano-message-signing-asmjs": "1.0.1",
     "@types/dotenv-webpack": "7.0.3",
     "@types/pluralize": "^0.0.29",

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -188,7 +188,7 @@
   "browserView.onboarding.errorDialog.messageDeviceDisconnected": "Please check your hardware device connection and for Ledger, if Cardano App is open",
   "browserView.onboarding.errorDialog.messageGeneric": "Try connecting you device again",
   "browserView.onboarding.errorDialog.messagePublicKeyExportRejected": "Public key export unsuccessful. User declined action on hardware wallet device.",
-  "browserView.onboarding.errorDialog.title": "Opps! Something went wrong",
+  "browserView.onboarding.errorDialog.title": "Oops! Something went wrong",
   "browserView.onboarding.hardwareWalletSendTransition.cancel": "Cancel",
   "browserView.onboarding.hardwareWalletSendTransition.description": "Ledger transactions require confirmation in advanced view.",
   "browserView.onboarding.hardwareWalletSendTransition.ok": "Ok",

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

@@ -56,17 +56,26 @@ export const postHogMultiWalletActions: PostHogMultiWalletActionsType = {
     RECOVERY_PHRASE_INTRO_VIDEO_GOTIT_CLICK: PostHogAction.MultiWalletCreateKeepWalletSecureGotItClick,
     RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK: PostHogAction.MultiWalletCreateSaveRecoveryPhraseCopyToClipboardClick,
     RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK:
-      PostHogAction.MultiWalletCreateEnterRecoveryPhrasePasteFromClipboardClick
+      PostHogAction.MultiWalletCreateEnterRecoveryPhrasePasteFromClipboardClick,
+    WALLET_ADDED: PostHogAction.MultiWalletCreateAdded
   },
   restore: {
     SETUP_OPTION_CLICK: PostHogAction.MultiWalletRestoreClick,
     ENTER_RECOVERY_PHRASE_NEXT_CLICK: PostHogAction.MultiWalletRestoreEnterRecoveryPhraseNextClick,
     ENTER_WALLET: PostHogAction.MultiWalletRestoreEnterWalletClick,
     RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK:
       PostHogAction.MultiWalletRestoreEnterRecoveryPhrasePasteFromClipboardClick,
-    RECOVERY_PHRASE_PASTE_READ_MORE_CLICK: PostHogAction.MultiWalletCreateSaveRecoveryPhrasePasteReadMoreClick
+    RECOVERY_PHRASE_PASTE_READ_MORE_CLICK: PostHogAction.MultiWalletCreateSaveRecoveryPhrasePasteReadMoreClick,
+    WALLET_ADDED: PostHogAction.MultiWalletRestoreAdded,
+    HD_WALLET: PostHogAction.MultiWalletRestoreHdWallet
   },
   hw: {
-    SETUP_OPTION_CLICK: PostHogAction.MultiWalletHWClick
+    SETUP_OPTION_CLICK: PostHogAction.MultiWalletHWClick,
+    CONNECT_HW_VIEW: PostHogAction.MultiWalletHWConnectView,
+    HW_POPUP_CONNECT_CLICK: PostHogAction.MultiWalletHWPopupConnectClick,
+    CONNECT_HW_TRY_AGAIN_CLICK: PostHogAction.MultiWalletHWConnectTryAgainClick,
+    SETUP_HW_ACCOUNT_NO_CLICK: PostHogAction.MultiWalletHWSetupWalletAccountNoClick,
+    ENTER_WALLET: PostHogAction.MultiWalletHWEnterWalletClick,
+    WALLET_ADDED: PostHogAction.MultiWalletHWAdded
   }
 };

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

@@ -61,10 +61,12 @@ export type PostHogActionsKeys =
   | 'RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK'
   | 'RECOVERY_PASSPHRASE_VERIFICATION_NEXT_CLICK'
   | 'RECOVERY_PHRASE_COPY_READ_MORE_CLICK'
-  | 'RECOVERY_PHRASE_PASTE_READ_MORE_CLICK';
+  | 'RECOVERY_PHRASE_PASTE_READ_MORE_CLICK'
+  | 'WALLET_ADDED'
+  | 'HD_WALLET';
 export type PostHogOnboardingActionsValueType = Partial<Record<PostHogActionsKeys, PostHogAction>>;
+export type PostHogOnboardingActionsType = Record<OnboardingFlows, PostHogOnboardingActionsValueType>;
 export type PostHogMultiWalletActionsValueType = Partial<Record<PostHogActionsKeys, PostHogAction>>;
-export type PostHogOnboardingActionsType = Partial<Record<OnboardingFlows, PostHogOnboardingActionsValueType>>;
 export type PostHogMultiWalletActionsType = Record<MultiWalletFlows, PostHogMultiWalletActionsValueType>;
 export type PostHogPersonProperties = {
   $set: {

apps/browser-extension-wallet/src/routes/wallet-paths.ts

@@ -31,9 +31,8 @@ export const walletRoutePaths = {
     hardware: {
       root: '/new-wallet/hardware',
       connect: '/new-wallet/hardware/connect',
-      select: '/new-wallet/hardware/select',
-      name: '/new-wallet/hardware/name',
-      allDone: '/new-wallet/hardware/all-done'
+      setup: '/new-wallet/hardware/setup',
+      create: '/new-wallet/hardware/create'
     },
     restore: {
       root: '/new-wallet/restore',

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable unicorn/no-null */
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 import { Route, Switch, useHistory, useRouteMatch } from 'react-router-dom';
 import { Modal } from 'antd';
 
@@ -18,101 +18,38 @@ import { CreateWallet } from './create-wallet';
 import { HardwareWallet } from './hardware-wallet';
 import { RestoreWallet } from './restore-wallet';
 import { walletRoutePaths } from '@routes';
-import { useWalletManager } from '@hooks';
 import { Subject } from 'rxjs';
 import { Wallet } from '@lace/cardano';
-import { NavigationButton, PostHogAction, toast } from '@lace/common';
+import { NavigationButton } from '@lace/common';
 import { useBackgroundPage } from '@providers/BackgroundPageProvider';
-import { Providers } from './hardware-wallet/types';
-import { TOAST_DEFAULT_DURATION } from '@hooks/useActionExecution';
-import { useTranslation } from 'react-i18next';
-import { WalletConflictError } from '@cardano-sdk/web-extension';
-import { useAnalyticsContext } from '@providers';
-import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
 
 const { newWallet } = walletRoutePaths;
 
-const createWallet = (): Promise<void> => Promise.resolve(void 0);
-
-interface ConfirmationDialog {
-  shouldShowDialog$: Subject<boolean>;
+interface Props {
+  shouldShowConfirmationDialog$: Subject<boolean>;
 }
 
-export const SetupHardwareWallet = ({ shouldShowDialog$ }: ConfirmationDialog): JSX.Element => {
-  const { t } = useTranslation();
-  const { connectHardwareWallet, createHardwareWallet, walletRepository } = useWalletManager();
-  const analytics = useAnalyticsContext();
-  const disconnectHardwareWallet$ = useMemo(() => new Subject<USBConnectionEvent>(), []);
-
-  const hardwareWalletProviders = useMemo(
-    (): Providers => ({
-      connectHardwareWallet,
-      disconnectHardwareWallet$,
-      shouldShowDialog$,
-      createWallet: async ({ account, connection, model, name }) => {
-        try {
-          const { source } = await createHardwareWallet({
-            connectedDevice: model,
-            deviceConnection: connection,
-            name,
-            accountIndex: account
-          });
-          await analytics.sendEventToPostHog(PostHogAction.MultiWalletHWAdded, {
-            // eslint-disable-next-line camelcase
-            $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletRepository) }
-          });
-          await analytics.sendMergeEvent(source.account.extendedAccountPublicKey);
-        } catch (error) {
-          if (error instanceof WalletConflictError) {
-            toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('multiWallet.walletAlreadyExists') });
-          } else {
-            throw error;
-          }
-        }
-      }
-    }),
-    [
-      connectHardwareWallet,
-      createHardwareWallet,
-      disconnectHardwareWallet$,
-      shouldShowDialog$,
-      t,
-      analytics,
-      walletRepository
-    ]
-  );
-
-  useEffect(() => {
-    const onHardwareWalletDisconnect = (event: USBConnectionEvent) => {
-      disconnectHardwareWallet$.next(event);
-    };
-
-    navigator.usb.addEventListener('disconnect', onHardwareWalletDisconnect);
-
-    return () => {
-      navigator.usb.removeEventListener('disconnect', onHardwareWalletDisconnect);
-      disconnectHardwareWallet$.complete();
-    };
-  }, [disconnectHardwareWallet$]);
-
-  return <HardwareWallet providers={hardwareWalletProviders} />;
-};
+export const SetupHardwareWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => (
+  <HardwareWallet
+    providers={{
+      shouldShowConfirmationDialog$
+    }}
+  />
+);
 
-export const SetupCreateWallet = (confirmationDialog: ConfirmationDialog): JSX.Element => (
+export const SetupCreateWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => (
   <CreateWallet
     providers={{
-      createWallet,
       generateMnemonicWords: Wallet.KeyManagement.util.generateMnemonicWords,
-      confirmationDialog
+      shouldShowConfirmationDialog$
     }}
   />
 );
 
-export const SetupRestoreWallet = (confirmationDialog: ConfirmationDialog): JSX.Element => (
+export const SetupRestoreWallet = ({ shouldShowConfirmationDialog$ }: Props): JSX.Element => (
   <RestoreWallet
     providers={{
-      createWallet,
-      confirmationDialog
+      shouldShowConfirmationDialog$
     }}
   />
 );
@@ -136,15 +73,15 @@ const Component = (): JSX.Element => {
         <Switch>
           <Route
             path={newWallet.create.root}
-            render={() => <SetupCreateWallet shouldShowDialog$={shouldShowDialog$} />}
+            render={() => <SetupCreateWallet shouldShowConfirmationDialog$={shouldShowDialog$} />}
           />
           <Route
             path={newWallet.hardware.root}
-            render={() => <SetupHardwareWallet shouldShowDialog$={shouldShowDialog$} />}
+            render={() => <SetupHardwareWallet shouldShowConfirmationDialog$={shouldShowDialog$} />}
           />
           <Route
             path={newWallet.restore.root}
-            render={() => <SetupRestoreWallet shouldShowDialog$={shouldShowDialog$} />}
+            render={() => <SetupRestoreWallet shouldShowConfirmationDialog$={shouldShowDialog$} />}
           />
           <Route exact path={`${path}/`} component={Home} />
         </Switch>

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/CreateWallet.test.tsx

@@ -60,18 +60,14 @@ describe('Multi Wallet Setup/Create Wallet', () => {
   let providers = {} as {
     createWallet: jest.Mock;
     generateMnemonicWords: jest.Mock;
-    confirmationDialog: {
-      shouldShowDialog$: BehaviorSubject<boolean>;
-    };
+    shouldShowConfirmationDialog$: BehaviorSubject<boolean>;
   };
 
   beforeEach(() => {
     providers = {
       createWallet: jest.fn(),
       generateMnemonicWords: jest.fn(),
-      confirmationDialog: {
-        shouldShowDialog$: new BehaviorSubject(false)
-      }
+      shouldShowConfirmationDialog$: new BehaviorSubject(false)
     };
   });
 
@@ -112,15 +108,15 @@ describe('Multi Wallet Setup/Create Wallet', () => {
       </AppSettingsProvider>
     );
 
-    expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(false);
+    expect(await firstValueFrom(providers.shouldShowConfirmationDialog$)).toBe(false);
 
     const nextButton = getNextButton();
     fireEvent.click(nextButton);
-    expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(true);
+    expect(await firstValueFrom(providers.shouldShowConfirmationDialog$)).toBe(true);
 
     const backButton = getBackButton();
     fireEvent.click(backButton);
     fireEvent.click(screen.queryByTestId('delete-address-modal-confirm'));
-    expect(await firstValueFrom(providers.confirmationDialog.shouldShowDialog$)).toBe(false);
+    expect(await firstValueFrom(providers.shouldShowConfirmationDialog$)).toBe(false);
   });
 });

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx

@@ -1,6 +1,6 @@
 import { CreateWalletParams } from '@hooks';
-import { PostHogAction } from '@lace/common';
 import { walletRoutePaths } from '@routes';
+import { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker';
 import React, { createContext, useContext, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useHotWalletCreation } from '../useHotWalletCreation';
@@ -58,14 +58,14 @@ export const CreateWalletProvider = ({ children, providers }: Props): React.Reac
   };
 
   const setFormDirty = (dirty: boolean) => {
-    providers.confirmationDialog.shouldShowDialog$.next(dirty);
+    providers.shouldShowConfirmationDialog$.next(dirty);
   };
 
   const finalizeWalletCreation = async () => {
     const wallet = await createHotWallet();
     await sendPostWalletAddAnalytics({
       extendedAccountPublicKey: wallet.source.account.extendedAccountPublicKey,
-      walletAddedPostHogAction: PostHogAction.MultiWalletCreateAdded
+      walletAddedPostHogAction: postHogMultiWalletActions.create.WALLET_ADDED
     });
     clearSecrets();
   };

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/types.ts

@@ -7,9 +7,6 @@ export interface Data {
 }
 
 export interface Providers {
-  createWallet: (params: Data) => Promise<void>;
   generateMnemonicWords: () => string[];
-  confirmationDialog: {
-    shouldShowDialog$: Subject<boolean>;
-  };
+  shouldShowConfirmationDialog$: Subject<boolean>;
 }

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/ErrorDialog.tsx

@@ -0,0 +1,21 @@
+import { makeErrorDialog } from '@views/browser/features/wallet-setup/components/HardwareWalletFlow';
+import { ErrorDialogCode } from './types';
+
+const commonErrorDialogTranslationKeys = {
+  title: 'browserView.onboarding.errorDialog.title' as const,
+  confirm: 'browserView.onboarding.errorDialog.cta' as const
+};
+export const ErrorDialog = makeErrorDialog<ErrorDialogCode>({
+  [ErrorDialogCode.DeviceDisconnected]: {
+    ...commonErrorDialogTranslationKeys,
+    description: 'browserView.onboarding.errorDialog.messageDeviceDisconnected'
+  },
+  [ErrorDialogCode.PublicKeyExportRejected]: {
+    ...commonErrorDialogTranslationKeys,
+    description: 'browserView.onboarding.errorDialog.messagePublicKeyExportRejected'
+  },
+  [ErrorDialogCode.Generic]: {
+    ...commonErrorDialogTranslationKeys,
+    description: 'browserView.onboarding.errorDialog.messageGeneric'
+  }
+});