feat: lmp bundle integration [LW-13474] (#1992)

* chore: add option to set webpack publicPath via environment variable

LMP-v1 bundle build has a separate webpack build, which sets it's own
public path that is separate from public path of individual
applications.

It loads the scripts a little bit differently (e.g. directly calls
'importScripts' in sw script) which prevents webpack from inferring
the path correctly based on current script context.

Therefore webpack build needs to be configured to specify it explicitly.

* feat: lmp bundle service and minimal UI integration

integrate with LMP bundle:
- when 'midnight-wallets' FF is enabled, show 'Add Midnight Wallet'
- list LMP wallets in profile dropdown
- expose wallets in SW via global variable
- get LMP wallets via remote api

* test: add option to run e2e tests for LMP bundle

---------

Co-authored-by: Lukasz Jagiela <[email protected]>

Author: mkazlauskas

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

@@ -33,8 +33,9 @@ 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 } from '@hooks';
+import { useCurrentWallet, useWalletManager, useLMP } from '@hooks';
 import { useCurrentBlockchain } from '@src/multichain';
+import { AddNewMidnightWalletLink } from './components/AddNewMidnightWalletLink';
 
 interface Props extends MenuProps {
   isPopup?: boolean;
@@ -44,7 +45,7 @@ interface Props extends MenuProps {
   open: boolean;
 }
 
-// eslint-disable-next-line complexity
+// eslint-disable-next-line complexity, max-statements
 export const DropdownMenuOverlay: VFC<Props> = ({
   isPopup,
   lockWalletButton = <LockWallet />,
@@ -59,9 +60,11 @@ 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 bitcoinWalletsEnabled = posthog?.isFeatureFlagEnabled('bitcoin-wallets');
+  const midnightWalletsEnabled = posthog?.isFeatureFlagEnabled('midnight-wallets');
   const [currentSection, setCurrentSection] = useState<Sections>(Sections.Main);
   const { environmentName, setManageAccountsWallet, walletType, isSharedWallet } = useWalletStore();
   const { blockchain } = useCurrentBlockchain();
@@ -133,6 +136,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
   );
   const showAddSharedWalletLink = sharedWalletsEnabled && !isSharedWallet && !hasLinkedSharedWallet;
   const showAddBitcoinWalletLink = bitcoinWalletsEnabled;
+  const showAddMidnightWalletLink = midnightWalletsEnabled && midnightWallets && midnightWallets.length === 0;
 
   const handleNamiModeChange = async (activated: boolean) => {
     const mode = activated ? 'nami' : 'lace';
@@ -188,6 +192,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
             )}
             {!isBitcoinWallet && showAddSharedWalletLink && <AddSharedWalletLink isPopup={isPopup} />}
             {showAddBitcoinWalletLink && <AddNewBitcoinWalletLink isPopup={isPopup} />}
+            {showAddMidnightWalletLink && <AddNewMidnightWalletLink />}
             {!isBitcoinWallet && <AddressBookLink />}
             <SettingsLink />
             <Separator />

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

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { Menu } from 'antd';
+import styles from '../DropdownMenuOverlay.module.scss';
+import { PostHogAction } from '@lace/common';
+import { useTranslation } from 'react-i18next';
+import { useLMP } from '@hooks';
+
+interface Props {
+  sendAnalyticsEvent?: (event: PostHogAction) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AddNewMidnightWalletLink = (_: Props): React.ReactElement => {
+  const { t } = useTranslation();
+  const { switchToLMP } = useLMP();
+  const onClick = useCallback(() => {
+    switchToLMP();
+    // TODO: send analytics event
+  }, [switchToLMP]);
+
+  return (
+    <Menu.Item data-testid="header-menu-add-midnight-wallet" className={styles.menuItem} onClick={onClick}>
+      {t('browserView.sideMenu.links.addMidnightWallet')}
+    </Menu.Item>
+  );
+};

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

@@ -9,7 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { addEllipsis, toast, useObservable } from '@lace/common';
 import { WalletStatusContainer } from '@components/WalletStatus';
 import { UserAvatar } from './UserAvatar';
-import { useGetHandles, useWalletAvatar, useWalletManager } from '@hooks';
+import { useGetHandles, useWalletAvatar, useWalletManager, useLMP } from '@hooks';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction, WALLET_TYPE_KEY } from '@providers/AnalyticsProvider/analyticsTracker';
 import { ProfileDropdown } from '@input-output-hk/lace-ui-toolkit';
@@ -19,6 +19,7 @@ import { Separator } from './Separator';
 import { getUiWalletType } from '@src/utils/get-ui-wallet-type';
 import { isScriptWallet } from '@lace/core';
 import { useCurrentBlockchain } from '@src/multichain';
+import { LmpBundleWallet } from '@src/utils/lmp';
 
 const ADRESS_FIRST_PART_LENGTH = 10;
 const ADRESS_LAST_PART_LENGTH = 5;
@@ -59,6 +60,7 @@ export const UserInfo = ({
     useWalletManager();
   const analytics = useAnalyticsContext();
   const wallets = useObservable(walletRepository.wallets$, NO_WALLETS);
+  const { midnightWallets = [], switchToLMP } = useLMP();
   const walletAddress = walletInfo ? walletInfo.addresses[0].address.toString() : '';
   const shortenedWalletAddress = addEllipsis(walletAddress, ADRESS_FIRST_PART_LENGTH, ADRESS_LAST_PART_LENGTH);
   const [fullWalletName, setFullWalletName] = useState<string>('');
@@ -193,6 +195,27 @@ export const UserInfo = ({
     ]
   );
 
+  const renderLmpWallet = useCallback(
+    ({ walletIcon, walletId, walletName }: LmpBundleWallet, isLast: boolean) => (
+      <div key={walletId}>
+        <ProfileDropdown.WalletOption
+          style={{ textAlign: 'left' }}
+          key={walletId}
+          title={shortenWalletName(walletName, WALLET_OPTION_NAME_MAX_LENGTH)}
+          id={`wallet-option-${walletId}`}
+          onClick={switchToLMP}
+          type={'hot'}
+          profile={{
+            fallbackText: walletName,
+            imageSrc: walletIcon
+          }}
+        />
+        {isLast ? undefined : <Separator />}
+      </div>
+    ),
+    [switchToLMP]
+  );
+
   const renderScriptWallet = useCallback(
     (wallet: ScriptWallet<Wallet.WalletMetadata>) => renderWalletOption({ wallet }),
     [renderWalletOption]
@@ -228,7 +251,14 @@ export const UserInfo = ({
         })}
       >
         {process.env.USE_MULTI_WALLET === 'true' ? (
-          <div>{wallets.map((wallet, i) => renderWallet(wallet, i === wallets.length - 1))}</div>
+          <>
+            <div>
+              {wallets.map((wallet, i) =>
+                renderWallet(wallet, i === wallets.length - 1 && midnightWallets.length === 0)
+              )}
+              {midnightWallets.map((wallet, i) => renderLmpWallet(wallet, i === midnightWallets.length - 1))}
+            </div>
+          </>
         ) : (
           <CopyToClipboard text={handleName || walletAddress}>
             <AntdTooltip

apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx

@@ -21,6 +21,7 @@ const mockLedgerGetXpub = jest.fn();
 const mockTrezorGetXpub = jest.fn();
 const mockInitializeTrezorTransport = jest.fn();
 const mockLedgerCreateWithDevice = jest.fn();
+const mockUseLMP = jest.fn();
 const mockUseAppSettingsContext = jest.fn().mockReturnValue([{}, jest.fn()]);
 const mockUseSecrets = {
   password: {} as Partial<Password>,
@@ -116,6 +117,11 @@ jest.mock('@providers/AnalyticsProvider/getUserIdService', () => {
   };
 });
 
+jest.mock('@hooks/useLMP', () => ({
+  __esModule: true,
+  useLMP: mockUseLMP
+}));
+
 const getWrapper =
   ({ backgroundService }: { backgroundService?: BackgroundServiceAPIProviderProps['value'] }) =>
   ({ children }: { children: React.ReactNode }) =>
@@ -153,6 +159,7 @@ const walletDisplayInfoMockData = {
 describe('Testing useWalletManager hook', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    mockUseLMP.mockReturnValue({ midnightWallets: [], switchToLMP: jest.fn() });
     jest.spyOn(AppSettings, 'useAppSettingsContext').mockReturnValue([{}, jest.fn()]);
     jest.spyOn(stores, 'useWalletStore').mockImplementation(() => ({}));
   });

apps/browser-extension-wallet/src/hooks/index.ts

@@ -26,3 +26,4 @@ export * from './useActionExecution';
 export * from './useCustomSubmitApi';
 export * from './useCurrentWallet';
 export * from './useHasEnoughCollateral';
+export * from './useLMP';

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

@@ -0,0 +1,28 @@
+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 { runtime } from 'webextension-polyfill';
+
+const lmpApi = consumeRemoteApi(
+  {
+    baseChannel: lmpApiBaseChannel,
+    properties: bundleAppApiProps
+  },
+  { logger, runtime }
+);
+
+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';
+    }
+  })();
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useLMP = () => {
+  const midnightWallets = useObservable<LmpBundleWallet[] | undefined>(lmpApi.wallets$);
+  return { midnightWallets, switchToLMP };
+};

apps/browser-extension-wallet/src/hooks/useWalletManager.ts

@@ -44,6 +44,7 @@ import { deepEquals, HexBlob } from '@cardano-sdk/util';
 import { BackgroundService } from '@lib/scripts/types';
 import { getChainName } from '@src/utils/get-chain-name';
 import { useCustomSubmitApi } from '@hooks/useCustomSubmitApi';
+import { useLMP } from '@hooks/useLMP';
 import { setBackgroundStorage } from '@lib/scripts/background/storage';
 import * as KeyManagement from '@cardano-sdk/key-management';
 import { Buffer } from 'buffer';
@@ -396,6 +397,7 @@ export const useWalletManager = (): UseWalletManager => {
     const storedChain = getValueFromLocalStorage('appSettings');
     return (storedChain?.chainName && chainIdFromName(storedChain.chainName)) || DEFAULT_CHAIN_ID;
   }, [currentChain]);
+  const { midnightWallets, switchToLMP } = useLMP();
 
   const getWalletInfo = useCallback(async (): Promise<Wallet.WalletDisplayInfo | undefined> => {
     const { activeBlockchain } = await backgroundService.getBackgroundStorage();
@@ -1121,6 +1123,10 @@ export const useWalletManager = (): UseWalletManager => {
       for (const network of [BtcWallet.Network.Mainnet, BtcWallet.Network.Testnet]) {
         await bitcoinWalletManager.destroyData(walletToDelete.walletId, network);
       }
+
+      if (midnightWallets && midnightWallets?.length > 0) {
+        switchToLMP();
+      }
     },
     [
       resetWalletLock,
@@ -1131,7 +1137,9 @@ export const useWalletManager = (): UseWalletManager => {
       clearAddressBook,
       clearNftsFolders,
       getCurrentChainId,
-      activateWallet
+      activateWallet,
+      midnightWallets,
+      switchToLMP
     ]
   );
 

apps/browser-extension-wallet/src/lib/scripts/background/index.ts

@@ -3,6 +3,7 @@ import './onError';
 import './onUpdate';
 import './services';
 import './services/expose';
+import './services/lmpService';
 import './expose-background-service';
 import './keep-alive-sw';
 import './onUninstall';

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

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { BundleAppApi, LmpBundleWallet, v1ApiGlobalProperty } from '@src/utils/lmp';
+import { firstValueFrom, map } from 'rxjs';
+import { bitcoinWalletManager, walletManager, walletRepository } from '../wallet';
+import { AnyBip32Wallet, AnyWallet, InMemoryWallet, WalletType } from '@cardano-sdk/web-extension';
+import { logger } from '@lace/common';
+import { Wallet } from '@lace/cardano';
+import { setBackgroundStorage } from '../storage';
+import { Bitcoin } from '@lace/bitcoin';
+
+const cardanoLogo = require('../../../../assets/icons/browser-view/cardano-logo.svg').default;
+const bitcoinLogo = require('../../../../assets/icons/browser-view/bitcoin-logo.svg').default;
+
+const isBitcoinWallet = (
+  wallet: AnyWallet<Wallet.WalletMetadata, Wallet.AccountMetadata>
+): wallet is InMemoryWallet<Wallet.WalletMetadata, Wallet.AccountMetadata> =>
+  wallet.type === WalletType.InMemory && wallet.blockchainName === 'Bitcoin';
+const isBip32Wallet = (
+  wallet: AnyWallet<Wallet.WalletMetadata, Wallet.AccountMetadata>
+): wallet is AnyBip32Wallet<Wallet.WalletMetadata, Wallet.AccountMetadata> => wallet.type !== WalletType.Script;
+const isInMemoryWallet = (
+  wallet: AnyWallet<Wallet.WalletMetadata, Wallet.AccountMetadata>
+): wallet is InMemoryWallet<Wallet.WalletMetadata, Wallet.AccountMetadata> => wallet.type === WalletType.InMemory;
+
+const api: BundleAppApi = {
+  wallets$: walletRepository.wallets$.pipe(
+    map((wallets) =>
+      wallets.map(
+        (wallet): LmpBundleWallet => ({
+          // TODO: icon should be different based on wallet type (same as in v1 dropdown menu)
+          walletIcon: isBitcoinWallet(wallet) ? bitcoinLogo : cardanoLogo,
+          walletId: wallet.walletId,
+          walletName: wallet.metadata.name,
+          encryptedRecoveryPhrase: isInMemoryWallet(wallet) ? wallet.encryptedSecrets.keyMaterial : undefined
+        })
+      )
+    )
+  ),
+  activate: async (walletId): Promise<void> => {
+    const wallets = await firstValueFrom(walletRepository.wallets$);
+    const wallet = wallets.find((w) => w.walletId === walletId);
+    if (!wallet) {
+      logger.warn('Failed to activate wallet: not found', walletId);
+      return;
+    }
+
+    if (isBip32Wallet(wallet)) {
+      const accountIndex = wallet.metadata.lastActiveAccountIndex || 0;
+      const bitcoinActiveWallet = await firstValueFrom(bitcoinWalletManager.activeWallet$);
+      const cardanoActiveWallet = await firstValueFrom(walletManager.activeWallet$);
+      if (isBitcoinWallet(wallet)) {
+        await setBackgroundStorage({
+          activeBlockchain: 'bitcoin'
+        });
+        await bitcoinWalletManager.activate({
+          network:
+            // If Bitcoin wallet is active, use the same chainID
+            // If Cardano wallet is active, use the same network type
+            // Otherwise use Mainnet
+            bitcoinActiveWallet?.props.network ||
+            cardanoActiveWallet?.props.chainId.networkId === Wallet.Cardano.NetworkId.Testnet
+              ? Bitcoin.Network.Testnet
+              : Bitcoin.Network.Mainnet,
+          walletId,
+          accountIndex
+        });
+      } else {
+        await setBackgroundStorage({
+          activeBlockchain: 'cardano'
+        });
+        await walletManager.activate({
+          chainId:
+            // If Cardano wallet is active, use the same chainID
+            // If Bitcoin wallet is active, use the same network type (preprod if testnet)
+            // Otherwise use Mainnet
+            cardanoActiveWallet?.props.chainId || bitcoinActiveWallet?.props.network === Bitcoin.Network.Testnet
+              ? Wallet.Cardano.ChainIds.Preprod
+              : Wallet.Cardano.ChainIds.Mainnet,
+          walletId,
+          accountIndex
+        });
+      }
+    }
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any)[v1ApiGlobalProperty] = api;

apps/browser-extension-wallet/src/lib/scripts/types/feature-flags.ts

@@ -13,6 +13,7 @@ export enum ExperimentName {
   DAPP_EXPLORER = 'dapp-explorer',
   SEND_CONSOLE_ERRORS_TO_SENTRY = 'send-console-errors-to-sentry',
   BITCOIN_WALLETS = 'bitcoin-wallets',
+  MIDNIGHT_WALLETS = 'midnight-wallets',
   NFTPRINTLAB = 'nftprintlab',
   GLACIER_DROP = 'glacier-drop',
   MEMPOOLSPACE_FEE_MARKET = 'bitcoin-mempool-space-fee-market',