diff --git a/packages/ui/src/components/modals/HiddenAccountInfo.tsx b/packages/ui/src/components/modals/HiddenAccountInfo.tsx new file mode 100644 index 00000000..5b93ee2e --- /dev/null +++ b/packages/ui/src/components/modals/HiddenAccountInfo.tsx @@ -0,0 +1,93 @@ +import { + Checkbox, + Dialog, + DialogContent, + DialogTitle, + FormControlLabel, + Grid2 as Grid +} from '@mui/material' +import { Button } from '../library' +import { styled } from '@mui/material/styles' +import { ModalCloseButton } from '../library/ModalCloseButton' +import { useCallback, useState } from 'react' + +interface Props { + onClose: () => void + className?: string +} + +export const LOCALSTORAGE_KEY = 'multix.dontShowHiddenAccountInfo' + +const HiddenAccountInfo = ({ onClose, className }: Props) => { + const [dontShow, setDontShow] = useState(false) + const onClick = useCallback(() => { + onClose() + if (dontShow) { + localStorage.setItem(LOCALSTORAGE_KEY, 'true') + } + }, [dontShow, onClose]) + + return ( + + + Account hidden! + + + + This account is now hidden for this network. To show it again go to Settings > Hidden + Accounts. + + + { + setDontShow(!dontShow) + }} + // @ts-expect-error + inputProps={{ 'data-cy': 'checkbox-message' }} + /> + } + /> + + + + + + ) +} + +const FooterContainerStyled = styled(Grid)` + margin-top: 1rem; + + button:last-child { + margin-left: auto; + } + + .closeButton { + margin-left: auto; + } +` + +export default styled(HiddenAccountInfo)` + .accountEdition { + margin-bottom: 1rem; + align-items: end; + } +` diff --git a/packages/ui/src/contexts/HiddenAccountsContext.tsx b/packages/ui/src/contexts/HiddenAccountsContext.tsx index 7fa9f50d..f307267a 100644 --- a/packages/ui/src/contexts/HiddenAccountsContext.tsx +++ b/packages/ui/src/contexts/HiddenAccountsContext.tsx @@ -13,6 +13,7 @@ import { useNetwork } from './NetworkContext' import { HexString } from 'polkadot-api' import { useGetEncodedAddress } from '../hooks/useGetEncodedAddress' import { useSearchParams } from 'react-router' +import { useWatchedAddresses } from './WatchedAddressesContext' const LOCALSTORAGE_HIDDEN_ACCOUNTS_KEY = 'multix.hiddenAccounts' @@ -42,6 +43,7 @@ const HiddenAccountsContextProvider = ({ children }: HiddenAccountsProps) => { const { selectedNetwork } = useNetwork() const getEncodedAddress = useGetEncodedAddress() const [searchParams, setSearchParams] = useSearchParams({ address: '' }) + const { watchedAddresses, removeWatchedAccount } = useWatchedAddresses() const networkHiddenAccounts = useMemo(() => { if (!selectedNetwork) return [] @@ -67,14 +69,21 @@ const HiddenAccountsContextProvider = ({ children }: HiddenAccountsProps) => { return prev }) } - selectedNetwork && - pubKey && - setHiddenAccounts((prev) => [ - ...prev, - { pubKey, network: selectedNetwork } as HiddenAccount - ]) + + // if we are hiding a watched account + // just remove it from the watch list + if (watchedAddresses.includes(address)) { + removeWatchedAccount(address) + } else { + selectedNetwork && + pubKey && + setHiddenAccounts((prev) => [ + ...prev, + { pubKey, network: selectedNetwork } as HiddenAccount + ]) + } }, - [searchParams, selectedNetwork, setSearchParams] + [removeWatchedAccount, searchParams, selectedNetwork, setSearchParams, watchedAddresses] ) const removeHiddenAccount = useCallback( diff --git a/packages/ui/src/contexts/ModalsContext.tsx b/packages/ui/src/contexts/ModalsContext.tsx index cf7632a4..20faef21 100644 --- a/packages/ui/src/contexts/ModalsContext.tsx +++ b/packages/ui/src/contexts/ModalsContext.tsx @@ -8,6 +8,7 @@ import WCSessionProposal from '../components/modals/WalletConnectSessionProposal import ProposalSigningModal, { SigningModalProps } from '../components/modals/ProposalSigning' import WalletConnectSigning from '../components/modals/WalletConnectSigning' import { useMultiProxy } from './MultiProxyContext' +import HiddenAccountInfo from '../components/modals/HiddenAccountInfo' interface ModalsContextProps { setIsEditModalOpen: (isOpen: boolean) => void @@ -17,6 +18,7 @@ interface ModalsContextProps { openWalletConnectSessionModal: ({ sessionProposal }: OpenWCModalParams) => void onOpenSigningModal: (info: SigningInfo) => void onOpenWalletConnectSigning: (request: SignClientTypes.EventArguments['session_request']) => void + onOpenHiddenAccountInfoModal: () => void } interface OpenWCModalParams { @@ -38,6 +40,7 @@ const ModalsContextProvider = ({ children }: React.PropsWithChildren) => { const [sendModalPreselection, setSendModalPreselection] = useState( DEFAULT_EASY_SETUP_SELECTION ) + const [isHiddenAccountInfoModalOpen, setIsHiddenAccountInfoModalOpen] = useState(false) const [walletConnectRequest, setWalletConnectRequest] = useState< SignClientTypes.EventArguments['session_request'] | undefined >() @@ -107,6 +110,10 @@ const ModalsContextProvider = ({ children }: React.PropsWithChildren) => { setIsOpenWalletConnectSigning(false) }, []) + const onOpenHiddenAccountInfoModal = useCallback(() => { + setIsHiddenAccountInfoModalOpen(true) + }, []) + return ( { onCloseSendModal, openWalletConnectSessionModal, onOpenSigningModal, - onOpenWalletConnectSigning + onOpenWalletConnectSigning, + onOpenHiddenAccountInfoModal }} > {children} @@ -150,6 +158,9 @@ const ModalsContextProvider = ({ children }: React.PropsWithChildren) => { request={walletConnectRequest} /> )} + {isHiddenAccountInfoModalOpen && ( + setIsHiddenAccountInfoModalOpen(false)} /> + )} ) } diff --git a/packages/ui/src/pages/Home/MultisigActionMenu.tsx b/packages/ui/src/pages/Home/MultisigActionMenu.tsx index 54afd6cd..a1aa3ac3 100644 --- a/packages/ui/src/pages/Home/MultisigActionMenu.tsx +++ b/packages/ui/src/pages/Home/MultisigActionMenu.tsx @@ -1,17 +1,19 @@ import { Button } from '../../components/library' import OptionsMenu, { MenuOption } from '../../components/OptionsMenu' -import { useMemo } from 'react' +import { useCallback, useMemo } from 'react' import { MdOutlineLockReset as LockResetIcon } from 'react-icons/md' import { useMultiProxy } from '../../contexts/MultiProxyContext' import { useModals } from '../../contexts/ModalsContext' import { HiOutlineArrowTopRightOnSquare as LaunchIcon, HiOutlineUserPlus as IdentityIcon, - HiOutlinePencilSquare as PencilIcon + HiOutlinePencilSquare as PencilIcon, + HiOutlineEyeSlash as EyeSlashIcon } from 'react-icons/hi2' import { useGetSubscanLinks } from '../../hooks/useSubscanLink' import { EasyTransferTitle } from '../../components/modals/Send' import { useHasIdentityFeature } from '../../hooks/useHasIdentityFeature' +import { useHiddenAccounts } from '../../contexts/HiddenAccountsContext' interface MultisigActionMenuProps { withNewTransactionButton?: boolean @@ -22,10 +24,20 @@ const MultisigActionMenu = ({ withNewTransactionButton = true, menuButtonBorder }: MultisigActionMenuProps) => { - const { selectedHasProxy, selectedIsWatched, selectedMultiProxy } = useMultiProxy() + const { selectedHasProxy, selectedIsWatched, selectedMultiProxy, selectedMultiProxyAddress } = + useMultiProxy() const { setIsEditModalOpen, setIsChangeMultiModalOpen, onOpenSendModal } = useModals() const { getSubscanAccountLink } = useGetSubscanLinks() const { hasIdentityPallet, hasPplChain } = useHasIdentityFeature() + const { addHiddenAccount } = useHiddenAccounts() + const { onOpenHiddenAccountInfoModal } = useModals() + + const onHideAccount = useCallback(() => { + if (!selectedMultiProxyAddress) return + + onOpenHiddenAccountInfoModal() + addHiddenAccount(selectedMultiProxyAddress) + }, [addHiddenAccount, onOpenHiddenAccountInfoModal, selectedMultiProxyAddress]) const options: MenuOption[] = useMemo(() => { const opts = [ @@ -34,6 +46,11 @@ const MultisigActionMenu = ({ icon: , onClick: () => setIsEditModalOpen(true) }, + { + text: 'Hide this account', + icon: , + onClick: onHideAccount + }, { text: 'Subscan', icon: , @@ -63,19 +80,9 @@ const MultisigActionMenu = ({ onClick: () => setIsChangeMultiModalOpen(true) }) - // If we are NOT rendering "new transaction button" and is it's NOT a Watched account, - // the "Send transaction" item will appear in the list menu - // TODO: Individual transaction button for each mulisig - // if (!withNewTransactionButton && !selectedIsWatched) { - // opts.unshift({ - // text: 'Send transaction', - // icon: , - // onClick: () => setIsSendModalOpen(true) - // }) - // } - return opts }, [ + onHideAccount, selectedIsWatched, hasPplChain, hasIdentityPallet,