refactor(extension): reduce code duplication in multiwallet create an…

…d restore flows
input-output-hk · Apr 25, 2024 · f653ff7 · f653ff7
1 parent 0ed6004
commit f653ff7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 32 deletions.
diff --git a/...r-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx b/...r-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx
@@ -1,8 +1,6 @@
-import { CreateWalletParams, useWalletManager } from '@hooks';
+import { CreateWalletParams } from '@hooks';
 import { PostHogAction } from '@lace/common';
-import { useAnalyticsContext } from '@providers';
 import { walletRoutePaths } from '@routes';
-import { getWalletAccountsQtyString } from '@src/utils/get-wallet-count-string';
 import React, { createContext, useContext, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useSoftwareWalletCreation } from '../useSoftwareWalletCreation';
@@ -40,10 +38,9 @@ export const useCreateWallet = (): State => {
 
 export const CreateWalletProvider = ({ children, providers }: Props): React.ReactElement => {
   const history = useHistory();
-  const analytics = useAnalyticsContext();
-  const { createWallet, walletRepository } = useWalletManager();
-  const { clearSecrets, createWalletData, setCreateWalletData } = useSoftwareWalletCreation({
-    initialMnemonic: providers.generateMnemonicWords()
+  const { clearSecrets, createWallet, createWalletData, setCreateWalletData } = useSoftwareWalletCreation({
+    initialMnemonic: providers.generateMnemonicWords(),
+    postHogActionWalletAdded: PostHogAction.MultiWalletCreateAdded
   });
   const [step, setStep] = useState<Step>(Step.RecoveryPhrase);
 
@@ -55,16 +52,6 @@ export const CreateWalletProvider = ({ children, providers }: Props): React.Reac
     setCreateWalletData((prevState) => ({ ...prevState, name, password }));
   };
 
-  const completeCreation = async () => {
-    const { source } = await createWallet(createWalletData);
-    void analytics.sendEventToPostHog(PostHogAction.MultiWalletCreateAdded, {
-      // eslint-disable-next-line camelcase
-      $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletRepository) }
-    });
-    void analytics.sendMergeEvent(source.account.extendedAccountPublicKey);
-    clearSecrets();
-  };
-
   const setFormDirty = (dirty: boolean) => {
     providers.confirmationDialog.shouldShowDialog$.next(dirty);
   };
@@ -77,7 +64,8 @@ export const CreateWalletProvider = ({ children, providers }: Props): React.Reac
         break;
       }
       case Step.Setup: {
-        await completeCreation();
+        await createWallet();
+        clearSecrets();
         history.push(walletRoutePaths.assets);
         break;
       }

diff --git a/...-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx b/...-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx
@@ -1,8 +1,7 @@
 import React, { createContext, useCallback, useContext, useState } from 'react';
 import { Providers } from './types';
-import { CreateWalletParams, useWalletManager } from '@hooks';
+import { CreateWalletParams } from '@hooks';
 import { PostHogAction } from '@lace/common';
-import { getWalletAccountsQtyString } from '@utils/get-wallet-count-string';
 import { useHistory } from 'react-router';
 import { useAnalyticsContext } from '@providers';
 import { filter, firstValueFrom } from 'rxjs';
@@ -43,9 +42,16 @@ export const useRestoreWallet = (): State => {
 export const RestoreWalletProvider = ({ children, providers }: Props): React.ReactElement => {
   const history = useHistory();
   const analytics = useAnalyticsContext();
-  const walletManager = useWalletManager();
   const [step, setStep] = useState<Step>(Step.RecoveryPhrase);
-  const { clearSecrets, createWalletData, setCreateWalletData } = useSoftwareWalletCreation({ initialMnemonic: [] });
+  const {
+    clearSecrets,
+    createWallet: createSoftwareWallet,
+    createWalletData,
+    setCreateWalletData
+  } = useSoftwareWalletCreation({
+    initialMnemonic: [],
+    postHogActionWalletAdded: PostHogAction.MultiWalletRestoreAdded
+  });
 
   const setMnemonic = useCallback(
     (mnemonic: string[]) => {
@@ -61,12 +67,7 @@ export const RestoreWalletProvider = ({ children, providers }: Props): React.Rea
   };
 
   const createWallet = async () => {
-    const { source, wallet } = await walletManager.createWallet(createWalletData);
-    void analytics.sendEventToPostHog(PostHogAction.MultiWalletRestoreAdded, {
-      // eslint-disable-next-line camelcase
-      $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletManager.walletRepository) }
-    });
-    void analytics.sendMergeEvent(source.account.extendedAccountPublicKey);
+    const { wallet } = await createSoftwareWallet();
     const addresses = await firstValueFrom(wallet.addresses$.pipe(filter((a) => a.length > 0)));
     const hdWalletDiscovered = addresses.some((addr) => !isScriptAddress(addr) && addr.index > 0);
     if (hdWalletDiscovered) {

diff --git a/...xtension-wallet/src/views/browser-view/features/multi-wallet/useSoftwareWalletCreation.ts b/...xtension-wallet/src/views/browser-view/features/multi-wallet/useSoftwareWalletCreation.ts
@@ -1,9 +1,22 @@
 import { CreateWalletParams, useWalletManager } from '@hooks';
+import { PostHogAction } from '@lace/common';
+import { useAnalyticsContext } from '@providers';
+import { getWalletAccountsQtyString } from '@utils/get-wallet-count-string';
 import { useEffect, useState } from 'react';
 import { firstValueFrom } from 'rxjs';
 
-export const useSoftwareWalletCreation = ({ initialMnemonic }: { initialMnemonic: string[] }) => {
-  const { walletRepository } = useWalletManager();
+type UseSoftwareWalletCreationParams = {
+  initialMnemonic: string[];
+  postHogActionWalletAdded: PostHogAction;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useSoftwareWalletCreation = ({
+  initialMnemonic,
+  postHogActionWalletAdded
+}: UseSoftwareWalletCreationParams) => {
+  const analytics = useAnalyticsContext();
+  const walletManager = useWalletManager();
   const [createWalletData, setCreateWalletData] = useState<CreateWalletParams>({
     mnemonic: initialMnemonic,
     name: '',
@@ -13,11 +26,21 @@ export const useSoftwareWalletCreation = ({ initialMnemonic }: { initialMnemonic
   useEffect(() => {
     (async () => {
       if (createWalletData.name) return;
-      const wallets = await firstValueFrom(walletRepository.wallets$);
+      const wallets = await firstValueFrom(walletManager.walletRepository.wallets$);
       const name = `Wallet ${wallets.length + 1}`;
       setCreateWalletData((prevState) => ({ ...prevState, name }));
     })();
-  }, [createWalletData.name, walletRepository]);
+  }, [createWalletData.name, walletManager.walletRepository]);
+
+  const createWallet = async () => {
+    const result = await walletManager.createWallet(createWalletData);
+    void analytics.sendEventToPostHog(postHogActionWalletAdded, {
+      // eslint-disable-next-line camelcase
+      $set: { wallet_accounts_quantity: await getWalletAccountsQtyString(walletManager.walletRepository) }
+    });
+    void analytics.sendMergeEvent(result.source.account.extendedAccountPublicKey);
+    return result;
+  };
 
   const clearSecrets = () => {
     createWalletData.password = '';
@@ -33,6 +56,7 @@ export const useSoftwareWalletCreation = ({ initialMnemonic }: { initialMnemonic
 
   return {
     clearSecrets,
+    createWallet,
     createWalletData,
     setCreateWalletData
   };