fix: use coned function for chart prices (#6693)

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -1,4 +1,5 @@
 import { Trans } from '@lingui/macro'
+import { formatUSDPrice } from '@uniswap/conedison/format'
 import { AxisBottom, TickFormatter } from '@visx/axis'
 import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
@@ -23,7 +24,6 @@ import {
   monthYearDayFormatter,
   weekFormatter,
 } from 'utils/formatChartTimes'
-import { formatDollar } from 'utils/formatNumbers'
 
 const DATA_EMPTY = { value: 0, timestamp: 0 }
 
@@ -276,7 +276,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
       <ChartHeader data-cy="chart-header">
         {displayPrice.value ? (
           <>
-            <TokenPrice>{formatDollar({ num: displayPrice.value, isPrice: true })}</TokenPrice>
+            <TokenPrice>{formatUSDPrice(displayPrice.value)}</TokenPrice>
             <DeltaContainer>
               {formattedDelta}
               <ArrowCell>{arrow}</ArrowCell>

src/utils/formatNumbers.test.ts

@@ -1,12 +1,7 @@
 import { CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { renBTC, USDC_MAINNET } from 'constants/tokens'
 
-import {
+import { currencyAmountToPreciseFloat, formatTransactionAmount, priceToPreciseFloat } from './formatNumbers'
-  currencyAmountToPreciseFloat,
-  formatDollar,
-  formatTransactionAmount,
-  priceToPreciseFloat,
-} from './formatNumbers'
 
 describe('currencyAmountToPreciseFloat', () => {
   it('small number', () => {
@@ -92,63 +87,3 @@ describe('formatTransactionAmount', () => {
     expect(formatTransactionAmount(1234567890123456.789)).toEqual('1.234568e+15')
   })
 })
-
-describe('formatDollar for a price', () => {
-  const isPrice = true
-  it('undefined or null', () => {
-    expect(formatDollar({ num: undefined, isPrice })).toEqual('-')
-    expect(formatDollar({ num: null, isPrice })).toEqual('-')
-  })
-  it('0', () => {
-    expect(formatDollar({ num: 0, isPrice })).toEqual('$0.00')
-  })
-  it('< 0.000001', () => {
-    expect(formatDollar({ num: 0.00000000011231231432, isPrice })).toEqual('$1.12e-10')
-  })
-  it('num >= 0.000001 && num < 0.1', () => {
-    expect(formatDollar({ num: 0.00123123124, isPrice })).toEqual('$0.00123')
-  })
-  it('num >= 0.1 && num < 1.05', () => {
-    expect(formatDollar({ num: 0.812831, isPrice })).toEqual('$0.813')
-  })
-  it('lessPreciseStablecoinValues number less than 1, rounds to 0.999', () => {
-    expect(formatDollar({ num: 0.9994, isPrice, lessPreciseStablecoinValues: true })).toEqual('$0.999')
-  })
-  it('lessPreciseStablecoinValues number less than, rounds to 1.00', () => {
-    expect(formatDollar({ num: 0.9995, isPrice, lessPreciseStablecoinValues: true })).toEqual('$1.00')
-  })
-  it('lessPreciseStablecoinValues number greater than 1', () => {
-    expect(formatDollar({ num: 1.0000001, isPrice, lessPreciseStablecoinValues: true })).toEqual('$1.00')
-  })
-  it('number is greater than 1 million', () => {
-    expect(formatDollar({ num: 11192312.408, isPrice })).toEqual('$1.12e+7')
-  })
-  it('number in the thousands', () => {
-    expect(formatDollar({ num: 1234.408, isPrice })).toEqual('$1,234.41')
-  })
-  it('number is greater than 1.05', () => {
-    expect(formatDollar({ num: 102312.408, isPrice })).toEqual('$102,312.41')
-  })
-})
-
-describe('formatDollar for a non-price amount', () => {
-  it('undefined or null', () => {
-    expect(formatDollar({ num: undefined })).toEqual('-')
-    expect(formatDollar({ num: null })).toEqual('-')
-  })
-  it('0', () => {
-    expect(formatDollar({ num: 0 })).toEqual('$0.00')
-  })
-  it('< 0.000001', () => {
-    expect(formatDollar({ num: 0.0000000001 })).toEqual('$<0.000001')
-  })
-  it('num >= 0.000001 && num < 0.1', () => {
-    expect(formatDollar({ num: 0.00123123124 })).toEqual('$0.00123')
-  })
-  it('num >= 0.1 && num < 1.05', () => {
-    expect(formatDollar({ num: 0.812831 })).toEqual('$0.813')
-  })
-  it('number is greater than 1.05', () => {
-    expect(formatDollar({ num: 102312.408 })).toEqual('$102.31K')
-  })
-})

src/utils/formatNumbers.ts

@@ -1,7 +1,6 @@
 /* Copied from Uniswap/v-3: https://github.com/Uniswap/v3-info/blob/master/src/utils/numbers.ts */
 import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { DEFAULT_LOCALE } from 'constants/locales'
-import numbro from 'numbro'
 
 // Convert [CurrencyAmount] to number with necessary precision for price formatting.
 export const currencyAmountToPreciseFloat = (currencyAmount: CurrencyAmount<Currency> | undefined) => {
@@ -23,78 +22,6 @@ export const priceToPreciseFloat = (price: Price<Currency, Currency> | undefined
   return floatForLargerNumbers
 }
 
-interface FormatDollarArgs {
-  num?: number | null
-  isPrice?: boolean
-  lessPreciseStablecoinValues?: boolean
-  digits?: number
-  round?: boolean
-}
-
-/**
- * Returns a USD dollar or equivalent denominated numerical value formatted
- * in human readable string for use in template.
- *
- * Adheres to guidelines for prices and other numbers defined here:
- * https://www.notion.so/uniswaplabs/Number-standards-fbb9f533f10e4e22820722c2f66d23c0
- * @param num numerical value denominated in USD or USD equivalent
- * @param isPrice whether the amount represents a price or not
- * @param lessPreciseStablecoinValues whether or not we should show less precise values for
- * stablecoins (around 1$ in value always) for the sake of readability
- * @param digits number of digits after the decimal for non-price amounts
- * @param round whether or not to round up non-price amounts
- */
-export const formatDollar = ({
-  num,
-  isPrice = false,
-  lessPreciseStablecoinValues = false,
-  digits = 2,
-  round = true,
-}: FormatDollarArgs): string => {
-  // For USD dollar denominated prices.
-  if (isPrice) {
-    if (num === 0) return '$0.00'
-    if (!num) return '-'
-    if (num < 0.000001) {
-      return `$${num.toExponential(2)}`
-    }
-    if ((num >= 0.000001 && num < 0.1) || num > 1000000) {
-      return `$${Number(num).toPrecision(3)}`
-    }
-    // We only show 2 decimal places in explore table for stablecoin value ranges
-    // for the sake of readability (as opposed to the usual 3 elsewhere).
-    if (num >= 0.1 && num < (lessPreciseStablecoinValues ? 0.9995 : 1.05)) {
-      return `$${num.toFixed(3)}`
-    }
-    return `$${Number(num.toFixed(2)).toLocaleString(DEFAULT_LOCALE, { minimumFractionDigits: 2 })}`
-  }
-  // For volume dollar amounts, like market cap, total value locked, etc.
-  else {
-    if (num === 0) return '$0.00'
-    if (!num) return '-'
-    if (num < 0.000001) {
-      return '$<0.000001'
-    }
-    if (num >= 0.000001 && num < 0.1) {
-      return `$${Number(num).toPrecision(3)}`
-    }
-    if (num >= 0.1 && num < 1.05) {
-      return `$${num.toFixed(3)}`
-    }
-
-    return numbro(num)
-      .formatCurrency({
-        average: round,
-        mantissa: num > 1000 ? 2 : digits,
-        abbreviations: {
-          million: 'M',
-          billion: 'B',
-        },
-      })
-      .toUpperCase()
-  }
-}
-
 /**
  * Returns a numerical amount of any token formatted in human readable string for use in template.
  *