feat(suite-native): use crypto icon with network

trezor · Feb 7, 2025 · f0c5180 · f0c5180
1 parent 9caa21c
commit f0c5180
Show file tree

Hide file tree

Showing 30 changed files with 169 additions and 211 deletions.
diff --git a/.../components/ReceiveAccountDetailsCard.tsx → ...nts/src/components/AccountDetailsCard.tsx b/.../components/ReceiveAccountDetailsCard.tsx → ...nts/src/components/AccountDetailsCard.tsx
@@ -4,21 +4,18 @@ import { G } from '@mobily/ts-belt';
 
 import { AccountsRootState, selectAccountByKey } from '@suite-common/wallet-core';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
-import { AccountsListItem } from '@suite-native/accounts';
 import { Card, ErrorMessage, VStack } from '@suite-native/atoms';
 import { useTranslate } from '@suite-native/intl';
 
+import { AccountsListItem } from './AccountsList/AccountsListItem';
 import { TokenReceiveCard } from './TokenReceiveCard';
 
-type ReceiveAccountDetailsCardProps = {
+type AccountDetailsCardProps = {
     accountKey: AccountKey;
     tokenContract?: TokenAddress;
 };
 
-export const ReceiveAccountDetailsCard = ({
-    accountKey,
-    tokenContract,
-}: ReceiveAccountDetailsCardProps) => {
+export const AccountDetailsCard = ({ accountKey, tokenContract }: AccountDetailsCardProps) => {
     const { translate } = useTranslate();
     const account = useSelector((state: AccountsRootState) =>
         selectAccountByKey(state, accountKey),
@@ -27,7 +24,7 @@ export const ReceiveAccountDetailsCard = ({
     if (G.isNullable(account))
         return (
             <ErrorMessage
-                errorMessage={translate('moduleReceive.accountNotFound', { accountKey })}
+                errorMessage={translate('moduleAccounts.accountNotFound', { accountKey })}
             />
         );
 
@@ -37,7 +34,7 @@ export const ReceiveAccountDetailsCard = ({
                 {tokenContract ? (
                     <TokenReceiveCard contract={tokenContract} accountKey={accountKey} />
                 ) : (
-                    <AccountsListItem account={account} />
+                    <AccountsListItem account={account} isNativeCoinOnly />
                 )}
             </Card>
         </VStack>

diff --git a/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx b/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx
@@ -39,7 +39,7 @@ export const AccountSelectBottomSheet = React.memo(
                                 {...item}
                                 hasBackground
                                 showDivider
-                                isInModal={true}
+                                isNativeCoinOnly
                                 onPress={() => onSelectAccount(item)}
                             />
                         );

diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
@@ -1,15 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
-import { useFormatters } from '@suite-common/formatters';
 import { AccountsRootState, selectFormattedAccountType } from '@suite-common/wallet-core';
 import { Account, AccountKey } from '@suite-common/wallet-types';
 import { Badge, RoundedIcon } from '@suite-native/atoms';
 import {
     CryptoAmountFormatter,
     CryptoToFiatAmountFormatter,
     FiatAmountFormatter,
+    NetworkDisplaySymbolNameFormatter,
 } from '@suite-native/formatters';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { NativeStakingRootState, selectAccountHasStaking } from '@suite-native/staking';
 import {
@@ -26,11 +27,9 @@ import { OnSelectAccount } from '../../types';
 
 export type AccountListItemProps = {
     account: Account;
-    isInModal?: boolean;
-
+    isNativeCoinOnly?: boolean;
     onPress?: OnSelectAccount;
     disabled?: boolean;
-
     hasBackground?: boolean;
     isFirst?: boolean;
     isLast?: boolean;
@@ -55,14 +54,13 @@ export const AccountsListItem = ({
     account,
     onPress,
     disabled,
-    isInModal = false,
+    isNativeCoinOnly = false,
     hasBackground = false,
     isFirst = false,
     isLast = false,
     showDivider = false,
 }: AccountListItemProps) => {
     const { accountLabel } = account;
-    const { NetworkNameFormatter } = useFormatters();
 
     const formattedAccountType = useSelector((state: AccountsRootState) =>
         selectFormattedAccountType(state, account.key),
@@ -87,10 +85,20 @@ export const AccountsListItem = ({
         });
     }, [account, accountHasAnyTokens, accountHasStaking, onPress]);
 
+    const icon = useMemo(
+        () =>
+            isNativeCoinOnly ? (
+                <CryptoIconWithNetwork symbol={account.symbol} preferNetworkSymbol={false} />
+            ) : (
+                <RoundedIcon symbol={account.symbol} />
+            ),
+        [account.symbol, isNativeCoinOnly],
+    );
+
     const doesCoinSupportTokens = isCoinWithTokens(account.symbol);
-    const shouldShowAccountLabel = !doesCoinSupportTokens || !isInModal;
-    const shouldShowTokenBadge = accountHasAnyTokens && !isInModal;
-    const shouldShowStakingBadge = accountHasStaking && !isInModal;
+    const shouldShowAccountLabel = !doesCoinSupportTokens || !isNativeCoinOnly;
+    const shouldShowTokenBadge = accountHasAnyTokens && !isNativeCoinOnly;
+    const shouldShowStakingBadge = accountHasStaking && !isNativeCoinOnly;
 
     return (
         <AccountsListItemBase
@@ -100,12 +108,12 @@ export const AccountsListItem = ({
             showDivider={showDivider}
             onPress={handleOnPress}
             disabled={disabled}
-            icon={<RoundedIcon symbol={account.symbol} />}
+            icon={icon}
             title={
                 shouldShowAccountLabel ? (
                     accountLabel
                 ) : (
-                    <NetworkNameFormatter value={account.symbol} />
+                    <NetworkDisplaySymbolNameFormatter value={account.symbol} />
                 )
             }
             badges={

diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx
@@ -1,8 +1,8 @@
 import { useSelector } from 'react-redux';
 
 import { Account, TokenInfoBranded } from '@suite-common/wallet-types';
-import { RoundedIcon } from '@suite-native/atoms';
 import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { TokensRootState, getTokenName, selectAccountTokenSymbol } from '@suite-native/tokens';
 
 import { AccountsListItemBase } from './AccountsListItemBase';
@@ -36,7 +36,9 @@ export const AccountsListTokenItem = ({
             isFirst={isFirst}
             isLast={isLast}
             onPress={onSelectAccount}
-            icon={<RoundedIcon symbol={account.symbol} contractAddress={token.contract} />}
+            icon={
+                <CryptoIconWithNetwork symbol={account.symbol} contractAddress={token.contract} />
+            }
             title={getTokenName(token.name)}
             mainValue={
                 <TokenToFiatAmountFormatter

diff --git a/...ceive/src/components/TokenReceiveCard.tsx → ...ounts/src/components/TokenReceiveCard.tsx b/...ceive/src/components/TokenReceiveCard.tsx → ...ounts/src/components/TokenReceiveCard.tsx
@@ -6,8 +6,9 @@ import {
     selectAccountNetworkSymbol,
 } from '@suite-common/wallet-core';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
-import { Badge, Box, ErrorMessage, RoundedIcon, Text, VStack } from '@suite-native/atoms';
+import { Badge, Box, ErrorMessage, Text, VStack } from '@suite-native/atoms';
 import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { TokensRootState, getTokenName, selectAccountTokenInfo } from '@suite-native/tokens';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
@@ -43,7 +44,7 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
 
     if (!token || !symbol) {
         return (
-            <ErrorMessage errorMessage={<Translation id="moduleReceive.tokens.errorMessage" />} />
+            <ErrorMessage errorMessage={<Translation id="moduleAccounts.tokens.errorMessage" />} />
         );
     }
 
@@ -54,18 +55,17 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
             <Box flexDirection="row" justifyContent="space-between" alignItems="center">
                 <Box flex={1} flexDirection="row" alignItems="center">
                     <Box marginRight="sp16">
-                        <RoundedIcon symbol={symbol} contractAddress={contract} />
+                        <CryptoIconWithNetwork symbol={symbol} contractAddress={contract} />
                     </Box>
                     <Box style={applyStyle(tokenDescriptionStyle)}>
                         <Text>{tokenName}</Text>
                         <Badge
                             label={
                                 <Translation
-                                    id="moduleReceive.tokens.runOn"
+                                    id="moduleAccounts.tokens.runOn"
                                     values={{ accountLabel }}
                                 />
                             }
-                            icon={symbol}
                             size="small"
                             iconSize="extraSmall"
                         />

diff --git a/suite-native/accounts/src/index.ts b/suite-native/accounts/src/index.ts
@@ -9,6 +9,8 @@ export * from './components/AccountsList/AccountsListTokenItem';
 export * from './components/TokenSelectBottomSheet';
 export * from './components/AccountSectionTitle';
 export * from './components/AccountLabelFieldHint';
+export * from './components/AccountDetailsCard';
+export * from './components/TokenReceiveCard';
 export * from './hooks/useAccountLabelForm';
 export * from './selectors';
 export * from './hooks/useAccountAlerts';

diff --git a/suite-native/formatters/src/components/NetworkDisplaySymbolNameFormatter.tsx b/suite-native/formatters/src/components/NetworkDisplaySymbolNameFormatter.tsx
@@ -0,0 +1,10 @@
+import { NetworkSymbol, getNetworkDisplaySymbolName } from '@suite-common/wallet-config';
+import { TextProps } from '@suite-native/atoms';
+
+import { FormatterProps } from '../types';
+
+type NetworkDisplaySymbolNameFormatterProps = FormatterProps<NetworkSymbol> & TextProps;
+
+export const NetworkDisplaySymbolNameFormatter = ({
+    value,
+}: NetworkDisplaySymbolNameFormatterProps) => getNetworkDisplaySymbolName(value);
diff --git a/suite-native/formatters/src/components/TokenAmountFormatter.tsx b/suite-native/formatters/src/components/TokenAmountFormatter.tsx
@@ -25,7 +25,7 @@ export const TokenAmountFormatter = ({
 }: TokenAmountFormatterProps) => {
     const decimalValue = convertTokenValueToDecimal(value, decimals);
 
-    const formattedValue = `${localizeNumber(decimalValue)} ${tokenSymbol}`;
+    const formattedValue = `${localizeNumber(decimalValue)} ${tokenSymbol?.toUpperCase()}`;
 
     return (
         <AmountText

diff --git a/suite-native/formatters/src/index.ts b/suite-native/formatters/src/index.ts
@@ -7,6 +7,7 @@ export { TransactionIdFormatter } from './components/TransactionIdFormatter';
 export { PercentageDifferenceFormatter } from './components/PercentageDifferenceFormatter';
 export { FiatAmountFormatter } from './components/FiatAmountFormatter';
 export { CryptoAmountFormatter } from './components/CryptoAmountFormatter';
+export { NetworkDisplaySymbolNameFormatter } from './components/NetworkDisplaySymbolNameFormatter';
 export { TokenAmountFormatter } from './components/TokenAmountFormatter';
 export { TokenToFiatAmountFormatter } from './components/TokenToFiatAmountFormatter';
 export { SignValueFormatter } from './components/SignValueFormatter';

diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -512,12 +512,7 @@ export const en = {
     moduleReceive: {
         receiveTitle: 'Receive',
         screenTitle: '{coinSymbol} Receive address',
-        accountNotFound: 'Account {accountKey} not found.',
         deviceCancelError: 'Address confirmation canceled.',
-        tokens: {
-            runOn: 'Run on {accountLabel}',
-            errorMessage: 'Token not found.',
-        },
         receiveAddressCard: {
             alert: {
                 success: 'Receive address has been confirmed on your Trezor.',
@@ -881,6 +876,11 @@ export const en = {
         },
     },
     moduleAccounts: {
+        accountNotFound: 'Account {accountKey} not found.',
+        tokens: {
+            runOn: 'Run on {accountLabel}',
+            errorMessage: 'Token not found.',
+        },
         accountDetail: {
             accountLabelBadge: 'Run on {accountLabel}',
         },
@@ -1095,6 +1095,7 @@ export const en = {
             title: 'Send from',
         },
         outputs: {
+            title: '{assetName} Send',
             correctNetworkMessage:
                 'Make sure that you’re sending to an address\non {networkName} network. <link>Learn more</link>',
             tokenOfNetworkSheet: {

diff --git a/suite-native/module-accounts-management/package.json b/suite-native/module-accounts-management/package.json
@@ -14,7 +14,6 @@
         "@react-navigation/native": "6.1.18",
         "@react-navigation/native-stack": "6.11.0",
         "@reduxjs/toolkit": "1.9.5",
-        "@suite-common/fiat-services": "workspace:*",
         "@suite-common/graph": "workspace:*",
         "@suite-common/wallet-config": "workspace:*",
         "@suite-common/wallet-core": "workspace:*",

diff --git a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx
@@ -1,24 +1,20 @@
 import { memo } from 'react';
 
 import { type NetworkSymbol } from '@suite-common/wallet-config';
-import type { TokenAddress, TokenSymbol } from '@suite-common/wallet-types';
+import type { TokenSymbol } from '@suite-common/wallet-types';
 import { HStack } from '@suite-native/atoms';
 import { CryptoAmountFormatter, TokenAmountFormatter } from '@suite-native/formatters';
-import { CryptoIcon } from '@suite-native/icons';
 
 type AccountDetailBalanceProps = {
     value: string;
     symbol: NetworkSymbol;
     isBalance?: boolean;
     tokenSymbol?: TokenSymbol | null;
-    tokenAddress?: TokenAddress;
 };
 
 export const AccountDetailCryptoValue = memo(
-    ({ value, symbol, tokenSymbol, tokenAddress, isBalance = true }: AccountDetailBalanceProps) => (
+    ({ value, symbol, tokenSymbol, isBalance = true }: AccountDetailBalanceProps) => (
         <HStack spacing="sp8" flexDirection="row" alignItems="center" justifyContent="center">
-            <CryptoIcon symbol={symbol} contractAddress={tokenAddress} size="extraSmall" />
-
             {tokenSymbol ? (
                 <TokenAmountFormatter
                     value={value}

diff --git a/suite-native/module-accounts-management/src/components/AccountDetailHeader.tsx b/suite-native/module-accounts-management/src/components/AccountDetailHeader.tsx
@@ -37,25 +37,18 @@ type AccountBalanceProps = {
 const CryptoBalance = ({
     symbol,
     tokenSymbol,
-    tokenAddress,
     totalCryptoBalance,
 }: {
     symbol: NetworkSymbol;
     tokenSymbol?: TokenSymbol | null;
-    tokenAddress?: TokenAddress;
     totalCryptoBalance: string | null;
 }) => {
     const selectedPoint = useAtomValue(selectedPointAtom);
     const value = selectedPoint?.cryptoBalance || totalCryptoBalance || '0';
 
     return (
         <DiscreetTextTrigger>
-            <AccountDetailCryptoValue
-                symbol={symbol}
-                tokenSymbol={tokenSymbol}
-                tokenAddress={tokenAddress}
-                value={value}
-            />
+            <AccountDetailCryptoValue symbol={symbol} tokenSymbol={tokenSymbol} value={value} />
         </DiscreetTextTrigger>
     );
 };
@@ -96,7 +89,6 @@ export const AccountDetailHeader = ({
             <CryptoBalance
                 symbol={account.symbol}
                 tokenSymbol={tokenSymbol}
-                tokenAddress={tokenAddress}
                 totalCryptoBalance={totalCryptoBalance}
             />
             <GraphFiatBalance

diff --git a/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx b/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx
@@ -1,6 +1,10 @@
+import { useSelector } from 'react-redux';
+
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
-import { IconButton } from '@suite-native/atoms';
+import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core';
+import { HStack, IconButton, Text } from '@suite-native/atoms';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import {
     AccountsStackParamList,
     GoBackIcon,
@@ -29,6 +33,9 @@ export const AccountDetailScreenHeader = ({
     const route = useRoute<RouteProp<RootStackParamList, RootStackRoutes.AccountDetail>>();
     const { closeActionType } = route.params;
 
+    const symbol = useSelector((state: AccountsRootState) =>
+        selectAccountNetworkSymbol(state, accountKey),
+    )!;
     const handleSettingsNavigation = () => {
         navigation.navigate(RootStackRoutes.AccountSettings, {
             accountKey,
@@ -37,7 +44,16 @@ export const AccountDetailScreenHeader = ({
 
     return (
         <ScreenHeader
-            content={accountLabel}
+            content={
+                <HStack alignItems="center">
+                    <CryptoIconWithNetwork
+                        symbol={symbol}
+                        size="small"
+                        preferNetworkSymbol={false}
+                    />
+                    <Text>{accountLabel}</Text>
+                </HStack>
+            }
             rightIcon={
                 <IconButton
                     colorScheme="tertiaryElevation0"