diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx index b05596072c5..6ec66cbb9da 100644 --- 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) ? : null; + const displaySymbol = isNetworkSymbol(ticker) + ? getNetworkDisplaySymbol(ticker) + : ticker.toUpperCase(); return ( ) : ( @@ -86,7 +90,7 @@ export const AssetItem = ({ )} - {ticker.toUpperCase()} + {displaySymbol} diff --git a/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx b/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx index 724e8543a21..6c7324c649e 100644 --- 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 )} {network.name} diff --git a/packages/suite/src/actions/wallet/stake/stakeFormActions.ts b/packages/suite/src/actions/wallet/stake/stakeFormActions.ts index 23bc83d27f7..f24e9054feb 100644 --- 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 index 6af1551e421..917b9698221 100644 --- 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 index 5a565888fed..2e84f6367b0 100644 --- 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 ( ) @@ -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 index f67a5b2bcb3..82823052958 100644 --- 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 index f535e3e7648..4eb622e88fd 100644 --- 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: ( ), content: { diff --git a/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx b/packages/suite/src/components/suite/StakingProcess/UnstakingInfo.tsx index e48a6163e62..ae28b634b7b 100644 --- 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: ( ), content: { @@ -58,12 +59,15 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => { }, { heading: ( - + ), subheading: ( ), content: { @@ -72,7 +76,9 @@ export const UnstakingInfo = ({ isExpanded }: UnstakingInfoProps) => { }, }, { - heading: , + heading: ( + + ), }, ]; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx index 667c7a7457b..751960c9604 100644 --- 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 @@ -57,7 +58,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd ); @@ -67,7 +68,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd ); diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmXpubModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmXpubModal.tsx index 766f6c293ab..803c84ea8e7 100644 --- 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 = ( diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx index 5fc3e64ad81..199ea2a82ad 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx +++ b/packages/suite/src/components/suite/modals/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 diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx index 0e40b28d745..01639278871 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx @@ -3,7 +3,12 @@ import { forwardRef, ReactNode } from 'react'; import styled from 'styled-components'; import { variables } from '@trezor/components'; -import type { NetworkSymbol, NetworkSymbolExtended } from '@suite-common/wallet-config'; +import { + getNetworkDisplaySymbol, + isNetworkSymbol, + type NetworkSymbol, + type NetworkSymbolExtended, +} from '@suite-common/wallet-config'; import { TokenInfo } from '@trezor/connect'; import { amountToSmallestUnit } from '@suite-common/wallet-utils'; import { zIndices } from '@trezor/theme'; @@ -145,7 +150,7 @@ export type TransactionReviewOutputElementProps = { indicator?: JSX.Element; lines: OutputElementLine[]; symbol?: NetworkSymbol; - displaySymbol?: NetworkSymbolExtended; + symbolIncludedTokens?: NetworkSymbolExtended; fiatVisible?: boolean; token?: TokenInfo; account?: Account; @@ -163,7 +168,7 @@ export const TransactionReviewOutputElement = forwardRef< lines, token, symbol, - displaySymbol, + symbolIncludedTokens, fiatVisible = false, account, state, @@ -176,6 +181,10 @@ export const TransactionReviewOutputElement = forwardRef< const isActive = state === 'active'; const showMultiIndicator = lines.length > 1; + const displaySymbol = + symbolIncludedTokens && isNetworkSymbol(symbolIncludedTokens) + ? getNetworkDisplaySymbol(symbolIncludedTokens) + : symbolIncludedTokens; return ( diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewTotalOutput.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewTotalOutput.tsx index aa3ab0b441a..1fa047dec2c 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewTotalOutput.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewTotalOutput.tsx @@ -144,7 +144,7 @@ export const TransactionReviewTotalOutput = forwardRef< /> } lines={lines} - displaySymbol={symbol} + symbolIncludedTokens={symbol} symbol={symbol} fiatVisible={!isTestnet(symbol)} ref={ref} diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx index 004ad7c9078..4deda13b684 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx @@ -4,6 +4,7 @@ import { Paragraph, Tooltip, Banner, Card, Column, InfoItem, NewModal } from '@t import { spacings } from '@trezor/theme'; import { getAccountEverstakeStakingPool } from '@suite-common/wallet-utils'; import type { SelectedAccountLoaded } from '@suite-common/wallet-types'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Fees } from 'src/components/wallet/Fees/Fees'; import { Translation, FiatValue, FormattedCryptoAmount } from 'src/components/suite'; @@ -61,7 +62,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => { description={ } size="small" diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ImportTransactionModal/ExampleCSV.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ImportTransactionModal/ExampleCSV.tsx index de8f11fdd34..57545227c97 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ImportTransactionModal/ExampleCSV.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ImportTransactionModal/ExampleCSV.tsx @@ -5,6 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion'; import { Paragraph, Icon, motionAnimation } from '@trezor/components'; import { borders, spacingsPx, typography } from '@trezor/theme'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite'; import { useSelector, useTranslation } from 'src/hooks/suite'; @@ -81,7 +82,8 @@ export const ExampleCSV = () => { address,amount,currency{isLabelingAvailable && ',label'} - {addresses[0]},0.31337,{account.symbol.toUpperCase()} + {addresses[0]},0.31337, + {getNetworkDisplaySymbol(account.symbol)} {isLabelingAvailable && `,${translationString('TR_SENDFORM_LABELING_EXAMPLE_1')}`} diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx index 94143dbf5e8..6039015f9c0 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx @@ -16,6 +16,7 @@ import { import { TranslationKey } from '@suite-common/intl-types'; import { spacings } from '@trezor/theme'; import { selectValidatorsQueueData } from '@suite-common/wallet-core'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -85,6 +86,8 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP }, ]; + if (!account) return null; + return ( } @@ -108,7 +111,7 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx index 45dcb7f6ed1..7cc6a145d41 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx @@ -3,8 +3,8 @@ import { useState } from 'react'; import { Checkbox, NewModal, Column, Banner, Card } from '@trezor/components'; import { spacings } from '@trezor/theme'; import { selectValidatorsQueueData } from '@suite-common/wallet-core'; -import { NetworkType } from '@suite-common/wallet-config'; import { HELP_CENTER_ETH_STAKING } from '@trezor/urls'; +import { getNetworkDisplaySymbol, type NetworkType } from '@suite-common/wallet-config'; import { Translation, TrezorLink } from 'src/components/suite'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -47,6 +47,8 @@ export const ConfirmStakeEthModal = ({ onConfirm(); }; + if (!account) return null; + return ( } @@ -87,7 +89,7 @@ export const ConfirmStakeEthModal = ({ {chunks} ), - symbol: account?.symbol.toUpperCase(), + networkSymbol: getNetworkDisplaySymbol(account.symbol), }} /> diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx index 58f01866179..16c9525d1ca 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx @@ -4,6 +4,7 @@ import { useFormatters } from '@suite-common/formatters'; import { formInputsMaxLength } from '@suite-common/validators'; import { MIN_ETH_FOR_WITHDRAWALS } from '@suite-common/wallet-constants'; import { spacings } from '@trezor/theme'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { NumberInput, Translation } from 'src/components/suite'; import { useTranslation } from 'src/hooks/suite'; @@ -71,6 +72,8 @@ export const Inputs = () => { const shouldShowAmountForWithdrawalWarning = isLessAmountForWithdrawalWarningShown || isAmountForWithdrawalWarningShown; + const displaySymbol = getNetworkDisplaySymbol(account.symbol); + return ( { control={control} rules={cryptoInputRules} maxLength={formInputsMaxLength.amount} - innerAddon={{account.symbol.toUpperCase()}} + innerAddon={{displaySymbol}} bottomText={errors[CRYPTO_INPUT]?.message ?? null} inputState={getInputState(cryptoError || fiatError)} onChange={value => { @@ -130,7 +133,7 @@ export const Inputs = () => { } values={{ amount: MIN_ETH_FOR_WITHDRAWALS.toString(), - symbol: account.symbol.toUpperCase(), + networkSymbol: displaySymbol, }} /> @@ -142,7 +145,7 @@ export const Inputs = () => { id="TR_STAKE_RECOMMENDED_AMOUNT_FOR_WITHDRAWALS" values={{ amount: MIN_ETH_FOR_WITHDRAWALS.toString(), - symbol: account.symbol.toUpperCase(), + networkSymbol: displaySymbol, }} /> diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/EverstakeModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/EverstakeModal.tsx index 0d462b67a4e..dc16f127252 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/EverstakeModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/EverstakeModal.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { Checkbox, NewModal, Column, Banner, Card, IconName } from '@trezor/components'; import { spacings } from '@trezor/theme'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -22,6 +23,10 @@ export const EverstakeModal = ({ onCancel }: EverstakeModalProps) => { dispatch(openModal({ type: 'stake' })); }; + if (!account) return null; + + const displaySymbol = getNetworkDisplaySymbol(account.symbol); + const banners: { icon: IconName; message: JSX.Element; @@ -36,7 +41,7 @@ export const EverstakeModal = ({ onCancel }: EverstakeModalProps) => { : 'TR_STAKE_BY_STAKING_YOU_CAN_EARN_REWARDS' } values={{ - symbol: account?.symbol.toUpperCase(), + networkSymbol: displaySymbol, t: text => {text}, }} /> @@ -52,7 +57,7 @@ export const EverstakeModal = ({ onCancel }: EverstakeModalProps) => { : 'TR_STAKE_SECURELY_DELEGATE_TO_EVERSTAKE' } values={{ - symbol: account?.symbol.toUpperCase(), + symbol: displaySymbol, }} /> ), @@ -61,12 +66,7 @@ export const EverstakeModal = ({ onCancel }: EverstakeModalProps) => { return ( - } + heading={} description={} onCancel={onCancel} size="small" diff --git a/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.tsx b/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.tsx index b249cb702dc..8947c8256bb 100644 --- a/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.tsx +++ b/packages/suite/src/components/suite/notifications/NotificationRenderer/NotificationRenderer.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'; import { AUTH_DEVICE, type NotificationEntry } from '@suite-common/toast-notifications'; import { selectSelectedDeviceLabelOrName } from '@suite-common/wallet-core'; import { DEVICE } from '@trezor/connect'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { NotificationViewProps } from 'src/components/suite'; import type { ExtendedMessageDescriptor } from 'src/types/suite'; @@ -291,7 +292,7 @@ export const NotificationRenderer = ({ ); case 'successful-claim': return success(render, notification, 'TOAST_SUCCESSFUL_CLAIM', 'check', { - symbol: notification.symbol, + networkSymbol: getNetworkDisplaySymbol(notification.symbol), }); case 'firmware-language-changed': return success(render, notification, 'TR_FIRMWARE_LANGUAGE_CHANGED'); diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/StakeEthBanner.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/StakeEthBanner.tsx index 520df0f05d7..0f51f767252 100644 --- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/StakeEthBanner.tsx +++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/StakeEthBanner.tsx @@ -6,6 +6,7 @@ import { Account } from '@suite-common/wallet-types'; import { selectPoolStatsApyData } from '@suite-common/wallet-core'; import { MIN_ETH_AMOUNT_FOR_STAKING } from '@suite-common/wallet-constants'; import { isSupportedEthStakingNetworkSymbol } from '@suite-common/wallet-utils'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite'; import { goto } from 'src/actions/suite/routerActions'; @@ -65,7 +66,7 @@ export const StakeEthBanner = ({ account }: StakeEthBannerProps) => { id="TR_STAKE_ANY_AMOUNT_ETH" values={{ apyPercent: ethApy, - symbol: account?.symbol.toUpperCase(), + networkSymbol: getNetworkDisplaySymbol(account.symbol), amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(), }} /> diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 138bfb5e842..7ca90b1187b 100644 --- a/packages/suite/src/support/messages.ts +++ b/packages/suite/src/support/messages.ts @@ -1425,11 +1425,11 @@ export default defineMessages({ id: 'TR_COPY_TO_CLIPBOARD', }, TR_ADDRESS_MODAL_TITLE: { - defaultMessage: '{networkName} receive address', + defaultMessage: '{networkSymbol} receive address', id: 'TR_ADDRESS_MODAL_TITLE', }, TR_ADDRESS_MODAL_TITLE_EXCHANGE: { - defaultMessage: '{networkCurrencyName} receive address on {networkName} network', + defaultMessage: '{networkCurrencyName} receive address on {networkSymbol} network', id: 'TR_ADDRESS_MODAL_TITLE_EXCHANGE', }, TR_XPUB_MODAL_CLIPBOARD: { @@ -1437,7 +1437,7 @@ export default defineMessages({ id: 'TR_XPUB_MODAL_CLIPBOARD', }, TR_XPUB_MODAL_TITLE: { - defaultMessage: '{networkName} Account {accountIndex} public key (XPUB)', + defaultMessage: '{networkSymbol} Account {accountIndex} public key (XPUB)', id: 'TR_XPUB_MODAL_TITLE', }, TR_XPUB_MODAL_TITLE_METADATA: { @@ -3031,11 +3031,11 @@ export default defineMessages({ id: 'TR_RECEIVE', }, TR_RECEIVE_NETWORK: { - defaultMessage: 'Receive {network}', + defaultMessage: 'Receive {networkSymbol}', id: 'TR_RECEIVE_NETWORK', }, TR_BUY_NETWORK: { - defaultMessage: 'Buy {network}', + defaultMessage: 'Buy {networkSymbol}', id: 'TR_BUY_NETWORK', }, TR_TAPROOT_BANNER_TITLE: { @@ -4385,7 +4385,7 @@ export default defineMessages({ }, RECEIVE_TITLE: { id: 'RECEIVE_TITLE', - defaultMessage: 'Receive {symbol}', + defaultMessage: 'Receive {networkSymbol}', }, RECEIVE_DESC_BITCOIN: { id: 'RECEIVE_DESC_BITCOIN', @@ -5477,12 +5477,12 @@ export default defineMessages({ id: 'AMOUNT_IS_LESS_THAN_RESERVE', }, AMOUNT_NOT_ENOUGH_CURRENCY_FEE: { - defaultMessage: 'Not enough {symbol} to cover transaction fee', + defaultMessage: 'Not enough {networkSymbol} to cover transaction fee', id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE', }, AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT: { - defaultMessage: 'Not enough {symbol} to cover transaction fee {feeAmount}', + defaultMessage: 'Not enough {symbol} to cover transaction fee ({feeAmount} {symbol})', id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT', }, REMAINING_BALANCE_LESS_THAN_RENT: { @@ -7515,7 +7515,7 @@ export default defineMessages({ }, TR_STAKING_GETTING_READY: { id: 'TR_STAKING_GETTING_READY', - defaultMessage: 'Your {symbol} is getting ready to work', + defaultMessage: 'Your {networkSymbol} is getting ready to work', }, TR_STAKING_REWARDS_ARE_RESTAKED: { id: 'TR_STAKING_REWARDS_ARE_RESTAKED', @@ -7527,11 +7527,11 @@ export default defineMessages({ }, TR_STAKING_CONSOLIDATING_FUNDS: { id: 'TR_STAKING_CONSOLIDATING_FUNDS', - defaultMessage: 'Consolidating your {symbol} for you', + defaultMessage: 'Consolidating your {networkSymbol} for you', }, TR_STAKING_YOUR_UNSTAKED_FUNDS: { id: 'TR_STAKING_YOUR_UNSTAKED_FUNDS', - defaultMessage: 'Your unstaked {symbol} is ready', + defaultMessage: 'Your unstaked {networkSymbol} is ready', }, TR_RECEIVING_SYMBOL: { id: 'TR_RECEIVING_SYMBOL', @@ -8720,7 +8720,7 @@ export default defineMessages({ TR_STAKE_ANY_AMOUNT_ETH: { id: 'TR_STAKE_ANY_AMOUNT_ETH', defaultMessage: - 'Stake a minimum amount of {amount} {symbol} and start earning rewards. With our current APY rate of {apyPercent}%, your rewards earn too!', + 'Stake a minimum amount of {amount} {networkSymbol} and start earning rewards. With our current APY rate of {apyPercent}%, your rewards earn too!', }, TR_STAKE_LEARN_MORE: { id: 'TR_STAKE_LEARN_MORE', @@ -8760,15 +8760,16 @@ export default defineMessages({ }, TR_STAKE_CLAIM_UNSTAKED: { id: 'TR_STAKE_CLAIM_UNSTAKED', - defaultMessage: 'Claim unstaked {symbol}', + defaultMessage: 'Claim unstaked {networkSymbol}', }, TR_STAKE_IN_ACCOUNT: { id: 'TR_STAKE_IN_ACCOUNT', - defaultMessage: '{symbol} in account', + defaultMessage: '{networkSymbol} in account', }, TR_STAKE_STAKED_ETH_AMOUNT_LOCKED: { id: 'TR_STAKE_STAKED_ETH_AMOUNT_LOCKED', - defaultMessage: 'The staked amount of {symbol} is locked and can’t be traded or sent.', + defaultMessage: + 'The staked amount of {networkSymbol} is locked and can’t be traded or sent.', }, TR_STAKE_UNSTAKING_TAKES: { id: 'TR_STAKE_UNSTAKING_TAKES', @@ -8778,7 +8779,7 @@ export default defineMessages({ TR_STAKE_ETH_REWARDS_EARN: { id: 'TR_STAKE_ETH_REWARDS_EARN', defaultMessage: - 'Your rewards also earn. Keep them staked and watch your {symbol} rewards soar.', + 'Your rewards also earn. Keep them staked and watch your {networkSymbol} rewards soar.', }, TR_STAKE_AVAILABLE: { id: 'TR_STAKE_AVAILABLE', @@ -8795,17 +8796,18 @@ export default defineMessages({ }, TR_STAKE_LEFT_AMOUNT_FOR_WITHDRAWAL: { id: 'TR_STAKE_LEFT_AMOUNT_FOR_WITHDRAWAL', - defaultMessage: 'We’ve left {amount} {symbol} out so you can pay for withdrawal fees.', + defaultMessage: + 'We’ve left {amount} {networkSymbol} out so you can pay for withdrawal fees.', }, TR_STAKE_LEFT_SMALL_AMOUNT_FOR_WITHDRAWAL: { id: 'TR_STAKE_LEFT_SMALL_AMOUNT_FOR_WITHDRAWAL', defaultMessage: - 'We’ve left a small amount of {symbol} out so you can pay for withdrawal fees.', + 'We’ve left a small amount of {networkSymbol} out so you can pay for withdrawal fees.', }, TR_STAKE_RECOMMENDED_AMOUNT_FOR_WITHDRAWALS: { id: 'TR_STAKE_RECOMMENDED_AMOUNT_FOR_WITHDRAWALS', defaultMessage: - "It's recommended to leave {amount} {symbol} so you can pay for withdrawal fees.", + "It's recommended to leave {amount} {networkSymbol} so you can pay for withdrawal fees.", }, TR_STAKE_CONFIRM_ENTRY_PERIOD: { id: 'TR_STAKE_CONFIRM_ENTRY_PERIOD', @@ -8827,7 +8829,7 @@ export default defineMessages({ TR_STAKE_ETH_WILL_BE_BLOCKED: { id: 'TR_STAKE_ETH_WILL_BE_BLOCKED', defaultMessage: - 'Your {symbol} will be blocked during this period, and you can’t cancel this. Learn more', + 'Your {networkSymbol} will be blocked during this period, and you can’t cancel this. Learn more', }, TR_STAKE_ACKNOWLEDGE_ENTRY_PERIOD: { id: 'TR_STAKE_ACKNOWLEDGE_ENTRY_PERIOD', @@ -8892,7 +8894,7 @@ export default defineMessages({ TR_STAKE_ETH_REWARDS_EARN_APY: { id: 'TR_STAKE_ETH_REWARDS_EARN_APY', defaultMessage: - 'Your {symbol} rewards also earn the APY rate. Keep your funds staked or add more to increase your rewards.', + 'Your {networkSymbol} rewards also earn the APY rate. Keep your funds staked or add more to increase your rewards.', }, TR_STAKE_REWARDS: { id: 'TR_STAKE_REWARDS', @@ -8977,7 +8979,7 @@ export default defineMessages({ }, TR_STAKE_CLAIMED_AMOUNT_TRANSFERRED: { id: 'TR_STAKE_CLAIMED_AMOUNT_TRANSFERRED', - defaultMessage: 'The claimed amount is transferred to your {symbol} account.', + defaultMessage: 'The claimed amount is transferred to your {networkSymbol} account.', }, TR_STAKE_CLAIMING_PERIOD: { id: 'TR_STAKE_CLAIMING_PERIOD', @@ -8985,7 +8987,7 @@ export default defineMessages({ }, TR_STAKE_MIN_AMOUNT_TOOLTIP: { id: 'TR_STAKE_MIN_AMOUNT_TOOLTIP', - defaultMessage: 'Minimum amount to stake is {amount} {symbol}', + defaultMessage: 'Minimum amount to stake is {amount} {networkSymbol}', }, TOAST_TX_STAKED: { id: 'TOAST_TX_STAKED', @@ -9001,7 +9003,7 @@ export default defineMessages({ }, TOAST_SUCCESSFUL_CLAIM: { id: 'TOAST_SUCCESSFUL_CLAIM', - defaultMessage: '{symbol} claimed successfully', + defaultMessage: '{networkSymbol} claimed successfully', }, TOAST_ESTIMATED_FEE_ERROR: { id: 'TOAST_ESTIMATED_FEE_ERROR', @@ -9039,7 +9041,7 @@ export default defineMessages({ TR_STAKE_EVERSTAKE_MANAGES: { id: 'TR_STAKE_EVERSTAKE_MANAGES', defaultMessage: - 'Everstake maintains and protects your staked {symbol} with their smart contracts, infrastructure, and technology.', + 'Everstake maintains and protects your staked {networkSymbol} with their smart contracts, infrastructure, and technology.', }, TR_STAKE_TREZOR_NO_LIABILITY: { id: 'TR_STAKE_TREZOR_NO_LIABILITY', @@ -9049,7 +9051,7 @@ export default defineMessages({ TR_STAKE_BY_STAKING_YOU_CAN_EARN_REWARDS: { id: 'TR_STAKE_BY_STAKING_YOU_CAN_EARN_REWARDS', defaultMessage: - 'By staking your {symbol}, you can earn rewards while contributing to the security and stability of the network.', + 'By staking your {networkSymbol}, you can earn rewards while contributing to the security and stability of the network.', }, TR_STAKE_SECURELY_DELEGATE_TO_EVERSTAKE: { id: 'TR_STAKE_SECURELY_DELEGATE_TO_EVERSTAKE', diff --git a/packages/suite/src/utils/wallet/coinmarket/coinmarketUtils.ts b/packages/suite/src/utils/wallet/coinmarket/coinmarketUtils.ts index 93919646c77..640626fb92c 100644 --- a/packages/suite/src/utils/wallet/coinmarket/coinmarketUtils.ts +++ b/packages/suite/src/utils/wallet/coinmarket/coinmarketUtils.ts @@ -341,6 +341,12 @@ export const coinmarketBuildAccountOptions = ({ deviceState, }); + /** + * TODO: allow second layer ETH coins to trade, now it is not working -> skip them + * Temporary solution to skip not native network symbols + */ + const skipNotNativeNetworkSymbols: readonly NetworkSymbol[] = ['op', 'base', 'arb']; + const groups: CoinmarketAccountsOptionsGroupProps[] = []; accountsSorted.forEach(account => { @@ -353,7 +359,9 @@ export const coinmarketBuildAccountOptions = ({ accountType, } = account; - if (!getNetwork(accountSymbol).coingeckoNativeId) { + const network = getNetwork(accountSymbol); + + if (!network.coingeckoNativeId) { return; } @@ -365,18 +373,18 @@ export const coinmarketBuildAccountOptions = ({ index, }); - const accountDecimals = getNetwork(accountSymbol).decimals; - const options: CoinmarketAccountOptionsGroupOptionProps[] = [ - { - value: getNetwork(accountSymbol).coingeckoNativeId as CryptoId, - label: accountSymbol.toUpperCase(), - cryptoName: getNetworkName(accountSymbol), - descriptor, - balance: formattedBalance ?? '', - accountType: account.accountType, - decimals: accountDecimals, - }, - ]; + const accountDecimals = network.decimals; + const option: CoinmarketAccountOptionsGroupOptionProps = { + value: network.coingeckoNativeId as CryptoId, + label: accountSymbol.toUpperCase(), + cryptoName: network.name, + descriptor, + balance: formattedBalance ?? '', + accountType: account.accountType, + decimals: accountDecimals, + }; + const options: CoinmarketAccountOptionsGroupOptionProps[] = + !skipNotNativeNetworkSymbols.includes(network.symbol) ? [option] : []; // add crypto tokens to options if (tokens && tokens.length > 0) { @@ -426,7 +434,7 @@ export const coinmarketBuildAccountOptions = ({ }); }); - return groups; + return groups.filter(group => group.options.length > 0); }; export const coinmarketGetAmountLabels = ({ diff --git a/packages/suite/src/views/wallet/receive/components/Header.tsx b/packages/suite/src/views/wallet/receive/components/Header.tsx index 4d7073d851d..0fb57a19255 100644 --- a/packages/suite/src/views/wallet/receive/components/Header.tsx +++ b/packages/suite/src/views/wallet/receive/components/Header.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components'; import { H2, Paragraph } from '@trezor/components'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Account } from 'src/types/wallet'; import { Translation } from 'src/components/suite'; @@ -15,7 +16,10 @@ interface HeaderProps { export const Header = ({ account }: HeaderProps) => { const title = ( - + ); if (account.networkType === 'bitcoin') { return ( diff --git a/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx b/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx index 0cede963da4..0983a41018e 100644 --- a/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx +++ b/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx @@ -12,6 +12,7 @@ import { getInputState, findToken, } from '@suite-common/wallet-utils'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { FiatValue, Translation, NumberInput } from 'src/components/suite'; import { useSendFormContext } from 'src/hooks/wallet'; @@ -81,7 +82,7 @@ export const Amount = ({ output, outputId }: AmountProps) => { } const withTokens = hasNetworkFeatures(account, 'tokens'); - const displayTicker = shouldSendInSats ? 'sat' : symbol.toUpperCase(); + const displayTicker = shouldSendInSats ? 'sat' : getNetworkDisplaySymbol(symbol); const isLowAnonymity = isLowAnonymityWarning(outputError); const inputState = isLowAnonymity ? 'warning' : getInputState(error); const bottomText = isLowAnonymity ? undefined : error?.message; diff --git a/packages/suite/src/views/wallet/staking/components/CardanoRewards.tsx b/packages/suite/src/views/wallet/staking/components/CardanoRewards.tsx index 2d3d61b6b3e..4514cb76ce1 100644 --- a/packages/suite/src/views/wallet/staking/components/CardanoRewards.tsx +++ b/packages/suite/src/views/wallet/staking/components/CardanoRewards.tsx @@ -4,6 +4,7 @@ import { formatNetworkAmount } from '@suite-common/wallet-utils'; import { Card, Column, Icon } from '@trezor/components'; import { DeviceModelInternal } from '@trezor/connect'; import { spacings } from '@trezor/theme'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { getReasonForDisabledAction, useCardanoStaking } from 'src/hooks/wallet/useCardanoStaking'; import { Translation } from 'src/components/suite/Translation'; @@ -85,7 +86,7 @@ export const CardanoRewards = ({ account, deviceModel }: CardanoRewardsProps) => {formatNetworkAmount(rewards, account.symbol)}{' '} - {account.symbol.toUpperCase()} + {getNetworkDisplaySymbol(account.symbol)} diff --git a/packages/suite/src/views/wallet/staking/components/CardanoStake.tsx b/packages/suite/src/views/wallet/staking/components/CardanoStake.tsx index b205f156c69..cf03e03bc93 100644 --- a/packages/suite/src/views/wallet/staking/components/CardanoStake.tsx +++ b/packages/suite/src/views/wallet/staking/components/CardanoStake.tsx @@ -4,6 +4,7 @@ import { formatNetworkAmount } from '@suite-common/wallet-utils'; import { Card, Column, Icon, Banner } from '@trezor/components'; import { DeviceModelInternal } from '@trezor/connect'; import { spacings } from '@trezor/theme'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite/Translation'; import { HiddenPlaceholder } from 'src/components/suite/HiddenPlaceholder'; @@ -87,7 +88,7 @@ export const CardanoStake = ({ account, deviceModel }: CardanoStakeProps) => { {formatNetworkAmount(deposit || '0', account.symbol)}{' '} - {account.symbol.toUpperCase()} + {getNetworkDisplaySymbol(account.symbol)} @@ -98,7 +99,7 @@ export const CardanoStake = ({ account, deviceModel }: CardanoStakeProps) => { {formatNetworkAmount(fee || '0', account.symbol)}{' '} - {account.symbol.toUpperCase()} + {getNetworkDisplaySymbol(account.symbol)} diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ClaimCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ClaimCard.tsx index 9e40fb6ec55..5c4226b9ad3 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ClaimCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ClaimCard.tsx @@ -34,11 +34,11 @@ export const ClaimCard = () => { }, [selectedAccount?.key]); useEffect(() => { - if (prevIsClaimPending.current && !isClaimPending) { + if (prevIsClaimPending.current && !isClaimPending && selectedAccount?.symbol) { dispatch( notificationsActions.addToast({ type: 'successful-claim', - symbol: selectedAccount?.symbol.toUpperCase() || '', + symbol: selectedAccount.symbol, }), ); prevIsClaimPending.current = false; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx index 1e38f25dbb2..80ff767f307 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx @@ -17,7 +17,7 @@ import { import { spacings } from '@trezor/theme'; import { selectAccountStakeTransactions } from '@suite-common/wallet-core'; import { getAccountEverstakeStakingPool, isPending } from '@suite-common/wallet-utils'; -import type { NetworkSymbol } from '@suite-common/wallet-config'; +import { getNetworkDisplaySymbol, type NetworkSymbol } from '@suite-common/wallet-config'; import { FiatValue, Translation, FormattedCryptoAmount } from 'src/components/suite'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -171,7 +171,9 @@ export const StakingCard = ({ } diff --git a/packages/suite/src/views/wallet/staking/components/StakingDashboard/components/EmptyStakingCard.tsx b/packages/suite/src/views/wallet/staking/components/StakingDashboard/components/EmptyStakingCard.tsx index 75b055a5df8..a616668c185 100644 --- a/packages/suite/src/views/wallet/staking/components/StakingDashboard/components/EmptyStakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/StakingDashboard/components/EmptyStakingCard.tsx @@ -15,6 +15,7 @@ import { } from '@trezor/components'; import { spacings } from '@trezor/theme'; import { selectPoolStatsApyData } from '@suite-common/wallet-core'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation, StakingFeature } from 'src/components/suite'; import { openModal } from 'src/actions/suite/modalActions'; @@ -39,6 +40,8 @@ export const EmptyStakingCard = () => { } }; + const displaySymbol = account?.symbol ? getNetworkDisplaySymbol(account.symbol) : ''; + const stakeEthFeatures = useMemo( () => [ { @@ -50,7 +53,7 @@ export const EmptyStakingCard = () => { id="TR_STAKE_NETWORK_SEE_MONEY_DANCE_DESC" values={{ apyPercent: ethApy, - symbol: account?.symbol.toUpperCase(), + symbol: displaySymbol, t: text => ( { description: , }, ], - [ethApy, account?.symbol], + [ethApy, displaySymbol], ); return ( - } + heading={} > @@ -98,7 +96,9 @@ export const EmptyStakingCard = () => { diff --git a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx index dc3e3f44f34..f9badb3273e 100644 --- a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx +++ b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx @@ -11,7 +11,7 @@ import { } from '@trezor/components'; import { getTitleForNetwork } from '@suite-common/wallet-utils'; import { CoinLogo } from '@trezor/product-components'; -import { getNetwork } from '@suite-common/wallet-config'; +import { getNetwork, getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { hasBitcoinOnlyFirmware } from '@trezor/device-utils'; import { EventType, analytics } from '@trezor/suite-analytics'; @@ -84,7 +84,7 @@ export const TradeBox = ({ account }: TradeBoxProps) => { width="fit-content" > - {account.symbol.toUpperCase()} + {getNetworkDisplaySymbol(account.symbol)} diff --git a/packages/suite/src/views/wallet/transactions/components/AccountEmpty.tsx b/packages/suite/src/views/wallet/transactions/components/AccountEmpty.tsx index c24f5cee1ba..23966c7b6f8 100644 --- a/packages/suite/src/views/wallet/transactions/components/AccountEmpty.tsx +++ b/packages/suite/src/views/wallet/transactions/components/AccountEmpty.tsx @@ -1,4 +1,5 @@ import { analytics, EventType } from '@trezor/suite-analytics'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { Translation } from 'src/components/suite'; import { useDispatch } from 'src/hooks/suite'; @@ -13,6 +14,8 @@ interface AccountEmptyProps { export const AccountEmpty = ({ account }: AccountEmptyProps) => { const dispatch = useDispatch(); + const displaySymbol = getNetworkDisplaySymbol(account.symbol); + const handleNavigateToReceivePage = () => { dispatch(goto('wallet-receive', { preserveParams: true })); analytics.report({ @@ -39,7 +42,7 @@ export const AccountEmpty = ({ account }: AccountEmptyProps) => { description={ } iconName="arrowsLeftRight" @@ -52,7 +55,7 @@ export const AccountEmpty = ({ account }: AccountEmptyProps) => { children: ( ), }, @@ -63,7 +66,7 @@ export const AccountEmpty = ({ account }: AccountEmptyProps) => { children: ( ), }, diff --git a/suite-common/toast-notifications/src/types.ts b/suite-common/toast-notifications/src/types.ts index 0fce1e69080..db74d510f20 100644 --- a/suite-common/toast-notifications/src/types.ts +++ b/suite-common/toast-notifications/src/types.ts @@ -132,7 +132,7 @@ export type ToastPayload = ( } | { type: 'successful-claim'; - symbol: string; + symbol: NetworkSymbol; } | StakedTransactionNotification | UnstakedTransactionNotification diff --git a/suite-common/wallet-config/src/networksConfig.ts b/suite-common/wallet-config/src/networksConfig.ts index 9e3eaed39a5..55cb681fdf3 100644 --- a/suite-common/wallet-config/src/networksConfig.ts +++ b/suite-common/wallet-config/src/networksConfig.ts @@ -48,6 +48,7 @@ export const getExplorerUrls = ( export const networks = { btc: { symbol: 'btc', + displaySymbol: 'BTC', name: 'Bitcoin', networkType: 'bitcoin', bip43Path: "m/84'/0'/i'", @@ -82,6 +83,7 @@ export const networks = { }, eth: { symbol: 'eth', + displaySymbol: 'ETH', name: 'Ethereum', networkType: 'ethereum', chainId: 1, @@ -118,6 +120,7 @@ export const networks = { }, pol: { symbol: 'pol', + displaySymbol: 'POL', name: 'Polygon PoS', networkType: 'ethereum', chainId: 137, @@ -140,6 +143,7 @@ export const networks = { }, bsc: { symbol: 'bsc', + displaySymbol: 'BNB', name: 'BNB Smart Chain', networkType: 'ethereum', chainId: 56, @@ -162,6 +166,7 @@ export const networks = { }, arb: { symbol: 'arb', + displaySymbol: 'ETH', name: 'Arbitrum One', networkType: 'ethereum', chainId: 42161, @@ -185,6 +190,7 @@ export const networks = { }, base: { symbol: 'base', + displaySymbol: 'ETH', name: 'Base', networkType: 'ethereum', chainId: 8453, @@ -208,6 +214,7 @@ export const networks = { }, op: { symbol: 'op', + displaySymbol: 'ETH', name: 'Optimism', networkType: 'ethereum', chainId: 10, @@ -231,6 +238,7 @@ export const networks = { }, sol: { symbol: 'sol', + displaySymbol: 'SOL', name: 'Solana', networkType: 'solana', bip43Path: "m/44'/501'/i'/0'", // phantom - bip44Change @@ -260,6 +268,7 @@ export const networks = { ada: { // icarus derivation symbol: 'ada', + displaySymbol: 'ADA', name: 'Cardano', networkType: 'cardano', bip43Path: "m/1852'/1815'/i'", @@ -294,6 +303,7 @@ export const networks = { }, etc: { symbol: 'etc', + displaySymbol: 'ETC', name: 'Ethereum Classic', networkType: 'ethereum', chainId: 61, @@ -309,6 +319,7 @@ export const networks = { }, xrp: { symbol: 'xrp', + displaySymbol: 'XRP', name: 'XRP', networkType: 'ripple', bip43Path: "m/44'/144'/i'/0/0", @@ -323,6 +334,7 @@ export const networks = { }, ltc: { symbol: 'ltc', + displaySymbol: 'LTC', name: 'Litecoin', networkType: 'bitcoin', bip43Path: "m/84'/2'/i'", @@ -346,6 +358,7 @@ export const networks = { }, bch: { symbol: 'bch', + displaySymbol: 'BCH', name: 'Bitcoin Cash', networkType: 'bitcoin', bip43Path: "m/44'/145'/i'", @@ -360,6 +373,7 @@ export const networks = { }, doge: { symbol: 'doge', + displaySymbol: 'DOGE', name: 'Dogecoin', networkType: 'bitcoin', bip43Path: "m/44'/3'/i'", @@ -374,6 +388,7 @@ export const networks = { }, zec: { symbol: 'zec', + displaySymbol: 'ZEC', name: 'Zcash', networkType: 'bitcoin', bip43Path: "m/44'/133'/i'", @@ -388,6 +403,7 @@ export const networks = { }, dash: { symbol: 'dash', + displaySymbol: 'DASH', name: 'Dash', networkType: 'bitcoin', bip43Path: "m/44'/5'/i'", @@ -402,6 +418,7 @@ export const networks = { }, btg: { symbol: 'btg', + displaySymbol: 'BTG', name: 'Bitcoin Gold', networkType: 'bitcoin', bip43Path: "m/49'/156'/i'", @@ -421,6 +438,7 @@ export const networks = { }, dgb: { symbol: 'dgb', + displaySymbol: 'DGB', name: 'DigiByte', networkType: 'bitcoin', bip43Path: "m/49'/20'/i'", @@ -440,6 +458,7 @@ export const networks = { }, nmc: { symbol: 'nmc', + displaySymbol: 'NMC', name: 'Namecoin', networkType: 'bitcoin', bip43Path: "m/44'/7'/i'", @@ -454,6 +473,7 @@ export const networks = { }, vtc: { symbol: 'vtc', + displaySymbol: 'VTC', name: 'Vertcoin', networkType: 'bitcoin', bip43Path: "m/84'/28'/i'", @@ -478,6 +498,7 @@ export const networks = { // testnets test: { symbol: 'test', + displaySymbol: 'TEST', name: 'Bitcoin Testnet', networkType: 'bitcoin', bip43Path: "m/84'/1'/i'", @@ -512,6 +533,7 @@ export const networks = { }, regtest: { symbol: 'regtest', + displaySymbol: 'REGTEST', name: 'Bitcoin Regtest', networkType: 'bitcoin', bip43Path: "m/84'/1'/i'", @@ -547,6 +569,7 @@ export const networks = { }, tsep: { symbol: 'tsep', + displaySymbol: 'tSEP', name: 'Ethereum Sepolia', networkType: 'ethereum', bip43Path: "m/44'/1'/0'/0/i", @@ -562,6 +585,7 @@ export const networks = { }, thol: { symbol: 'thol', + displaySymbol: 'tHOL', name: 'Ethereum Holesky', networkType: 'ethereum', bip43Path: "m/44'/1'/0'/0/i", @@ -577,6 +601,7 @@ export const networks = { }, dsol: { symbol: 'dsol', + displaySymbol: 'DSOL', name: 'Solana Devnet', networkType: 'solana', bip43Path: "m/44'/501'/i'/0'", @@ -599,6 +624,7 @@ export const networks = { tada: { // icarus derivation symbol: 'tada', + displaySymbol: 'tADA', name: 'Cardano Testnet', networkType: 'cardano', bip43Path: "m/1852'/1815'/i'", @@ -631,6 +657,7 @@ export const networks = { }, txrp: { symbol: 'txrp', + displaySymbol: 'tXRP', name: 'XRP Testnet', networkType: 'ripple', bip43Path: "m/44'/144'/i'/0/0", diff --git a/suite-common/wallet-config/src/types.ts b/suite-common/wallet-config/src/types.ts index 77b022157ca..c9251862ff4 100644 --- a/suite-common/wallet-config/src/types.ts +++ b/suite-common/wallet-config/src/types.ts @@ -101,6 +101,7 @@ export type NetworkDeviceSupport = Partial>; type NetworkWithSpecificKey = { symbol: TKey; + displaySymbol: string; name: string; networkType: NetworkType; bip43Path: Bip43PathTemplate; diff --git a/suite-common/wallet-config/src/utils.ts b/suite-common/wallet-config/src/utils.ts index 494d76b9dab..edcad36877d 100644 --- a/suite-common/wallet-config/src/utils.ts +++ b/suite-common/wallet-config/src/utils.ts @@ -87,3 +87,5 @@ export const getNetworkByCoingeckoId = (coingeckoId: string) => export const getNetworkByCoingeckoNativeId = (coingeckoId: string) => networksCollection.find(n => n.coingeckoNativeId === coingeckoId); + +export const getNetworkDisplaySymbol = (symbol: NetworkSymbol) => getNetwork(symbol).displaySymbol; diff --git a/suite-common/wallet-core/src/send/sendFormEthereumThunks.ts b/suite-common/wallet-core/src/send/sendFormEthereumThunks.ts index 9ad9b34ec97..4446ad69c14 100644 --- a/suite-common/wallet-core/src/send/sendFormEthereumThunks.ts +++ b/suite-common/wallet-core/src/send/sendFormEthereumThunks.ts @@ -29,7 +29,7 @@ import { ExternalOutput, AddressDisplayOptions, } from '@suite-common/wallet-types'; -import { getNetwork } from '@suite-common/wallet-config'; +import { getNetwork, getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { selectTransactions } from '../transactions/transactionsReducer'; import { @@ -71,8 +71,7 @@ const calculate = ( errorMessage: { id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT', values: { - symbol: 'ETH', - feeAmount: `(${fromWei(feeInGwei, 'ether')} ETH)`, + feeAmount: fromWei(feeInGwei, 'ether').toString(), }, }, } as const; @@ -244,11 +243,11 @@ export const composeEthereumTransactionFeeLevelsThunk = createThunk< tx.error === 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT' ) { tx.errorMessage = { - id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT', values: { - symbol: tx.errorMessage?.values?.symbol || 'ETH', + symbol: getNetworkDisplaySymbol(network.symbol), feeAmount: tx.errorMessage?.values?.feeAmount || '', }, + id: 'AMOUNT_NOT_ENOUGH_CURRENCY_FEE_WITH_ETH_AMOUNT', }; } }); diff --git a/suite-common/wallet-core/src/send/sendFormSolanaThunks.ts b/suite-common/wallet-core/src/send/sendFormSolanaThunks.ts index d7d752a2fe8..c6764b67d3e 100644 --- a/suite-common/wallet-core/src/send/sendFormSolanaThunks.ts +++ b/suite-common/wallet-core/src/send/sendFormSolanaThunks.ts @@ -25,6 +25,7 @@ import { dummyPriorityFeesForFeeEstimation, getAccountIdentity, } from '@suite-common/wallet-utils'; +import { getNetworkDisplaySymbol } from '@suite-common/wallet-config'; import { selectBlockchainBlockInfoBySymbol } from '../blockchain/blockchainReducer'; import { @@ -309,7 +310,9 @@ export const composeSolanaTransactionFeeLevelsThunk = createThunk< 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/suite-common/wallet-utils/src/accountUtils.ts b/suite-common/wallet-utils/src/accountUtils.ts index 69c6289d7b8..661560288fd 100644 --- a/suite-common/wallet-utils/src/accountUtils.ts +++ b/suite-common/wallet-utils/src/accountUtils.ts @@ -23,6 +23,7 @@ import { getNetwork, type NetworkSymbolExtended, networkSymbolCollection, + getNetworkDisplaySymbol, } from '@suite-common/wallet-config'; import { Account, @@ -417,11 +418,12 @@ export const formatNetworkAmount = ( let formattedAmount = formatAmount(amount, decimals); if (withSymbol) { - let formattedSymbol = symbol?.toUpperCase(); + let formattedSymbol = getNetworkDisplaySymbol(symbol).toUpperCase(); if (isSatoshis) { formattedAmount = amount; - formattedSymbol = symbol === 'btc' ? 'sat' : `sat ${symbol?.toUpperCase()}`; + formattedSymbol = + symbol === 'btc' ? 'sat' : `sat ${getNetworkDisplaySymbol(symbol).toUpperCase()}`; } return `${formattedAmount} ${formattedSymbol}`;