fix: delete wallet from popup

input-output-hk · Oct 9, 2024 · c31f615 · c31f615
1 parent 14a7d53
commit c31f615
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 15 deletions.
diff --git a/apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx b/apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx
@@ -3,7 +3,13 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Main as Nami, OutsideHandlesProvider } from '@lace/nami';
 import { useWalletStore } from '@src/stores';
 import { config } from '@src/config';
-import { useBackgroundServiceAPIContext, useCurrencyStore, useExternalLinkOpener, useTheme } from '@providers';
+import {
+  useBackgroundServiceAPIContext,
+  useCurrencyStore,
+  useExternalLinkOpener,
+  useTheme,
+  useAnalyticsContext
+} from '@providers';
 import {
   useCustomSubmitApi,
   useWalletAvatar,
@@ -26,13 +32,14 @@ import { useStakePoolDetails } from '@src/features/stake-pool-details/store';
 import { getPoolInfos } from '@src/stores/slices';
 import { Wallet } from '@lace/cardano';
 import { walletBalanceTransformer } from '@src/api/transformers';
-import { useObservable } from '@lace/common';
+import { PostHogAction, 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';
+import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
 
 const { AVAILABLE_CHAINS, DEFAULT_SUBMIT_API } = config();
 
@@ -41,6 +48,7 @@ export const NamiView = withDappContext((): React.ReactElement => {
   const { priceResult } = useFetchCoinPrice();
   const [namiMigration, setNamiMigration] = useState<BackgroundStorage['namiMigration']>();
   const backgroundServices = useBackgroundServiceAPIContext();
+  const analytics = useAnalyticsContext();
   const {
     createWallet,
     getMnemonic,
@@ -60,7 +68,8 @@ export const NamiView = withDappContext((): React.ReactElement => {
     walletInfo,
     currentChain,
     environmentName,
-    blockchainProvider: { stakePoolProvider, chainHistoryProvider }
+    blockchainProvider: { stakePoolProvider, chainHistoryProvider },
+    setDeletingWallet
   } = useWalletStore();
   const { theme, setTheme } = useTheme();
   const { handleAnalyticsChoice, isAnalyticsOptIn, sendEventToPostHog } = useAnalytics();
@@ -116,7 +125,7 @@ export const NamiView = withDappContext((): React.ReactElement => {
       .catch(console.error);
   }, []);
 
-  const switchWalletMode = async () => {
+  const switchWalletMode = useCallback(async () => {
     const mode = namiMigration?.mode === 'lace' ? 'nami' : 'lace';
     const migration: BackgroundStorage['namiMigration'] = {
       ...namiMigration,
@@ -128,7 +137,8 @@ export const NamiView = withDappContext((): React.ReactElement => {
     await setBackgroundStorage({
       namiMigration: migration
     });
-  };
+  }, [backgroundServices, namiMigration]);
+
   const getTxInputsValueAndAddress = useCallback(
     async (inputs: Wallet.Cardano.TxIn[] | Wallet.Cardano.HydratedTxIn[]) =>
       await Wallet.getTxInputsValueAndAddress(inputs, chainHistoryProvider, inMemoryWallet),
@@ -148,6 +158,16 @@ export const NamiView = withDappContext((): React.ReactElement => {
   );
   const connectHW = useWrapWithTimeout(connectHardwareWalletRevamped);
 
+  const removeWallet = useCallback(async () => {
+    setDeletingWallet(true);
+    await analytics.sendEventToPostHog(PostHogAction.SettingsHoldUpRemoveWalletClick, {
+      // eslint-disable-next-line camelcase
+      $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletRepository) }
+    });
+    await deleteWallet();
+    setDeletingWallet(false);
+  }, [analytics, deleteWallet, setDeletingWallet, walletRepository]);
+
   return (
     <OutsideHandlesProvider
       {...{
@@ -164,6 +184,7 @@ export const NamiView = withDappContext((): React.ReactElement => {
         createWallet,
         getMnemonic,
         deleteWallet,
+        removeWallet,
         fiatCurrency: fiatCurrency.code,
         setFiatCurrency,
         theme: theme.name,

diff --git a/apps/browser-extension-wallet/src/views/nami-mode/index.tsx b/apps/browser-extension-wallet/src/views/nami-mode/index.tsx
@@ -1,18 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useWalletStore } from '@src/stores';
 import { useAppInit } from '@hooks';
 import { MainLoader } from '@components/MainLoader';
 import { withDappContext } from '@src/features/dapp/context';
 import { NamiView } from './NamiView';
 import '../../lib/scripts/keep-alive-ui';
 import './index.scss';
+import { useBackgroundServiceAPIContext } from '@providers';
+import { BrowserViewSections } from '@lib/scripts/types';
 
 export const NamiPopup = withDappContext((): React.ReactElement => {
   const { inMemoryWallet, walletInfo, cardanoWallet, walletState, initialHdDiscoveryCompleted, currentChain } =
     useWalletStore();
+  const backgroundServices = useBackgroundServiceAPIContext();
 
   useAppInit();
 
+  useEffect(() => {
+    if (cardanoWallet === null) {
+      backgroundServices?.handleOpenBrowser({ section: BrowserViewSections.HOME });
+    }
+  }, [backgroundServices, cardanoWallet]);
+
   return (
     <div id="nami-mode">
       {!!cardanoWallet && walletInfo && walletState && inMemoryWallet && initialHdDiscoveryCompleted && currentChain ? (

diff --git a/packages/nami/src/adapters/account.ts b/packages/nami/src/adapters/account.ts
@@ -34,7 +34,7 @@ interface AccountsProps {
   removeAccount: (
     props: Readonly<RemoveAccountProps>,
   ) => Promise<RemoveAccountProps>;
-  removeWallet: (props: WalletId) => Promise<WalletId>;
+  removeWallet: () => Promise<void>;
   updateAccountMetadata: (
     props: Readonly<UpdateAccountMetadataProps<Wallet.AccountMetadata>>,
   ) => Promise<UpdateAccountMetadataProps<Wallet.AccountMetadata>>;
@@ -219,9 +219,9 @@ export const useAccount = ({
         const isLastAccount = !allAccountsSorted.some(
           a => a.walletId === walletId && a.index !== accountIndex,
         );
-        console.log(isLastAccount, { accountIndex, walletId });
+
         await (isLastAccount
-          ? removeWallet(walletId)
+          ? removeWallet()
           : removeAccount({ accountIndex, walletId }));
       },
       [removeAccount, walletId, allAccountsSorted],

diff --git a/packages/nami/src/features/outside-handles-provider/types.ts b/packages/nami/src/features/outside-handles-provider/types.ts
@@ -119,4 +119,5 @@ export interface OutsideHandlesContextValue {
     wallet: Readonly<Wallet.CardanoWallet>,
     chainName?: Wallet.ChainName,
   ) => Promise<void>;
+  removeWallet: () => Promise<void>;
 }
diff --git a/packages/nami/src/ui/app/pages/wallet.tsx b/packages/nami/src/ui/app/pages/wallet.tsx
@@ -778,11 +778,13 @@ const DeleteAccountModal = React.forwardRef<
 
   const deleteAccount = useCallback(async () => {
     setIsLoading(true);
-    await activateAccount({
-      accountIndex: nextAccount?.index!,
-      walletId: nextAccount?.walletId!,
-      force: true,
-    });
+    if (nextAccount) {
+      await activateAccount({
+        accountIndex: nextAccount?.index,
+        walletId: nextAccount?.walletId,
+        force: true,
+      });
+    }
     setTimeout(async () => {
       await removeAccount({
         walletId: activeAccount.walletId,

diff --git a/packages/nami/src/ui/indexMain.tsx b/packages/nami/src/ui/indexMain.tsx
@@ -51,6 +51,7 @@ export const Main = () => {
     setAvatar,
     switchWalletMode,
     openHWFlow,
+    removeWallet,
   } = useOutsideHandles();
 
   const { currency, setCurrency } = useFiatCurrency(
@@ -83,7 +84,7 @@ export const Main = () => {
     chainId: currentChain,
     addAccount: addLaceAccount,
     removeAccount: async props => walletRepository.removeAccount(props),
-    removeWallet: async props => walletRepository.removeWallet(props),
+    removeWallet,
     activateAccount: async (props, force) =>
       walletManager.activate(props, force),
     wallets$: walletRepository.wallets$,