add secondary action menu for safe list

safe-global · Feb 9, 2024 · 33acfcb · 33acfcb
1 parent 38cbf49
commit 33acfcb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/components/welcome/MyAccounts/AccountItem.tsx b/src/components/welcome/MyAccounts/AccountItem.tsx
@@ -11,6 +11,7 @@ import ChainIndicator from '@/components/common/ChainIndicator'
 import css from './styles.module.css'
 import { selectAllAddressBooks } from '@/store/addressBookSlice'
 import { shortenAddress } from '@/utils/formatters'
+import SafeListContextMenu from '@/components/sidebar/SafeListContextMenu'
 
 type AccountItemProps = {
   chainId: string
@@ -34,9 +35,9 @@ const AccountItem = ({ chainId, address, ...rest }: AccountItemProps) => {
   const name = useAppSelector(selectAllAddressBooks)[chainId]?.[address]
 
   return (
-    <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={OPEN_SAFE_LABELS.login_page}>
-      <Link href={href}>
-        <ListItemButton className={css.listItem}>
+    <ListItemButton className={css.listItem}>
+      <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={OPEN_SAFE_LABELS.login_page}>
+        <Link href={href} className={css.safeLink}>
           <SafeIcon address={address} {...rest} />
 
           <Typography variant="body2" component="div">
@@ -54,9 +55,10 @@ const AccountItem = ({ chainId, address, ...rest }: AccountItemProps) => {
           <Box flex={1} />
 
           <ChainIndicator chainId={chainId} />
-        </ListItemButton>
-      </Link>
-    </Track>
+        </Link>
+      </Track>
+      <SafeListContextMenu name={name} address={address} chainId={chainId} />
+    </ListItemButton>
   )
 }
 

diff --git a/src/components/welcome/MyAccounts/styles.module.css b/src/components/welcome/MyAccounts/styles.module.css
@@ -6,3 +6,14 @@
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
+
+.listItem> :first-child {
+  display: block;
+  flex: 1;
+}
+
+.safeLink {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}