Remove account

src/utils/hooks/accountHooks.ts

@@ -18,7 +18,7 @@ import { restoreFromMnemonic } from "../redux/thunks/restoreMnemonicAccounts";
 import { useGetAccountBalance } from "./assetsHooks";
 import { useMultisigs } from "./multisigHooks";
 
-const { addAccount, removeMnemonicAndAccounts } = accountsSlice.actions;
+const { addAccount, removeMnemonicAndAccounts, removeNonMnemonicAccounts } = accountsSlice.actions;
 
 export const useImplicitAccounts = () => {
   return useAppSelector(s => s.accounts.items);
@@ -143,6 +143,16 @@ export const useRemoveMnemonic = () => {
     );
   };
 };
+export const useRemoveNonMnemonic = () => {
+  const dispatch = useAppDispatch();
+  return (accountType: AccountType) => {
+    dispatch(
+      removeNonMnemonicAccounts({
+        accountType,
+      })
+    );
+  };
+};
 
 export const useMultisigAccounts = (): MultisigAccount[] => {
   const multisigs: Multisig[] = useMultisigs();

src/views/home/AccountPopover.tsx

@@ -6,13 +6,17 @@ import Trash from "../../assets/icons/Trash";
 
 const AccountPopover: React.FC<{
   onDelete: () => void;
-  onCreate: () => void;
+  onCreate?: () => void;
 }> = ({ onDelete, onCreate }) => {
   return (
     <PopoverMenu>
       <IconAndTextBtn label="Remove" icon={Trash} onClick={onDelete} textFirst />
-      <Divider marginY={1} />
-      <IconAndTextBtn label="Create" icon={AiOutlinePlus} onClick={onCreate} textFirst />
+      {onCreate && (
+        <>
+          <Divider marginY={1} />
+          <IconAndTextBtn label="Create" icon={AiOutlinePlus} onClick={onCreate} textFirst />
+        </>
+      )}
     </PopoverMenu>
   );
 };

src/views/home/AccountsList.tsx

@@ -1,25 +1,18 @@
-import {
-  Box,
-  Button,
-  Flex,
-  Heading,
-  Modal,
-  ModalContent,
-  Text,
-  useDisclosure,
-  useToast,
-} from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Text, useToast } from "@chakra-ui/react";
 import { compact, groupBy } from "lodash";
-import { useContext, useRef } from "react";
+import { useContext } from "react";
 import { BsWindowPlus } from "react-icons/bs";
 import KeyIcon from "../../assets/icons/Key";
 import { DynamicModalContext } from "../../components/DynamicModal";
 import { IconAndTextBtn } from "../../components/IconAndTextBtn";
 import NestedScroll from "../../components/NestedScroll";
 import { useOnboardingModal } from "../../components/Onboarding/useOnboardingModal";
 import { AccountType, Account } from "../../types/Account";
-import { useAllAccounts, useRemoveMnemonic } from "../../utils/hooks/accountHooks";
-import { useConfirmation } from "../../utils/hooks/confirmModal";
+import {
+  useAllAccounts,
+  useRemoveMnemonic,
+  useRemoveNonMnemonic,
+} from "../../utils/hooks/accountHooks";
 import { useAsyncActionHandler } from "../../utils/hooks/useAsyncActionHandler";
 import { useAppDispatch, useAppSelector } from "../../utils/redux/hooks";
 import { deriveAccount } from "../../utils/redux/thunks/restoreMnemonicAccounts";
@@ -28,6 +21,7 @@ import DeriveAccountDisplay from "./DeriveAccountDisplay.tsx";
 import { FormPage } from "../../components/SendFlow/MultisigAccount/FormPage";
 import { AccountTile } from "../../components/AccountTile/AccountTile";
 import colors from "../../style/colors";
