From e509e6bdabaaf18f8ad8fe1834bd6f3a40997616 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Sun, 15 Dec 2024 23:40:39 +0100
Subject: [PATCH] fix: Adjust sidebar search input design, show notifications
on pin safe (#4657)
* fix: Adjust sidebar search input design, show notifications on pin safe
* fix: Show short address or name in notification
---
.../sidebar/WatchlistAddButton/index.tsx | 2 +-
.../AccountItems/MultiAccountItem.tsx | 38 ++++++++++++++++---
.../AccountItems/SingleAccountItem.tsx | 22 ++++++++++-
src/features/myAccounts/index.tsx | 1 +
src/features/myAccounts/styles.module.css | 4 ++
src/store/addedSafesSlice.ts | 2 +-
6 files changed, 61 insertions(+), 8 deletions(-)
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]
}
},