feat(suite-native): show consistent Tokens label across the app

suite-native/accounts/src/components/SelectableNetworkItem.tsx

@@ -5,6 +5,8 @@ import { networks, NetworkSymbol } from '@suite-common/wallet-config';
 import { useFormatters } from '@suite-common/formatters';
 import { Icon, IconName } from '@suite-common/icons-deprecated';
 import { Badge, Box, HStack, RoundedIcon, Text } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { isCoinWithTokens } from '@suite-native/tokens';
 
 export type SelectableAssetItemProps = {
     symbol: NetworkSymbol;
@@ -20,7 +22,7 @@ const selectableAssetContentStyle = prepareNativeStyle(utils => ({
     marginLeft: utils.spacings.small + utils.spacings.extraSmall,
 }));
 
-const erc20BadgeStyle = prepareNativeStyle(utils => ({
+const tokensBadgeStyle = prepareNativeStyle(utils => ({
     paddingBottom: utils.spacings.extraSmall / 2,
 }));
 
@@ -35,7 +37,7 @@ export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: Selectable
 
     const networkName = networks[symbol].name;
 
-    const isEthereumNetwork = symbol === 'eth';
+    const hasTokens = isCoinWithTokens(symbol);
 
     return (
         <TouchableOpacity
@@ -55,9 +57,13 @@ export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: Selectable
                                     areAmountUnitsEnabled={false}
                                 />
                             </Text>
-                            {isEthereumNetwork && (
-                                <Box style={applyStyle(erc20BadgeStyle)}>
-                                    <Badge label="+ ERC-20" variant="neutral" size="small" />
+                            {hasTokens && (
+                                <Box style={applyStyle(tokensBadgeStyle)}>
+                                    <Badge
+                                        label={<Translation id="generic.tokens" />}
+                                        variant="neutral"
+                                        size="small"
+                                    />
                                 </Box>
                             )}
                         </HStack>

suite-native/coin-enabling/package.json

@@ -27,6 +27,7 @@
         "@suite-native/navigation": "workspace:*",
         "@suite-native/theme": "workspace:*",
         "@suite-native/toasts": "workspace:*",
+        "@suite-native/tokens": "workspace:*",
         "@trezor/styles": "workspace:*",
         "expo-linear-gradient": "13.0.2",
         "react": "18.2.0",

suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { CryptoIcon } from '@suite-common/icons-deprecated';
 import { networks, NetworkSymbol } from '@suite-common/wallet-config';
-import { Card, HStack, Text, Switch } from '@suite-native/atoms';
+import { Card, HStack, Text, Switch, VStack } from '@suite-native/atoms';
 import {
     selectEnabledDiscoveryNetworkSymbols,
     toggleEnabledDiscoveryNetworkSymbol,
@@ -11,6 +11,7 @@ import {
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { useToast } from '@suite-native/toasts';
 import { Translation } from '@suite-native/intl';
+import { isCoinWithTokens } from '@suite-native/tokens';
 import { useAlert } from '@suite-native/alerts';
 import { selectIsDeviceConnected } from '@suite-common/wallet-core';
 import { analytics, EventType } from '@suite-native/analytics';
@@ -131,7 +132,15 @@ export const NetworkSymbolSwitchItem = ({
                         flex={1}
                         alignItems="center"
                     >
-                        <Text variant="callout">{name}</Text>
+                        <VStack spacing={0}>
+                            <Text variant="callout">{name}</Text>
+                            {isCoinWithTokens(networkSymbol) && (
+                                <Text variant="hint" color="textSubdued">
+                                    <Translation id="generic.tokens" />
+                                </Text>
+                            )}
+                        </VStack>
+
                         <Switch onChange={handleEnabledChange} isChecked={isEnabled} />
                     </HStack>
                 </HStack>

suite-native/coin-enabling/tsconfig.json

@@ -23,6 +23,7 @@
         { "path": "../navigation" },
         { "path": "../theme" },
         { "path": "../toasts" },
+        { "path": "../tokens" },
         { "path": "../../packages/styles" }
     ]
 }

suite-native/intl/src/en.ts

@@ -21,6 +21,7 @@ export const en = {
         default: 'Default',
         orSeparator: 'OR',
         offline: "You're offline.",
+        tokens: '+ Tokens',
     },
     messageSystem: {
         killswitch: {
@@ -84,7 +85,7 @@ export const en = {
         },
     },
     accountList: {
-        numberOfTokens: '+{numberOfTokens} tokens',
+        numberOfTokens: '+{numberOfTokens} Tokens',
         tokens: 'Tokens',
     },
     assets: {

yarn.lock

@@ -9703,6 +9703,7 @@ __metadata:
     "@suite-native/navigation": "workspace:*"
     "@suite-native/theme": "workspace:*"
     "@suite-native/toasts": "workspace:*"
+    "@suite-native/tokens": "workspace:*"
     "@trezor/styles": "workspace:*"
     expo-linear-gradient: "npm:13.0.2"
     react: "npm:18.2.0"