fix: account circle numbers and delete unused code

src/app/components/account/account-avatar-item.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { AccountAvatar } from '@app/components/account/account-avatar';
+
+interface AccountAvatarItemProps {
+  publicKey: string;
+  index: number;
+  name: string;
+}
+export const AccountAvatarItem = memo(({ name, publicKey, index }: AccountAvatarItemProps) => {
+  return <AccountAvatar index={index} name={name} publicKey={publicKey} />;
+});

src/app/components/account/account-avatar.tsx

@@ -1,12 +1,26 @@
 import { memo } from 'react';
 
-import { AccountAvatar } from '@app/components/account/account-avatar/account-avatar';
+import { Box, CircleProps } from 'leather-styles/jsx';
 
-interface AccountAvatarItemProps {
+import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
+
+const getAccountNumber = (index: number) => {
+  // Always return account number in the Account Circle
+  return String(index + 1);
+};
+
+interface AccountAvatarProps extends CircleProps {
+  name: string;
   publicKey: string;
   index: number;
-  name: string;
 }
-export const AccountAvatarItem = memo(({ name, publicKey, index }: AccountAvatarItemProps) => {
-  return <AccountAvatar index={index} name={name} publicKey={publicKey} />;
+export const AccountAvatar = memo(({ name, publicKey, index, ...props }: AccountAvatarProps) => {
+  const gradient = publicKey + index.toString();
+  const text = getAccountNumber(index);
+
+  return (
+    <DynamicColorCircle sizeParam="48" value={gradient} {...props}>
+      <Box position="absolute">{text}</Box>
+    </DynamicColorCircle>
+  );
 });

src/app/components/account/account-list-item-layout.tsx

@@ -18,9 +18,6 @@ interface AccountListItemLayoutProps extends StackProps {
   accountName: React.ReactNode;
   avatar: React.JSX.Element;
   balanceLabel: React.ReactNode;
-  hasCopied?: boolean;
-  onCopyToClipboard?(e: React.MouseEvent): void;
-  onClickBtcCopyIcon?(e: React.MouseEvent): void;
   onSelectAccount(): void;
 }
 export function AccountListItemLayout(props: AccountListItemLayoutProps) {
@@ -32,9 +29,6 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
     avatar,
     balanceLabel,
     onSelectAccount,
-    hasCopied,
-    onCopyToClipboard,
-    onClickBtcCopyIcon,
     children = null,
     ...rest
   } = props;

src/app/features/current-account/current-account-avatar.tsx

@@ -4,7 +4,7 @@ import { CircleProps } from 'leather-styles/jsx';
 
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useDrawers } from '@app/common/hooks/use-drawers';
-import { AccountAvatar } from '@app/components/account/account-avatar/account-avatar';
+import { AccountAvatar } from '@app/components/account/account-avatar';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 export const CurrentAccountAvatar = memo((props: CircleProps) => {

src/app/features/switch-account-drawer/components/switch-account-list-item.tsx

@@ -1,21 +1,15 @@
 import { memo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { RouteUrls } from '@shared/route-urls';
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account';
-import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useLoading } from '@app/common/hooks/use-loading';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
 import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
 import { usePressable } from '@app/components/item-hover';
 import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
-import { AccountAvatarItem } from '../../../components/account/account-avatar';
+import { AccountAvatarItem } from '../../../components/account/account-avatar-item';
 import { AccountNameLayout } from '../../../components/account/account-name';
 
 interface SwitchAccountListItemProps {
@@ -36,7 +30,6 @@ export const SwitchAccountListItem = memo(
     const { handleSwitchAccount } = useSwitchAccount(handleClose);
     const [component, bind] = usePressable(true);
     const name = useAccountDisplayName({ address: stacksAddress, index });
-    const navigate = useNavigate();
 
     const handleClick = async () => {
       setIsLoading();
@@ -46,45 +39,23 @@ export const SwitchAccountListItem = memo(
       }, 80);
     };
 
-    const analytics = useAnalytics();
-    const { onCopy, hasCopied } = useClipboard(stacksAddress || '');
-    const { setIsShowingSwitchAccountsState } = useDrawers();
-
-    const onCopyToClipboard = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      void analytics.track('copy_address_to_clipboard');
-      onCopy();
-    };
-
-    const onClickBtcCopyIcon = (e: React.MouseEvent) => {
-      if (!bitcoinAddress) return;
-      e.stopPropagation();
-      setIsShowingSwitchAccountsState(false);
-      navigate(RouteUrls.ReceiveBtc, {
-        state: { btcAddress: bitcoinAddress, accountIndex: currentAccountIndex },
-      });
-    };
-
     return (
       <AccountListItemLayout
         index={index}
         isLoading={isLoading}
         isActive={currentAccountIndex === index}
         avatar={
           <AccountAvatarItem
-            index={currentAccountIndex}
+            index={index}
+            publicKey={stacksAccounts[index]?.stxPublicKey || ''}
             name={name}
-            publicKey={stacksAccounts[currentAccountIndex]?.stxPublicKey || ''}
           />
         }
         onSelectAccount={handleClick}
         accountName={<AccountNameLayout>{name}</AccountNameLayout>}
         balanceLabel={
           <AccountTotalBalance stxAddress={stacksAddress} btcAddress={bitcoinAddress} />
         }
-        hasCopied={hasCopied}
-        onCopyToClipboard={onCopyToClipboard}
-        onClickBtcCopyIcon={onClickBtcCopyIcon}
         mt="space.05"
         {...bind}
       >

src/app/pages/choose-account/components/accounts.tsx

@@ -12,7 +12,7 @@ import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { slugify } from '@app/common/utils';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
-import { AccountAvatar } from '@app/components/account/account-avatar/account-avatar';
+import { AccountAvatar } from '@app/components/account/account-avatar';
 import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
 import { usePressable } from '@app/components/item-hover';
 import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';

src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx

@@ -6,7 +6,7 @@ import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
-import { AccountAvatarItem } from '@app/components/account/account-avatar';
+import { AccountAvatarItem } from '@app/components/account/account-avatar-item';
 import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
 import { AccountName } from '@app/components/account/account-name';
 import { usePressable } from '@app/components/item-hover';