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 bdf1e429827d..98ff567b20f4 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 (
);
@@ -37,7 +34,7 @@ export const ReceiveAccountDetailsCard = ({
{tokenContract ? (
) : (
-
+
)}
diff --git a/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx b/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx
index 60cfb8a8dd04..f78f6293ff55 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 4fee38949dcf..b1af487c4a74 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 ? (
+
+ ) : (
+
+ ),
+ [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 (
}
+ icon={icon}
title={
shouldShowAccountLabel ? (
accountLabel
) : (
-
+
)
}
badges={
diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx
index cf67cd8f405d..1c7d4e7645e0 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={}
+ icon={
+
+ }
title={getTokenName(token.name)}
mainValue={
} />
+ } />
);
}
@@ -54,18 +55,17 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
-
+
{tokenName}
}
- icon={symbol}
size="small"
iconSize="extraSmall"
/>
diff --git a/suite-native/accounts/src/index.ts b/suite-native/accounts/src/index.ts
index 7ae20d49f9e2..90cd779e7627 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 000000000000..602918331246
--- /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 & 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 ed174f8f1055..4ea7221022db 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 (
Learn more',
tokenOfNetworkSheet: {
diff --git a/suite-native/module-accounts-management/package.json b/suite-native/module-accounts-management/package.json
index 82c4af94021b..94bf3cf8e8da 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 b70c6c7e024b..a9fde8be8da0 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) => (
-
-
{tokenSymbol ? (
{
const selectedPoint = useAtomValue(selectedPointAtom);
@@ -50,12 +48,7 @@ const CryptoBalance = ({
return (
-
+
);
};
@@ -96,7 +89,6 @@ export const AccountDetailHeader = ({
>();
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 (
+
+ {accountLabel}
+
+ }
rightIcon={
{
-
+
diff --git a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenHeader.tsx
index b5b67b850571..eefa834b4b86 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>();
const { closeActionType } = route.params;
@@ -40,21 +45,27 @@ export const TokenAccountDetailScreenHeader = ({
-
- {tokenName}
-
-
-
-
- {translate('moduleAccounts.accountDetail.accountLabelBadge', {
- accountLabel,
- })}
-
+
+
+
+
+ {token?.name}
+
+
+ {translate('moduleAccounts.accountDetail.accountLabelBadge', {
+ accountLabel,
+ })}
+
+
}
diff --git a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
index d9aa2a2f468c..3ce6fb676160 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 23fabd6876e9..06ea2c620733 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 (
) : (
diff --git a/suite-native/module-accounts-management/tsconfig.json b/suite-native/module-accounts-management/tsconfig.json
index 72942b39d4c0..d3a626210692 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 99be2f866423..1834e2fea6b4 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 (
-
- {symbol && (
-
- )}
- {accountTitle && {accountTitle}}
-
-
-
- {!isTestnet(symbol) && (
- <>
-
- ≈
-
-
- >
- )}
-
-
+
+
+
}
leftIcon={}
/>
diff --git a/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx b/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
index ad2bc92434ee..c7f05796a4bc 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 (
-
-
+
+
({
- 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 (
-
-
-
-
-
-
+
-
-
-
+ <>
+
+
+
+
+ >
);
};
diff --git a/suite-native/receive/package.json b/suite-native/receive/package.json
index 4165b38225e4..a039296fb630 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/components/ReceiveScreenHeader.tsx b/suite-native/receive/src/components/ReceiveScreenHeader.tsx
index 1ecbf37134df..93b86c60267a 100644
--- a/suite-native/receive/src/components/ReceiveScreenHeader.tsx
+++ b/suite-native/receive/src/components/ReceiveScreenHeader.tsx
@@ -10,7 +10,6 @@ import {
} from '@suite-common/wallet-core';
import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
import { HStack, Text } from '@suite-native/atoms';
-import { CryptoIcon } from '@suite-native/icons';
import { Translation } from '@suite-native/intl';
import {
CloseActionType,
@@ -69,7 +68,6 @@ export const ReceiveScreenHeader = ({
)}
- {symbol && }
{accountLabel && (
{accountLabel}
diff --git a/suite-native/receive/src/screens/ReceiveAddressScreen.tsx b/suite-native/receive/src/screens/ReceiveAddressScreen.tsx
index 2a6869634fd8..6073fbb2152a 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 = ({
{isAccountDetailVisible && (
-
+
)}
({
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 = ({
{symbol && (
-
-
-
+
)}
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
index 4f59fea4cbfa..04056adf3d44 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 (
)}
- {symbol && (
+ {iconSymbol && (
diff --git a/yarn.lock b/yarn.lock
index 5a45cf26314b..34f7be3a18b3 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:*"