diff --git a/src/components/token/index.tsx b/src/components/token/index.tsx index 0691202bb..2c4846d52 100644 --- a/src/components/token/index.tsx +++ b/src/components/token/index.tsx @@ -18,7 +18,7 @@ import { ContactCard } from 'screens/contacts/components' import { TokenImage, TokenSymbol } from 'screens/home/TokenImage' import { noop, sharedColors, sharedStyles, testIDs } from 'shared/constants' import { ContactWithAddressRequired } from 'shared/types' -import { castStyle, formatTokenValue, formatUsdValue } from 'shared/utils' +import { castStyle, formatTokenValue, formatFiatValue } from 'shared/utils' import { DollarIcon } from '../icons/DollarIcon' import { EyeIcon } from '../icons/EyeIcon' @@ -128,7 +128,7 @@ export const TokenBalance = ({ {hide ? '\u002A\u002A\u002A\u002A\u002A' : secondValue.symbolType === 'usd' - ? formatUsdValue(secondValue.balance) + ? formatFiatValue(secondValue.balance) : formatTokenValue(secondValue.balance)} )} diff --git a/src/screens/activity/ActivityRow.tsx b/src/screens/activity/ActivityRow.tsx index ab9f8b9f5..31a7d6ac1 100644 --- a/src/screens/activity/ActivityRow.tsx +++ b/src/screens/activity/ActivityRow.tsx @@ -17,7 +17,7 @@ import { getContactByAddress } from 'store/slices/contactsSlice' import { ActivityRowPresentationObject } from 'store/slices/transactionsSlice' import { Wallet } from 'shared/wallet' import { useAddress } from 'shared/hooks' -import { formatTokenValue, formatUsdValue } from 'src/shared/utils' +import { formatTokenValue, formatFiatValue } from 'shared/utils' const getStatus = (status: string) => { switch (status) { @@ -131,7 +131,7 @@ export const ActivityBasicRow = ({ const amount = symbol.startsWith('BTC') ? value : formatTokenValue(value) const isUnknownToken = !usdValue && Number(value) > 0 - const usdAmount = isUnknownToken ? '' : formatUsdValue(usdValue) + const usdAmount = isUnknownToken ? '' : formatFiatValue(usdValue) const handlePress = useCallback(() => { if (txSummary) { diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx index 632469f4b..21ed8fca4 100644 --- a/src/screens/home/index.tsx +++ b/src/screens/home/index.tsx @@ -31,7 +31,7 @@ import { } from 'storage/MainStorage' import { selectTransactions } from 'store/slices/transactionsSlice' import { sharedColors } from 'shared/constants' -import { castStyle, formatUsdValue } from 'shared/utils' +import { castStyle, formatFiatValue } from 'shared/utils' import { ActivityBasicRow } from 'screens/activity/ActivityRow' import { useWallet } from 'shared/wallet' @@ -187,7 +187,7 @@ export const HomeScreen = ({ setSelectedTokenBalanceUsd({ symbolType: 'usd', symbol, - balance: formatUsdValue(usdBalance), + balance: formatFiatValue(usdBalance), }) } }, [selectedToken]) diff --git a/src/screens/transactionSummary/TransactionSummaryComponent.tsx b/src/screens/transactionSummary/TransactionSummaryComponent.tsx index d33f4eab7..a4c1d460d 100644 --- a/src/screens/transactionSummary/TransactionSummaryComponent.tsx +++ b/src/screens/transactionSummary/TransactionSummaryComponent.tsx @@ -12,7 +12,7 @@ import { sharedColors, sharedStyles, } from 'shared/constants' -import { castStyle, formatTokenValue, formatUsdValue } from 'shared/utils' +import { castStyle, formatTokenValue, formatFiatValue } from 'shared/utils' import { AppButton, AppTouchable, Typography } from 'components/index' import { useAppSelector } from 'store/storeUtils' import { isMyAddress } from 'components/address/lib' @@ -186,7 +186,7 @@ export const TransactionSummaryComponent = ({ sharedStyles.textRight, { color: sharedColors.labelLight }, ]}> - {formatUsdValue(fee.usdValue)} + {formatFiatValue(fee.usdValue)} @@ -221,7 +221,7 @@ export const TransactionSummaryComponent = ({ sharedStyles.textRight, { color: sharedColors.labelLight }, ]}> - {formatUsdValue(totalUsd)} + {formatFiatValue(totalUsd)} {/* arrive value */} diff --git a/src/shared/utils/index.test.ts b/src/shared/utils/index.test.ts index 726d56a20..5631921ee 100644 --- a/src/shared/utils/index.test.ts +++ b/src/shared/utils/index.test.ts @@ -1,34 +1,34 @@ -import { formatTokenValue, formatUsdValue } from './index' +import { formatTokenValue, formatFiatValue } from './index' -describe('formatUsdValue', () => { +describe('formatFiatValue', () => { test('formats basic USD values correctly', () => { - expect(formatUsdValue('5678.90')).toBe('$5,678.90') - expect(formatUsdValue(1234567.89123)).toBe('$1,234,567.89') - expect(formatUsdValue(1234567.89)).toBe('$1,234,567.89') - expect(formatUsdValue(1234567)).toBe('$1,234,567.00') - expect(formatUsdValue(1234.5)).toBe('$1,234.50') - expect(formatUsdValue(1234)).toBe('$1,234.00') + expect(formatFiatValue('5678.90')).toBe('$5,678.90') + expect(formatFiatValue(1234567.89123)).toBe('$1,234,567.89') + expect(formatFiatValue(1234567.89)).toBe('$1,234,567.89') + expect(formatFiatValue(1234567)).toBe('$1,234,567.00') + expect(formatFiatValue(1234.5)).toBe('$1,234.50') + expect(formatFiatValue(1234)).toBe('$1,234.00') }) test('handles zero as a special case', () => { - expect(formatUsdValue(0)).toBe('$0.00') - expect(formatUsdValue('0')).toBe('$0.00') + expect(formatFiatValue(0)).toBe('$0.00') + expect(formatFiatValue('0')).toBe('$0.00') }) test('formats negative USD values correctly', () => { - expect(formatUsdValue(-1234.56)).toBe('-$1,234.56') + expect(formatFiatValue(-1234.56)).toBe('-$1,234.56') }) test('rounds to two decimal places', () => { - expect(formatUsdValue(1234.567)).toBe('$1,234.57') + expect(formatFiatValue(1234.567)).toBe('$1,234.57') }) test('small amounts', () => { - expect(formatUsdValue(0.0000000099)).toBe('<$0.01') - expect(formatUsdValue(0.009)).toBe('<$0.01') - expect(formatUsdValue(0.0100000001)).toBe('$0.01') - expect(formatUsdValue(0.01)).toBe('$0.01') - expect(formatUsdValue(0.1)).toBe('$0.10') + expect(formatFiatValue(0.0000000099)).toBe('<$0.01') + expect(formatFiatValue(0.009)).toBe('<$0.01') + expect(formatFiatValue(0.0100000001)).toBe('$0.01') + expect(formatFiatValue(0.01)).toBe('$0.01') + expect(formatFiatValue(0.1)).toBe('$0.10') }) }) diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts index 60e25d96b..6b9a0998e 100644 --- a/src/shared/utils/index.ts +++ b/src/shared/utils/index.ts @@ -113,14 +113,15 @@ const formatNumber = ( * Formats a number or a numeric string as a USD value with a dollar sign. * Should be used only at the end when showing values. * @param value The number or string to format. + * @param sign The currency sign to use. * @returns The formatted USD value with a dollar sign as a string. */ -export const formatUsdValue = (value: number | string): string => +export const formatFiatValue = (value: number | string, sign = '$'): string => formatNumber(value, { decimalPlaces: 2, useThousandSeparator: true, isCurrency: true, - sign: '$', + sign, }) /** diff --git a/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx b/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx index 7e002c131..f3f6f718e 100644 --- a/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx +++ b/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx @@ -19,7 +19,6 @@ import { AppButtonBackgroundVarietyEnum, Input } from 'components/index' import { TransactionSummaryScreenProps } from 'screens/transactionSummary' import { WalletContext } from 'shared/wallet' import { useAddress } from 'shared/hooks' -import { formatTokenValue, formatUsdValue } from 'shared/utils' import { BitcoinMiningFeeContainer, diff --git a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx index 8dee62927..39d5c57f4 100644 --- a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx +++ b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx @@ -22,7 +22,6 @@ import { castStyle, errorHandler, formatTokenValue, - formatUsdValue, rbtcMap, } from 'shared/utils' import { selectUsdPrices } from 'store/slices/usdPricesSlice'