diff --git a/src/components/sidebar/SubaccountsList/index.tsx b/src/components/sidebar/SubaccountsList/index.tsx index abc8b939ea..c6425d2a0b 100644 --- a/src/components/sidebar/SubaccountsList/index.tsx +++ b/src/components/sidebar/SubaccountsList/index.tsx @@ -1,9 +1,12 @@ -import EthHashInfo from '@/components/common/EthHashInfo' import Track from '@/components/common/Track' -import { SUBACCOUNT_EVENTS } from '@/services/analytics/events/subaccounts' +import { SUBACCOUNT_EVENTS, SUBACCOUNT_LABELS } from '@/services/analytics/events/subaccounts' import { ChevronRight } from '@mui/icons-material' -import { Box, Typography } from '@mui/material' +import { List, ListItem, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material' import { useState, type ReactElement } from 'react' +import Identicon from '@/components/common/Identicon' +import { shortenAddress } from '@/utils/formatters' +import useAddressBook from '@/hooks/useAddressBook' +import { trackEvent } from '@/services/analytics' const MAX_SUBACCOUNTS = 5 @@ -16,32 +19,9 @@ export function SubaccountsList({ subaccounts }: { subaccounts: Array }) } return ( - + {subaccountsToShow.map((subaccount) => { - // TODO: Turn into link to Subaccount - return ( - `${shape.borderRadius}px`, - cursor: 'pointer', - py: '11px', - px: 2, - '&:hover': { - backgroundColor: 'var(--color-background-light)', - borderColor: 'var(--color-secondary-light)', - }, - }} - key={subaccount} - > - - - - ) + return })} {subaccounts.length > MAX_SUBACCOUNTS && !showAll && ( @@ -59,6 +39,47 @@ export function SubaccountsList({ subaccounts }: { subaccounts: Array }) )} - + + ) +} + +function SubaccountListItem({ subaccount }: { subaccount: string }): ReactElement { + const addressBook = useAddressBook() + const name = addressBook[subaccount] + + // Note: using the Track element breaks accessibility/styles + const onClick = () => { + trackEvent({ ...SUBACCOUNT_EVENTS.OPEN_SUBACCOUNT, label: SUBACCOUNT_LABELS.list }) + } + + return ( + `1px solid ${palette.border.light}`, + borderRadius: ({ shape }) => `${shape.borderRadius}px`, + p: 0, + }} + > + + + + + + + + ) } diff --git a/src/services/analytics/events/subaccounts.ts b/src/services/analytics/events/subaccounts.ts index 4a73f2e8d0..f0f6021bc1 100644 --- a/src/services/analytics/events/subaccounts.ts +++ b/src/services/analytics/events/subaccounts.ts @@ -26,5 +26,6 @@ export const SUBACCOUNT_EVENTS = { export enum SUBACCOUNT_LABELS { header = 'header', sidebar = 'sidebar', + list = 'list', success_screen = 'success_screen', }