Refactor hooks related to removing accounts

src/components/AccountDrawer/RenameRemoveMenuSwitch.tsx

@@ -4,28 +4,35 @@ import { useNavigate } from "react-router-dom";
 import { RenameAccountModal } from "./RenameAccountModal";
 import { Account } from "../../types/Account";
 import { useImplicitAccounts } from "../../utils/hooks/getAccountDataHooks";
-import { useAppDispatch } from "../../utils/redux/hooks";
-import { accountsSlice } from "../../utils/redux/slices/accountsSlice";
-import { remove as removeSecretKeyAccount } from "../../utils/redux/thunks/secretKeyAccount";
+import { useRemoveAccount } from "../../utils/hooks/removeAccountDataHooks";
 import { ConfirmationModal } from "../ConfirmationModal";
 import { DynamicModalContext } from "../DynamicModal";
 import { RenameRemoveMenu } from "../RenameRemoveMenu";
 
 export const RenameRemoveMenuSwitch: React.FC<{ account: Account }> = ({ account }) => {
   const { openWith, onClose: closeModal } = useContext(DynamicModalContext);
-  const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const isLastImplicitAccount = useImplicitAccounts().length === 1;
+  const removeAccount = useRemoveAccount();
 
-  let removeAccountAction: any = undefined;
-
+  let onRemove = undefined;
   switch (account.type) {
     case "secret_key":
-      removeAccountAction = removeSecretKeyAccount;
-      break;
     case "ledger":
     case "social":
-      removeAccountAction = () => accountsSlice.actions.removeAccount(account);
+      onRemove = () =>
+        openWith(
+          <ConfirmationModal
+            buttonLabel={buttonLabel}
+            description={description}
+            onSubmit={() => {
+              removeAccount(account);
+              closeModal();
+              navigate("/");
+            }}
+            title={title}
+          />
+        );
       break;
     case "mnemonic":
     case "multisig":
@@ -43,22 +50,6 @@ export const RenameRemoveMenuSwitch: React.FC<{ account: Account }> = ({ account
     buttonLabel = "Remove & Off-board";
   }
 
-  const onRemove = !removeAccountAction
-    ? undefined
-    : () =>
-        openWith(
-          <ConfirmationModal
-            buttonLabel={buttonLabel}
-            description={description}
-            onSubmit={() => {
-              dispatch(removeAccountAction(account));
-              closeModal();
-              navigate("/");
-            }}
-            title={title}
-          />
-        );
-
   return (
     <RenameRemoveMenu
       onRemove={onRemove}

src/utils/hooks/removeAccountDataHooks.test.ts

@@ -0,0 +1,26 @@
+import { useRemoveAccount } from "./removeAccountDataHooks";
+import { mockSecretKeyAccount } from "../../mocks/factories";
+import { renderHook } from "../../mocks/testUtils";
+import { accountsSlice } from "../redux/slices/accountsSlice";
+import { store } from "../redux/store";
+
+describe("useRemoveAccount", () => {
+  test("deletes relevant data from accounts slice", () => {
+    const account = mockSecretKeyAccount(0);
+    store.dispatch(accountsSlice.actions.addAccount(account));
+    store.dispatch(
+      accountsSlice.actions.addSecretKey({
+        pkh: account.address.pkh,
+        encryptedSecretKey: "encryptedSecretKey" as any,
+      })
+    );
+
+    const {
+      result: { current: removeAccount },
+    } = renderHook(() => useRemoveAccount());
+    removeAccount(account);
+
+    expect(store.getState().accounts.items).toEqual([]);
+    expect(store.getState().accounts.secretKeys).toEqual({});
+  });
+});

src/utils/hooks/removeAccountDataHooks.ts

@@ -0,0 +1,46 @@
+import { AccountType, LedgerAccount, SecretKeyAccount, SocialAccount } from "../../types/Account";
+import { useAppDispatch } from "../redux/hooks";
+import { accountsSlice } from "../redux/slices/accountsSlice";
+
+const { removeMnemonicAndAccounts, removeNonMnemonicAccounts } = accountsSlice.actions;
+
+/**
+ * Hook for removing all accounts from mnemonic group by a given fingerprint.
+ */
+export const useRemoveMnemonic = () => {
+  const dispatch = useAppDispatch();
+  return (fingerPrint: string) => {
+    dispatch(
+      removeMnemonicAndAccounts({
+        fingerPrint,
+      })
+    );
+  };
+};
+
+/**
+ * Hook for removing all accounts of a given type.
+ */
+export const useRemoveNonMnemonic = () => {
+  const dispatch = useAppDispatch();
+  return (accountType: AccountType) => {
+    dispatch(
+      removeNonMnemonicAccounts({
+        accountType,
+      })
+    );
+  };
+};
+
+/**
+ * Hook for removing single account.
+ */
+export const useRemoveAccount = () => {
+  const dispatch = useAppDispatch();
+  return (account: SocialAccount | LedgerAccount | SecretKeyAccount) => {
+    if (account.type === "secret_key") {
+      dispatch(accountsSlice.actions.removeSecretKey(account));
+    }
+    dispatch(accountsSlice.actions.removeAccount(account));
+  };
+};

src/utils/hooks/setAccountDataHooks.ts

@@ -6,7 +6,7 @@ import {
   useSeedPhrases,
 } from "./getAccountDataHooks";
 import { useSelectedNetwork } from "./networkHooks";
-import { AccountType, LedgerAccount, MnemonicAccount, SocialAccount } from "../../types/Account";
+import { LedgerAccount, MnemonicAccount, SocialAccount } from "../../types/Account";
 import { makeDerivationPath } from "../account/derivationPathUtils";
 import { makeMnemonicAccount } from "../account/makeMnemonicAccount";
 import { decrypt, encrypt } from "../crypto/AES";
@@ -16,7 +16,7 @@ import { accountsSlice } from "../redux/slices/accountsSlice";
 import { restore as restoreFromSecretKey } from "../redux/thunks/secretKeyAccount";
 import { derivePublicKeyPair, getFingerPrint } from "../tezos";
 
-const { addAccount, removeMnemonicAndAccounts, removeNonMnemonicAccounts } = accountsSlice.actions;
+const { addAccount } = accountsSlice.actions;
 
 export const useReset = () => () => {
   localStorage.clear();
@@ -173,25 +173,3 @@ export const useRestoreSocial = () => {
     dispatch(addAccount(account));
   };
 };
-
-export const useRemoveMnemonic = () => {
-  const dispatch = useAppDispatch();
-  return (fingerPrint: string) => {
-    dispatch(
-      removeMnemonicAndAccounts({
-        fingerPrint,
-      })
-    );
-  };
-};
-
-export const useRemoveNonMnemonic = () => {
-  const dispatch = useAppDispatch();
-  return (accountType: AccountType) => {
-    dispatch(
-      removeNonMnemonicAccounts({
-        accountType,
-      })
-    );
-  };
-};

src/utils/redux/slices/accountsSlice.ts

@@ -44,6 +44,7 @@ export const accountsSlice = createSlice({
   },
   reducers: {
     reset: () => initialState,
+    // Do not call this directly, use useRemoveMnemonic  from removeAccountDataHooks
     removeMnemonicAndAccounts: (
       state,
       { payload }: { type: string; payload: { fingerPrint: string } }
@@ -55,6 +56,7 @@ export const accountsSlice = createSlice({
       state.items = newAccounts;
       delete state.seedPhrases[fingerPrint];
     },
+    // Do not call this directly, use useRemoveNonMnemonic from removeAccountDataHooks
     removeNonMnemonicAccounts: (
       state,
       { payload }: { type: string; payload: { accountType: AccountType } }
@@ -64,6 +66,7 @@ export const accountsSlice = createSlice({
         account => account.type === "mnemonic" || account.type !== payload.accountType
       );
     },
+    // Do not call this directly, use useRemoveAccount from removeAccountDataHooks
     removeAccount: (
       state,
       { payload }: { type: string; payload: SocialAccount | LedgerAccount | SecretKeyAccount }

src/utils/redux/thunks/secretKeyAccount.test.ts

@@ -1,5 +1,5 @@
-import { getCurve, remove, restore } from "./secretKeyAccount";
-import { mockMnemonicAccount, mockSecretKeyAccount } from "../../../mocks/factories";
+import { getCurve, restore } from "./secretKeyAccount";
+import { mockMnemonicAccount } from "../../../mocks/factories";
 import { decrypt } from "../../crypto/AES";
 import { EncryptedData } from "../../crypto/types";
 import { accountsSlice } from "../slices/accountsSlice";
@@ -82,24 +82,6 @@ describe("secretKeyAccount", () => {
     });
   });
 
-  describe("remove", () => {
-    test("deletes relevant data from accounts slice", () => {
-      const account = mockSecretKeyAccount(0);
-      store.dispatch(accountsSlice.actions.addAccount(account));
-      store.dispatch(
-        accountsSlice.actions.addSecretKey({
-          pkh: account.address.pkh,
-          encryptedSecretKey: "encryptedSecretKey" as any,
-        })
-      );
-
-      store.dispatch(remove(account));
-
-      expect(store.getState().accounts.items).toEqual([]);
-      expect(store.getState().accounts.secretKeys).toEqual({});
-    });
-  });
-
   describe("getCurve", () => {
     it("returns ed25519 for edsk", () => {
       expect(

src/utils/redux/thunks/secretKeyAccount.ts

@@ -1,7 +1,6 @@
 import { Curves } from "@taquito/signer";
 import { Prefix } from "@taquito/utils";
 
-import { SecretKeyAccount } from "../../../types/Account";
 import { parseImplicitPkh } from "../../../types/Address";
 import { encrypt } from "../../crypto/AES";
 import { getPublicKeyPairFromSk } from "../../tezos";
@@ -60,8 +59,3 @@ export const restore =
     dispatch(accountsSlice.actions.addAccount(account));
     dispatch(accountsSlice.actions.addSecretKey({ pkh: account.address.pkh, encryptedSecretKey }));
   };
-
-export const remove = (account: SecretKeyAccount) => (dispatch: AppDispatch) => {
-  dispatch(accountsSlice.actions.removeSecretKey(account));
-  dispatch(accountsSlice.actions.removeAccount(account));
-};

src/views/home/AccountsList.tsx

@@ -24,11 +24,8 @@ import { NameMultisigFormPage } from "../../components/SendFlow/MultisigAccount/
 import colors from "../../style/colors";
 import { Account } from "../../types/Account";
 import { useAllAccounts, useImplicitAccounts } from "../../utils/hooks/getAccountDataHooks";
-import {
-  useDeriveMnemonicAccount,
-  useRemoveMnemonic,
-  useRemoveNonMnemonic,
-} from "../../utils/hooks/setAccountDataHooks";
+import { useRemoveMnemonic, useRemoveNonMnemonic } from "../../utils/hooks/removeAccountDataHooks";
+import { useDeriveMnemonicAccount } from "../../utils/hooks/setAccountDataHooks";
 import { useAsyncActionHandler } from "../../utils/hooks/useAsyncActionHandler";
 import { useAppSelector } from "../../utils/redux/hooks";