fix(extension): loading wallet during app init + switching [LW-13016] (#1902)

* fix(extension): loading wallet during app init + switching

* feat(extension): add toast when switching wallets after removing a wallet

* fix(extension): hide cardano accounts menu when bitcoin wallet is active

Author: przemyslaw-wlodek

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

@@ -173,7 +173,7 @@ export const UserInfo = ({
           }
           {...(wallet.type !== WalletType.Script &&
             wallet.blockchainName !== 'Bitcoin' && {
-              onOpenAccountsMenu: () => onOpenWalletAccounts(wallet),
+              ...(blockchain !== 'bitcoin' ? { onOpenAccountsMenu: () => onOpenWalletAccounts(wallet) } : {}),
               onOpenEditWallet: () => onOpenEditWallet(wallet)
             })}
         />

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

@@ -1,12 +1,14 @@
 import { useObservable } from '@lace/common';
 import { useWalletStore } from '@stores';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { isKeyHashAddress } from '@cardano-sdk/wallet';
 import { AddressesDiscoveryStatus } from '@lib/communication/addresses-discoverer';
 import { useWalletManager } from './useWalletManager';
 import { useWalletState } from './useWalletState';
 import { setBackgroundStorage } from '@lib/scripts/background/storage';
 import { useCustomSubmitApi } from '@hooks/useCustomSubmitApi';
+import { bitcoinWalletManager } from '@lib/wallet-api-ui';
+import { useCurrentBlockchain } from '@src/multichain';
 
 export const useAppInit = (): void => {
   const {
@@ -19,9 +21,10 @@ export const useAppInit = (): void => {
     setHdDiscoveryStatus,
     deletingWallet
   } = useWalletStore();
+  const { blockchain } = useCurrentBlockchain();
   const { loadWallet, walletManager, walletRepository } = useWalletManager();
   const walletState = useWalletState();
-  const { environmentName } = useWalletStore();
+  const { environmentName, currentChain } = useWalletStore();
   const { getCustomSubmitApiForNetwork } = useCustomSubmitApi();
 
   useEffect(() => {
@@ -56,7 +59,16 @@ export const useAppInit = (): void => {
   }, [environmentName, getCustomSubmitApiForNetwork]);
 
   const wallets = useObservable(walletRepository.wallets$);
-  const activeWalletProps = useObservable(walletManager.activeWalletId$);
+  const activeCardanoWalletProps = useObservable(walletManager.activeWalletId$);
+  const activeBitcoinWalletProps = useObservable(bitcoinWalletManager.activeWalletId$);
+  const activeWalletProps = useMemo(
+    () =>
+      blockchain === 'bitcoin'
+        ? activeBitcoinWalletProps && currentChain && { ...activeBitcoinWalletProps, chainId: currentChain }
+        : activeCardanoWalletProps,
+    [blockchain, activeCardanoWalletProps, activeBitcoinWalletProps, currentChain]
+  );
+
   useEffect(() => {
     if (deletingWallet || typeof wallets === 'undefined' || typeof activeWalletProps === 'undefined') return;
     void loadWallet(wallets, activeWalletProps);

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

@@ -669,7 +669,7 @@ export const useWalletManager = (): UseWalletManager => {
         setWalletDisplayInfo(await getWalletInfo());
       }
     },
-    [getCurrentChainId, backgroundService, setIsBitcoinWallet, setWalletDisplayInfo, getWalletInfo]
+    [backgroundService, getCurrentChainId, setWalletDisplayInfo, getWalletInfo, setIsBitcoinWallet]
   );
 
   const activateAnyWallet = useCallback(
@@ -688,11 +688,12 @@ export const useWalletManager = (): UseWalletManager => {
    * @returns resolves with wallet information or null when no wallet is found
    */
   const loadWallet = useCallback(
-    // eslint-disable-next-line complexity
+    // eslint-disable-next-line complexity, max-statements
     async (
       wallets: AnyWallet<Wallet.WalletMetadata, Wallet.AccountMetadata>[],
       activeWalletProps: WalletManagerActivateProps | null
     ): Promise<Wallet.CardanoWallet | undefined> => {
+      const { activeBlockchain } = await backgroundService.getBackgroundStorage();
       // If there are no wallets, attempt to migrate local storage data to wallet repository
       if (wallets.length === 0) {
         if (!(await tryMigrateToWalletRepository())) {
@@ -727,6 +728,13 @@ export const useWalletManager = (): UseWalletManager => {
         activeWallet.type !== WalletType.Script
           ? activeWallet.accounts.find((a) => a.accountIndex === activeWalletProps.accountIndex)
           : undefined;
+
+      if (activeBlockchain === 'bitcoin' && activeWallet) {
+        setIsBitcoinWallet(true);
+        setWalletDisplayInfo(await getWalletInfo());
+        return;
+      }
+
       const newCardanoWallet = {
         name: activeWallet.metadata.name,
         signingCoordinator,
@@ -760,17 +768,19 @@ export const useWalletManager = (): UseWalletManager => {
       return newCardanoWallet;
     },
     [
-      getWalletInfo,
-      setCardanoWallet,
-      setWalletDisplayInfo,
-      setCurrentChain,
-      tryMigrateToWalletRepository,
+      backgroundService,
+      currentChain?.networkMagic,
       cardanoWallet,
-      currentChain,
       manageAccountsWallet,
-      activateAnyWallet,
+      tryMigrateToWalletRepository,
+      setCardanoWallet,
+      setWalletDisplayInfo,
       deletingWallet,
+      activateAnyWallet,
+      setCurrentChain,
       setCardanoCoin,
+      setIsBitcoinWallet,
+      getWalletInfo,
       setManageAccountsWallet
     ]
   );

apps/browser-extension-wallet/src/stores/slices/wallet-info-slice.ts

@@ -4,7 +4,6 @@ import { Wallet } from '@lace/cardano';
 import { ObservableWalletState } from '@hooks/useWalletState';
 import { isSharedWallet } from '@lace/core';
 import { isNamiWallet } from '@src/views/nami-mode/utils';
-import { Bitcoin } from '@lace/bitcoin/';
 
 /**
  * has all wallet info related actions and states
@@ -52,11 +51,6 @@ export const walletInfoSlice: SliceCreator<WalletInfoSlice & BlockchainProviderS
     set({
       walletDisplayInfo: info
     }),
-  setBitcoinWallet: (wallet?: Bitcoin.BitcoinWallet) =>
-    set({
-      bitcoinWallet: wallet,
-      isBitcoinWallet: !!wallet
-    }),
   setIsBitcoinWallet: (isBitcoinWallet: boolean) =>
     set({
       isBitcoinWallet

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsRemoveWallet.tsx

@@ -3,10 +3,10 @@ import React, { useEffect, useState } from 'react';
 import { SettingsCard } from './';
 import { useTranslation } from 'react-i18next';
 import { Typography } from 'antd';
-import { Button, useObservable } from '@lace/common';
+import { Button, toast, useObservable } from '@lace/common';
 import { WarningModal } from '@views/browser/components/WarningModal';
 import styles from './SettingsLayout.module.scss';
-import { useWalletManager } from '@hooks';
+import { useWalletManager, TOAST_DEFAULT_DURATION } from '@hooks';
 import { useWalletStore } from '@src/stores';
 import { useBackgroundServiceAPIContext } from '@providers/BackgroundServiceAPI';
 import { BrowserViewSections } from '@lib/scripts/types';
@@ -59,8 +59,13 @@ export const SettingsRemoveWallet = ({ popupView }: { popupView?: boolean }): Re
       // eslint-disable-next-line camelcase
       $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletRepository) }
     });
-    const nextActiveWallet = await deleteWallet();
+    const { walletId: nextActiveWalletId } = (await deleteWallet()) || {};
+    const nextActiveWallet = wallets?.find(({ walletId }) => walletId === nextActiveWalletId);
     setDeletingWallet(false);
+    toast.notify({
+      duration: TOAST_DEFAULT_DURATION,
+      text: t('multiWallet.activated.wallet', { walletName: nextActiveWallet.metadata.name })
+    });
     if (nextActiveWallet) return;
     if (popupView) await backgroundServices.handleOpenBrowser({ section: BrowserViewSections.HOME });
     // force reload to ensure all stores are cleaned up