feat: unify Midnight wallet onboarding flow

- Add Midnight to "Select Blockchain" screen (create/restore wallet)
- Remove separate AddNewMidnightWalletLink from dropdown menu
- Add useLMP hook with startMidnightCreate/Restore methods

Author: przemyslaw-wlodek

v1/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx

@@ -34,9 +34,8 @@ import { getBackgroundStorage, setBackgroundStorage } from '@lib/scripts/backgro
 import { useBackgroundServiceAPIContext } from '@providers';
 import { WarningModal } from '@src/views/browser-view/components';
 import { useTranslation } from 'react-i18next';
-import { useCurrentWallet, useWalletManager, useLMP } from '@hooks';
+import { useCurrentWallet, useWalletManager } from '@hooks';
 import { useCurrentBlockchain } from '@src/multichain';
-import { AddNewMidnightWalletLink } from './components/AddNewMidnightWalletLink';
 
 interface Props extends MenuProps {
   isPopup?: boolean;
@@ -61,10 +60,8 @@ export const DropdownMenuOverlay: VFC<Props> = ({
   const { walletRepository } = useWalletManager();
   const currentWallet = useCurrentWallet();
   const wallets = useObservable(walletRepository.wallets$);
-  const { midnightWallets } = useLMP();
 
   const sharedWalletsEnabled = posthog?.isFeatureFlagEnabled('shared-wallets');
-  const midnightWalletsEnabled = posthog?.isFeatureFlagEnabled('midnight-wallets');
   const [currentSection, setCurrentSection] = useState<Sections>(Sections.Main);
   const { environmentName, setManageAccountsWallet, walletType, isSharedWallet } = useWalletStore();
   const { blockchain } = useCurrentBlockchain();
@@ -140,7 +137,6 @@ export const DropdownMenuOverlay: VFC<Props> = ({
     !isBitcoinWallet &&
     wallets?.some((w) => w.type === WalletType.Script && w.ownSigners[0].walletId === currentWallet?.walletId);
   const showAddSharedWalletLink = sharedWalletsEnabled && !isSharedWallet && !hasLinkedSharedWallet;
-  const showAddMidnightWalletLink = midnightWalletsEnabled && midnightWallets && midnightWallets.length === 0;
 
   const handleNamiModeChange = async (activated: boolean) => {
     const mode = activated ? 'nami' : 'lace';
@@ -195,7 +191,6 @@ export const DropdownMenuOverlay: VFC<Props> = ({
               <AddNewWalletLink isPopup={isPopup} sendAnalyticsEvent={sendAnalyticsEvent} />
             )}
             {!isBitcoinWallet && showAddSharedWalletLink && <AddSharedWalletLink isPopup={isPopup} />}
-            {showAddMidnightWalletLink && <AddNewMidnightWalletLink />}
             {!isBitcoinWallet && <AddressBookLink />}
             <SettingsLink />
             <Separator />

v1/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewMidnightWalletLink.tsx

@@ -3,12 +3,15 @@ import { walletRoutePaths } from '@routes';
 import { Menu } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
+import { storage } from 'webextension-polyfill';
 import styles from '../DropdownMenuOverlay.module.scss';
 import { useBackgroundServiceAPIContext } from '@providers';
 import { BrowserViewSections } from '@lib/scripts/types';
 import { useBackgroundPage } from '@providers/BackgroundPageProvider';
 import { PostHogAction } from '@lace/common';
 
+const CAME_FROM_LMP_KEY = 'lace-came-from-lmp';
+
 interface Props {
   isPopup?: boolean;
   sendAnalyticsEvent?: (event: PostHogAction) => void;
@@ -22,6 +25,7 @@ export const AddNewWalletLink = ({ isPopup, sendAnalyticsEvent }: Props): React.
 
   const openNewWallet = () => {
     sendAnalyticsEvent(PostHogAction.UserWalletProfileAddNewWalletClick);
+    void storage.local.remove(CAME_FROM_LMP_KEY);
     if (isPopup) {
       backgroundServices.handleOpenBrowser({ section: BrowserViewSections.NEW_WALLET });
     } else {

v1/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx

@@ -1,6 +1,14 @@
 import { consumeRemoteApi } from '@cardano-sdk/web-extension';
 import { logger, useObservable } from '@lace/common';
-import { APP_MODE, bundleAppApiProps, lmpApiBaseChannel, LmpBundleWallet, lmpModeStorage } from '@src/utils/lmp';
+import {
+  APP_MODE,
+  bundleAppApiProps,
+  lmpApiBaseChannel,
+  LmpBundleWallet,
+  lmpModeStorage,
+  onboardingParamsStorage,
+  setPendingMnemonic
+} from '@src/utils/lmp';
 import { runtime } from 'webextension-polyfill';
 
 const lmpApi = consumeRemoteApi(
@@ -11,18 +19,44 @@ const lmpApi = consumeRemoteApi(
   { logger, runtime }
 );
 
+const navigateToLMP = (): void => {
+  if (window.location.pathname.startsWith('/popup.html')) {
+    chrome.tabs.create({ url: '/tab.html' });
+  } else {
+    window.location.href = '/tab.html';
+  }
+};
+
 const switchToLMP = (): void =>
   void (async () => {
     await lmpModeStorage.set(APP_MODE.LMP);
-    if (window.location.pathname.startsWith('/popup.html')) {
-      chrome.tabs.create({ url: '/tab.html' });
-    } else {
-      window.location.href = '/tab.html';
-    }
+    navigateToLMP();
+  })();
+
+const startMidnightCreate = (): void =>
+  void (async () => {
+    await onboardingParamsStorage.set({ mode: 'create' });
+    await lmpModeStorage.set(APP_MODE.LMP);
+    navigateToLMP();
+  })();
+
+const startMidnightRestore = (): void =>
+  void (async () => {
+    await onboardingParamsStorage.set({ mode: 'restore' });
+    await lmpModeStorage.set(APP_MODE.LMP);
+    navigateToLMP();
+  })();
+
+const startMidnightRestoreReuse = (mnemonic: string[]): void =>
+  void (async () => {
+    await setPendingMnemonic(mnemonic);
+    await onboardingParamsStorage.set({ mode: 'restore-reuse' });
+    await lmpModeStorage.set(APP_MODE.LMP);
+    navigateToLMP();
   })();
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useLMP = () => {
   const midnightWallets = useObservable<LmpBundleWallet[] | undefined>(lmpApi.wallets$);
-  return { midnightWallets, switchToLMP };
+  return { midnightWallets, switchToLMP, startMidnightCreate, startMidnightRestore, startMidnightRestoreReuse };
 };

v1/apps/browser-extension-wallet/src/hooks/useLMP.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { BundleAppApi, LmpBundleWallet, v1ApiGlobalProperty } from '@src/utils/lmp';
+import { BundleAppApi, LmpBundleWallet, v1ApiGlobalProperty, getPendingMnemonic } from '@src/utils/lmp';
 import { BehaviorSubject, firstValueFrom, map } from 'rxjs';
 import { bitcoinWalletManager, walletManager, walletRepository } from '../wallet';
 import { AnyBip32Wallet, AnyWallet, InMemoryWallet, WalletType } from '@cardano-sdk/web-extension';
@@ -113,7 +113,8 @@ const api: BundleAppApi = {
     language$.next(language);
     await setBackgroundStorage({ languageChoice: language });
     requestMessage$.next({ type: MessageTypes.CHANGE_LANGUAGE, data: language });
-  }
+  },
+  getPendingMnemonic: async (): Promise<string[] | undefined> => await getPendingMnemonic()
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

v1/apps/browser-extension-wallet/src/lib/scripts/background/services/lmpService.ts

@@ -20,17 +20,45 @@ export type BundleAppApi = {
   activate(walletId: string): Promise<void>;
   language$: Observable<Language>;
   setLanguage(language: Language): Promise<void>;
+  getPendingMnemonic(): Promise<string[] | undefined>;
 };
 export const bundleAppApiProps: RemoteApiProperties<BundleAppApi> = {
   wallets$: RemoteApiPropertyType.HotObservable,
   activate: RemoteApiPropertyType.MethodReturningPromise,
   language$: RemoteApiPropertyType.HotObservable,
-  setLanguage: RemoteApiPropertyType.MethodReturningPromise
+  setLanguage: RemoteApiPropertyType.MethodReturningPromise,
+  getPendingMnemonic: RemoteApiPropertyType.MethodReturningPromise
 };
+
+const PENDING_MNEMONIC_KEY = 'lace-pending-mnemonic';
+
+export const setPendingMnemonic = async (mnemonic: string[]): Promise<void> => {
+  await storage.local.set({ [PENDING_MNEMONIC_KEY]: mnemonic });
+};
+
+export const getPendingMnemonic = async (): Promise<string[] | undefined> => {
+  const result = await storage.local.get(PENDING_MNEMONIC_KEY);
+  const mnemonic = result[PENDING_MNEMONIC_KEY] as string[] | undefined;
+  await storage.local.remove(PENDING_MNEMONIC_KEY);
+  return mnemonic;
+};
+
 export const lmpApiBaseChannel = 'bundle-lmp';
 export const v1ApiGlobalProperty = 'bundleV1';
 export const STORAGE_KEY = {
-  APP_MODE: 'lace-app-mode'
+  APP_MODE: 'lace-app-mode',
+  ONBOARDING_PARAMS: 'lace-lmp-onboarding-params'
+};
+
+export type OnboardingParams = { mode: 'create' } | { mode: 'restore' } | { mode: 'restore-reuse' };
+
+export const onboardingParamsStorage = {
+  set: (params: OnboardingParams): Promise<void> => storage.local.set({ [STORAGE_KEY.ONBOARDING_PARAMS]: params }),
+  get: async (): Promise<OnboardingParams | undefined> => {
+    const result = await storage.local.get(STORAGE_KEY.ONBOARDING_PARAMS);
+    return result[STORAGE_KEY.ONBOARDING_PARAMS] as OnboardingParams | undefined;
+  },
+  clear: (): Promise<void> => storage.local.remove(STORAGE_KEY.ONBOARDING_PARAMS)
 };
 export enum APP_MODE {
   LMP = 'LMP',

v1/apps/browser-extension-wallet/src/utils/lmp.ts

@@ -3,30 +3,51 @@ import { NavigationButton } from '@lace/common';
 import { WalletSetupConfirmationDialogProvider, WalletSetupFlow, WalletSetupFlowProvider } from '@lace/core';
 import { useBackgroundPage } from '@providers/BackgroundPageProvider';
 import { walletRoutePaths } from '@routes';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { storage } from 'webextension-polyfill';
 import styles from './MultiWallet.module.scss';
 import { WalletOnboardingFlows } from './WalletOnboardingFlows';
 import { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker';
 import { Home } from './Home';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 import { WalletSetupLayout } from '@views/browser/components';
 import { Portal } from '@views/browser/features/wallet-setup/components/Portal';
+import { APP_MODE, lmpModeStorage } from '@src/utils/lmp';
+
+const CAME_FROM_LMP_KEY = 'lace-came-from-lmp';
 
 export const MultiWallet = (): JSX.Element => {
   const history = useHistory();
   const posthogClient = usePostHogClientContext();
   const { page, setBackgroundPage } = useBackgroundPage();
+  const [cameFromLMP, setCameFromLMP] = useState(false);
+
+  useEffect(() => {
+    const checkCameFromLMP = async () => {
+      const result = await storage.local.get(CAME_FROM_LMP_KEY);
+      if (result[CAME_FROM_LMP_KEY]) {
+        setCameFromLMP(true);
+      }
+    };
+    void checkCameFromLMP();
+  }, []);
 
   const handleOnCancel = useCallback(
     (withConfirmationDialog: (callback: () => void) => () => void) => {
-      withConfirmationDialog(() => {
+      withConfirmationDialog(async () => {
+        if (cameFromLMP) {
+          await storage.local.remove(CAME_FROM_LMP_KEY);
+          await lmpModeStorage.set(APP_MODE.LMP);
+          window.location.href = '/tab.html';
+          return;
+        }
         setBackgroundPage();
         history.push(page);
         window.location.reload();
       })();
     },
-    [history, page, setBackgroundPage]
+    [history, page, setBackgroundPage, cameFromLMP]
   );
 
   return (