[Issue-1826] Fix bug in issue 1828

src/components/AccountSettingButton.tsx

@@ -5,11 +5,11 @@ import { RootStackParamList } from 'routes/index';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
 import { CaretDown } from 'phosphor-react-native';
-import { Avatar, Icon } from 'components/design-system-ui';
+import { Icon } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
-import AvatarGroup from 'components/common/AvatarGroup';
-import { isEthereumAddress } from '@polkadot/util-crypto';
 import createStylesheet from './styles/AccountSettingButton';
+import { AccountProxyAvatarGroup } from 'components/design-system-ui/avatar/account-proxy-avatar-group';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props {
   navigation: NativeStackNavigationProp<RootStackParamList>;
@@ -28,14 +28,8 @@ export const AccountSettingButton = ({ navigation, style }: Props) => {
       onPress={() => {
         navigation.navigate('AccountsScreen', {});
       }}>
-      {isAllAccount && <AvatarGroup avatarSize={20} />}
-      {!isAllAccount && (
-        <Avatar
-          value={currentAccountAddress}
-          size={20}
-          theme={isEthereumAddress(currentAccountAddress) ? 'ethereum' : 'polkadot'}
-        />
-      )}
+      {isAllAccount && <AccountProxyAvatarGroup />}
+      {!isAllAccount && <AccountProxyAvatar value={currentAccountAddress} size={20} />}
       {!isReady && (
         <View style={stylesheet.placeholder}>
           <ActivityIndicator size={16} />

src/components/AccountTokenDetail/index.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
-import { Avatar, Button, Icon, Number, Typography } from 'components/design-system-ui';
+import { Button, Icon, Number, Typography } from 'components/design-system-ui';
 import { Linking, View } from 'react-native';
 import i18n from 'utils/i18n/i18n';
-import reformatAddress, { toShort } from 'utils/index';
+import { toShort } from 'utils/index';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import createStylesheet from './style';
 import { BalanceItem } from '@subwallet/extension-base/types';
@@ -15,6 +15,8 @@ import useGetAccountByAddress from 'hooks/screen/useGetAccountByAddress';
 import MetaInfo from 'components/MetaInfo';
 import { ArrowSquareOut } from 'phosphor-react-native';
 import { getExplorerLink } from '@subwallet/extension-base/services/transaction-service/utils';
+import { reformatAddress } from 'utils/account/account';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props {
   item: BalanceItem;
@@ -51,7 +53,7 @@ export const AccountTokenDetail = ({ item, chainInfoMap }: Props) => {
       <View style={{ flex: 1 }}>
         <View style={[_style.row, { paddingBottom: theme.paddingXXS }]}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.paddingXS }}>
-            <Avatar value={address} size={24} />
+            <AccountProxyAvatar value={address} size={24} />
             {name ? (
               <View>
                 <Typography.Text style={_style.accountDetailLabel} ellipsis>

src/components/Earning/EarningBaseInfo/parts/EarningAccountInfo/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@subwallet/extension-base/types';
 import { isSameAddress } from '@subwallet/extension-base/utils';
 import BigN from 'bignumber.js';
-import { Avatar, Button, Icon, Typography } from 'components/design-system-ui';
+import { Button, Icon, Typography } from 'components/design-system-ui';
 import MetaInfo from 'components/MetaInfo';
 import EarningNominationModal from 'components/Modal/Earning/EarningNominationModal';
 import { StakingStatusUi } from 'constants/stakingStatusUi';
@@ -24,6 +24,7 @@ import { createEarningTypeTags } from 'utils/earning';
 import i18n from 'utils/i18n/i18n';
 import { findAccountByAddress, toShort } from 'utils/index';
 import createStyles from './styles';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 type Props = {
   compound: YieldPositionInfo;
@@ -103,7 +104,7 @@ const EarningAccountInfo: React.FC<Props> = (props: Props) => {
       return () => {
         return (
           <View style={styles.accountRow}>
-            <Avatar value={item.address} size={theme.sizeLG} />
+            <AccountProxyAvatar value={item.address} size={theme.sizeLG} />
             <Typography.Text style={styles.accountText} ellipsis={true} numberOfLines={1}>
               {account?.name || toShort(item.address)}
             </Typography.Text>

src/components/Earning/EarningBaseInfo/parts/EarningNominationInfo/index.tsx

@@ -1,7 +1,7 @@
 import { _ChainAsset } from '@subwallet/chain-list/types';
 import { _STAKING_CHAIN_GROUP } from '@subwallet/extension-base/services/earning-service/constants';
 import { YieldPoolInfo, YieldPoolType, YieldPositionInfo } from '@subwallet/extension-base/types';
-import { Avatar, Button, Icon, Number, Typography } from 'components/design-system-ui';
+import { Button, Icon, Number, Typography } from 'components/design-system-ui';
 import MetaInfo from 'components/MetaInfo';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { CaretDown, CaretUp } from 'phosphor-react-native';
@@ -10,6 +10,7 @@ import { TouchableOpacity, View } from 'react-native';
 import { isAccountAll } from 'utils/accountAll';
 import { toShort } from 'utils/index';
 import createStyles from './styles';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 type Props = {
   compound: YieldPositionInfo;
@@ -65,7 +66,7 @@ const EarningNominationInfo: React.FC<Props> = (props: Props) => {
             return (
               <View style={styles.infoRow} key={item.validatorAddress}>
                 <View style={styles.accountRow}>
-                  <Avatar value={item.validatorAddress} size={theme.sizeLG} />
+                  <AccountProxyAvatar value={item.validatorAddress} size={theme.sizeLG} />
                   <Typography.Text style={styles.accountText} ellipsis={true} numberOfLines={1}>
                     {item.validatorIdentity || toShort(item.validatorAddress)}
                   </Typography.Text>

src/components/Field/AccountInfo.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { StyleProp, Text, View } from 'react-native';
-import reformatAddress, { getNetworkLogo, toShort } from 'utils/index';
+import { getNetworkLogo, toShort } from 'utils/index';
 import { ColorMap } from 'styles/color';
 import { FontMedium, sharedStyles } from 'styles/sharedStyles';
-import { Avatar } from 'components/design-system-ui';
+import { reformatAddress } from 'utils/account/account';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props {
   address: string;
@@ -32,7 +33,7 @@ export const AccountInfoField = ({ address, name, networkKey, networkPrefix }: P
         alignItems: 'center',
       }}>
       <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
-        <Avatar value={address} size={18} />
+        <AccountProxyAvatar value={address} size={18} />
         <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 12 }}>
           <Text numberOfLines={1} style={[{ maxWidth: 100 }, textStyle]}>
             {name}

src/components/Field/AccountSelect.tsx

@@ -6,9 +6,8 @@ import Text from '../../components/Text';
 import { FontSemiBold } from 'styles/sharedStyles';
 import { ColorMap } from 'styles/color';
 import { CaretDown } from 'phosphor-react-native';
-import { Avatar } from 'components/design-system-ui';
-import { isEthereumAddress } from '@polkadot/util-crypto';
 import i18n from 'utils/i18n/i18n';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props extends FieldBaseProps {
   disabled?: boolean;
@@ -72,7 +71,7 @@ export const AccountSelectField = ({
     <FieldBase label={label} {...fieldBase} outerStyle={outerStyle}>
       <View style={[blockContentStyle, !label && { paddingTop: 12 }]}>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Avatar value={value} size={label ? 20 : 24} theme={isEthereumAddress(value) ? 'ethereum' : 'polkadot'} />
+          <AccountProxyAvatar value={value} size={label ? 20 : 24} />
           {!!value && <Text style={accountNameTextStyle}>{accountName}</Text>}
           {!!value && <Text style={getTextStyle(!!disabled)}>{`(${toShort(value, 4, 4)})`}</Text>}
           {!value && <Text style={getPlaceholderStyle()}>{i18n.header.selectAccount}</Text>}

src/components/Field/Address.tsx

@@ -1,12 +1,14 @@
 import { FieldBase, FieldBaseProps } from 'components/Field/Base';
 import React, { useMemo } from 'react';
-import reformatAddress, { toShort } from 'utils/index';
+import { toShort } from 'utils/index';
 import { StyleSheet, View } from 'react-native';
 import { FontMedium } from 'styles/sharedStyles';
 import { IconProps, Info } from 'phosphor-react-native';
 import { ThemeTypes } from 'styles/themes';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
-import { Avatar, Button, Icon, Typography } from 'components/design-system-ui';
+import { Button, Icon, Typography } from 'components/design-system-ui';
+import { AccountProxyAvatar } from '../design-system-ui/avatar/account-proxy-avatar';
+import { reformatAddress } from 'utils/account/account';
 
 interface Props extends FieldBaseProps {
   address: string;
@@ -50,7 +52,7 @@ export const AddressField = ({
       <View style={styles.blockContent}>
         {!!showAvatar && (
           <View style={styles.logoWrapper}>
-            <Avatar value={address} size={label ? 20 : 24} />
+            <AccountProxyAvatar value={address} size={label ? 20 : 24} />
           </View>
         )}
         {!!placeholder && <Typography.Text style={styles.text}>{placeholder}</Typography.Text>}

src/components/Input/InputAddressNew.tsx

@@ -4,7 +4,7 @@ import { Keyboard, TextInput, View } from 'react-native';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { decodeAddress, isAddress, isEthereumAddress } from '@polkadot/util-crypto';
 import { Button, Icon, Typography } from 'components/design-system-ui';
-import reformatAddress, { toShort } from 'utils/index';
+import { toShort } from 'utils/index';
 import { Book, Scan } from 'phosphor-react-native';
 import { AddressBookModal } from 'components/Modal/AddressBook/AddressBookModal';
 import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
@@ -20,6 +20,7 @@ import i18n from 'utils/i18n/i18n';
 import { setAdjustResize } from 'rn-android-keyboard-adjust';
 import useCheckCamera from 'hooks/common/useCheckCamera';
 import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
+import { reformatAddress } from 'utils/account/account';
 
 interface Props extends InputProps {
   chain?: string;

src/components/MetaInfo/parts/AccountItem.tsx

@@ -9,10 +9,11 @@ import { useSelector } from 'react-redux';
 import useGetAccountByAddress from 'hooks/screen/useGetAccountByAddress';
 import { RootState } from 'stores/index';
 import { findNetworkJsonByGenesisHash } from 'utils/getNetworkJsonByGenesisHash';
-import reformatAddress, { toShort } from 'utils/index';
+import { toShort } from 'utils/index';
 import Typography from '../../design-system-ui/typography';
 import { isAddress } from '@polkadot/util-crypto';
 import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
+import { reformatAddress } from 'utils/account/account';
 
 export interface AccountInfoItem extends InfoItemBase {
   address: string;

src/components/Modal/AddressBook/AddressBookModal.tsx

@@ -9,7 +9,6 @@ import { View } from 'react-native';
 import Typography from '../../design-system-ui/typography';
 import { FlatListScreenPaddingTop } from 'styles/sharedStyles';
 import { isAddress, isEthereumAddress } from '@polkadot/util-crypto';
-import reformatAddress from 'utils/index';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
 import { isAccountAll } from 'utils/accountAll';
@@ -21,6 +20,7 @@ import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
 import useGetChainInfoByGenesisHash from 'hooks/chain/useGetChainInfoByGenesisHash';
 import { ListRenderItemInfo } from '@shopify/flash-list';
 import { AbstractAddressJson, AccountJson } from '@subwallet/extension-base/types';
+import { reformatAddress } from 'utils/account/account';
 
 interface Props {
   modalVisible: boolean;

src/components/Modal/AddressBook/ReadonlyAddressField.tsx

@@ -1,13 +1,14 @@
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { View } from 'react-native';
-import { Avatar, Button, Field, Icon, Typography } from 'components/design-system-ui';
+import { Button, Field, Icon, Typography } from 'components/design-system-ui';
 import { toShort } from 'utils/index';
 import React, { useCallback } from 'react';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Copy } from 'phosphor-react-native';
 import createStylesheet from './style/ReadonlyAddressField';
 import Toast from 'react-native-toast-notifications';
 import i18n from 'utils/i18n/i18n';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props {
   label?: string;
@@ -32,7 +33,7 @@ export const ReadonlyAddressField = ({ address, label, showAvatar = true, toastR
       <View style={stylesheet.contentBlock}>
         {showAvatar && (
           <View style={stylesheet.avatarWrapper}>
-            <Avatar value={address || ''} size={hasLabel ? 20 : 24} />
+            <AccountProxyAvatar value={address || ''} size={hasLabel ? 20 : 24} />
           </View>
         )}
         <Typography.Text style={stylesheet.address}>{toShort(address, 9, 11)}</Typography.Text>

src/components/Modal/Earning/EarningNominationModal/index.tsx

@@ -1,14 +1,15 @@
 import { _ChainAsset } from '@subwallet/chain-list/types';
 import { _STAKING_CHAIN_GROUP } from '@subwallet/extension-base/services/earning-service/constants';
 import { YieldPositionInfo } from '@subwallet/extension-base/types';
-import { Avatar, Number, SwModal, Typography } from 'components/design-system-ui';
+import { Number, SwModal, Typography } from 'components/design-system-ui';
 import MetaInfo from 'components/MetaInfo';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import React, { useMemo } from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 import { toShort } from 'utils/index';
 import createStyles from './style';
 import { deviceHeight } from 'constants/index';
+import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar';
 
 interface Props {
   item: YieldPositionInfo;
@@ -39,7 +40,7 @@ const EarningNominationModal: React.FC<Props> = (props: Props) => {
             return (
               <View style={styles.infoRow} key={nomination.validatorAddress}>
                 <View style={styles.accountRow}>
-                  <Avatar value={nomination.validatorAddress} size={theme.sizeLG} />
+                  <AccountProxyAvatar value={nomination.validatorAddress} size={theme.sizeLG} />
                   <Typography.Text style={styles.accountText} ellipsis={true} numberOfLines={1}>
                     {nomination.validatorIdentity || toShort(nomination.validatorAddress)}
                   </Typography.Text>