show watchlist safe count

safe-global · Feb 15, 2024 · df293c9 · df293c9
1 parent 9a4a229
commit df293c9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 16 deletions.
diff --git a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx b/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
@@ -10,7 +10,6 @@ import css from './styles.module.css'
 type PaginatedSafeListProps = {
   safes: SafeItems
   title: ReactNode
-  safeCount?: number
   action?: ReactElement
   onLinkClick?: () => void
 }
@@ -19,7 +18,7 @@ const DEFAULT_SHOWN = 5
 const MAX_DEFAULT_SHOWN = 7
 const PAGE_SIZE = 5
 
-const PaginatedSafeList = ({ safes, title, action, safeCount, onLinkClick }: PaginatedSafeListProps) => {
+const PaginatedSafeList = ({ safes, title, action, onLinkClick }: PaginatedSafeListProps) => {
   const [maxShownSafes, setMaxShownSafes] = useState<number>(DEFAULT_SHOWN)
 
   const shownSafes = useMemo(() => {
@@ -36,13 +35,11 @@ const PaginatedSafeList = ({ safes, title, action, safeCount, onLinkClick }: Pag
       <div className={css.listHeader}>
         <Typography variant="h5" fontWeight={700} mb={2} className={css.listTitle}>
           {title}
-          {safeCount && safeCount > 0 ? (
+          {safes.length > 0 && (
             <Typography component="span" color="text.secondary" fontSize="inherit" fontWeight="normal">
               {' '}
-              ({safeCount})
+              ({safes.length})
             </Typography>
-          ) : (
-            ''
           )}
         </Typography>
         {action}

diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
@@ -17,8 +17,8 @@ type AccountsListProps = {
   onLinkClick?: () => void
 }
 const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
-  const ownedSafes = useMemo(() => safes.filter(({ isOnWatchlist }) => !isOnWatchlist), [safes])
-  const watchlistSafes = useMemo(() => safes.filter(({ isOnWatchlist }) => isOnWatchlist), [safes])
+  const ownedSafes = useMemo(() => safes.filter(({ isWatchlist }) => !isWatchlist), [safes])
+  const watchlistSafes = useMemo(() => safes.filter(({ isWatchlist }) => isWatchlist), [safes])
 
   return (
     <Box className={css.container}>
@@ -30,12 +30,7 @@ const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
           <CreateButton />
         </Box>
 
-        <PaginatedSafeList
-          title="My accounts"
-          safes={ownedSafes}
-          safeCount={ownedSafes.length}
-          onLinkClick={onLinkClick}
-        />
+        <PaginatedSafeList title="My accounts" safes={ownedSafes} onLinkClick={onLinkClick} />
 
         <PaginatedSafeList
           title={

diff --git a/src/components/welcome/MyAccounts/useAllSafes.ts b/src/components/welcome/MyAccounts/useAllSafes.ts
@@ -11,7 +11,7 @@ import useWallet from '@/hooks/wallets/useWallet'
 export type SafeItems = Array<{
   chainId: string
   address: string
-  isOnWatchlist: boolean
+  isWatchlist: boolean
   threshold?: number
   owners?: number
 }>
@@ -48,7 +48,7 @@ const useAllSafes = (): SafeItems => {
       return uniqueAddresses.map((address) => ({
         address,
         chainId,
-        isOnWatchlist: !(ownedOnChain || []).includes(address),
+        isWatchlist: !(ownedOnChain || []).includes(address),
         threshold: allAdded[chainId]?.[address]?.threshold,
         owners: allAdded[chainId]?.[address]?.owners.length,
       }))