From 41310f5b0674fee4e8dc25c4418ed0583b0c35c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Vytick=20Vytrhl=C3=ADk?= <vytick@gmail.com>
Date: Thu, 6 Feb 2025 23:31:03 +0100
Subject: [PATCH] feat(suite-native): use crypto icon with network

---
 .../src/components/AccountDetailsCard.tsx}    | 13 ++-
 .../components/AccountSelectBottomSheet.tsx   |  2 +-
 .../AccountsList/AccountsListItem.tsx         | 32 ++++---
 .../AccountsList/AccountsListTokenItem.tsx    |  6 +-
 .../src/components/TokenReceiveCard.tsx       | 10 +--
 suite-native/accounts/src/index.ts            |  2 +
 .../NetworkDisplaySymbolNameFormatter.tsx     | 10 +++
 .../src/components/TokenAmountFormatter.tsx   |  2 +-
 suite-native/formatters/src/index.ts          |  1 +
 suite-native/intl/src/en.ts                   | 11 +--
 .../module-accounts-management/package.json   |  1 -
 .../components/AccountDetailCryptoValue.tsx   |  8 +-
 .../src/components/AccountDetailHeader.tsx    | 10 +--
 .../components/AccountDetailScreenHeader.tsx  | 20 ++++-
 .../src/components/CoinPriceCard.tsx          |  5 +-
 .../TokenAccountDetailScreenHeader.tsx        | 49 ++++++-----
 .../src/components/TransactionListHeader.tsx  |  2 +-
 .../screens/AccountDetailContentScreen.tsx    |  4 +-
 .../module-accounts-management/tsconfig.json  |  3 -
 .../components/AccountBalanceScreenHeader.tsx | 84 ++++---------------
 .../components/CorrectNetworkMessageCard.tsx  |  6 +-
 .../components/TokenOfNetworkAlertContent.tsx | 33 ++------
 .../src/screens/SendOutputsScreen.tsx         | 14 ++--
 suite-native/receive/package.json             |  1 -
 .../src/screens/ReceiveAddressScreen.tsx      |  7 +-
 .../TransactionDetailAddressesSection.tsx     | 22 ++---
 .../TransactionsList/TransactionIcon.tsx      | 18 +++-
 yarn.lock                                     |  1 -
 28 files changed, 169 insertions(+), 208 deletions(-)
 rename suite-native/{receive/src/components/ReceiveAccountDetailsCard.tsx => accounts/src/components/AccountDetailsCard.tsx} (73%)
 rename suite-native/{receive => accounts}/src/components/TokenReceiveCard.tsx (87%)
 create mode 100644 suite-native/formatters/src/components/NetworkDisplaySymbolNameFormatter.tsx

