diff --git a/src/utils/hooks/accountHooks.ts b/src/utils/hooks/accountHooks.ts
index 937dc60818..8c5eced124 100644
--- a/src/utils/hooks/accountHooks.ts
+++ b/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();
diff --git a/src/utils/hooks/confirmModal.tsx b/src/utils/hooks/confirmModal.tsx
deleted file mode 100644
index 27393a5202..0000000000
--- a/src/utils/hooks/confirmModal.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
- useDisclosure,
- Modal,
- ModalContent,
- ModalCloseButton,
- ModalHeader,
- ModalBody,
- ModalFooter,
- Button,
-} from "@chakra-ui/react";
-import { useRef } from "react";
-
-// TODO: replace with ConfirmationModal
-export const useConfirmation = () => {
- const { isOpen, onOpen, onClose } = useDisclosure();
-
- const paramsRef = useRef({ onConfirm: () => {}, body: "" });
-
- return {
- element: (
-
-
-
- Confirmation
- {paramsRef.current.body}
-
-
-
-
-
-
- ),
- onClose,
- onOpen: (params: { onConfirm: () => void; body: string }) => {
- paramsRef.current = params;
- onOpen();
- },
- };
-};
diff --git a/src/views/home/AccountPopover.tsx b/src/views/home/AccountPopover.tsx
index a8cacd5d2c..af01dbb983 100644
--- a/src/views/home/AccountPopover.tsx
+++ b/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 (
-
-
+ {onCreate && (
+ <>
+
+
+ >
+ )}
);
};
diff --git a/src/views/home/AccountsList.tsx b/src/views/home/AccountsList.tsx
index 784075e51f..2a5abbf12f 100644
--- a/src/views/home/AccountsList.tsx
+++ b/src/views/home/AccountsList.tsx
@@ -1,16 +1,6 @@
-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";
@@ -18,8 +8,11 @@ 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,19 +40,42 @@ const AccountGroup: React.FC<{
balances: Record;
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(
+ {
+ 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();
+ };
+
return (
@@ -66,7 +83,9 @@ const AccountGroup: React.FC<{
{groupLabel}
- {showCTA && }
+ {!isMultisig && (
+
+ )}
{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 (
{
onOpen();
onSelect(pkh);
@@ -181,8 +164,6 @@ export const AccountsList: React.FC<{
- {confirmModal}
- {deriveAccountModal}
>
);
@@ -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: (
-
-
- {paramsRef.current?.fingerprint && (
-
- )}
-
-
- ),
- onOpen: (params: { fingerprint: string }) => {
- paramsRef.current = params;
- onOpen();
- },
- };
-};