From 2f9fe10a0373268ddacf365131e134777ac52aa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Vytick=20Vytrhl=C3=ADk?= <vytick@gmail.com>
Date: Wed, 5 Feb 2025 21:54:36 +0100
Subject: [PATCH] feat(suite-native): add icon with network to accounts

---
 .../AccountsList/AccountsListItem.tsx           | 17 +++++++++++++----
 .../AccountsList/AccountsListTokenItem.tsx      |  8 +++++---
 .../components/CorrectNetworkMessageCard.tsx    |  5 ++---
 .../src/screens/SendOutputsScreen.tsx           |  7 +++----
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
index 4fee38949dc..05b6c64a01c 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useFormatters } from '@suite-common/formatters';
@@ -10,6 +10,7 @@ import {
     CryptoToFiatAmountFormatter,
     FiatAmountFormatter,
 } from '@suite-native/formatters';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { NativeStakingRootState, selectAccountHasStaking } from '@suite-native/staking';
 import {
@@ -27,10 +28,8 @@ import { OnSelectAccount } from '../../types';
 export type AccountListItemProps = {
     account: Account;
     isInModal?: boolean;
-
     onPress?: OnSelectAccount;
     disabled?: boolean;
-
     hasBackground?: boolean;
     isFirst?: boolean;
     isLast?: boolean;
@@ -87,6 +86,16 @@ export const AccountsListItem = ({
         });
     }, [account, accountHasAnyTokens, accountHasStaking, onPress]);
 
+    const icon = useMemo(
+        () =>
+            isInModal ? (
+                <CryptoIconWithNetwork symbol={account.symbol} preferNetworkSymbol={false} />
+            ) : (
+                <RoundedIcon symbol={account.symbol} />
+            ),
+        [account.symbol, isInModal],
+    );
+
     const doesCoinSupportTokens = isCoinWithTokens(account.symbol);
     const shouldShowAccountLabel = !doesCoinSupportTokens || !isInModal;
     const shouldShowTokenBadge = accountHasAnyTokens && !isInModal;
@@ -100,7 +109,7 @@ export const AccountsListItem = ({
             showDivider={showDivider}
             onPress={handleOnPress}
             disabled={disabled}
-            icon={<RoundedIcon symbol={account.symbol} />}
+            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 cf67cd8f405..af1539775ab 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx
@@ -1,9 +1,9 @@
 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 { TokensRootState, getTokenName, selectAccountTokenSymbol } from '@suite-native/tokens';
+import { getTokenName, selectAccountTokenSymbol, TokensRootState } from '@suite-native/tokens';
+import { CryptoIconWithNetwork } from '@suite-native/icons';
 
 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/module-send/src/components/CorrectNetworkMessageCard.tsx b/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
index fb7bbc6de87..c7f05796a4b 100644
--- a/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
+++ b/suite-native/module-send/src/components/CorrectNetworkMessageCard.tsx
@@ -1,7 +1,6 @@
-import { NetworkIcon } from '@suite-native/icons';
-import { getNetwork, type NetworkSymbol } from '@suite-common/wallet-config';
+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';
diff --git a/suite-native/module-send/src/screens/SendOutputsScreen.tsx b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
index da487165739..3659e4f9347 100644
--- a/suite-native/module-send/src/screens/SendOutputsScreen.tsx
+++ b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
@@ -23,6 +23,7 @@ import {
     updateFeeInfoThunk,
 } from '@suite-common/wallet-core';
 import { TokenAddress } from '@suite-common/wallet-types';
+import { CoinPriceCard } from '@suite-native/accounts';
 import { Box, Button } from '@suite-native/atoms';
 import { Form, useForm } from '@suite-native/forms';
 import { Translation } from '@suite-native/intl';
@@ -33,10 +34,8 @@ import {
     StackNavigationProps,
     StackProps,
 } from '@suite-native/navigation';
-import { getNetwork } from '@suite-common/wallet-config';
-import { Box, Button } from '@suite-native/atoms';
-import { CoinPriceCard } from '@suite-native/accounts';
-import { Translation } from '@suite-native/intl';
+import { SettingsSliceRootState, selectIsAmountInSats } from '@suite-native/settings';
+import { TokensRootState, selectAccountTokenInfo } from '@suite-native/tokens';
 import { useDebounce } from '@trezor/react-utils';
 
 import { AccountBalanceScreenHeader } from '../components/AccountBalanceScreenHeader';