feat(suite): introduce network displaySymbol

trezor · Dec 25, 2024 · 93a7692 · 93a7692
1 parent 811357b
commit 93a7692
Show file tree

Hide file tree

Showing 39 changed files with 236 additions and 129 deletions.
diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { spacings, spacingsPx } from '@trezor/theme';
 import { AssetLogo, Badge, Column, Row, Text } from '@trezor/components';
 import { getContractAddressForNetworkSymbol } from '@suite-common/wallet-utils';
+import { getNetworkDisplaySymbol, isNetworkSymbol } from '@suite-common/wallet-config';
 
 import { CoinLogo } from '../CoinLogo/CoinLogo';
 import { AssetOptionBaseProps } from './SelectAssetModal';
@@ -43,6 +44,9 @@ export const AssetItem = ({
 }: AssetItemProps) => {
     const getCoinLogo = () =>
         isCoinSymbol(symbol) ? <CoinLogo size={24} symbol={symbol} /> : null;
+    const displaySymbol = isNetworkSymbol(ticker)
+        ? getNetworkDisplaySymbol(ticker)
+        : ticker.toUpperCase();
 
     return (
         <ClickableContainer
@@ -66,7 +70,7 @@ export const AssetItem = ({
                                 ? getContractAddressForNetworkSymbol(symbol, contractAddress)
                                 : undefined
                         }
-                        placeholder={ticker.toUpperCase()}
+                        placeholder={displaySymbol}
                         shouldTryToFetch={shouldTryToFetch}
                     />
                 ) : (
@@ -86,7 +90,7 @@ export const AssetItem = ({
                         )}
                     </Row>
                     <Text typographyStyle="hint" variant="tertiary">
-                        {ticker.toUpperCase()}
+                        {displaySymbol}
                     </Text>
                 </Column>
             </Row>

diff --git a/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx b/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx
@@ -4,7 +4,11 @@ import styled from 'styled-components';
 
 import { AssetLogo, Row, Tooltip, useElevation } from '@trezor/components';
 import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
-import { Network } from '@suite-common/wallet-config';
+import {
+    getNetworkDisplaySymbol,
+    type NetworkSymbol,
+    type Network,
+} from '@suite-common/wallet-config';
 
 import { CheckableTag } from './CheckableTag';
 
@@ -18,7 +22,7 @@ const NetworkTabsWrapper = styled.div<{ $elevation: Elevation }>`
 
 export type NetworkFilterCategory = {
     name: Network['name'];
-    symbol: Network['symbol'];
+    symbol: NetworkSymbol;
     coingeckoId: Network['coingeckoId'];
     coingeckoNativeId?: Network['coingeckoNativeId'];
 };
@@ -95,7 +99,7 @@ export const NetworkTabs = ({ tabs, activeTab, setActiveTab, networkCount }: Net
                                 <AssetLogo
                                     size={20}
                                     coingeckoId={network.coingeckoNativeId}
-                                    placeholder={network.symbol}
+                                    placeholder={getNetworkDisplaySymbol(network.symbol)}
                                 />
                             )}
                             {network.name}

diff --git a/packages/suite/src/actions/wallet/stake/stakeFormActions.ts b/packages/suite/src/actions/wallet/stake/stakeFormActions.ts
@@ -13,7 +13,7 @@ import {
     ExternalOutput,
 } from '@suite-common/wallet-types';
 import { ComposeActionContext } from '@suite-common/wallet-core';
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import { getNetworkDisplaySymbol, NetworkSymbol } from '@suite-common/wallet-config';
 
 type StakingParams = {
     feeInBaseUnits: string;
@@ -147,7 +147,7 @@ export const composeStakingTransaction = (
         if (tx.type === 'error' && tx.error === 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE') {
             tx.errorMessage = {
                 id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE',
-                values: { symbol: network.symbol.toUpperCase() },
+                values: { networkSymbol: getNetworkDisplaySymbol(network.symbol) },
             };
         }
     });

diff --git a/packages/suite/src/actions/wallet/stake/stakeFormEthereumActions.ts b/packages/suite/src/actions/wallet/stake/stakeFormEthereumActions.ts
@@ -18,7 +18,7 @@ import {
     UNSTAKE_INTERCHANGES,
 } from '@suite-common/wallet-constants';
 import { selectSelectedDevice, ComposeActionContext } from '@suite-common/wallet-core';
-import type { NetworkSymbol } from '@suite-common/wallet-config';
+import { type NetworkSymbol } from '@suite-common/wallet-config';
 
 import { Dispatch, GetState } from 'src/types/suite';
 import { selectAddressDisplayType } from 'src/reducers/suite/suiteReducer';

diff --git a/packages/suite/src/components/suite/FormFractionButtons.tsx b/packages/suite/src/components/suite/FormFractionButtons.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Button, Tooltip } from '@trezor/components';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { MIN_ETH_AMOUNT_FOR_STAKING } from '@suite-common/wallet-constants';
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import { getNetworkDisplaySymbol, NetworkSymbol } from '@suite-common/wallet-config';
 
 import { Translation } from 'src/components/suite';
 
@@ -51,6 +51,8 @@ export const FormFractionButtons = ({
     const isMaxDisabled =
         isDisabled || new BigNumber(totalAmount || '0').lt(MIN_ETH_AMOUNT_FOR_STAKING);
 
+    const displaySymbol = getNetworkDisplaySymbol(symbol);
+
     return (
         <Flex>
             <Tooltip
@@ -60,7 +62,7 @@ export const FormFractionButtons = ({
                             id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
                             values={{
                                 amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                                symbol: symbol.toUpperCase(),
+                                networkSymbol: displaySymbol,
                             }}
                         />
                     )
@@ -78,7 +80,7 @@ export const FormFractionButtons = ({
                             id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
                             values={{
                                 amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                                symbol: symbol.toUpperCase(),
+                                networkSymbol: displaySymbol,
                             }}
                         />
                     )
@@ -96,7 +98,7 @@ export const FormFractionButtons = ({
                             id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
                             values={{
                                 amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                                symbol: symbol.toUpperCase(),
+                                networkSymbol: displaySymbol,
                             }}
                         />
                     )
@@ -114,7 +116,7 @@ export const FormFractionButtons = ({
                             id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
                             values={{
                                 amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                                symbol: symbol.toUpperCase(),
+                                networkSymbol: displaySymbol,
                             }}
                         />
                     )

diff --git a/packages/suite/src/components/suite/FormattedCryptoAmount.tsx b/packages/suite/src/components/suite/FormattedCryptoAmount.tsx
@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
-import { getNetworkOptional, type NetworkSymbolExtended } from '@suite-common/wallet-config';
+import {
+    getNetworkDisplaySymbol,
+    getNetworkOptional,
+    isNetworkSymbol,
+    type NetworkSymbolExtended,
+} from '@suite-common/wallet-config';
 import { SignValue } from '@suite-common/suite-types';
 import {
     formatCoinBalance,
@@ -64,7 +69,8 @@ export const FormattedCryptoAmount = ({
     const areSatsSupported = !!networkFeatures?.includes('amount-unit');
 
     let formattedValue = value;
-    let formattedSymbol = symbol?.toUpperCase();
+    let formattedSymbol =
+        symbol && isNetworkSymbol(symbol) ? getNetworkDisplaySymbol(symbol) : symbol?.toUpperCase();
 
     const isSatoshis = areSatsSupported && areSatsDisplayed;
 

diff --git a/packages/suite/src/components/suite/StakingProcess/StakingInfo.tsx b/packages/suite/src/components/suite/StakingProcess/StakingInfo.tsx
@@ -11,6 +11,7 @@ import {
     selectPoolStatsApyData,
     AccountsRootState,
 } from '@suite-common/wallet-core';
+import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 
 import { Translation } from 'src/components/suite';
 import { getDaysToAddToPool } from 'src/utils/suite/ethereumStaking';
@@ -50,7 +51,7 @@ export const StakingInfo = ({ isExpanded }: StakingInfoProps) => {
             subheading: (
                 <Translation
                     id="TR_STAKING_GETTING_READY"
-                    values={{ symbol: account.symbol.toUpperCase() }}
+                    values={{ networkSymbol: getNetworkDisplaySymbol(account.symbol) }}
                 />
             ),
             content: {

diff --git a/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx b/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx
@@ -10,6 +10,7 @@ import {
     StakeRootState,
     AccountsRootState,
 } from '@suite-common/wallet-core';
+import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 
 import { Translation } from 'src/components/suite';
 import { getDaysToUnstake } from 'src/utils/suite/ethereumStaking';
@@ -34,7 +35,7 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
     if (!account) return null;
 
     const daysToUnstake = getDaysToUnstake(unstakeTxs, data);
-    const accountSymbol = account.symbol.toUpperCase();
+    const displaySymbol = getNetworkDisplaySymbol(account.symbol);
 
     const infoRows = [
         {
@@ -49,7 +50,7 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
             subheading: (
                 <Translation
                     id="TR_STAKING_CONSOLIDATING_FUNDS"
-                    values={{ symbol: accountSymbol }}
+                    values={{ networkSymbol: displaySymbol }}
                 />
             ),
             content: {
@@ -58,12 +59,15 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
         },
         {
             heading: (
-                <Translation id="TR_STAKE_CLAIM_UNSTAKED" values={{ symbol: accountSymbol }} />
+                <Translation
+                    id="TR_STAKE_CLAIM_UNSTAKED"
+                    values={{ networkSymbol: displaySymbol }}
+                />
             ),
             subheading: (
                 <Translation
                     id="TR_STAKING_YOUR_UNSTAKED_FUNDS"
-                    values={{ symbol: accountSymbol }}
+                    values={{ networkSymbol: displaySymbol }}
                 />
             ),
             content: {
@@ -72,7 +76,9 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => {
             },
         },
         {
-            heading: <Translation id="TR_STAKE_IN_ACCOUNT" values={{ symbol: accountSymbol }} />,
+            heading: (
+                <Translation id="TR_STAKE_IN_ACCOUNT" values={{ networkSymbol: displaySymbol }} />
+            ),
         },
     ];
 

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import { selectSelectedDevice } from '@suite-common/wallet-core';
+import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 
 import { showAddress } from 'src/actions/wallet/receiveActions';
 import { Translation } from 'src/components/suite';
@@ -46,7 +47,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd
                     <Translation
                         id="TR_ADDRESS_MODAL_TITLE_EXCHANGE"
                         values={{
-                            networkName: symbol,
+                            networkSymbol: symbol,
                             networkCurrencyName: coinSymbol,
                         }}
                     />
@@ -57,7 +58,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd
                 <Translation
                     id="TR_ADDRESS_MODAL_TITLE"
                     values={{
-                        networkName: coinSymbol,
+                        networkSymbol: coinSymbol,
                     }}
                 />
             );
@@ -67,7 +68,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd
             <Translation
                 id="TR_ADDRESS_MODAL_TITLE"
                 values={{
-                    networkName: account.symbol.toUpperCase(),
+                    networkSymbol: getNetworkDisplaySymbol(account.symbol),
                 }}
             />
         );

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmXpubModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmXpubModal.tsx
@@ -1,4 +1,5 @@
 import { selectSelectedDevice } from '@suite-common/wallet-core';
+import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 
 import { Translation } from 'src/components/suite';
 import { showXpub } from 'src/actions/wallet/publicKeyActions';
@@ -36,7 +37,7 @@ export const ConfirmXpubModal = (
                     <Translation
                         id="TR_XPUB_MODAL_TITLE"
                         values={{
-                            networkName: account.symbol.toUpperCase(),
+                            networkSymbol: getNetworkDisplaySymbol(account.symbol),
                             accountIndex: `#${account.index + 1}`,
                         }}
                     />

diff --git a/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx b/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx
@@ -3,7 +3,11 @@ import { ReactNode, forwardRef } from 'react';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { formatNetworkAmount, formatAmount, isTestnet } from '@suite-common/wallet-utils';
 import { BTC_LOCKTIME_VALUE } from '@suite-common/wallet-constants';
-import { NetworkSymbol, NetworkSymbolExtended } from '@suite-common/wallet-config';
+import {
+    getNetworkDisplaySymbol,
+    NetworkSymbol,
+    NetworkSymbolExtended,
+} from '@suite-common/wallet-config';
 import { ReviewOutput, StakeType } from '@suite-common/wallet-types';
 import { TranslationKey } from '@suite-common/intl-types';
 
@@ -95,17 +99,17 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
         }
 
         let outputValue = value;
