From 10b4ee968b6b24a076207d6c8b428b409c3ddf7c Mon Sep 17 00:00:00 2001 From: Edgar Khanzadian Date: Fri, 17 Nov 2023 16:50:53 +0400 Subject: [PATCH] fix: account circle numbers and delete unused code --- .../account/account-avatar-item.tsx | 12 ++++++ src/app/components/account/account-avatar.tsx | 24 ++++++++--- .../account/account-avatar/account-avatar.tsx | 42 ------------------- .../account/account-list-item-layout.tsx | 6 --- .../current-account-avatar.tsx | 2 +- .../components/switch-account-list-item.tsx | 35 ++-------------- .../choose-account/components/accounts.tsx | 2 +- .../account-list-item.tsx | 2 +- 8 files changed, 37 insertions(+), 88 deletions(-) create mode 100644 src/app/components/account/account-avatar-item.tsx delete mode 100644 src/app/components/account/account-avatar/account-avatar.tsx diff --git a/src/app/components/account/account-avatar-item.tsx b/src/app/components/account/account-avatar-item.tsx new file mode 100644 index 00000000000..a6470aca3de --- /dev/null +++ b/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 ; +}); diff --git a/src/app/components/account/account-avatar.tsx b/src/app/components/account/account-avatar.tsx index 93291b98d75..81bb9fb9ac7 100644 --- a/src/app/components/account/account-avatar.tsx +++ b/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 getAvatarText = (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 ; +export const AccountAvatar = memo(({ name, publicKey, index, ...props }: AccountAvatarProps) => { + const gradient = publicKey + index.toString(); + const text = getAvatarText(index); + + return ( + + {text} + + ); }); diff --git a/src/app/components/account/account-avatar/account-avatar.tsx b/src/app/components/account/account-avatar/account-avatar.tsx deleted file mode 100644 index c86e99d881c..00000000000 --- a/src/app/components/account/account-avatar/account-avatar.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { memo } from 'react'; - -import { Box, CircleProps } from 'leather-styles/jsx'; - -import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle'; - -const getAvatarText = (name: string, index: number) => { - // Returns a string with the account's ordinal number. - // - // Assumes that account names starting with "Account" have been autogenerated - // by the app. This will probably break when the account has a BNS name - // starting with "Account", although it's probably good enough for now. - if (name.startsWith('Account')) return String(index + 1); - - // At the time of writing, Firefox does not yet support Segmenter. Avatar - // text will default to the account's ordinal number. - if (!Intl.Segmenter) { - return String(index + 1); - } - - // Displays the first grapheme of the account name in uppercase. - // - // Using graphemes allows proper handling of emojis and other characters - // with multiple code points. - return [...new Intl.Segmenter().segment(name)][0].segment.toUpperCase(); -}; - -interface AccountAvatarProps extends CircleProps { - name: string; - publicKey: string; - index: number; -} -export const AccountAvatar = memo(({ name, publicKey, index, ...props }: AccountAvatarProps) => { - const gradient = publicKey + index.toString(); - const text = getAvatarText(name, index); - - return ( - - {text} - - ); -}); diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx index 05e0b930d7f..de34428572d 100644 --- a/src/app/components/account/account-list-item-layout.tsx +++ b/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; diff --git a/src/app/features/current-account/current-account-avatar.tsx b/src/app/features/current-account/current-account-avatar.tsx index eb4216fb518..82143c94e07 100644 --- a/src/app/features/current-account/current-account-avatar.tsx +++ b/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) => { diff --git a/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx b/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx index 79e8691148b..761823e7bc1 100644 --- a/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx +++ b/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx @@ -1,13 +1,7 @@ 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'; @@ -15,7 +9,7 @@ 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,25 +39,6 @@ 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 ( } onSelectAccount={handleClick} @@ -82,9 +56,6 @@ export const SwitchAccountListItem = memo( balanceLabel={ } - hasCopied={hasCopied} - onCopyToClipboard={onCopyToClipboard} - onClickBtcCopyIcon={onClickBtcCopyIcon} mt="space.05" {...bind} > diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx index 6a8dd67e587..ed83ed09ea8 100644 --- a/src/app/pages/choose-account/components/accounts.tsx +++ b/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'; diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx index 29856f3656f..a39d12b4947 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx +++ b/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';