diff --git a/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx b/suite-native/accounts/src/components/AccountDetailsCard.tsx
similarity index 73%
rename from suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx
rename to suite-native/accounts/src/components/AccountDetailsCard.tsx
index bdf1e429827..98ff567b20f 100644
--- a/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx
+++ b/suite-native/accounts/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
index 60cfb8a8dd0..f78f6293ff5 100644
--- 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
index 4fee38949dc..b1af487c4a7 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
@@ -1,7 +1,6 @@
-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';
@@ -9,7 +8,9 @@ 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
index cf67cd8f405..1c7d4e7645e 100644
--- 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/suite-native/receive/src/components/TokenReceiveCard.tsx b/suite-native/accounts/src/components/TokenReceiveCard.tsx
similarity index 87%
rename from suite-native/receive/src/components/TokenReceiveCard.tsx
rename to suite-native/accounts/src/components/TokenReceiveCard.tsx
index 17dbcd1144a..4953eeecc89 100644
--- a/suite-native/receive/src/components/TokenReceiveCard.tsx
+++ b/suite-native/accounts/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
index 7ae20d49f9e..90cd779e762 100644
--- 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
new file mode 100644
index 00000000000..60291833124
--- /dev/null
+++ 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
index ed174f8f105..4ea7221022d 100644
--- 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
index f3875c2b561..0c6adc284e9 100644
--- 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
index a386799a44e..1d00b53057f 100644
--- 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
index 82c4af94021..94bf3cf8e8d 100644
--- 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
index b70c6c7e024..a9fde8be8da 100644
--- 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
index 09486a80b2d..865ad62b5cd 100644
--- a/suite-native/module-accounts-management/src/components/AccountDetailHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/AccountDetailHeader.tsx
@@ -37,12 +37,10 @@ type AccountBalanceProps = {
 const CryptoBalance = ({
     symbol,
     tokenSymbol,
-    tokenAddress,
     totalCryptoBalance,
 }: {
     symbol: NetworkSymbol;
     tokenSymbol?: TokenSymbol | null;
-    tokenAddress?: TokenAddress;
     totalCryptoBalance: string | null;
 }) => {
     const selectedPoint = useAtomValue(selectedPointAtom);
@@ -50,12 +48,7 @@ const CryptoBalance = ({
 
     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
index 6546738ee76..d0e5717a7eb 100644
--- 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"
diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
index 23b87eec37e..e53033574ea 100644
--- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
+++ b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
@@ -3,8 +3,9 @@ import { useSelector } from 'react-redux';
 import { getNetworkDisplaySymbolName } from '@suite-common/wallet-config';
 import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core';
 import { AccountKey } from '@suite-common/wallet-types';
-import { Box, Card, PriceChangeBadge, RoundedIcon, Text } from '@suite-native/atoms';
+import { Box, Card, PriceChangeBadge, Text } from '@suite-native/atoms';
 import { FiatAmountFormatter } from '@suite-native/formatters';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -70,7 +71,7 @@ export const CoinPriceCard = ({ accountKey }: CoinPriceCardProps) => {
         <Card style={applyStyle(cardStyle)}>
             <Box flexDirection="row" alignItems="center" flex={1}>
                 <Box marginRight="sp16">
-                    <RoundedIcon symbol={symbol} />
+                    <CryptoIconWithNetwork symbol={symbol} preferNetworkSymbol={false} />
                 </Box>
                 <Box style={applyStyle(cardContentStyle)}>
                     <Text variant="label" color="textSubdued">
diff --git a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx
index b5b67b85057..eefa834b4b8 100644
--- a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx
@@ -7,8 +7,9 @@ import {
     selectAccountLabel,
     selectAccountNetworkSymbol,
 } from '@suite-common/wallet-core';
-import { Box, HStack, Text } from '@suite-native/atoms';
-import { CryptoIcon } from '@suite-native/icons';
+import { TokenAddress } from '@suite-common/wallet-types';
+import { Box, HStack, Text, VStack } from '@suite-native/atoms';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { useTranslate } from '@suite-native/intl';
 import {
     GoBackIcon,
@@ -16,15 +17,16 @@ import {
     RootStackRoutes,
     ScreenHeader,
 } from '@suite-native/navigation';
+import { TokensRootState, selectAccountTokenInfo } from '@suite-native/tokens';
 
 type TokenAccountDetailScreenHeaderProps = {
     accountKey: string;
-    tokenName: string;
+    tokenContract: TokenAddress;
 };
 
 export const TokenAccountDetailScreenHeader = ({
     accountKey,
-    tokenName,
+    tokenContract,
 }: TokenAccountDetailScreenHeaderProps) => {
     const { translate } = useTranslate();
     const accountLabel = useSelector((state: AccountsRootState) =>
@@ -33,6 +35,9 @@ export const TokenAccountDetailScreenHeader = ({
     const symbol = useSelector((state: AccountsRootState) =>
         selectAccountNetworkSymbol(state, accountKey),
     )!;
+    const token = useSelector((state: TokensRootState) =>
+        selectAccountTokenInfo(state, accountKey, tokenContract),
+    );
     const route = useRoute<RouteProp<RootStackParamList, RootStackRoutes.AccountDetail>>();
     const { closeActionType } = route.params;
 
@@ -40,21 +45,27 @@ export const TokenAccountDetailScreenHeader = ({
         <ScreenHeader
             content={
                 <Box alignItems="center">
-                    <Text ellipsizeMode="tail" numberOfLines={1}>
-                        {tokenName}
-                    </Text>
-                    <HStack spacing="sp4" alignItems="center">
-                        <CryptoIcon symbol={symbol} size="extraSmall" />
-                        <Text
-                            variant="label"
-                            color="textSubdued"
-                            numberOfLines={1}
-                            ellipsizeMode="tail"
-                        >
-                            {translate('moduleAccounts.accountDetail.accountLabelBadge', {
-                                accountLabel,
-                            })}
-                        </Text>
+                    <HStack alignItems="center">
+                        <CryptoIconWithNetwork
+                            symbol={symbol}
+                            contractAddress={tokenContract}
+                            size="small"
+                        />
+                        <VStack spacing={0}>
+                            <Text ellipsizeMode="tail" numberOfLines={1}>
+                                {token?.name}
+                            </Text>
+                            <Text
+                                variant="label"
+                                color="textSubdued"
+                                numberOfLines={1}
+                                ellipsizeMode="tail"
+                            >
+                                {translate('moduleAccounts.accountDetail.accountLabelBadge', {
+                                    accountLabel,
+                                })}
+                            </Text>
+                        </VStack>
                     </HStack>
                 </Box>
             }
diff --git a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
index d9aa2a2f468..3ce6fb67616 100644
--- a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
@@ -25,8 +25,8 @@ import {
 
 import { AccountDetailCryptoValue } from './AccountDetailCryptoValue';
 import { AccountDetailGraph } from './AccountDetailGraph';
-import { CoinPriceCard } from './CoinPriceCard';
 import { selectIsNetworkSendFlowEnabled } from '../selectors';
+import { CoinPriceCard } from './CoinPriceCard';
 
 type TransactionListHeaderProps = {
     accountKey: AccountKey;
diff --git a/suite-native/module-accounts-management/src/screens/AccountDetailContentScreen.tsx b/suite-native/module-accounts-management/src/screens/AccountDetailContentScreen.tsx
index 23fabd6876e..06ea2c62073 100644
--- a/suite-native/module-accounts-management/src/screens/AccountDetailContentScreen.tsx
+++ b/suite-native/module-accounts-management/src/screens/AccountDetailContentScreen.tsx
@@ -57,9 +57,9 @@ export const AccountDetailContentScreen = ({
     return (
         <Screen
             header={
-                token?.name ? (
+                tokenContract ? (
                     <TokenAccountDetailScreenHeader
-                        tokenName={token.name}
+                        tokenContract={tokenContract}
                         accountKey={accountKey}
                     />
                 ) : (
diff --git a/suite-native/module-accounts-management/tsconfig.json b/suite-native/module-accounts-management/tsconfig.json
index 72942b39d4c..d3a62621069 100644
--- a/suite-native/module-accounts-management/tsconfig.json
+++ b/suite-native/module-accounts-management/tsconfig.json
@@ -2,9 +2,6 @@
     "extends": "../../tsconfig.base.json",
     "compilerOptions": { "outDir": "libDev" },
     "references": [
-        {
-            "path": "../../suite-common/fiat-services"
-        },
         { "path": "../../suite-common/graph" },
         {
             "path": "../../suite-common/wallet-config"
diff --git a/suite-native/module-send/src/components/AccountBalanceScreenHeader.tsx b/suite-native/module-send/src/components/AccountBalanceScreenHeader.tsx
index 99be2f86642..1834e2fea6b 100644
--- a/suite-native/module-send/src/components/AccountBalanceScreenHeader.tsx
+++ b/suite-native/module-send/src/components/AccountBalanceScreenHeader.tsx
@@ -1,22 +1,12 @@
 import { useSelector } from 'react-redux';
 
-import {
-    AccountsRootState,
-    selectAccountFormattedBalance,
-    selectAccountLabel,
-    selectAccountNetworkSymbol,
-} from '@suite-common/wallet-core';
+import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
+import { AccountsRootState, selectAccountByKey } from '@suite-common/wallet-core';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
-import { isTestnet } from '@suite-common/wallet-utils';
-import { HStack, Text, VStack } from '@suite-native/atoms';
-import { CoinAmountFormatter, CoinToFiatAmountFormatter } from '@suite-native/formatters';
-import { CryptoIcon } from '@suite-native/icons';
+import { Text } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
 import { GoBackIcon, ScreenHeader } from '@suite-native/navigation';
-import {
-    TokensRootState,
-    selectAccountTokenBalance,
-    selectAccountTokenSymbol,
-} from '@suite-native/tokens';
+import { TokensRootState, selectAccountTokenInfo } from '@suite-native/tokens';
 
 type AccountBalanceScreenHeaderProps = {
     accountKey: AccountKey;
@@ -27,72 +17,26 @@ export const AccountBalanceScreenHeader = ({
     accountKey,
     tokenContract,
 }: AccountBalanceScreenHeaderProps) => {
-    const accountLabel = useSelector((state: AccountsRootState) =>
-        selectAccountLabel(state, accountKey),
-    );
-    const symbol = useSelector((state: AccountsRootState) =>
-        selectAccountNetworkSymbol(state, accountKey),
-    );
-
-    const formattedBalance = useSelector((state: AccountsRootState) =>
-        selectAccountFormattedBalance(state, accountKey),
-    );
-
-    const tokenSymbol = useSelector((state: TokensRootState) =>
-        selectAccountTokenSymbol(state, accountKey, tokenContract),
+    const account = useSelector((state: AccountsRootState) =>
+        selectAccountByKey(state, accountKey),
     );
 
-    const tokenBalance = useSelector((state: TokensRootState) =>
-        selectAccountTokenBalance(state, accountKey, tokenContract),
+    const tokenInfo = useSelector((state: TokensRootState) =>
+        selectAccountTokenInfo(state, accountKey, tokenContract),
     );
 
-    if (!symbol) {
+    if (!account) {
         return;
     }
 
-    const accountTitle = tokenSymbol ? `${accountLabel} – ${tokenSymbol}` : accountLabel;
+    const assetName = (tokenInfo?.symbol ?? getNetworkDisplaySymbol(account.symbol)).toUpperCase();
 
     return (
         <ScreenHeader
             content={
-                <VStack spacing="sp4" alignItems="center">
-                    <HStack spacing="sp8" alignItems="center">
-                        {symbol && (
-                            <CryptoIcon
-                                symbol={symbol}
-                                contractAddress={tokenContract}
-                                size="extraSmall"
-                            />
-                        )}
-                        {accountTitle && <Text variant="highlight">{accountTitle}</Text>}
-                    </HStack>
-                    <HStack spacing="sp4" alignItems="center">
-                        <CoinAmountFormatter
-                            variant="hint"
-                            color="textDefault"
-                            value={tokenBalance ?? formattedBalance}
-                            decimals={0}
-                            accountKey={accountKey}
-                            tokenContract={tokenContract}
-                        />
-                        {!isTestnet(symbol) && (
-                            <>
-                                <Text variant="hint" color="textSubdued">
-                                    ≈
-                                </Text>
-                                <CoinToFiatAmountFormatter
-                                    variant="hint"
-                                    color="textSubdued"
-                                    value={tokenBalance ?? formattedBalance}
-                                    accountKey={accountKey}
-                                    decimals={0}
-                                    tokenContract={tokenContract}
-                                    isBalance={true}
-                                />
-                            </>
-                        )}
-                    </HStack>
-                </VStack>
+                <Text variant="highlight">
+                    <Translation id="moduleSend.outputs.title" values={{ assetName }} />
+                </Text>
             }
             leftIcon={<GoBackIcon />}
         />
diff --git a/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx b/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
index ad2bc92434e..c7f05796a4b 100644
--- a/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
+++ b/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
@@ -1,6 +1,6 @@
 import { type NetworkSymbol, getNetwork } from '@suite-common/wallet-config';
 import { Card, HStack, Text } from '@suite-native/atoms';
-import { CryptoIcon } from '@suite-native/icons';
+import { NetworkIcon } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { Link } from '@suite-native/link';
 import { isCoinWithTokens } from '@suite-native/tokens';
@@ -30,8 +30,8 @@ export const CorrectNetworkMessageCard = ({ symbol }: CorrectNetworkMessageCardP
 
     return (
         <Card style={applyStyle(cardStyle)}>
-            <HStack spacing="sp12">
-                <CryptoIcon symbol={symbol} size={20} />
+            <HStack spacing="sp12" alignItems="center">
+                <NetworkIcon symbol={symbol} size="extraLarge" />
                 <Text variant="hint">
                     <Translation
                         id="moduleSend.outputs.correctNetworkMessage"
diff --git a/suite-native/module-send/src/components/TokenOfNetworkAlertContent.tsx b/suite-native/module-send/src/components/TokenOfNetworkAlertContent.tsx
index 7d7acc940d0..1283c6bcaec 100644
--- a/suite-native/module-send/src/components/TokenOfNetworkAlertContent.tsx
+++ b/suite-native/module-send/src/components/TokenOfNetworkAlertContent.tsx
@@ -4,27 +4,10 @@ import { useSelector } from 'react-redux';
 import { getNetwork } from '@suite-common/wallet-config';
 import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
-import { AlertBox, Box, Text, VStack } from '@suite-native/atoms';
-import { CryptoIcon } from '@suite-native/icons';
+import { AlertBox, Text, VStack } from '@suite-native/atoms';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { TokensRootState, selectAccountTokenSymbol } from '@suite-native/tokens';
-import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-
-const iconWrapperStyle = prepareNativeStyle(() => ({
-    overflow: 'visible',
-    height: 90,
-    width: 90,
-}));
-
-const networkIconWrapperStyle = prepareNativeStyle(utils => ({
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    padding: 3,
-    overflow: 'visible',
-    backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.round,
-}));
 
 type ParagraphProps = {
     header: ReactNode;
@@ -45,7 +28,6 @@ export const TokenOfNetworkAlertBody = ({
     accountKey: AccountKey;
     tokenContract?: TokenAddress;
 }) => {
-    const { applyStyle } = useNativeStyles();
     const tokenSymbol = useSelector((state: TokensRootState) =>
         selectAccountTokenSymbol(state, accountKey, tokenContract),
     );
@@ -59,12 +41,11 @@ export const TokenOfNetworkAlertBody = ({
 
     return (
         <VStack spacing="sp24">
-            <Box style={applyStyle(iconWrapperStyle)}>
-                <CryptoIcon symbol={symbol} contractAddress={tokenContract} size={80} />
-                <Box style={applyStyle(networkIconWrapperStyle)}>
-                    <CryptoIcon symbol={symbol} size={32} />
-                </Box>
-            </Box>
+            <CryptoIconWithNetwork
+                symbol={symbol}
+                contractAddress={tokenContract}
+                size="extraLarge"
+            />
             <Text variant="titleSmall">
                 <Translation
                     id="moduleSend.outputs.tokenOfNetworkSheet.title"
diff --git a/suite-native/module-send/src/screens/SendOutputsScreen.tsx b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
index 918e86bf18b..d67eb96aee0 100644
--- a/suite-native/module-send/src/screens/SendOutputsScreen.tsx
+++ b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
@@ -22,6 +22,7 @@ import {
     updateFeeInfoThunk,
 } from '@suite-common/wallet-core';
 import { TokenAddress } from '@suite-common/wallet-types';
+import { AccountDetailsCard } from '@suite-native/accounts';
 import { Box, Button } from '@suite-native/atoms';
 import { Form, useForm } from '@suite-native/forms';
 import { Translation } from '@suite-native/intl';
@@ -286,11 +287,14 @@ export const SendOutputsScreen = ({
                 )
             }
         >
-            <Box marginVertical="sp32">
-                <Form form={form}>
-                    <SendOutputFields accountKey={accountKey} />
-                </Form>
-            </Box>
+            <>
+                <AccountDetailsCard accountKey={accountKey} tokenContract={tokenContract} />
+                <Box marginVertical="sp32">
+                    <Form form={form}>
+                        <SendOutputFields accountKey={accountKey} />
+                    </Form>
+                </Box>
+            </>
         </SendScreen>
     );
 };
diff --git a/suite-native/receive/package.json b/suite-native/receive/package.json
index 4165b38225e..a039296fb63 100644
--- a/suite-native/receive/package.json
+++ b/suite-native/receive/package.json
@@ -24,7 +24,6 @@
         "@suite-native/atoms": "workspace:*",
         "@suite-native/device": "workspace:*",
         "@suite-native/device-mutex": "workspace:*",
-        "@suite-native/formatters": "workspace:*",
         "@suite-native/helpers": "workspace:*",
         "@suite-native/icons": "workspace:*",
         "@suite-native/intl": "workspace:*",
diff --git a/suite-native/receive/src/screens/ReceiveAddressScreen.tsx b/suite-native/receive/src/screens/ReceiveAddressScreen.tsx
index 2a6869634fd..6073fbb2152 100644
--- a/suite-native/receive/src/screens/ReceiveAddressScreen.tsx
+++ b/suite-native/receive/src/screens/ReceiveAddressScreen.tsx
@@ -9,6 +9,7 @@ import {
     selectSelectedDevice,
 } from '@suite-common/wallet-core';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
+import { AccountDetailsCard } from '@suite-native/accounts';
 import { Box, ErrorMessage, VStack } from '@suite-native/atoms';
 import {
     ConfirmOnTrezorImage,
@@ -18,7 +19,6 @@ import { Translation } from '@suite-native/intl';
 import { CloseActionType, Screen } from '@suite-native/navigation';
 
 import { ReceiveBlockedDeviceCompromisedScreen } from './ReceiveBlockedDeviceCompromisedScreen';
-import { ReceiveAccountDetailsCard } from '../components/ReceiveAccountDetailsCard';
 import { ReceiveAddressCard } from '../components/ReceiveAddressCard';
 import { ReceiveScreenHeader } from '../components/ReceiveScreenHeader';
 import { hasReceiveAddressButtonRequest } from '../hooks/receiveSelectors';
@@ -88,10 +88,7 @@ export const ReceiveAddressScreen = ({
             <Box flex={1}>
                 <VStack marginTop="sp8" spacing="sp16">
                     {isAccountDetailVisible && (
-                        <ReceiveAccountDetailsCard
-                            accountKey={accountKey}
-                            tokenContract={tokenContract}
-                        />
+                        <AccountDetailsCard accountKey={accountKey} tokenContract={tokenContract} />
                     )}
                     <ReceiveAddressCard
                         symbol={account.symbol}
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
index c34b2a6275f..60c6e3f0cf3 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
@@ -5,7 +5,7 @@ import { NetworkSymbol } from '@suite-common/wallet-config';
 import { TokenAddress } from '@suite-common/wallet-types';
 import { Box, CardDivider, Text, VStack } from '@suite-native/atoms';
 import { AccountAddressFormatter } from '@suite-native/formatters';
-import { CryptoIcon } from '@suite-native/icons';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -58,13 +58,6 @@ const stepperDotStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundNeutralSubdued,
 }));
 
-const coinIconWrapperStyle = prepareNativeStyle(utils => ({
-    alignSelf: 'flex-start',
-    padding: utils.spacings.sp12,
-    backgroundColor: utils.colors.backgroundSurfaceElevation2,
-    borderRadius: utils.borders.radii.round,
-}));
-
 const TransactionDetailSummaryStepper = () => {
     const { applyStyle } = useNativeStyles();
 
@@ -116,13 +109,12 @@ export const TransactionDetailAddressesSection = ({
                     </Box>
 
                     {symbol && (
-                        <Box style={applyStyle(coinIconWrapperStyle)}>
-                            <CryptoIcon
-                                symbol={symbol}
-                                contractAddress={contractAddress}
-                                size="extraSmall"
-                            />
-                        </Box>
+                        <CryptoIconWithNetwork
+                            symbol={symbol}
+                            contractAddress={contractAddress}
+                            size="small"
+                            preferNetworkSymbol={false}
+                        />
                     )}
                 </Box>
             </SummaryRow>
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
index 4f59fea4cbf..04056adf3d4 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
@@ -1,4 +1,8 @@
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import {
+    NetworkDisplaySymbol,
+    NetworkSymbol,
+    getNetworkDisplaySymbol,
+} from '@suite-common/wallet-config';
 import { TokenAddress, TransactionType } from '@suite-common/wallet-types';
 import { Box, RoundedIcon } from '@suite-native/atoms';
 import { CryptoIcon, IconName, IconSize } from '@suite-native/icons';
@@ -47,6 +51,14 @@ export const TransactionIcon = ({
 }: TransactionIconProps) => {
     const { applyStyle } = useNativeStyles();
 
+    let iconSymbol: NetworkSymbol | NetworkDisplaySymbol | undefined;
+
+    if (contractAddress) {
+        iconSymbol = symbol;
+    } else if (symbol) {
+        iconSymbol = getNetworkDisplaySymbol(symbol) as NetworkDisplaySymbol;
+    }
+
     return (
         <Box>
             <RoundedIcon
@@ -62,10 +74,10 @@ export const TransactionIcon = ({
                     width={3}
                 />
             )}
-            {symbol && (
+            {iconSymbol && (
                 <Box style={applyStyle(cryptoIconStyle)}>
                     <CryptoIcon
-                        symbol={symbol}
+                        symbol={iconSymbol}
                         contractAddress={contractAddress}
                         size="extraSmall"
                     />
diff --git a/yarn.lock b/yarn.lock
index 5a45cf26314..34f7be3a18b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11083,7 +11083,6 @@ __metadata:
     "@suite-native/atoms": "workspace:*"
     "@suite-native/device": "workspace:*"
     "@suite-native/device-mutex": "workspace:*"
-    "@suite-native/formatters": "workspace:*"
     "@suite-native/helpers": "workspace:*"
     "@suite-native/icons": "workspace:*"
     "@suite-native/intl": "workspace:*"