legacy mode additional fixes

Author: vetalcore

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

@@ -26,7 +26,7 @@ import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
 
 const defaultAccountName = (accountNumber: number) => `Account #${accountNumber}`;
 
-const NUMBER_OF_ACCOUNTS_PER_WALLET = 24;
+const NUMBER_OF_ACCOUNTS_PER_WALLET = 50;
 const HW_CONNECT_TIMEOUT_MS = 30_000;
 
 type EnableAccountPasswordDialogData = {

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

@@ -24,6 +24,7 @@ import {
   AddWalletProps,
   AnyBip32Wallet,
   AnyWallet,
+  Bip32WalletAccount,
   WalletId,
   WalletManagerActivateProps,
   WalletManagerApi,
@@ -87,7 +88,7 @@ type WalletManagerAddAccountProps = {
 type ActivateWalletProps = Omit<WalletManagerActivateProps, 'chainId'>;
 
 type CreateHardwareWalletRevampedParams = {
-  accountIndex: number;
+  accountIndexes: number[];
   name: string;
   connection: Wallet.HardwareWalletConnection;
 };
@@ -266,33 +267,37 @@ export const useWalletManager = (): UseWalletManager => {
   }, [currentChain]);
 
   const createHardwareWalletRevamped = useCallback<CreateHardwareWalletRevamped>(
-    async ({ accountIndex, connection, name }) => {
-      let extendedAccountPublicKey;
-      try {
-        extendedAccountPublicKey = await Wallet.getHwExtendedAccountPublicKey(
-          connection.type,
+    async ({ accountIndexes, connection, name }) => {
+      const accounts: Bip32WalletAccount<Wallet.AccountMetadata>[] = [];
+      for (const accountIndex of accountIndexes) {
+        let extendedAccountPublicKey;
+        try {
+          extendedAccountPublicKey = await Wallet.getHwExtendedAccountPublicKey(
+            connection.type,
+            accountIndex,
+            connection.type === WalletType.Ledger ? connection.value : undefined
+          );
+        } catch (error: unknown) {
+          throw error;
+        }
+        accounts.push({
+          extendedAccountPublicKey,
           accountIndex,
-          connection.type === WalletType.Ledger ? connection.value : undefined
-        );
-      } catch (error: unknown) {
-        throw error;
+          metadata: { name: defaultAccountName(accountIndex) }
+        });
       }
+
       const addWalletProps: AddWalletProps<Wallet.WalletMetadata, Wallet.AccountMetadata> = {
-        metadata: { name, lastActiveAccountIndex: accountIndex },
+        metadata: { name, lastActiveAccountIndex: accountIndexes[0] },
         type: connection.type,
-        accounts: [
-          {
-            extendedAccountPublicKey,
-            accountIndex,
-            metadata: { name: defaultAccountName(accountIndex) }
-          }
-        ]
+        accounts
       };
+
       const walletId = await walletRepository.addWallet(addWalletProps);
       await walletManager.activate({
         walletId,
         chainId: getCurrentChainId(),
-        accountIndex
+        accountIndex: accountIndexes[0]
       });
 
       return {
@@ -323,7 +328,7 @@ export const useWalletManager = (): UseWalletManager => {
       connectedDevice
     }: CreateHardwareWallet): Promise<Wallet.CardanoWallet> =>
       createHardwareWalletRevamped({
-        accountIndex,
+        accountIndexes: [accountIndex],
         connection: {
           type: connectedDevice,
           value: typeof deviceConnection !== 'boolean' ? deviceConnection : undefined

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

@@ -13,6 +13,7 @@ export const backgroundServiceProperties: RemoteApiProperties<BackgroundService>
     tokenPrices$: RemoteApiPropertyType.HotObservable
   },
   handleOpenBrowser: RemoteApiPropertyType.MethodReturningPromise,
+  handleOpenNamiBrowser: RemoteApiPropertyType.MethodReturningPromise,
   handleOpenPopup: RemoteApiPropertyType.MethodReturningPromise,
   handleChangeTheme: RemoteApiPropertyType.MethodReturningPromise,
   handleChangeMode: RemoteApiPropertyType.MethodReturningPromise,

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

@@ -7,6 +7,7 @@ import {
   Message,
   MessageTypes,
   OpenBrowserData,
+  OpenNamiBrowserData,
   MigrationState,
   TokenPrices,
   CoinPrices,
@@ -87,11 +88,18 @@ const handleOpenBrowser = async (data: OpenBrowserData) => {
     case BrowserViewSections.NAMI_MIGRATION:
       path = walletRoutePaths.namiMigration.root;
       break;
+    case BrowserViewSections.NAMI_HW_FLOW:
+      path = walletRoutePaths.namiMigration.hwFlow;
+      break;
   }
   const params = data.urlSearchParams ? `?${data.urlSearchParams}` : '';
   await tabs.create({ url: `app.html#${path}${params}` }).catch((error) => console.error(error));
 };
 
+const handleOpenNamiBrowser = async (data: OpenNamiBrowserData) => {
+  await tabs.create({ url: `popup.html#${data.path}` }).catch((error) => console.error(error));
+};
+
 const handleOpenPopup = async () => {
   if (typeof chrome.action.openPopup !== 'function') return;
   await closeAllLaceWindows();
@@ -184,6 +192,7 @@ exposeApi<BackgroundService>(
   {
     api$: of({
       handleOpenBrowser,
+      handleOpenNamiBrowser,
       handleOpenPopup,
       requestMessage$,
       migrationState$,

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

@@ -122,11 +122,11 @@ export const getActiveWallet = async ({
   return { wallet, account };
 };
 
-export const closeAllLaceWindows = async (): Promise<void> => {
+export const closeAllLaceWindows = async (shouldRemoveTab?: (url: string) => boolean): Promise<void> => {
   const openTabs = await tabs.query({ title: 'Lace' });
   // Close all previously opened lace dapp connector windows
   for (const tab of openTabs) {
-    if (DAPP_CONNECTOR_REGEX.test(tab.url)) await tabs.remove(tab.id);
+    if (!shouldRemoveTab || shouldRemoveTab(tab.url)) await tabs.remove(tab.id);
   }
 };
 
@@ -143,7 +143,7 @@ export const ensureUiIsOpenAndLoaded = async (
     : undefined;
 
   const windowType: Windows.CreateType = isHardwareWallet ? 'normal' : 'popup';
-  await closeAllLaceWindows();
+  await closeAllLaceWindows((tabUrl) => DAPP_CONNECTOR_REGEX.test(tabUrl));
 
   const tab = await launchCip30Popup(url, windowType);
   if (tab.status !== 'complete') {

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

@@ -43,14 +43,19 @@ export enum BrowserViewSections {
   FORGOT_PASSWORD = 'forgot_password',
   NEW_WALLET = 'new_wallet',
   ADD_SHARED_WALLET = 'add_shared_wallet',
-  NAMI_MIGRATION = 'nami_migration'
+  NAMI_MIGRATION = 'nami_migration',
+  NAMI_HW_FLOW = 'nami_hw_flow'
 }
 
 export interface OpenBrowserData {
   section: BrowserViewSections;
   urlSearchParams?: string;
 }
 
+export interface OpenNamiBrowserData {
+  path: string;
+}
+
 interface ChangeThemeMessage {
   type: MessageTypes.CHANGE_THEME;
   data: ChangeThemeData;
@@ -73,6 +78,7 @@ export type Message = ChangeThemeMessage | HTTPConnectionMessage | OpenBrowserMe
 export type BackgroundService = {
   handleOpenBrowser: (data: OpenBrowserData, urlSearchParams?: string) => Promise<void>;
   handleOpenPopup: () => Promise<void>;
+  handleOpenNamiBrowser: (data: OpenNamiBrowserData) => Promise<void>;
   requestMessage$: Subject<Message>;
   migrationState$: BehaviorSubject<MigrationState | undefined>;
   coinPrices: CoinPrices;

apps/browser-extension-wallet/src/popup.tsx

@@ -29,8 +29,8 @@ import { storage } from 'webextension-polyfill';
 const App = (): React.ReactElement => {
   const [mode, setMode] = useState<'lace' | 'nami'>();
   storage.onChanged.addListener((changes) => {
-    const oldModeValue = changes.BACKGROUND_STORAGE.oldValue?.namiMigration;
-    const newModeValue = changes.BACKGROUND_STORAGE.newValue?.namiMigration;
+    const oldModeValue = changes.BACKGROUND_STORAGE?.oldValue?.namiMigration;
+    const newModeValue = changes.BACKGROUND_STORAGE?.newValue?.namiMigration;
     if (oldModeValue?.mode !== newModeValue?.mode) {
       setMode(newModeValue);
       // Force back to original routing

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

@@ -39,7 +39,8 @@ export const walletRoutePaths = {
     activating: '/nami/migration/activating',
     welcome: '/nami/migration/welcome',
     customize: '/nami/migration/customize',
-    allDone: '/nami/migration/all-done'
+    allDone: '/nami/migration/all-done',
+    hwFlow: '/nami/nami-mode/hwTab'
   }
 };
 

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

@@ -170,7 +170,8 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps
     try {
       cardanoWallet = await createHardwareWalletRevamped({
         connection,
-        ...walletData
+        ...walletData,
+        accountIndexes: [walletData.accountIndex]
       });
     } catch (error) {
       console.error('ERROR creating hardware wallet', { error });

apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx

@@ -29,6 +29,10 @@ import { walletBalanceTransformer } from '@src/api/transformers';
 import { useObservable } from '@lace/common';
 import { getBackgroundStorage, setBackgroundStorage } from '@lib/scripts/background/storage';
 import { BackgroundStorage } from '@lib/scripts/types';
+import { isKeyHashAddress } from '@cardano-sdk/wallet';
+import { useWalletState } from '@hooks/useWalletState';
+import { certificateInspectorFactory } from '@src/features/dapp/components/confirm-transaction/utils';
+import { useWrapWithTimeout } from '../browser-view/features/multi-wallet/hardware-wallet/useWrapWithTimeout';
 
 const { AVAILABLE_CHAINS, DEFAULT_SUBMIT_API } = config();
 
@@ -37,15 +41,26 @@ export const NamiView = withDappContext((): React.ReactElement => {
   const { priceResult } = useFetchCoinPrice();
   const [namiMigration, setNamiMigration] = useState<BackgroundStorage['namiMigration']>();
   const backgroundServices = useBackgroundServiceAPIContext();
-  const { createWallet, getMnemonic, deleteWallet, switchNetwork, enableCustomNode, addAccount, walletRepository } =
-    useWalletManager();
+  const {
+    createWallet,
+    getMnemonic,
+    deleteWallet,
+    switchNetwork,
+    enableCustomNode,
+    addAccount,
+    walletRepository,
+    connectHardwareWalletRevamped,
+    createHardwareWalletRevamped,
+    saveHardwareWallet
+  } = useWalletManager();
   const {
     walletUI,
     inMemoryWallet,
+    walletType,
     walletInfo,
     currentChain,
     environmentName,
-    blockchainProvider: { stakePoolProvider }
+    blockchainProvider: { stakePoolProvider, chainHistoryProvider }
   } = useWalletStore();
   const { theme, setTheme } = useTheme();
   const { handleAnalyticsChoice, isAnalyticsOptIn, sendEventToPostHog } = useAnalytics();
@@ -62,14 +77,18 @@ export const NamiView = withDappContext((): React.ReactElement => {
   const { txFee, isInitializing, initializeCollateralTx, submitCollateralTx } = useCollateral();
 
   const cardanoPrice = priceResult.cardano.price;
-  const walletAddress = walletInfo?.addresses[0].address.toString();
+  const walletAddresses = walletInfo?.addresses
+    .filter((address) => isKeyHashAddress(address))
+    .map(({ address }) => address);
   const { setAvatar } = useWalletAvatar();
   const { delegationTxFee, setDelegationTxFee, setSelectedStakePool, setDelegationTxBuilder, delegationTxBuilder } =
     useDelegationStore();
   const { buildDelegation } = useBuildDelegation();
   const { signAndSubmitTransaction } = useDelegationTransaction();
   const { isBuildingTx, stakingError, setIsBuildingTx } = useStakePoolDetails();
+  const walletState = useWalletState();
   const passwordUtil = useSecrets();
+  const openExternalLink = useExternalLinkOpener();
   const getStakePoolInfo = useCallback(
     (id: Wallet.Cardano.PoolId) => getPoolInfos([id], stakePoolProvider),
     [stakePoolProvider]
@@ -90,7 +109,6 @@ export const NamiView = withDappContext((): React.ReactElement => {
   const { coinBalance: minAda } = walletBalanceTransformer(protocolParameters?.stakeKeyDeposit.toString());
   const coinBalance = balance?.total?.coinBalance && Number(balance?.total?.coinBalance);
   const hasNoFunds = (coinBalance < Number(minAda) && !isStakeRegistered) || (coinBalance === 0 && isStakeRegistered);
-  const openExternalLink = useExternalLinkOpener();
 
   useEffect(() => {
     getBackgroundStorage()
@@ -111,6 +129,24 @@ export const NamiView = withDappContext((): React.ReactElement => {
       namiMigration: migration
     });
   };
+  const getTxInputsValueAndAddress = useCallback(
+    async (inputs: Wallet.Cardano.TxIn[] | Wallet.Cardano.HydratedTxIn[]) =>
+      await Wallet.getTxInputsValueAndAddress(inputs, chainHistoryProvider, inMemoryWallet),
+    [chainHistoryProvider, inMemoryWallet]
+  );
+
+  const sortedHistoryTx = useMemo(
+    () => walletState?.transactions.history.sort((tx1, tx2) => tx2.blockHeader.slot - tx1.blockHeader.slot),
+    [walletState]
+  );
+
+  const openHWFlow = useCallback(
+    (path: string) => {
+      backgroundServices.handleOpenNamiBrowser({ path });
+    },
+    [backgroundServices]
+  );
+  const connectHW = useWrapWithTimeout(connectHardwareWalletRevamped);
 
   return (
     <OutsideHandlesProvider
@@ -132,7 +168,6 @@ export const NamiView = withDappContext((): React.ReactElement => {
         setFiatCurrency,
         theme: theme.name,
         setTheme,
-        walletAddress,
         inMemoryWallet,
         currentChain,
         cardanoPrice,
@@ -159,7 +194,17 @@ export const NamiView = withDappContext((): React.ReactElement => {
         hasNoFunds,
         setAvatar,
         switchWalletMode,
-        openExternalLink
+        openExternalLink,
+        walletAddresses,
+        transactions: sortedHistoryTx,
+        eraSummaries: walletState?.eraSummaries,
+        getTxInputsValueAndAddress,
+        certificateInspectorFactory,
+        openHWFlow,
+        walletType,
+        connectHW,
+        createHardwareWalletRevamped,
+        saveHardwareWallet
       }}
     >
       <Nami />