diff --git a/src/components/sidebar/OwnedSafes/index.tsx b/src/components/sidebar/OwnedSafes/index.tsx index 10bd9e8394..90ea524c3c 100644 --- a/src/components/sidebar/OwnedSafes/index.tsx +++ b/src/components/sidebar/OwnedSafes/index.tsx @@ -1,27 +1,38 @@ -import useChainId from '@/hooks/useChainId' +import { useCurrentChain } from '@/hooks/useChains' import useOwnedSafes from '@/hooks/useOwnedSafes' -import { List } from '@mui/material' +import { List, Typography } from '@mui/material' import { type ReactElement } from 'react' import SafeListItem from '../SafeListItem' const OwnedSafes = (): ReactElement | null => { - const chainId = useChainId() + const chain = useCurrentChain() const allOwnedSafes = useOwnedSafes() - const ownedSafesOnChain = allOwnedSafes[chainId] + const ownedSafesOnChain = chain ? allOwnedSafes[chain.chainId] : undefined - return ownedSafesOnChain?.length > 0 ? ( - - {ownedSafesOnChain?.map((address) => ( - void null} - shouldScrollToSafe={false} - /> - ))} - - ) : null + if (!chain || !ownedSafesOnChain?.length) { + return null + } + + return ( + <> + + Safes owned on {chain.chainName} + + + + {ownedSafesOnChain?.map((address) => ( + void null} + shouldScrollToSafe={false} + noActions + /> + ))} + + + ) } export default OwnedSafes diff --git a/src/components/sidebar/SafeListItem/index.tsx b/src/components/sidebar/SafeListItem/index.tsx index 62d09af211..0a932a9189 100644 --- a/src/components/sidebar/SafeListItem/index.tsx +++ b/src/components/sidebar/SafeListItem/index.tsx @@ -25,6 +25,7 @@ const SafeListItem = ({ chainId, closeDrawer, shouldScrollToSafe, + noActions = false, ...rest }: { address: string @@ -33,6 +34,7 @@ const SafeListItem = ({ shouldScrollToSafe: boolean threshold?: string | number owners?: string | number + noActions?: boolean }): ReactElement => { const safeRef = useRef(null) const safeAddress = useSafeAddress() @@ -55,18 +57,20 @@ const SafeListItem = ({ className={css.container} disablePadding secondaryAction={ - - - - + noActions ? undefined : ( + + + + + ) } > @@ -81,7 +85,7 @@ const SafeListItem = ({ { const router = useRouter() @@ -39,9 +40,13 @@ const Sidebar = (): ReactElement => { ) : ( -
- -
+ <> +
+ +
+ + + )}
diff --git a/src/components/sidebar/Sidebar/styles.module.css b/src/components/sidebar/Sidebar/styles.module.css index 77787b1984..ddbd1a2f70 100644 --- a/src/components/sidebar/Sidebar/styles.module.css +++ b/src/components/sidebar/Sidebar/styles.module.css @@ -35,10 +35,11 @@ .noSafeHeader { display: flex; + flex-direction: column; justify-content: center; + align-items: center; padding: 10px; - min-height: 80px; - align-items: flex-start; + min-height: 100px; } .drawerButton {