fix: price formatting spot check fixes (#4850)

fix price formatting

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -22,6 +22,7 @@ import {
   monthYearDayFormatter,
   weekFormatter,
 } from 'utils/formatChartTimes'
+import { formatDollar } from 'utils/formatDollarAmt'
 
 import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
 import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
@@ -270,7 +271,7 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
   return (
     <>
       <ChartHeader>
-        <TokenPrice>${displayPrice.value < 0.000001 ? '<0.000001' : displayPrice.value.toFixed(6)}</TokenPrice>
+        <TokenPrice>{formatDollar(displayPrice.value, true)}</TokenPrice>
         <DeltaContainer>
           {formattedDelta}
           <ArrowCell>{arrow}</ArrowCell>

src/utils/formatDollarAmt.test.ts

@@ -39,8 +39,14 @@ describe('formatDollar for a price', () => {
   it('num >= 0.1 && num < 1.05', () => {
     expect(formatDollar(0.812831, true)).toEqual('$0.813')
   })
+  it('number is greater than 1 million', () => {
+    expect(formatDollar(11192312.408, true)).toEqual('$1.12e+7')
+  })
+  it('number in the thousands', () => {
+    expect(formatDollar(1234.408, true)).toEqual('$1,234.41')
+  })
   it('number is greater than 1.05', () => {
-    expect(formatDollar(102312.408, true)).toEqual('$102312.41')
+    expect(formatDollar(102312.408, true)).toEqual('$102,312.41')
   })
 })
 

src/utils/formatDollarAmt.ts

 /* Copied from Uniswap/v-3: https://github.com/Uniswap/v3-info/blob/master/src/utils/numbers.ts */
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { DEFAULT_LOCALE } from 'constants/locales'
 import numbro from 'numbro'
 
 // Convert [CurrencyAmount] to number with necessary precision for price formatting.
@@ -19,14 +20,14 @@ export const formatDollar = (num: number | undefined | null, isPrice = false, di
     if (num < 0.000001) {
       return `$${num.toExponential(2)}`
     }
-    if (num >= 0.000001 && num < 0.1) {
+    if ((num >= 0.000001 && num < 0.1) || num > 1000000) {
       return `$${Number(num).toPrecision(3)}`
     }
     if (num >= 0.1 && num < 1.05) {
       return `$${num.toFixed(3)}`
     }
     // if number is greater than 1.05:
-    return `$${num.toFixed(2)}`
+    return `$${Number(num.toFixed(2)).toLocaleString(DEFAULT_LOCALE)}`
   }
   // For volume dollar amounts, like market cap, total value locked, etc.
   else {