diff --git a/src/components/sidebar/WatchlistAddButton/index.tsx b/src/components/sidebar/WatchlistAddButton/index.tsx index f0df8fff3b..1f5399abb4 100644 --- a/src/components/sidebar/WatchlistAddButton/index.tsx +++ b/src/components/sidebar/WatchlistAddButton/index.tsx @@ -58,7 +58,7 @@ const WatchlistAddButton = () => { sx={{ py: 1.3 }} startIcon={} > - Add read-only + Add as Read-only )} diff --git a/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx index 96b7112d7b..aba2cdcdb7 100644 --- a/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx +++ b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx @@ -1,5 +1,6 @@ import { selectUndeployedSafes } from '@/features/counterfactual/store/undeployedSafesSlice' import NetworkLogosList from '@/features/multichain/components/NetworkLogosList' +import { showNotification } from '@/store/notificationsSlice' import SingleAccountItem from '@/features/myAccounts/components/AccountItems/SingleAccountItem' import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk' import { useCallback, useMemo, useState } from 'react' @@ -74,7 +75,7 @@ const MultichainIndicator = ({ safes }: { safes: SafeItem[] }) => { } function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) { - const { address, safes, isPinned } = multiSafeAccountItem + const { address, safes, isPinned, name } = multiSafeAccountItem const router = useRouter() const isWelcomePage = router.pathname === AppRoutes.welcome.accounts @@ -124,6 +125,7 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) { return { address, + name, sortedSafes, safeOverviews, sharedSetup, @@ -137,7 +139,12 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) { } } -function usePinActions(address: string, safes: SafeItem[], safeOverviews: SafeOverview[] | undefined) { +function usePinActions( + address: string, + name: string | undefined, + safes: SafeItem[], + safeOverviews: SafeOverview[] | undefined, +) { const dispatch = useAppDispatch() const allAddedSafes = useAppSelector(selectAllAddedSafes) @@ -173,15 +180,35 @@ function usePinActions(address: string, safes: SafeItem[], safeOverviews: SafeOv dispatch(pinSafe({ chainId: safe.chainId, address: safe.address })) } } + + dispatch( + showNotification({ + title: 'Pinned multi-chain Safe', + message: name ?? shortenAddress(address), + groupKey: `pin-safe-success-${address}`, + variant: 'success', + }), + ) + trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.pin }) - }, [safes, allAddedSafes, dispatch, findOverview, address]) + }, [name, safes, allAddedSafes, dispatch, findOverview, address]) const removeFromPinnedList = useCallback(() => { for (const safe of safes) { dispatch(unpinSafe({ chainId: safe.chainId, address: safe.address })) } + + dispatch( + showNotification({ + title: 'Unpinned multi-chain Safe', + message: name ?? shortenAddress(address), + groupKey: `unpin-safe-success-${address}`, + variant: 'success', + }), + ) + trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.unpin }) - }, [safes, dispatch]) + }, [dispatch, name, address, safes]) return { addToPinnedList, removeFromPinnedList } } @@ -189,6 +216,7 @@ function usePinActions(address: string, safes: SafeItem[], safeOverviews: SafeOv const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountItemProps) => { const { address, + name, sortedSafes, safeOverviews, sharedSetup, @@ -200,7 +228,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte isWelcomePage, deployedChainIds, } = useMultiAccountItemData(multiSafeAccountItem) - const { addToPinnedList, removeFromPinnedList } = usePinActions(address, sortedSafes, safeOverviews) + const { addToPinnedList, removeFromPinnedList } = usePinActions(address, name, sortedSafes, safeOverviews) const [expanded, setExpanded] = useState(isCurrentSafe) const trackingLabel = isWelcomePage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar diff --git a/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx index 63bab5eb3a..f3c5060bb6 100644 --- a/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx +++ b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx @@ -29,7 +29,7 @@ import { addOrUpdateSafe, unpinSafe } from '@/store/addedSafesSlice' import SafeIcon from '@/components/common/SafeIcon' import useOnceVisible from '@/hooks/useOnceVisible' import { skipToken } from '@reduxjs/toolkit/query' -import { defaultSafeInfo, useGetSafeOverviewQuery } from '@/store/slices' +import { defaultSafeInfo, showNotification, useGetSafeOverviewQuery } from '@/store/slices' import FiatValue from '@/components/common/FiatValue' import { AccountInfoChips } from '../AccountInfoChips' @@ -103,11 +103,31 @@ const SingleAccountItem = ({ onLinkClick, safeItem, isMultiChainItem = false }: }, }), ) + + dispatch( + showNotification({ + title: 'Pinned Safe', + message: name ?? shortenAddress(address), + groupKey: `pin-safe-success-${address}`, + variant: 'success', + }), + ) + trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.pin }) } const removeFromPinnedList = () => { dispatch(unpinSafe({ chainId, address })) + + dispatch( + showNotification({ + title: 'Unpinned Safe', + message: name ?? shortenAddress(address), + groupKey: `unpin-safe-success-${address}`, + variant: 'success', + }), + ) + trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.unpin }) } diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx index a6468fb84a..c14ecaca50 100644 --- a/src/features/myAccounts/index.tsx +++ b/src/features/myAccounts/index.tsx @@ -129,6 +129,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro onChange={(e) => { handleSearch(e.target.value) }} + className={css.search} InputProps={{ startAdornment: ( diff --git a/src/features/myAccounts/styles.module.css b/src/features/myAccounts/styles.module.css index 84df9b9a56..c9387baf89 100644 --- a/src/features/myAccounts/styles.module.css +++ b/src/features/myAccounts/styles.module.css @@ -73,6 +73,10 @@ vertical-align: middle; } +.search :global .MuiInputBase-root { + border: 1px solid transparent !important; +} + @media (max-width: 599.95px) { .header { flex-direction: column; diff --git a/src/store/addedSafesSlice.ts b/src/store/addedSafesSlice.ts index e6b22dcda9..a46fa5b353 100644 --- a/src/store/addedSafesSlice.ts +++ b/src/store/addedSafesSlice.ts @@ -59,7 +59,7 @@ export const addedSafesSlice = createSlice({ delete state[chainId]?.[address] - if (Object.keys(state[chainId]).length === 0) { + if (state[chainId] && Object.keys(state[chainId]).length === 0) { delete state[chainId] } },