Add Safenet styles to MultiAccountItem

Author: germartinez

apps/web/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx

@@ -1,62 +1,62 @@
+import ChainIndicator from '@/components/common/ChainIndicator'
+import FiatValue from '@/components/common/FiatValue'
+import SafeIcon from '@/components/common/SafeIcon'
+import MultiAccountContextMenu from '@/components/sidebar/SafeListContextMenu/MultiAccountContextMenu'
+import { AppRoutes } from '@/config/routes'
 import { selectUndeployedSafes } from '@/features/counterfactual/store/undeployedSafesSlice'
+import { isPredictedSafeProps } from '@/features/counterfactual/utils'
 import NetworkLogosList from '@/features/multichain/components/NetworkLogosList'
-import { showNotification } from '@/store/notificationsSlice'
+import { getSafeSetups, getSharedSetup, hasMultiChainAddNetworkFeature } from '@/features/multichain/utils/utils'
 import SingleAccountItem from '@/features/myAccounts/components/AccountItems/SingleAccountItem'
-import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
-import { useCallback, useMemo, useState } from 'react'
+import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import { type MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
+import { getComparator } from '@/features/myAccounts/utils/utils'
+import useHasSafenetFeature from '@/features/safenet/hooks/useHasSafenetFeature'
+import useSafeAddress from '@/hooks/useSafeAddress'
+import useWallet from '@/hooks/wallets/useWallet'
+import BookmarkIcon from '@/public/images/apps/bookmark.svg'
+import BookmarkedIcon from '@/public/images/apps/bookmarked.svg'
+import SafenetLogo from '@/public/images/safenet/logo-safenet.svg'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS, PIN_SAFE_LABELS, trackEvent } from '@/services/analytics'
+import { useAppDispatch, useAppSelector } from '@/store'
+import { addOrUpdateSafe, pinSafe, selectAllAddedSafes, unpinSafe } from '@/store/addedSafesSlice'
+import { useGetMultipleSafeOverviewsQuery } from '@/store/api/gateway'
+import { selectChains } from '@/store/chainsSlice'
+import { showNotification } from '@/store/notificationsSlice'
+import { selectOrderByPreference } from '@/store/orderByPreferenceSlice'
+import { defaultSafeInfo } from '@/store/safeInfoSlice'
+import { useGetSafenetAccountQuery } from '@/store/safenet'
+import { selectCurrency } from '@/store/settingsSlice'
+import { sameAddress } from '@/utils/addresses'
+import { shortenAddress } from '@/utils/formatters'
 import {
-  ListItemButton,
-  Box,
-  Typography,
-  Skeleton,
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Box,
   Divider,
-  Tooltip,
-  SvgIcon,
   IconButton,
+  ListItemButton,
+  Skeleton,
+  SvgIcon,
+  Tooltip,
+  Typography,
 } from '@mui/material'
