diff --git a/packages/asset-utils/src/asset-logo-urls.ts b/packages/asset-utils/src/asset-logo-urls.ts index 93c97555732d..dc49d194ceb3 100644 --- a/packages/asset-utils/src/asset-logo-urls.ts +++ b/packages/asset-utils/src/asset-logo-urls.ts @@ -1,7 +1,7 @@ const ICONS_URL_BASE = 'https://data.trezor.io/suite/icons/coins/'; const composeAssetLogoUrl = (fileName: string, quality?: '@2x') => - `${ICONS_URL_BASE}${fileName}${quality === undefined ? '' : quality}.webp`.toLowerCase(); + `${ICONS_URL_BASE}${fileName}${quality === undefined ? '' : quality}.webp`; export const getAssetLogoUrl = ({ coingeckoId, diff --git a/suite-common/icons-deprecated/assets/tokenIcons/cro.svg b/suite-common/icons-deprecated/assets/tokenIcons/cro.svg deleted file mode 100644 index c90e17d7b5d7..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/cro.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/dai.svg b/suite-common/icons-deprecated/assets/tokenIcons/dai.svg deleted file mode 100644 index 3e479ab4943c..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/dai.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/erc20.svg b/suite-common/icons-deprecated/assets/tokenIcons/erc20.svg deleted file mode 100644 index 41f81f9f43df..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/erc20.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/leo.svg b/suite-common/icons-deprecated/assets/tokenIcons/leo.svg deleted file mode 100644 index f4010c41a811..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/leo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/link.svg b/suite-common/icons-deprecated/assets/tokenIcons/link.svg deleted file mode 100644 index 0f3b67b1c1cf..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/link.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/okb.svg b/suite-common/icons-deprecated/assets/tokenIcons/okb.svg deleted file mode 100644 index 99415bb21c94..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/okb.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/shib.svg b/suite-common/icons-deprecated/assets/tokenIcons/shib.svg deleted file mode 100644 index bd7f64a71cf5..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/shib.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/uni.svg b/suite-common/icons-deprecated/assets/tokenIcons/uni.svg deleted file mode 100644 index 1cff78b92740..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/uni.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/usdc.svg b/suite-common/icons-deprecated/assets/tokenIcons/usdc.svg deleted file mode 100644 index b4020a16742b..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/usdc.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/usdt.svg b/suite-common/icons-deprecated/assets/tokenIcons/usdt.svg deleted file mode 100644 index 426f4ebaf382..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/usdt.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/assets/tokenIcons/wbtc.svg b/suite-common/icons-deprecated/assets/tokenIcons/wbtc.svg deleted file mode 100644 index 2b6b7fd081e2..000000000000 --- a/suite-common/icons-deprecated/assets/tokenIcons/wbtc.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/suite-common/icons-deprecated/src/index.ts b/suite-common/icons-deprecated/src/index.ts index 0b3955407b01..838008a0b2fb 100644 --- a/suite-common/icons-deprecated/src/index.ts +++ b/suite-common/icons-deprecated/src/index.ts @@ -1,2 +1 @@ export * from './icons'; -export * from './tokenIcons'; diff --git a/suite-common/icons-deprecated/src/tokenIcons.ts b/suite-common/icons-deprecated/src/tokenIcons.ts deleted file mode 100644 index 5b9347c84b76..000000000000 --- a/suite-common/icons-deprecated/src/tokenIcons.ts +++ /dev/null @@ -1,16 +0,0 @@ -export const tokenIcons = { - '0xa0b73e1ff0b80914ab6fe0444e65848c4c34450b': require('../assets/tokenIcons/cro.svg'), - '0x6b175474e89094c44da98b954eedeac495271d0f': require('../assets/tokenIcons/dai.svg'), - '0x2af5d2ad76741191d15dfe7bf6ac92d4bd912ca3': require('../assets/tokenIcons/leo.svg'), - '0x514910771af9ca656af840dff83e8264ecf986ca': require('../assets/tokenIcons/link.svg'), - '0x75231f58b43240c9718dd58b4967c5114342a86c': require('../assets/tokenIcons/okb.svg'), - '0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce': require('../assets/tokenIcons/shib.svg'), - '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': require('../assets/tokenIcons/uni.svg'), - '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48': require('../assets/tokenIcons/usdc.svg'), - '0xdac17f958d2ee523a2206206994597c13d831ec7': require('../assets/tokenIcons/usdt.svg'), - '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599': require('../assets/tokenIcons/wbtc.svg'), -} as const; -export type TokenIconName = keyof typeof tokenIcons; - -// eslint-disable-next-line @typescript-eslint/no-var-requires -export const genericTokenIcon = require('../assets/tokenIcons/erc20.svg'); diff --git a/suite-common/icons/cryptoAssets/tokenIcons/cro.svg b/suite-common/icons/cryptoAssets/tokenIcons/cro.svg deleted file mode 100644 index f0e2ee55b94f..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/cro.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/dai.svg b/suite-common/icons/cryptoAssets/tokenIcons/dai.svg deleted file mode 100644 index 3575bd1f3c6f..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/dai.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/leo.svg b/suite-common/icons/cryptoAssets/tokenIcons/leo.svg deleted file mode 100644 index 06b45ed905e9..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/leo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/link.svg b/suite-common/icons/cryptoAssets/tokenIcons/link.svg deleted file mode 100644 index 08f1bd71ee8d..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/link.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/okb.svg b/suite-common/icons/cryptoAssets/tokenIcons/okb.svg deleted file mode 100644 index 03d75f4bccea..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/okb.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/shib.svg b/suite-common/icons/cryptoAssets/tokenIcons/shib.svg deleted file mode 100644 index 930299c56331..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/shib.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/uni.svg b/suite-common/icons/cryptoAssets/tokenIcons/uni.svg deleted file mode 100644 index c21b6e0acf43..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/uni.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg b/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg deleted file mode 100644 index 8e405afc18fd..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg b/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg deleted file mode 100644 index 410c2262fea6..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg b/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg deleted file mode 100644 index 4fe638b22789..000000000000 --- a/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/suite-common/icons/src/tokenIcons.ts b/suite-common/icons/src/tokenIcons.ts index 3abdc5ff673e..b3c4d6a68ae6 100644 --- a/suite-common/icons/src/tokenIcons.ts +++ b/suite-common/icons/src/tokenIcons.ts @@ -1,15 +1 @@ -export const tokenIcons = { - '0xa0b73e1ff0b80914ab6fe0444e65848c4c34450b': require('../cryptoAssets/tokenIcons/cro.svg'), - '0x6b175474e89094c44da98b954eedeac495271d0f': require('../cryptoAssets/tokenIcons/dai.svg'), - '0x2af5d2ad76741191d15dfe7bf6ac92d4bd912ca3': require('../cryptoAssets/tokenIcons/leo.svg'), - '0x514910771af9ca656af840dff83e8264ecf986ca': require('../cryptoAssets/tokenIcons/link.svg'), - '0x75231f58b43240c9718dd58b4967c5114342a86c': require('../cryptoAssets/tokenIcons/okb.svg'), - '0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce': require('../cryptoAssets/tokenIcons/shib.svg'), - '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': require('../cryptoAssets/tokenIcons/uni.svg'), - '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48': require('../cryptoAssets/tokenIcons/usdc.svg'), - '0xdac17f958d2ee523a2206206994597c13d831ec7': require('../cryptoAssets/tokenIcons/usdt.svg'), - '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599': require('../cryptoAssets/tokenIcons/wbtc.svg'), -} as const; -export type TokenIconName = keyof typeof tokenIcons; - export const genericTokenIcon = require('../cryptoAssets/tokenIcons/erc20.svg'); diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx index 517ddf32bf70..c1231c4ab287 100644 --- a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx +++ b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx @@ -99,7 +99,7 @@ export const AccountsListItem = ({ showDivider={showDivider} onPress={handleOnPress} disabled={disabled} - icon={} + icon={} title={ shouldShowAccountLabel ? ( accountLabel diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx index 8b4844015367..021f27e2c089 100644 --- a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx +++ b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx @@ -37,7 +37,7 @@ export const AccountsListTokenItem = ({ isFirst={isFirst} isLast={isLast} onPress={onSelectAccount} - icon={} + icon={} title={getTokenName(token.name)} mainValue={ - + {networkName} diff --git a/suite-native/atoms/package.json b/suite-native/atoms/package.json index 2a5a48411993..f4816427290d 100644 --- a/suite-native/atoms/package.json +++ b/suite-native/atoms/package.json @@ -15,6 +15,8 @@ "@mobily/ts-belt": "^3.13.1", "@shopify/flash-list": "1.7.1", "@shopify/react-native-skia": "1.3.11", + "@suite-common/wallet-config": "workspace:*", + "@suite-common/wallet-types": "workspace:*", "@suite-native/config": "workspace:*", "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:^", diff --git a/suite-native/atoms/src/Badge.tsx b/suite-native/atoms/src/Badge.tsx index 88328d584454..8e3ff7eb0f8f 100644 --- a/suite-native/atoms/src/Badge.tsx +++ b/suite-native/atoms/src/Badge.tsx @@ -3,8 +3,9 @@ import { ReactNode } from 'react'; import { G } from '@mobily/ts-belt'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon, IconSize, IconName, CoinSymbolName, icons, CryptoIcon } from '@suite-native/icons'; +import { Icon, IconSize, IconName, icons, CryptoIcon } from '@suite-native/icons'; import { Color } from '@trezor/theme'; +import { NetworkSymbol } from '@suite-common/wallet-config'; import { Text } from './Text'; import { HStack } from './Stack'; @@ -17,7 +18,7 @@ type BadgeProps = { label: ReactNode; variant?: BadgeVariant; size?: BadgeSize; - icon?: IconName | CoinSymbolName; + icon?: IconName | NetworkSymbol; iconSize?: IconSize; elevation?: SurfaceElevation; isDisabled?: boolean; @@ -140,7 +141,7 @@ export const Badge = ({ ) : ( ); diff --git a/suite-native/atoms/src/RoundedIcon.tsx b/suite-native/atoms/src/RoundedIcon.tsx index d330be7cc2e2..0e591a9c45a3 100644 --- a/suite-native/atoms/src/RoundedIcon.tsx +++ b/suite-native/atoms/src/RoundedIcon.tsx @@ -1,13 +1,17 @@ import { G } from '@mobily/ts-belt'; -import { CryptoIcon, CoinSymbolName, Icon, IconName, icons, IconSize } from '@suite-native/icons'; +import { CryptoIcon, Icon, IconName, icons, IconSize } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Color } from '@trezor/theme'; +import { NetworkSymbol } from '@suite-common/wallet-config'; +import { TokenAddress } from '@suite-common/wallet-types'; import { Box, BoxProps } from './Box'; export type RoundedIconProps = { - name: IconName | CoinSymbolName; + name?: IconName; + networkSymbol?: NetworkSymbol; + contractAddress?: TokenAddress; color?: Color; iconSize?: IconSize; containerSize?: number; @@ -36,6 +40,8 @@ const iconContainerStyle = prepareNativeStyle<{ backgroundColor?: Color; contain export const RoundedIcon = ({ name, + networkSymbol, + contractAddress, color, iconSize, backgroundColor, @@ -50,10 +56,12 @@ export const RoundedIcon = ({ style={[applyStyle(iconContainerStyle, { backgroundColor, containerSize }), style]} {...boxProps} > - {name in icons ? ( + {name && name in icons ? ( ) : ( - + networkSymbol && ( + + ) )} ); diff --git a/suite-native/atoms/src/Select/Select.tsx b/suite-native/atoms/src/Select/Select.tsx index 8b708cd19514..5e0cd43fb8b0 100644 --- a/suite-native/atoms/src/Select/Select.tsx +++ b/suite-native/atoms/src/Select/Select.tsx @@ -1,7 +1,5 @@ import { useMemo, useState, ReactNode } from 'react'; -import { CryptoIcon, CoinSymbolName } from '@suite-native/icons'; - import { BottomSheet } from '../Sheet/BottomSheet'; import { SelectItemValue, SelectItem } from './SelectItem'; import { SelectTrigger } from './SelectTrigger'; @@ -11,13 +9,8 @@ export type SelectItemType = { label: string; }; -export type SelectItemExtendedType = - SelectItemType & { - iconName?: CoinSymbolName; - }; - type SelectProps = { - items: SelectItemExtendedType[]; + items: SelectItemType[]; selectValue: SelectItemValue; onSelectItem: (value: TItemValue) => void; selectLabel: ReactNode; @@ -40,21 +33,14 @@ export const Select = ({ setIsOpen(false); }; - const getIcon = (iconName?: CoinSymbolName, isSelectItem = false): ReactNode => { - if (!iconName) return null; - - return ; - }; - return ( <> - {items.map(({ value, label, iconName }, index) => ( + {items.map(({ value, label }, index) => ( handleSelectItem(value)} @@ -62,7 +48,6 @@ export const Select = ({ ))} setIsOpen(true)} diff --git a/suite-native/atoms/src/Select/SelectItem.tsx b/suite-native/atoms/src/Select/SelectItem.tsx index a45fbb007a92..41fa12721bd8 100644 --- a/suite-native/atoms/src/Select/SelectItem.tsx +++ b/suite-native/atoms/src/Select/SelectItem.tsx @@ -16,7 +16,7 @@ export type SelectItemProps = { onSelect: () => void; isSelected: boolean; isLastChild?: boolean; - icon: ReactNode; + icon?: ReactNode; }; type SelectItemStyleProps = { diff --git a/suite-native/atoms/src/Select/SelectTrigger.tsx b/suite-native/atoms/src/Select/SelectTrigger.tsx index 4c1df8cf4ec0..dc4b28c98c4b 100644 --- a/suite-native/atoms/src/Select/SelectTrigger.tsx +++ b/suite-native/atoms/src/Select/SelectTrigger.tsx @@ -10,7 +10,7 @@ import { ACCESSIBILITY_FONTSIZE_MULTIPLIER, Text } from '../Text'; type SelectTriggerProps = { value: string | null; label: ReactNode; - icon: ReactNode; + icon?: ReactNode; handlePress: () => void; }; diff --git a/suite-native/atoms/tsconfig.json b/suite-native/atoms/tsconfig.json index e9577d876a58..b14b23e31b5e 100644 --- a/suite-native/atoms/tsconfig.json +++ b/suite-native/atoms/tsconfig.json @@ -2,6 +2,12 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ + { + "path": "../../suite-common/wallet-config" + }, + { + "path": "../../suite-common/wallet-types" + }, { "path": "../config" }, { "path": "../icons" }, { "path": "../intl" }, diff --git a/suite-native/icons/package.json b/suite-native/icons/package.json index 46b1bf230f68..26f564846484 100644 --- a/suite-native/icons/package.json +++ b/suite-native/icons/package.json @@ -16,6 +16,8 @@ "@suite-common/icons": "workspace:*", "@suite-common/wallet-config": "workspace:*", "@suite-common/wallet-types": "workspace:*", + "@suite-common/wallet-utils": "workspace:*", + "@trezor/asset-utils": "workspace:*", "@trezor/connect": "workspace:*", "@trezor/styles": "workspace:*", "@trezor/theme": "workspace:*", diff --git a/suite-native/icons/src/CryptoIcon.tsx b/suite-native/icons/src/CryptoIcon.tsx index a9e5e595c0ef..3ffbacb38ec9 100644 --- a/suite-native/icons/src/CryptoIcon.tsx +++ b/suite-native/icons/src/CryptoIcon.tsx @@ -1,19 +1,14 @@ import { Image } from 'expo-image'; -import { - CryptoIconName, - cryptoIcons, - TokenIconName, - tokenIcons, - genericTokenIcon, -} from '@suite-common/icons'; -import { networks } from '@suite-common/wallet-config'; -import { TokenAddress } from '@suite-common/wallet-types'; - -export type CoinSymbolName = CryptoIconName | TokenAddress; +import { cryptoIcons, genericTokenIcon, CryptoIconName } from '@suite-common/icons'; +import { getCoingeckoId, NetworkSymbol } from '@suite-common/wallet-config'; +import { getContractAddressForNetwork } from '@suite-common/wallet-utils'; +import { getAssetLogoUrl } from '@trezor/asset-utils'; +import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; export interface CryptoIconProps { - symbol: CoinSymbolName; + symbol: NetworkSymbol; + contractAddress?: string; size?: CryptoIconSize | number; } @@ -23,26 +18,40 @@ export const cryptoIconSizes = { large: 42, } as const; +const iconStyle = prepareNativeStyle<{ width: number; height: number }>( + (utils, { width, height }) => ({ + borderRadius: utils.borders.radii.round, + overflow: 'hidden', + width, + height, + }), +); + export type CryptoIconSize = keyof typeof cryptoIconSizes; -const getIconFile = (symbol: CoinSymbolName) => { - if (symbol in networks) return cryptoIcons[symbol as CryptoIconName]; +export const CryptoIcon = ({ symbol, contractAddress, size = 'small' }: CryptoIconProps) => { + const { applyStyle } = useNativeStyles(); + const sizeNumber = typeof size === 'number' ? size : cryptoIconSizes[size]; - // the symbol in case of a token is a contract address. Since it is hexadecimal value, we can convert it - // to lowerCase to mach definition `suite-common/icons/icons.ts` without changing the meaning of the date. - return tokenIcons[symbol.toLowerCase() as TokenIconName] ?? genericTokenIcon; -}; + const coingeckoId = getCoingeckoId(symbol); -export const CryptoIcon = ({ symbol, size = 'small' }: CryptoIconProps) => { - const iconFile = getIconFile(symbol); - const sizeNumber = typeof size === 'number' ? size : cryptoIconSizes[size]; + let sourceUrl = cryptoIcons[symbol.toLowerCase() as CryptoIconName]; + if (coingeckoId && contractAddress) { + const formattedAddress = getContractAddressForNetwork(symbol, contractAddress); + sourceUrl = getAssetLogoUrl({ + coingeckoId, + contractAddress: formattedAddress, + quality: '@2x', + }); + } return ( ); }; diff --git a/suite-native/icons/tsconfig.json b/suite-native/icons/tsconfig.json index 304b4f20b42b..cf35a89c979f 100644 --- a/suite-native/icons/tsconfig.json +++ b/suite-native/icons/tsconfig.json @@ -9,6 +9,10 @@ { "path": "../../suite-common/wallet-types" }, + { + "path": "../../suite-common/wallet-utils" + }, + { "path": "../../packages/asset-utils" }, { "path": "../../packages/connect" }, { "path": "../../packages/styles" }, { "path": "../../packages/theme" } diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx index 7fc28788cb91..fac384d2bd2a 100644 --- a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx +++ b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx @@ -23,7 +23,7 @@ export const AccountImportOverview = ({ balance, networkSymbol }: AssetsOverview return ( } + icon={} coinName={networks[networkSymbol].name} symbol={networkSymbol} cryptoAmount={ diff --git a/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx b/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx index bce7e0c032ed..a4a078bd2beb 100644 --- a/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx +++ b/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx @@ -47,7 +47,7 @@ export const TokenInfoCard = ({ variant="label" /> } - icon={} + icon={} > ( - + {tokenSymbol ? ( diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx index db64e8102aa7..52d4fd848eaa 100644 --- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx +++ b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx @@ -87,7 +87,7 @@ export const CoinPriceCard = ({ accountKey }: CoinPriceCardProps) => { - + diff --git a/suite-native/module-send/src/components/SendScreenSubHeader.tsx b/suite-native/module-send/src/components/SendScreenSubHeader.tsx index cf64b46f758b..292e319cd506 100644 --- a/suite-native/module-send/src/components/SendScreenSubHeader.tsx +++ b/suite-native/module-send/src/components/SendScreenSubHeader.tsx @@ -62,7 +62,11 @@ export const AccountBalanceScreenHeader = ({ {networkSymbol && ( - + )} {accountTitle && {accountTitle}} diff --git a/suite-native/notifications/src/components/TransactionNotification.tsx b/suite-native/notifications/src/components/TransactionNotification.tsx index 74313196fb91..5e7240cda8cb 100644 --- a/suite-native/notifications/src/components/TransactionNotification.tsx +++ b/suite-native/notifications/src/components/TransactionNotification.tsx @@ -123,7 +123,7 @@ export const TransactionNotification = ({ iconLeft={ diff --git a/suite-native/receive/src/components/TokenReceiveCard.tsx b/suite-native/receive/src/components/TokenReceiveCard.tsx index d4619f5ab9cb..da15563d027b 100644 --- a/suite-native/receive/src/components/TokenReceiveCard.tsx +++ b/suite-native/receive/src/components/TokenReceiveCard.tsx @@ -66,7 +66,7 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps - + {tokenName} diff --git a/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx b/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx index a0dcfcc4a1f2..5cef816776f9 100644 --- a/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx +++ b/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx @@ -82,7 +82,7 @@ export const NetworkTransactionDetailSummary = ({ addressesType="inputs" addresses={transactionInputAddresses} onShowMore={onShowMore} - icon={transaction.symbol} + networkSymbol={transaction.symbol} /> )} {A.isNotEmpty(transactionOutputAddresses) && ( diff --git a/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx b/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx index cbc2e63f1641..0f914b8c7548 100644 --- a/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx +++ b/suite-native/transactions/src/components/TransactionDetail/TokenTransactionDetailSummary.tsx @@ -1,12 +1,16 @@ +import { useSelector } from 'react-redux'; + import { AccountKey } from '@suite-common/wallet-types'; import { TypedTokenTransfer } from '@suite-native/tokens'; import { VStack } from '@suite-native/atoms'; +import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core'; import { TransactionDetailAddressesSection } from './TransactionDetailAddressesSection'; import { VinVoutAddress } from '../../types'; import { VerticalSeparator } from './NetworkTransactionDetailSummary'; export const TokenTransactionDetailSummary = ({ + accountKey, tokenTransfer, onShowMore, }: { @@ -15,6 +19,9 @@ export const TokenTransactionDetailSummary = ({ tokenTransfer: TypedTokenTransfer; onShowMore: () => void; }) => { + const networkSymbol = useSelector((state: AccountsRootState) => + selectAccountNetworkSymbol(state, accountKey), + ); // Token transfer has always only one address, so we need to wrap it to an array. const inputAddresses: VinVoutAddress[] = [ { address: tokenTransfer.from, isChangeAddress: false }, @@ -28,7 +35,8 @@ export const TokenTransactionDetailSummary = ({ void; - icon?: CoinSymbolName; + networkSymbol?: NetworkSymbol; + contractAddress?: TokenAddress; }; const showMoreButtonContainerStyle = prepareNativeStyle(utils => ({ @@ -76,7 +79,8 @@ export const TransactionDetailAddressesSection = ({ addressesType, addresses, onShowMore, - icon, + networkSymbol, + contractAddress, }: TransactionDetailAddressesSectionProps) => { const { applyStyle } = useNativeStyles(); @@ -110,9 +114,14 @@ export const TransactionDetailAddressesSection = ({ /> ))} - {icon && ( + + {networkSymbol && ( - + )} diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx index a5bf3e89bfdb..25ec86de2061 100644 --- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx +++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx @@ -64,7 +64,10 @@ export const TransactionDetailListItem = ({ > - + {tokenTransfer?.name ?? 'Ethereum'} diff --git a/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx index d70084253e0d..93ee4a31a123 100644 --- a/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx @@ -3,7 +3,12 @@ import { useSelector } from 'react-redux'; import { AccountKey } from '@suite-common/wallet-types'; import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters'; import { TypedTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens'; -import { selectIsPhishingTransaction, TransactionsRootState } from '@suite-common/wallet-core'; +import { + AccountsRootState, + selectAccountNetworkSymbol, + selectIsPhishingTransaction, + TransactionsRootState, +} from '@suite-common/wallet-core'; import { TokenDefinitionsRootState } from '@suite-common/token-definitions'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; @@ -90,10 +95,14 @@ export const TokenTransferListItem = ({ isFirst, isLast, }: TokenTransferListItemProps) => { + const networkSymbol = useSelector((state: AccountsRootState) => + selectAccountNetworkSymbol(state, accountKey), + ); const isFailedTxn = transaction.type === 'failed'; return ( ({ })); export const TransactionIcon = ({ - symbol, + networkSymbol, + contractAddress, transactionType, backgroundColor, spinnerColor, @@ -68,9 +71,13 @@ export const TransactionIcon = ({ width={spinnerWidth} /> )} - {symbol && ( + {networkSymbol && ( - + )} diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx index a8d5362b03ea..dfa2d4f4a50d 100644 --- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx @@ -2,7 +2,6 @@ import { ReactNode } from 'react'; import { TouchableOpacity } from 'react-native'; import { useSelector } from 'react-redux'; -import { RequireExactlyOne } from 'type-fest'; import { useNavigation } from '@react-navigation/native'; import { AccountKey, TransactionType } from '@suite-common/wallet-types'; @@ -28,20 +27,17 @@ import { TokenDefinitionsRootState } from '@suite-common/token-definitions'; import { TransactionIcon } from './TransactionIcon'; -type TransactionListItemContainerProps = RequireExactlyOne< - { - children: ReactNode; - txid: string; - accountKey: AccountKey; - includedCoinsCount: number; - isFirst?: boolean; - isLast?: boolean; - networkSymbol: NetworkSymbol; - tokenTransfer: TypedTokenTransfer; - transactionType: TransactionType; - }, - 'networkSymbol' | 'tokenTransfer' ->; +type TransactionListItemContainerProps = { + children: ReactNode; + txid: string; + accountKey: AccountKey; + includedCoinsCount: number; + isFirst?: boolean; + isLast?: boolean; + networkSymbol?: NetworkSymbol | undefined; + tokenTransfer?: TypedTokenTransfer; + transactionType: TransactionType; +}; type TransactionListItemStyleProps = { isFirst: boolean; @@ -166,7 +162,8 @@ export const TransactionListItemContainer = ({ ); const iconColor: Color = isTransactionPending ? 'backgroundAlertYellowBold' : 'iconSubdued'; - const coinSymbol = isPhishingTransaction ? undefined : tokenTransfer?.contract ?? networkSymbol; + const coinSymbol = isPhishingTransaction ? undefined : networkSymbol; + const contractAddress = isPhishingTransaction ? undefined : tokenTransfer?.contract; const transactionTitle = getTransactionTitle(transactionType, isTransactionPending); const DateTextComponent = isPhishingTransaction ? DiscreetText : Text; @@ -178,7 +175,8 @@ export const TransactionListItemContainer = ({ >