-        let symbolExtended: NetworkSymbolExtended | undefined;
+        let symbolIncludedTokens: NetworkSymbolExtended | undefined;
         let fiatVisible = false;
         if (token) {
             outputValue = formatAmount(value, token.decimals);
-            symbolExtended = token.symbol;
+            symbolIncludedTokens = token.symbol;
         } else if (type === 'fee' || type === 'amount') {
             outputValue = formatNetworkAmount(value, symbol);
-            symbolExtended = symbol;
+            symbolIncludedTokens = symbol;
             fiatVisible = !isTestnet(symbol);
         } else if (type === 'gas') {
-            symbolExtended = symbol;
+            symbolIncludedTokens = symbol;
             fiatVisible = !isTestnet(symbol);
         }
 
@@ -124,7 +128,7 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
                     value: formatNetworkAmount(props.value2, symbol),
                 },
             ];
-            symbolExtended = symbol;
+            symbolIncludedTokens = symbol;
             fiatVisible = !isTestnet(symbol);
         } else if (type === 'reduce-output') {
             outputLines = [
@@ -145,7 +149,7 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
                     value: formatNetworkAmount(props.value2, symbol),
                 },
             ];
-            symbolExtended = symbol;
+            symbolIncludedTokens = symbol;
             fiatVisible = !isTestnet(symbol);
         } else if (type === 'txid') {
             outputLines = [
@@ -168,10 +172,10 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
                 {
                     id: 'data',
                     label: translationString(displayModeStringsMap[stakeType].confirmLabel, {
-                        symbol: symbol.toUpperCase(),
+                        symbol: getNetworkDisplaySymbol(symbol),
                     }),
                     value: translationString(displayModeStringsMap[stakeType].value, {
-                        symbol: symbol.toUpperCase(),
+                        symbol: getNetworkDisplaySymbol(symbol),
                     }),
                     plainValue: true,
                 },
@@ -242,7 +246,7 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
                 token={token}
                 state={state}
                 symbol={symbol}
-                displaySymbol={symbolExtended}
+                symbolIncludedTokens={symbolIncludedTokens}
                 fiatVisible={fiatVisible}
                 displayMode={displayMode}
             />