-import SafeIcon from '@/components/common/SafeIcon'
-import { OVERVIEW_EVENTS, OVERVIEW_LABELS, PIN_SAFE_LABELS, trackEvent } from '@/services/analytics'
-import { AppRoutes } from '@/config/routes'
-import { useAppDispatch, useAppSelector } from '@/store'
-import css from './styles.module.css'
-import useSafeAddress from '@/hooks/useSafeAddress'
-import { sameAddress } from '@/utils/addresses'
+import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
-import FiatValue from '@/components/common/FiatValue'
-import { type MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
-import { shortenAddress } from '@/utils/formatters'
-import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
-import { getSafeSetups, getSharedSetup, hasMultiChainAddNetworkFeature } from '@/features/multichain/utils/utils'
+import { useCallback, useMemo, useState } from 'react'
 import { AddNetworkButton } from '../AddNetworkButton'
-import { isPredictedSafeProps } from '@/features/counterfactual/utils'
-import ChainIndicator from '@/components/common/ChainIndicator'
-import MultiAccountContextMenu from '@/components/sidebar/SafeListContextMenu/MultiAccountContextMenu'
-import { useGetMultipleSafeOverviewsQuery } from '@/store/api/gateway'
-import useWallet from '@/hooks/wallets/useWallet'
-import { selectCurrency } from '@/store/settingsSlice'
-import { selectChains } from '@/store/chainsSlice'
-import BookmarkIcon from '@/public/images/apps/bookmark.svg'
-import BookmarkedIcon from '@/public/images/apps/bookmarked.svg'
-import { addOrUpdateSafe, pinSafe, selectAllAddedSafes, unpinSafe } from '@/store/addedSafesSlice'
-import { defaultSafeInfo } from '@/store/safeInfoSlice'
-import { selectOrderByPreference } from '@/store/orderByPreferenceSlice'
-import { getComparator } from '@/features/myAccounts/utils/utils'
-import dynamic from 'next/dynamic'
-
-const GradientBoxSafenet = dynamic(() => import('@/features/safenet/components/GradientBoxSafenet'))
+import css from './styles.module.css'
 
 type MultiAccountItemProps = {
   multiSafeAccountItem: MultiChainSafeItem
   safeOverviews?: SafeOverview[]
   onLinkClick?: () => void
-  isSafenetEnabled?: boolean
+  hasSafenetFeature?: boolean
 }
 
-const MultichainIndicator = ({ safes }: { safes: SafeItem[] }) => {
+const MultichainIndicator = ({ safes, showHasSafenet = false }: { safes: SafeItem[]; showHasSafenet?: boolean }) => {
   return (
     <Tooltip
       title={
@@ -72,7 +72,7 @@ const MultichainIndicator = ({ safes }: { safes: SafeItem[] }) => {
       arrow
     >
       <Box className={css.multiChains}>
-        <NetworkLogosList networks={safes} showHasMore />
+        <NetworkLogosList networks={safes} showHasMore showHasSafenet={showHasSafenet} />
       </Box>
     </Tooltip>
   )
@@ -127,10 +127,26 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) {
 
   const deployedChainIds = useMemo(() => sortedSafes.map((safe) => safe.chainId), [sortedSafes])
 
+  const hasSafenetFeature = useHasSafenetFeature()
+  const { data: safenetConfig } = useGetSafenetAccountQuery({ safeAddress: address }, { skip: !hasSafenetFeature })
+
+  const usedSafenetChainIds = useMemo(
+    () => (safenetConfig ? safenetConfig.safes.map((safe) => safe.chainId.toString()) : []),
+    [safenetConfig],
+  )
+  const safenetSafes = useMemo(
+    () => (safenetConfig ? sortedSafes.filter((safe) => usedSafenetChainIds.includes(safe.chainId)) : []),
+    [safenetConfig, sortedSafes, usedSafenetChainIds],
+  )
+  const nonSafenetSafes = useMemo(
+    () => (safenetConfig ? sortedSafes.filter((safe) => !usedSafenetChainIds.includes(safe.chainId)) : []),
+    [safenetConfig, sortedSafes, usedSafenetChainIds],
+  )
+
   return {
     address,
     name,
-    sortedSafes,
+    sortedSafes: safenetConfig ? nonSafenetSafes : sortedSafes,
     safeOverviews,
     sharedSetup,
     totalFiatValue,
@@ -140,6 +156,7 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) {
     isReadOnly,
     isWelcomePage,
     deployedChainIds,
+    safenetSafes,
   }
 }
 
@@ -217,7 +234,7 @@ function usePinActions(
   return { addToPinnedList, removeFromPinnedList }
 }
 
-const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled }: MultiAccountItemProps) => {
+const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountItemProps) => {
   const {
     address,
     name,
@@ -231,6 +248,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
     isReadOnly,
     isWelcomePage,
     deployedChainIds,
+    safenetSafes,
   } = useMultiAccountItemData(multiSafeAccountItem)
   const { addToPinnedList, removeFromPinnedList } = usePinActions(address, name, sortedSafes, safeOverviews)
 
@@ -246,7 +264,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
     })
   }
 
