diff --git a/src/entries/popup/components/AccountName/AccountName.tsx b/src/entries/popup/components/AccountName/AccountName.tsx index 381b6c66fa..96588e64dc 100644 --- a/src/entries/popup/components/AccountName/AccountName.tsx +++ b/src/entries/popup/components/AccountName/AccountName.tsx @@ -10,7 +10,6 @@ import { transformScales } from '~/design-system/styles/designTokens'; import { useRainbowNavigate } from '../../hooks/useRainbowNavigate'; import { useWalletName } from '../../hooks/useWalletName'; import { ROUTES } from '../../urls'; -import { tabIndexes } from '../../utils/tabIndexes'; type AccountNameProps = { avatar?: ReactNode; @@ -18,6 +17,7 @@ type AccountNameProps = { size?: '16pt' | '20pt'; chevron?: boolean; disableNav?: boolean; + tabIndex?: number; }; const chevronDownSizes = { @@ -31,6 +31,7 @@ export function AccountName({ id, chevron = true, disableNav = false, + tabIndex, }: AccountNameProps) { const { address } = useAccount(); const { displayName } = useWalletName({ address: address || '0x' }); @@ -53,47 +54,52 @@ export function AccountName({ : {}; return ( - - - - {avatar && {avatar}} - - - + {avatar && ( + + {avatar} + + )} + + + + - {displayName} - + + {displayName} + + + {chevron && ( + + )} - - {chevron && ( - - - - )} - - - + + + + ); } diff --git a/src/entries/popup/pages/home/Header.tsx b/src/entries/popup/pages/home/Header.tsx index a2ad8ecedb..f6af6363ac 100644 --- a/src/entries/popup/pages/home/Header.tsx +++ b/src/entries/popup/pages/home/Header.tsx @@ -94,6 +94,7 @@ export const Header = React.memo(function Header() { ) } id="header" + tabIndex={tabIndexes.WALLET_HEADER_ACCOUNT_NAME} />