with modal info

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 (
+    <Dialog
+      fullWidth
+      maxWidth={'xs'}
+      open={localStorage.getItem(LOCALSTORAGE_KEY) === 'true' ? false : true}
+      className={className}
+    >
+      <ModalCloseButton onClose={onClose} />
+      <DialogTitle>Account hidden!</DialogTitle>
+      <DialogContent data-cy="modal-hidden-account-info">
+        <Grid container>
+          <Grid size={12}>
+            This account is now hidden for this network. To show it again go to Settings &gt; Hidden
+            Accounts.
+          </Grid>
+          <FooterContainerStyled
+            container
+            size={12}
+          >
+            <FormControlLabel
+              label="Don't show this message again"
+              control={
+                <Checkbox
+                  checked={dontShow}
+                  onChange={() => {
+                    setDontShow(!dontShow)
+                  }}
+                  // @ts-expect-error
+                  inputProps={{ 'data-cy': 'checkbox-message' }}
+                />
+              }
+            />
+            <Button
+              className="closeButton"
+              variant="primary"
+              onClick={onClick}
+            >
+              Got it
+            </Button>
+          </FooterContainerStyled>
+        </Grid>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+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;
+  }
+`

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(

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<EasyTransferTitle>(
     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 (
     <ModalsContext.Provider
       value={{
@@ -116,7 +123,8 @@ const ModalsContextProvider = ({ children }: React.PropsWithChildren) => {
         onCloseSendModal,
         openWalletConnectSessionModal,
         onOpenSigningModal,
-        onOpenWalletConnectSigning
+        onOpenWalletConnectSigning,
+        onOpenHiddenAccountInfoModal
       }}
     >
       {children}
@@ -150,6 +158,9 @@ const ModalsContextProvider = ({ children }: React.PropsWithChildren) => {
           request={walletConnectRequest}
         />
       )}
+      {isHiddenAccountInfoModalOpen && (
+        <HiddenAccountInfo onClose={() => setIsHiddenAccountInfoModalOpen(false)} />
+      )}
     </ModalsContext.Provider>
   )
 }

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: <PencilIcon size={20} />,
         onClick: () => setIsEditModalOpen(true)
       },
+      {
+        text: 'Hide this account',
+        icon: <EyeSlashIcon size={20} />,
+        onClick: onHideAccount
+      },
       {
         text: 'Subscan',
         icon: <LaunchIcon size={20} />,
@@ -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: <HiOutlinePaperAirplane size={20} />,
-    //     onClick: () => setIsSendModalOpen(true)
-    //   })
-    // }
-
     return opts
   }, [
+    onHideAccount,
     selectedIsWatched,
     hasPplChain,
     hasIdentityPallet,