fix(suite): format long token symbols

trezor · Apr 17, 2024 · f859f33 · f859f33
1 parent 1a3a6c1
commit f859f33
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/packages/suite/src/utils/wallet/tokenUtils.ts b/packages/suite/src/utils/wallet/tokenUtils.ts
@@ -53,3 +53,10 @@ export const enhanceTokensWithRates = (
 
     return tokensWithRates;
 };
+
+export const formatTokenSymbol = (symbol?: string) => {
+    const tokenSymbol = symbol?.toUpperCase() || 'N/A';
+    const isTokenSymbolLong = tokenSymbol.length > 7;
+
+    return isTokenSymbolLong ? `${tokenSymbol.slice(0, 7)}...` : tokenSymbol;
+};
diff --git a/...ite/src/views/wallet/send/components/Outputs/components/Amount/components/TokenSelect.tsx b/...ite/src/views/wallet/send/components/Outputs/components/Amount/components/TokenSelect.tsx
@@ -16,7 +16,11 @@ import BigNumber from 'bignumber.js';
 import { Timestamp, TokenAddress, TokenDefinitions } from '@suite-common/wallet-types';
 import { TooltipSymbol, Translation } from 'src/components/suite';
 import { NetworkSymbol, getNetworkFeatures } from '@suite-common/wallet-config';
-import { enhanceTokensWithRates, sortTokensWithRates } from 'src/utils/wallet/tokenUtils';
+import {
+    enhanceTokensWithRates,
+    formatTokenSymbol,
+    sortTokensWithRates,
+} from 'src/utils/wallet/tokenUtils';
 import { getShortFingerprint } from '@suite-common/wallet-utils';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { FiatCurrencyCode } from '@suite-common/suite-config';
@@ -57,21 +61,21 @@ export const buildTokenOptions = (
                 return;
             }
 
-            const tokenName = token.symbol || 'N/A';
+            const tokenSymbol = formatTokenSymbol(token.symbol);
 
             if (
                 !hasCoinDefinitions ||
                 isTokenDefinitionKnown(coinDefinitions?.data, symbol, token.contract)
             ) {
                 result[0].options.push({
                     value: token.contract,
-                    label: tokenName.toUpperCase(),
+                    label: tokenSymbol,
                     fingerprint: token.name,
                 });
             } else {
                 unknownTokens.push({
                     value: token.contract,
-                    label: `${tokenName.toUpperCase().slice(0, 7)}…`,
+                    label: tokenSymbol,
                     fingerprint: token.name,
                 });
             }

diff --git a/packages/suite/src/views/wallet/send/components/Outputs/components/Amount/index.tsx b/packages/suite/src/views/wallet/send/components/Outputs/components/Amount/index.tsx
@@ -31,6 +31,7 @@ import { breakpointMediaQueries } from '@trezor/styles';
 import { selectFiatRatesByFiatRateKey } from '@suite-common/wallet-core';
 import { TokenAddress } from '@suite-common/wallet-types';
 import { FiatCurrencyCode } from '@suite-common/suite-config';
+import { formatTokenSymbol } from 'src/utils/wallet/tokenUtils';
 
 const Row = styled.div`
     position: relative;
@@ -136,11 +137,11 @@ export const Amount = ({ output, outputId }: AmountProps) => {
     const values = getValues();
     const fiatCurrency = values?.outputs?.[0]?.currency;
 
+    const tokenSymbol = formatTokenSymbol(token?.symbol);
+
     const tokenBalance = token ? (
         <HiddenPlaceholder>
-            <TokenBalanceValue>{`${
-                token.balance
-            } ${token.symbol!.toUpperCase()}`}</TokenBalanceValue>
+            <TokenBalanceValue>{`${token.balance} ${tokenSymbol}`}</TokenBalanceValue>
         </HiddenPlaceholder>
     ) : undefined;