+import { ConfirmationModal } from "../../components/ConfirmationModal";
 
 export const AccountListHeader = () => {
   const { onOpen, modalElement } = useOnboardingModal();
@@ -46,27 +40,52 @@ const AccountGroup: React.FC<{
   balances: Record<string, string | undefined>;
   onSelect: (pkh: string) => void;
   selected: string | null;
-  onDelete?: () => void;
-  onDerive: () => void;
-  showCTA: boolean;
-}> = ({
-  groupLabel,
-  accounts,
-  balances,
-  onSelect,
-  selected,
-  onDelete = () => {},
-  onDerive,
-  showCTA = false,
-}) => {
+}> = ({ groupLabel, accounts, balances, onSelect, selected }) => {
+  const first = accounts[0];
+  const isMultisig = first.type === AccountType.MULTISIG;
+  const isMnemonic = first.type === AccountType.MNEMONIC;
+  const { openWith, onClose } = useContext(DynamicModalContext);
+  const removeMnemonic = useRemoveMnemonic();
+  const removeNonMnemonic = useRemoveNonMnemonic();
+  const modalBody = isMnemonic
+    ? `Are you sure you want to delete all accounts derived from ${getLabel(first)}?`
+    : `Are you sure you want to delete all of your ${getLabel(first)}?`;
+
+  const onDelete = () => {
+    openWith(
+      <ConfirmationModal
+        title="Confirmation"
+        buttonLabel="Confirm"
+        description={modalBody}
+        onSubmit={() => {
+          if (isMnemonic) {
+            removeMnemonic(first.seedFingerPrint);
+          } else {
+            removeNonMnemonic(first.type);
+          }
+          onClose();
+        }}
+      />
+    );
+  };
+
+  const onDerive = () => {
+    if (!isMnemonic) {
+      throw new Error(`Can't derive a non mnemonic account!`);
+    }
+    openWith(<DeriveAccount onDone={onClose} fingerprint={first.seedFingerPrint} />);
+  };
+
   return (
     <Box data-testid={`account-group-${groupLabel}`}>
       <Flex justifyContent="space-between">
         <Heading size="md" mb={4}>
           {groupLabel}
         </Heading>
 
-        {showCTA && <AccountPopover onCreate={onDerive} onDelete={onDelete} />}
+        {!isMultisig && (
+          <AccountPopover onCreate={isMnemonic ? onDerive : undefined} onDelete={onDelete} />
+        )}
       </Flex>
 
       {accounts.map(account => {
@@ -110,50 +129,14 @@ export const AccountsList: React.FC<{
 
   const { openWith } = useContext(DynamicModalContext);
 
-  const {
-    onOpen: openConfirmModal,
-    element: confirmModal,
-    onClose: closeConfirmModal,
-  } = useConfirmation();
-  const removeMnemonic = useRemoveMnemonic();
-
-  const { element: deriveAccountModal, onOpen: openDeriveAccountModal } = useDeriveAccountModal();
-
   const accountTiles = Object.entries(accountsByKind).map(([label, accountsByType]) => {
-    const first = accountsByType[0];
-    const isMnemonicGroup = first.type === AccountType.MNEMONIC;
-
-    const handleDelete = () => {
-      if (!isMnemonicGroup) {
-        throw new Error(`Can't delete a non mnemonic account group! `);
-      }
-
-      openConfirmModal({
-        onConfirm: () => {
-          removeMnemonic(first.seedFingerPrint);
-          closeConfirmModal();
-        },
-        body: `Are you sure you want to delete all accounts derived from ${label}?`,
-      });
-    };
-
-    const handleDerive = () => {
-      if (!isMnemonicGroup) {
-        throw new Error(`Can't derive a non mnemonic account!`);
-      }
-      openDeriveAccountModal({ fingerprint: first.seedFingerPrint });
-    };
-
     return (
       <AccountGroup
-        showCTA={isMnemonicGroup}
         key={label}
         selected={selected}
         accounts={accountsByType}
         balances={mutezBalance}
         groupLabel={label}
-        onDelete={handleDelete}
-        onDerive={handleDerive}
         onSelect={(pkh: string) => {
           onOpen();
           onSelect(pkh);
@@ -181,8 +164,6 @@ export const AccountsList: React.FC<{
             </Text>
           </Button>
         </NestedScroll>
-        {confirmModal}
-        {deriveAccountModal}
       </Box>
     </>
   );
@@ -221,25 +202,3 @@ const DeriveAccount = (props: { onDone: () => void; fingerprint: string }) => {
     />
   );
 };
-
-export const useDeriveAccountModal = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const paramsRef = useRef<{ fingerprint: string }>();
-
-  return {
-    element: (
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalContent bg={colors.gray[900]}>
-          {paramsRef.current?.fingerprint && (
-            <DeriveAccount onDone={onClose} fingerprint={paramsRef.current.fingerprint} />
-          )}
-        </ModalContent>
-      </Modal>
-    ),
-    onOpen: (params: { fingerprint: string }) => {
-      paramsRef.current = params;
-      onOpen();
-    },
-  };
-};