@@ -90,11 +95,26 @@ const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }
{action}
- {safes && safes.length > 0 ? (
-
+ {totalSafes > 0 ? (
+ <>
+ {multiChainSafes && multiChainSafes.length > 0 && (
+
+ )}
+ {singleChainSafes && singleChainSafes.length > 0 && (
+
+ )}
+
) : (
-
- {safes ? noSafesMessage : 'Loading...'}
+
+ {noSafesMessage}
)}
diff --git a/src/components/welcome/MyAccounts/SubAccountItem.tsx b/src/components/welcome/MyAccounts/SubAccountItem.tsx
new file mode 100644
index 0000000000..de8d1724e0
--- /dev/null
+++ b/src/components/welcome/MyAccounts/SubAccountItem.tsx
@@ -0,0 +1,129 @@
+import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
+import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
+import { useMemo } from 'react'
+import { ListItemButton, Box, Typography, Chip, Skeleton } from '@mui/material'
+import Link from 'next/link'
+import SafeIcon from '@/components/common/SafeIcon'
+import Track from '@/components/common/Track'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
+import { AppRoutes } from '@/config/routes'
+import { useAppSelector } from '@/store'
+import { selectChainById } from '@/store/chainsSlice'
+import css from './styles.module.css'
+import { selectAllAddressBooks } from '@/store/addressBookSlice'
+import SafeListContextMenu from '@/components/sidebar/SafeListContextMenu'
+import useSafeAddress from '@/hooks/useSafeAddress'
+import useChainId from '@/hooks/useChainId'
+import { sameAddress } from '@/utils/addresses'
+import classnames from 'classnames'
+import { useRouter } from 'next/router'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import type { SafeItem } from './useAllSafes'
+import FiatValue from '@/components/common/FiatValue'
+import QueueActions from './QueueActions'
+import { useGetHref } from './useGetHref'
+import { extractCounterfactualSafeSetup } from '@/features/counterfactual/utils'
+
+type SubAccountItem = {
+ safeItem: SafeItem
+ safeOverview?: SafeOverview
+ onLinkClick?: () => void
+}
+
+const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem) => {
+ const { chainId, address } = safeItem
+ const chain = useAppSelector((state) => selectChainById(state, chainId))
+ const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, address))
+ const safeAddress = useSafeAddress()
+ const currChainId = useChainId()
+ const router = useRouter()
+ const isCurrentSafe = chainId === currChainId && sameAddress(safeAddress, address)
+ const isWelcomePage = router.pathname === AppRoutes.welcome.accounts
+
+ const trackingLabel = isWelcomePage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar
+
+ const getHref = useGetHref(router)
+
+ const href = useMemo(() => {
+ return chain ? getHref(chain, address) : ''
+ }, [chain, getHref, address])
+
+ const name = useAppSelector(selectAllAddressBooks)[chainId]?.[address]
+
+ const isActivating = undeployedSafe?.status.status !== 'AWAITING_EXECUTION'
+
+ const cfSafeSetup = extractCounterfactualSafeSetup(undeployedSafe, chain?.chainId)
+
+ return (
+