feat(suite-native): refactor ethereum formatters to generic token for…

…matters
trezor · Oct 15, 2024 · 6f4c0b1 · 6f4c0b1
1 parent 7b5d0b3
commit 6f4c0b1
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 58 deletions.
diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListTokenItem.tsx
@@ -3,10 +3,7 @@ import { useSelector } from 'react-redux';
 import { AccountsRootState } from '@suite-common/wallet-core';
 import { Account, TokenInfoBranded } from '@suite-common/wallet-types';
 import { RoundedIcon } from '@suite-native/atoms';
-import {
-    EthereumTokenAmountFormatter,
-    EthereumTokenToFiatAmountFormatter,
-} from '@suite-native/formatters';
+import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
 import { getTokenName, selectAccountTokenSymbol } from '@suite-native/tokens';
 
 import { AccountsListItemBase } from './AccountsListItemBase';
@@ -43,10 +40,14 @@ export const AccountsListTokenItem = ({
             icon={<RoundedIcon name={token.contract} />}
             title={getTokenName(token.name)}
             mainValue={
-                <EthereumTokenToFiatAmountFormatter value={balance} contract={token.contract} />
+                <TokenToFiatAmountFormatter
+                    networkSymbol={account.symbol}
+                    value={balance}
+                    contract={token.contract}
+                />
             }
             secondaryValue={
-                <EthereumTokenAmountFormatter
+                <TokenAmountFormatter
                     value={balance}
                     symbol={tokenSymbol}
                     numberOfLines={1}

diff --git a/...mponents/EthereumTokenAmountFormatter.tsx → ...s/src/components/TokenAmountFormatter.tsx b/...mponents/EthereumTokenAmountFormatter.tsx → ...s/src/components/TokenAmountFormatter.tsx
@@ -6,23 +6,23 @@ import { FormatterProps } from '../types';
 import { AmountText } from './AmountText';
 import { convertTokenValueToDecimal } from '../utils';
 
-type EthereumTokenAmountFormatterProps = {
+type TokenAmountFormatterProps = {
     symbol: TokenSymbol | null;
     isDiscreetText?: boolean;
     decimals?: number;
     isForcedDiscreetMode?: boolean;
 } & FormatterProps<number | string> &
     TextProps;
 
-export const EthereumTokenAmountFormatter = ({
+export const TokenAmountFormatter = ({
     value,
     symbol,
     isDiscreetText = true,
     decimals = 0,
     variant = 'hint',
     color = 'textSubdued',
     ...rest
-}: EthereumTokenAmountFormatterProps) => {
+}: TokenAmountFormatterProps) => {
     const decimalValue = convertTokenValueToDecimal(value, decimals);
 
     const formattedValue = `${localizeNumber(decimalValue)} ${symbol}`;

diff --git a/...ts/EthereumTokenToFiatAmountFormatter.tsx → ...components/TokenToFiatAmountFormatter.tsx b/...ts/EthereumTokenToFiatAmountFormatter.tsx → ...components/TokenToFiatAmountFormatter.tsx
@@ -2,13 +2,15 @@ import { TextProps, Box } from '@suite-native/atoms';
 import { useFormatters } from '@suite-common/formatters';
 import { TokenAddress } from '@suite-common/wallet-types';
 import { SignValue } from '@suite-common/suite-types';
+import { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { FormatterProps } from '../types';
 import { AmountText } from './AmountText';
 import { SignValueFormatter } from './SignValueFormatter';
 import { useFiatFromCryptoValue } from '../hooks/useFiatFromCryptoValue';
 
-type EthereumTokenToFiatAmountFormatterProps = {
+type TokenToFiatAmountFormatterProps = {
+    networkSymbol: NetworkSymbol;
     contract: TokenAddress;
     isDiscreetText?: boolean;
     decimals?: number;
@@ -19,7 +21,8 @@ type EthereumTokenToFiatAmountFormatterProps = {
 } & FormatterProps<number | string> &
     TextProps;
 
-export const EthereumTokenToFiatAmountFormatter = ({
+export const TokenToFiatAmountFormatter = ({
+    networkSymbol,
     value,
     contract,
     isDiscreetText = true,
@@ -30,11 +33,11 @@ export const EthereumTokenToFiatAmountFormatter = ({
     historicRate,
     useHistoricRate,
     ...rest
-}: EthereumTokenToFiatAmountFormatterProps) => {
+}: TokenToFiatAmountFormatterProps) => {
     const { FiatAmountFormatter } = useFormatters();
     const fiatValue = useFiatFromCryptoValue({
         cryptoValue: String(value),
-        network: 'eth',
+        network: networkSymbol,
         tokenAddress: contract,
         tokenDecimals: decimals,
         historicRate,

diff --git a/suite-native/formatters/src/index.ts b/suite-native/formatters/src/index.ts
@@ -5,8 +5,8 @@ export { TransactionIdFormatter } from './components/TransactionIdFormatter';
 export { PercentageDifferenceFormatter } from './components/PercentageDifferenceFormatter';
 export { FiatAmountFormatter } from './components/FiatAmountFormatter';
 export { CryptoAmountFormatter } from './components/CryptoAmountFormatter';
-export { EthereumTokenAmountFormatter } from './components/EthereumTokenAmountFormatter';
-export { EthereumTokenToFiatAmountFormatter } from './components/EthereumTokenToFiatAmountFormatter';
+export { TokenAmountFormatter } from './components/TokenAmountFormatter';
+export { TokenToFiatAmountFormatter } from './components/TokenToFiatAmountFormatter';
 export { SignValueFormatter } from './components/SignValueFormatter';
 export { FeeFormatter } from './components/FeeFormatter';
 export { useFiatFromCryptoValue } from './hooks/useFiatFromCryptoValue';

diff --git a/suite-native/graph/src/components/TransactionEventTooltip.tsx b/suite-native/graph/src/components/TransactionEventTooltip.tsx
@@ -7,7 +7,7 @@ import { G, N } from '@mobily/ts-belt';
 import { Card, Box, Text } from '@suite-native/atoms';
 import {
     CryptoAmountFormatter,
-    EthereumTokenAmountFormatter,
+    TokenAmountFormatter,
     SignValueFormatter,
 } from '@suite-native/formatters';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
@@ -82,7 +82,7 @@ const TokenAmountTooltipFormatter = ({
     // We might want to add support for other networks in the future.
     if (getNetworkType(networkSymbol) === 'ethereum') {
         return (
-            <EthereumTokenAmountFormatter
+            <TokenAmountFormatter
                 color="textDefault"
                 variant="label"
                 value={value}

diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx
@@ -33,7 +33,7 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { importAccountThunk } from '../accountsImportThunks';
 import { useShowImportError } from '../useShowImportError';
 import { AccountImportOverview } from './AccountImportOverview';
-import { EthereumTokenInfo } from './EthereumTokenInfo';
+import { TokenInfoCard } from './TokenInfoCard';
 
 type AccountImportSummaryFormProps = {
     networkSymbol: NetworkSymbol;
@@ -117,7 +117,8 @@ export const AccountImportSummaryForm = ({
     const renderItem = useCallback(
         ({ item }: { item: TokenInfo }) => (
             <Box marginBottom="sp8">
-                <EthereumTokenInfo
+                <TokenInfoCard
+                    networkSymbol={networkSymbol}
                     symbol={item.symbol as TokenSymbol}
                     balance={item.balance}
                     decimals={item.decimals}
@@ -126,7 +127,7 @@ export const AccountImportSummaryForm = ({
                 />
             </Box>
         ),
-        [],
+        [networkSymbol],
     );
 
     return (

diff --git a/...port/src/components/EthereumTokenInfo.tsx → ...s-import/src/components/TokenInfoCard.tsx b/...port/src/components/EthereumTokenInfo.tsx → ...s-import/src/components/TokenInfoCard.tsx
@@ -6,41 +6,41 @@ import {
     selectIsSpecificCoinDefinitionKnown,
 } from '@suite-common/token-definitions';
 import { TokenAddress, TokenSymbol } from '@suite-common/wallet-types';
-import {
-    EthereumTokenAmountFormatter,
-    EthereumTokenToFiatAmountFormatter,
-} from '@suite-native/formatters';
+import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
+import { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { AccountImportOverviewCard } from './AccountImportOverviewCard';
 
-type EthereumTokenInfoProps = {
+type TokenInfoCardProps = {
+    networkSymbol: NetworkSymbol;
     symbol?: TokenSymbol;
     balance?: string;
     name?: string;
     decimals?: number;
     contract: TokenAddress;
 };
 
-export const EthereumTokenInfo = ({
+export const TokenInfoCard = ({
+    networkSymbol,
     symbol,
     balance,
     name,
     decimals,
     contract,
-}: EthereumTokenInfoProps) => {
-    const ethereumSymbolHasFiatRates = useSelector((state: TokenDefinitionsRootState) =>
-        selectIsSpecificCoinDefinitionKnown(state, 'eth', contract),
+}: TokenInfoCardProps) => {
+    const isSpecificCoinDefinitionKnown = useSelector((state: TokenDefinitionsRootState) =>
+        selectIsSpecificCoinDefinitionKnown(state, networkSymbol, contract),
     );
 
-    if (!symbol || !balance || !name || !ethereumSymbolHasFiatRates) return null;
+    if (!symbol || !balance || !name || !isSpecificCoinDefinitionKnown) return null;
 
     return (
         <AccountImportOverviewCard
             coinName={name}
-            symbol="eth"
+            symbol={networkSymbol}
             shouldDisplayDeleteIcon={false}
             cryptoAmount={
-                <EthereumTokenAmountFormatter
+                <TokenAmountFormatter
                     value={balance}
                     symbol={symbol}
                     decimals={decimals}
@@ -49,7 +49,8 @@ export const EthereumTokenInfo = ({
             }
             icon={<CryptoIcon symbol={contract} />}
         >
-            <EthereumTokenToFiatAmountFormatter
+            <TokenToFiatAmountFormatter
+                networkSymbol={networkSymbol}
                 value={balance}
                 contract={contract}
                 decimals={decimals}

diff --git a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { HStack } from '@suite-native/atoms';
-import { CryptoAmountFormatter, EthereumTokenAmountFormatter } from '@suite-native/formatters';
+import { CryptoAmountFormatter, TokenAmountFormatter } from '@suite-native/formatters';
 import { CryptoIcon } from '@suite-common/icons-deprecated';
 import { NetworkSymbol } from '@suite-common/wallet-config';
 import { TokenAddress, TokenSymbol } from '@suite-common/wallet-types';
@@ -26,11 +26,7 @@ export const AccountDetailCryptoValue = memo(
             <CryptoIcon symbol={tokenAddress || networkSymbol} size="extraSmall" />
 
             {tokenSymbol ? (
-                <EthereumTokenAmountFormatter
-                    value={value}
-                    symbol={tokenSymbol}
-                    adjustsFontSizeToFit
-                />
+                <TokenAmountFormatter value={value} symbol={tokenSymbol} adjustsFontSizeToFit />
             ) : (
                 <CryptoAmountFormatter
                     value={value}

diff --git a/suite-native/receive/src/components/TokenReceiveCard.tsx b/suite-native/receive/src/components/TokenReceiveCard.tsx
@@ -1,10 +1,7 @@
 import { useSelector } from 'react-redux';
 
 import { Badge, Box, ErrorMessage, RoundedIcon, Text, VStack } from '@suite-native/atoms';
-import {
-    EthereumTokenAmountFormatter,
-    EthereumTokenToFiatAmountFormatter,
-} from '@suite-native/formatters';
+import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
 import {
@@ -52,10 +49,15 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
         selectAccountTokenSymbol(state, accountKey, contract),
     );
 
-    if (!token)
+    const network = useSelector((state: AccountsRootState) =>
+        selectAccountNetworkSymbol(state, accountKey),
+    );
+
+    if (!token || !network) {
         return (
             <ErrorMessage errorMessage={<Translation id="moduleReceive.tokens.errorMessage" />} />
         );
+    }
 
     const tokenName = getTokenName(token.name);
 
@@ -82,11 +84,12 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
                     </Box>
                 </Box>
                 <Box style={applyStyle(valuesContainerStyle)}>
-                    <EthereumTokenToFiatAmountFormatter
+                    <TokenToFiatAmountFormatter
                         value={token.balance ?? '0'}
                         contract={contract}
+                        networkSymbol={network}
                     />
-                    <EthereumTokenAmountFormatter
+                    <TokenAmountFormatter
                         value={token.balance ?? '0'}
                         symbol={tokenSymbol}
                         numberOfLines={1}

diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
@@ -4,8 +4,8 @@ import { AccountKey } from '@suite-common/wallet-types';
 import {
     CryptoAmountFormatter,
     CryptoToFiatAmountFormatter,
-    EthereumTokenAmountFormatter,
-    EthereumTokenToFiatAmountFormatter,
+    TokenAmountFormatter,
+    TokenToFiatAmountFormatter,
     SignValueFormatter,
 } from '@suite-native/formatters';
 import { TypedTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
@@ -82,7 +82,7 @@ export const TransactionDetailHeader = ({
                         />
                         <Text> </Text>
                         {tokenTransfer ? (
-                            <EthereumTokenAmountFormatter
+                            <TokenAmountFormatter
                                 value={tokenTransfer.amount}
                                 symbol={tokenTransfer.symbol}
                                 decimals={tokenTransfer.decimals}
@@ -109,7 +109,8 @@ export const TransactionDetailHeader = ({
                     <Box flexDirection="row" style={applyStyle(fiatValueStyle)}>
                         <Text color="textSubdued">≈ </Text>
                         {tokenTransfer ? (
-                            <EthereumTokenToFiatAmountFormatter
+                            <TokenToFiatAmountFormatter
+                                networkSymbol={transaction.symbol}
                                 contract={tokenTransfer.contract}
                                 value={tokenTransfer.amount}
                                 decimals={tokenTransfer.decimals}

diff --git a/...ive/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx b/...ive/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx
@@ -9,7 +9,7 @@ import { Box, Card, Text } from '@suite-native/atoms';
 import {
     AccountAddressFormatter,
     CryptoAmountFormatter,
-    EthereumTokenAmountFormatter,
+    TokenAmountFormatter,
 } from '@suite-native/formatters';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -45,7 +45,7 @@ const TransactionAddressAmount = ({
                     adjustsFontSizeToFit
                 />
             ) : (
-                <EthereumTokenAmountFormatter
+                <TokenAmountFormatter
                     value={amount}
                     symbol={symbol}
                     decimals={decimals}

diff --git a/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx b/suite-native/transactions/src/components/TransactionsList/TokenTransferListItem.tsx
@@ -1,10 +1,7 @@
 import { useSelector } from 'react-redux';
 
 import { AccountKey } from '@suite-common/wallet-types';
-import {
-    EthereumTokenAmountFormatter,
-    EthereumTokenToFiatAmountFormatter,
-} from '@suite-native/formatters';
+import { TokenAmountFormatter, TokenToFiatAmountFormatter } from '@suite-native/formatters';
 import { TypedTokenTransfer, WalletAccountTransaction } from '@suite-native/tokens';
 import { selectIsPhishingTransaction, TransactionsRootState } from '@suite-common/wallet-core';
 import { TokenDefinitionsRootState } from '@suite-common/token-definitions';
@@ -45,7 +42,8 @@ export const TokenTransferListItemValues = ({
 
     return (
         <>
-            <EthereumTokenToFiatAmountFormatter
+            <TokenToFiatAmountFormatter
+                networkSymbol={transaction.symbol}
                 value={tokenTransfer.amount}
                 contract={tokenTransfer.contract}
                 decimals={tokenTransfer.decimals}
@@ -56,7 +54,7 @@ export const TokenTransferListItemValues = ({
                 useHistoricRate
                 isForcedDiscreetMode={isPhishingTransaction}
             />
-            <EthereumTokenAmountFormatter
+            <TokenAmountFormatter
                 value={tokenTransfer.amount}
                 symbol={tokenTransfer.symbol}
                 decimals={tokenTransfer.decimals}