fix: Adjust sidebar search input design, show notifications on pin sa…

…fe (safe-global#4657)

* fix: Adjust sidebar search input design, show notifications on pin safe

* fix: Show short address or name in notification

src/components/sidebar/WatchlistAddButton/index.tsx

@@ -58,7 +58,7 @@ const WatchlistAddButton = () => {
             sx={{ py: 1.3 }}
             startIcon={<VisibilityOutlined sx={{ verticalAlign: 'middle', marginRight: 1 }} />}
           >
-            Add read-only
+            Add as Read-only
           </Button>
         </Track>
       )}

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,22 +180,43 @@ 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 }
 }
 
 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

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 })
   }
 

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: (
                     <InputAdornment position="start">

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;

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]
       }
     },