From 22b96b50b2aeae49ec40fcdf663d3ebccd09323a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Vytick=20Vytrhl=C3=ADk?= <vytick@gmail.com>
Date: Mon, 9 Sep 2024 21:25:09 +0200
Subject: [PATCH] feat(suite-native): show consistent Tokens label across the
 app

---
 .../src/components/SelectableNetworkItem.tsx     | 16 +++++++++++-----
 suite-native/coin-enabling/package.json          |  1 +
 .../src/components/NetworkSymbolSwitchItem.tsx   | 13 +++++++++++--
 suite-native/coin-enabling/tsconfig.json         |  1 +
 suite-native/intl/src/en.ts                      |  3 ++-
 yarn.lock                                        |  1 +
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/suite-native/accounts/src/components/SelectableNetworkItem.tsx b/suite-native/accounts/src/components/SelectableNetworkItem.tsx
index 4d9eb91678..728af8b9e2 100644
--- a/suite-native/accounts/src/components/SelectableNetworkItem.tsx
+++ b/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>
diff --git a/suite-native/coin-enabling/package.json b/suite-native/coin-enabling/package.json
index 641d4d3a84..10e6c74578 100644
--- a/suite-native/coin-enabling/package.json
+++ b/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",
diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
index 3f9f5c2b16..af205db888 100644
--- a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
+++ b/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>
diff --git a/suite-native/coin-enabling/tsconfig.json b/suite-native/coin-enabling/tsconfig.json
index 5837744a48..f4eb3a5265 100644
--- a/suite-native/coin-enabling/tsconfig.json
+++ b/suite-native/coin-enabling/tsconfig.json
@@ -23,6 +23,7 @@
         { "path": "../navigation" },
         { "path": "../theme" },
         { "path": "../toasts" },
+        { "path": "../tokens" },
         { "path": "../../packages/styles" }
     ]
 }
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
index 3d71d1657d..a22368acf3 100644
--- a/suite-native/intl/src/en.ts
+++ b/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: {
diff --git a/yarn.lock b/yarn.lock
index 8cbf11ba13..1274c688f5 100644
--- a/yarn.lock
+++ b/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"