-  const listItem = (
+  return (
     <ListItemButton
       data-testid="safe-list-item"
       selected={isCurrentSafe}
@@ -283,7 +301,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
                 {shortenAddress(address)}
               </Typography>
             </Typography>
-            <MultichainIndicator safes={sortedSafes} />
+            <MultichainIndicator safes={sortedSafes} showHasSafenet={safenetSafes.length > 0} />
             <Typography
               data-testid="group-balance"
               variant="body2"
@@ -325,6 +343,22 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
           />
         </AccordionSummary>
         <AccordionDetails sx={{ padding: '0px 12px' }}>
+          {safenetSafes.length > 0 && (
+            <Box className={css.safenetList} data-testid="safenet-subacounts-container">
+              <Box className={css.safenetListHeader}>
+                <SafenetLogo height="12" />
+              </Box>
+              {safenetSafes.map((safeItem) => (
+                <SingleAccountItem
+                  onLinkClick={onLinkClick}
+                  safeItem={safeItem}
+                  key={`${safeItem.chainId}:${safeItem.address}`}
+                  isMultiChainItem
+                  isSafenetItem
+                />
+              ))}
+            </Box>
+          )}
           <Box data-testid="subacounts-container">
             {sortedSafes.map((safeItem) => (
               <SingleAccountItem
@@ -359,11 +393,6 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
       </Accordion>
     </ListItemButton>
   )
-  return isSafenetEnabled ? (
-    <GradientBoxSafenet className={css.safenetListItem}>{listItem}</GradientBoxSafenet>
-  ) : (
-    listItem
-  )
 }
 
 export default MultiAccountItem

apps/web/src/features/myAccounts/components/AccountItems/styles.module.css

@@ -142,12 +142,27 @@
   }
 }
 
-.safenetListItem {
+.safenetList {
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--space-1);
   margin-bottom: 12px;
+  flex-wrap: wrap;
+  overflow: hidden;
 }
 
-.safenetListItem .listItem {
+.safenetListHeader {
+  background: var(--color-border-light);
+  padding: 4px var(--space-1);
+}
+
+.safenetListHeader > svg > path {
+  fill: black;
+}
+
+.safenetList > .listItem {
   border: none;
-  border-radius-left-top: 0;
-  border-radius-right-top: 0;
+  border-top: 1px solid var(--color-border-light);
+  border-radius: 0;
+  margin-bottom: 0;
+  flex-wrap: wrap;
 }

apps/web/src/features/myAccounts/components/SafesList/index.tsx

@@ -3,7 +3,6 @@ import MultiAccountItem from '@/features/myAccounts/components/AccountItems/Mult
 import SingleAccountItem from '@/features/myAccounts/components/AccountItems/SingleAccountItem'
 import type { SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
 import type { MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
-import useHasSafenetFeature from '@/features/safenet/hooks/useHasSafenetFeature'
 import { Collapse } from '@mui/material'
 import { TransitionGroup } from 'react-transition-group'
 
@@ -13,17 +12,15 @@ type SafeListProps = {
   useTransitions?: boolean
 }
 
-const renderSafeItem = (item: SafeItem | MultiChainSafeItem, onLinkClick?: () => void, hasSafenetFeature?: boolean) => {
+const renderSafeItem = (item: SafeItem | MultiChainSafeItem, onLinkClick?: () => void) => {
   return isMultiChainSafeItem(item) ? (
-    <MultiAccountItem onLinkClick={onLinkClick} multiSafeAccountItem={item} isSafenetEnabled={hasSafenetFeature} />
+    <MultiAccountItem onLinkClick={onLinkClick} multiSafeAccountItem={item} />
   ) : (
     <SingleAccountItem onLinkClick={onLinkClick} safeItem={item} />
   )
 }
 
 const SafesList = ({ safes, onLinkClick, useTransitions = true }: SafeListProps) => {
-  const hasSafenetFeature = useHasSafenetFeature()
-
   if (!safes || safes.length === 0) {
     return null
   }
@@ -32,14 +29,14 @@ const SafesList = ({ safes, onLinkClick, useTransitions = true }: SafeListProps)
     <TransitionGroup>
       {safes.map((item) => (
         <Collapse key={item.address} timeout="auto">
-          {renderSafeItem(item, onLinkClick, hasSafenetFeature)}
+          {renderSafeItem(item, onLinkClick)}
         </Collapse>
       ))}
     </TransitionGroup>
   ) : (
     <>
       {safes.map((item) => (
-        <div key={item.address}>{renderSafeItem(item, onLinkClick, hasSafenetFeature)}</div>
+        <div key={item.address}>{renderSafeItem(item, onLinkClick)}</div>
       ))}
     </>
   )