Feat: owned Safes in the welcome page sidebar (#943)

* Feat: owned Safes in the welcome page sidebar * Increase title bottom margin
safe-global · Oct 25, 2022 · 54ea708 · 54ea708
1 parent daee428
commit 54ea708
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 36 deletions.
diff --git 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 ? (
-    <List sx={{ py: 0 }}>
-      {ownedSafesOnChain?.map((address) => (
-        <SafeListItem
-          key={address}
-          address={address}
-          chainId={chainId}
-          closeDrawer={() => void null}
-          shouldScrollToSafe={false}
-        />
-      ))}
-    </List>
-  ) : null
+  if (!chain || !ownedSafesOnChain?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <Typography variant="body2" display="inline" color="primary.light" textAlign="center" mt={1} mb={2}>
+        Safes owned on {chain.chainName}
+      </Typography>
+
+      <List sx={{ py: 0 }}>
+        {ownedSafesOnChain?.map((address) => (
+          <SafeListItem
+            key={address}
+            address={address}
+            chainId={chain.chainId}
+            closeDrawer={() => void null}
+            shouldScrollToSafe={false}
+            noActions
+          />
+        ))}
+      </List>
+    </>
+  )
 }
 
 export default OwnedSafes
diff --git 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<HTMLDivElement>(null)
   const safeAddress = useSafeAddress()
@@ -55,18 +57,20 @@ const SafeListItem = ({
       className={css.container}
       disablePadding
       secondaryAction={
-        <Box display="flex" alignItems="center" gap={1}>
-          <SafeListItemSecondaryAction
-            chainId={chainId}
-            address={address}
-            onClick={closeDrawer}
-            href={{
-              pathname: AppRoutes.load,
-              query: { chain: shortName, address },
-            }}
-          />
-          <SafeListContextMenu name={name} address={address} chainId={chainId} />
-        </Box>
+        noActions ? undefined : (
+          <Box display="flex" alignItems="center" gap={1}>
+            <SafeListItemSecondaryAction
+              chainId={chainId}
+              address={address}
+              onClick={closeDrawer}
+              href={{
+                pathname: AppRoutes.load,
+                query: { chain: shortName, address },
+              }}
+            />
+            <SafeListContextMenu name={name} address={address} chainId={chainId} />
+          </Box>
+        )
       }
     >
       <Link href={{ pathname: AppRoutes.home, query: { safe: `${shortName}:${address}` } }} passHref>
@@ -81,7 +85,7 @@ const SafeListItem = ({
             <SafeIcon address={address} {...rest} />
           </ListItemIcon>
           <ListItemText
-            sx={{ pr: 10 }}
+            sx={noActions ? undefined : { pr: 10 }}
             primaryTypographyProps={{
               variant: 'body2',
               component: 'div',

diff --git a/src/components/sidebar/SafeListItem/styles.module.css b/src/components/sidebar/SafeListItem/styles.module.css
@@ -7,7 +7,6 @@
 
 .safe {
   border-radius: 8px;
-  padding-left: 22px;
 }
 
 .open {

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
@@ -12,6 +12,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
 import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
+import OwnedSafes from '../OwnedSafes'
 
 const Sidebar = (): ReactElement => {
   const router = useRouter()
@@ -39,9 +40,13 @@ const Sidebar = (): ReactElement => {
             <SidebarNavigation />
           </>
         ) : (
-          <div className={css.noSafeHeader}>
-            <KeyholeIcon />
-          </div>
+          <>
+            <div className={css.noSafeHeader}>
+              <KeyholeIcon />
+            </div>
+
+            <OwnedSafes />
+          </>
         )}
 
         <div style={{ flexGrow: 1 }} />

diff --git 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 {