Skip to content

Commit

Permalink
Add Safenet styles to MultiAccountItem
Browse files Browse the repository at this point in the history
  • Loading branch information
@germartinez
germartinez committed Feb 12, 2025
1 parent 83b21db commit 59bd344
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 60 deletions.
127 changes: 78 additions & 49 deletions apps/web/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -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={
Expand All @@ -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>
)
Expand Down Expand Up @@ -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,
Expand All @@ -140,6 +156,7 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) {
isReadOnly,
isWelcomePage,
deployedChainIds,
safenetSafes,
}
}

Expand Down Expand Up @@ -217,7 +234,7 @@ function usePinActions(
return { addToPinnedList, removeFromPinnedList }
}

const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled }: MultiAccountItemProps) => {
const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountItemProps) => {
const {
address,
name,
Expand All @@ -231,6 +248,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
isReadOnly,
isWelcomePage,
deployedChainIds,
safenetSafes,
} = useMultiAccountItemData(multiSafeAccountItem)
const { addToPinnedList, removeFromPinnedList } = usePinActions(address, name, sortedSafes, safeOverviews)

Expand All @@ -246,7 +264,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
})
}

const listItem = (
return (
<ListItemButton
data-testid="safe-list-item"
selected={isCurrentSafe}
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -359,11 +393,6 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem, isSafenetEnabled
</Accordion>
</ListItemButton>
)
return isSafenetEnabled ? (
<GradientBoxSafenet className={css.safenetListItem}>{listItem}</GradientBoxSafenet>
) : (
listItem
)
}

export default MultiAccountItem
23 changes: 19 additions & 4 deletions apps/web/src/features/myAccounts/components/AccountItems/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
11 changes: 4 additions & 7 deletions apps/web/src/features/myAccounts/components/SafesList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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
}
Expand All @@ -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>
))}
</>
)
Expand Down

0 comments on commit 59bd344

Please sign in to comment.