feat: account selection fixes and improvements (#8902)

src/components/AccountDropdown/AccountChildOption.tsx

@@ -17,10 +17,11 @@ export const AccountChildOption = forwardRef<AccountChildRowProps, 'button'>(
   ({ accountId, title, cryptoBalance, symbol, children, onOptionClick, ...props }, ref) => {
     const color = useColorModeValue('black', 'white')
     const handleClick = useCallback(() => onOptionClick(accountId), [accountId, onOptionClick])
+
     return (
       <MenuItemOption ref={ref} color={color} onClick={handleClick} {...props}>
-        <Stack direction='row' justifyContent='space-between' fontSize='sm' spacing={4}>
-          <RawText fontWeight='bold' whiteSpace='nowrap'>
+        <Stack direction='row' fontSize='sm' spacing={4} width='full'>
+          <RawText fontWeight='bold' whiteSpace='nowrap' flex={1}>
             {title}
           </RawText>
           <Amount.Crypto

src/components/AccountDropdown/AccountDropdown.tsx

@@ -22,9 +22,11 @@ import type { FC } from 'react'
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useSelector } from 'react-redux'
+import { InlineCopyButton } from 'components/InlineCopyButton'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { fromBaseUnit } from 'lib/math'
 import { isValidAccountNumber } from 'lib/utils/accounts'
+import { isUtxoAccountId } from 'lib/utils/utxo'
 import type { ReduxState } from 'state/reducer'
 import { accountIdToLabel } from 'state/slices/portfolioSlice/utils'
 import {
@@ -93,7 +95,6 @@ const MenuOptions = ({
   onClick,
 }: MenuOptionsProps) => {
   const { assetId, chainId } = asset
-
   const translate = useTranslate()
   const accountBalances = useSelector(selectPortfolioAccountBalancesBaseUnit)
   const accountMetadata = useSelector(selectPortfolioAccountMetadata)
@@ -149,14 +150,17 @@ const MenuOptions = ({
         // the account sub title uses an account id which is then converted to a chainId and pubkey
         // so for convenience and simplicity we can safely use the first account id here
         const [firstAccountId] = accountIds
-        const subtitle = accountIdToLabel(firstAccountId)
+        const isUtxo = isUtxoAccountId(firstAccountId)
 
         return (
           <React.Fragment key={accountNumber}>
-            <AccountSegment
-              title={translate('accounts.accountNumber', { accountNumber })}
-              subtitle={subtitle}
-            />
+            <Flex px={2} py={2}>
+              <AccountSegment
+                title={translate('accounts.accountNumber', { accountNumber })}
+                subtitle={isUtxo ? asset.name : accountIdToLabel(firstAccountId)}
+              />
+              {!isUtxo && <InlineCopyButton value={fromAccountId(firstAccountId).account} />}
+            </Flex>
             {sortedAccountIds.map((iterAccountId, index) => (
               <AccountChildOption
                 accountId={iterAccountId}

src/components/AccountDropdown/AccountSegement.tsx

@@ -10,12 +10,11 @@ type AccountGroupProps = {
 export const AccountSegment: FC<AccountGroupProps> = ({ title, subtitle }) => (
   <Stack
     direction='row'
-    px={4}
-    py={2}
     color='text.subtle'
     fontSize='sm'
     alignItems='center'
     justifyContent='space-between'
+    width='full'
   >
     <RawText>{title}</RawText>
     {subtitle && (

src/components/InlineCopyButton.tsx

@@ -1,7 +1,7 @@
 import { CheckIcon, CopyIcon } from '@chakra-ui/icons'
 import { Flex, IconButton } from '@chakra-ui/react'
 import type { MouseEvent, PropsWithChildren } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard'
 
@@ -31,6 +31,19 @@ export const InlineCopyButton: React.FC<InlineCopyButtonProps> = ({
     [copyToClipboard, value],
   )
 
+  const buttonProps = useMemo(
+    () => ({
+      icon: isCopied ? checkIcon : copyIcon,
+      colorScheme: isCopied ? 'green' : 'gray',
+      size: 'xs',
+      variant: 'ghost',
+      fontSize: 'sm',
+      'aria-label': 'Copy value',
+      onClick: handleCopyClick,
+    }),
+    [handleCopyClick, isCopied],
+  )
+
   // Hide the copy button if it is disabled
   if (isDisabled) return <>{children}</>
 
@@ -39,26 +52,10 @@ export const InlineCopyButton: React.FC<InlineCopyButtonProps> = ({
       {children}
       {translate ? (
         <TooltipWithTouch label={translate(isCopied ? 'common.copied' : 'common.copy')}>
-          <IconButton
-            icon={isCopied ? checkIcon : copyIcon}
-            colorScheme={isCopied ? 'green' : 'gray'}
-            size='sm'
-            variant='ghost'
-            fontSize='xl'
-            aria-label='Copy value'
-            onClick={handleCopyClick}
-          />
+          <IconButton {...buttonProps} />
         </TooltipWithTouch>
       ) : (
-        <IconButton
-          icon={isCopied ? checkIcon : copyIcon}
-          colorScheme={isCopied ? 'green' : 'gray'}
-          size='sm'
-          variant='ghost'
-          fontSize='xl'
-          aria-label='Copy value'
-          onClick={handleCopyClick}
-        />
+        <IconButton {...buttonProps} />
       )}
     </Flex>
   )