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(); - }, - }; -};