From bb2677ab1bbcbb196122cd78066ac865d5329b94 Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Thu, 3 Aug 2023 12:50:46 -0700 Subject: [PATCH] fix: match PendingModalContent number formatting w/ SwapModalHeader (#7053) * fix: match PendingModalContent number formatting w/ SwapModalHeader * fix: typo * fix: remove argument --- .../swap/PendingModalContent/TradeSummary.tsx | 6 +++--- src/components/swap/SwapModalHeaderAmount.tsx | 12 +++--------- src/utils/formatNumbers.test.ts | 18 +++++++++++++++++- src/utils/formatNumbers.ts | 11 +++++++++++ 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/components/swap/PendingModalContent/TradeSummary.tsx b/src/components/swap/PendingModalContent/TradeSummary.tsx index afa1dfbca2..adc39f1109 100644 --- a/src/components/swap/PendingModalContent/TradeSummary.tsx +++ b/src/components/swap/PendingModalContent/TradeSummary.tsx @@ -1,10 +1,10 @@ -import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format' import CurrencyLogo from 'components/Logo/CurrencyLogo' import Row from 'components/Row' import { ArrowRight } from 'react-feather' import { InterfaceTrade } from 'state/routing/types' import { useTheme } from 'styled-components/macro' import { ThemedText } from 'theme' +import { formatReviewSwapCurrencyAmount } from 'utils/formatNumbers' export function TradeSummary({ trade }: { trade: Pick }) { const theme = useTheme() @@ -12,12 +12,12 @@ export function TradeSummary({ trade }: { trade: Pick - {formatCurrencyAmount(trade.inputAmount, NumberType.SwapTradeAmount)} {trade.inputAmount.currency.symbol} + {formatReviewSwapCurrencyAmount(trade.inputAmount)} {trade.inputAmount.currency.symbol} - {formatCurrencyAmount(trade.outputAmount, NumberType.SwapTradeAmount)} {trade.outputAmount.currency.symbol} + {formatReviewSwapCurrencyAmount(trade.outputAmount)} {trade.outputAmount.currency.symbol} ) diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx index 655341d1ce..0bbc06132c 100644 --- a/src/components/swap/SwapModalHeaderAmount.tsx +++ b/src/components/swap/SwapModalHeaderAmount.tsx @@ -1,4 +1,4 @@ -import { formatCurrencyAmount, formatNumber, NumberType } from '@uniswap/conedison/format' +import { formatNumber, NumberType } from '@uniswap/conedison/format' import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import Column from 'components/Column' import CurrencyLogo from 'components/Logo/CurrencyLogo' @@ -10,8 +10,7 @@ import { TextProps } from 'rebass' import { Field } from 'state/swap/actions' import styled from 'styled-components/macro' import { BREAKPOINTS, ThemedText } from 'theme' - -const MAX_AMOUNT_STR_LENGTH = 9 +import { formatReviewSwapCurrencyAmount } from 'utils/formatNumbers' export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>` cursor: ${({ cursor }) => cursor}; @@ -46,11 +45,6 @@ interface AmountProps { } export function SwapModalHeaderAmount({ tooltipText, label, amount, usdAmount, field, currency }: AmountProps) { - let formattedAmount = formatCurrencyAmount(amount, NumberType.TokenTx) - if (formattedAmount.length > MAX_AMOUNT_STR_LENGTH) { - formattedAmount = formatCurrencyAmount(amount, NumberType.SwapTradeAmount) - } - return ( @@ -61,7 +55,7 @@ export function SwapModalHeaderAmount({ tooltipText, label, amount, usdAmount, f - {formattedAmount} {currency?.symbol} + {formatReviewSwapCurrencyAmount(amount)} {currency?.symbol} {usdAmount && ( diff --git a/src/utils/formatNumbers.test.ts b/src/utils/formatNumbers.test.ts index 7178355007..4eb2562b84 100644 --- a/src/utils/formatNumbers.test.ts +++ b/src/utils/formatNumbers.test.ts @@ -1,7 +1,12 @@ import { CurrencyAmount, Price } from '@uniswap/sdk-core' import { renBTC, USDC_MAINNET } from 'constants/tokens' -import { currencyAmountToPreciseFloat, formatTransactionAmount, priceToPreciseFloat } from './formatNumbers' +import { + currencyAmountToPreciseFloat, + formatReviewSwapCurrencyAmount, + formatTransactionAmount, + priceToPreciseFloat, +} from './formatNumbers' describe('currencyAmountToPreciseFloat', () => { it('small number', () => { @@ -87,3 +92,14 @@ describe('formatTransactionAmount', () => { expect(formatTransactionAmount(1234567890123456.789)).toEqual('1.234568e+15') }) }) + +describe('formatReviewSwapCurrencyAmount', () => { + it('should use TokenTx formatting under a default length', () => { + const currencyAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '2000000000') // 2,000 USDC + expect(formatReviewSwapCurrencyAmount(currencyAmount)).toBe('2,000') + }) + it('should use SwapTradeAmount formatting over the default length', () => { + const currencyAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '2000000000000') // 2,000,000 USDC + expect(formatReviewSwapCurrencyAmount(currencyAmount)).toBe('2000000') + }) +}) diff --git a/src/utils/formatNumbers.ts b/src/utils/formatNumbers.ts index e3901a13f5..dfde82b360 100644 --- a/src/utils/formatNumbers.ts +++ b/src/utils/formatNumbers.ts @@ -1,4 +1,5 @@ /* Copied from Uniswap/v-3: https://github.com/Uniswap/v3-info/blob/master/src/utils/numbers.ts */ +import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format' import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core' import { DEFAULT_LOCALE } from 'constants/locales' @@ -59,3 +60,13 @@ export const formatTransactionAmount = (num: number | undefined | null, maxDigit } return `${Number(num.toFixed(2)).toLocaleString(DEFAULT_LOCALE, { minimumFractionDigits: 2 })}` } + +const MAX_AMOUNT_STR_LENGTH = 9 + +export function formatReviewSwapCurrencyAmount(amount: CurrencyAmount): string { + let formattedAmount = formatCurrencyAmount(amount, NumberType.TokenTx) + if (formattedAmount.length > MAX_AMOUNT_STR_LENGTH) { + formattedAmount = formatCurrencyAmount(amount, NumberType.SwapTradeAmount) + } + return formattedAmount +}