fix: use number formatting lib for tick bounds on LP positions (#5573)

* fix: use number formatting lib for tick bounds on LP positions

* lint

* configure craco to work with conedison

* lint

craco.config.cjs

@@ -9,6 +9,16 @@ module.exports = {
   babel: {
     plugins: ['@vanilla-extract/babel-plugin'],
   },
+  jest: {
+    configure(jestConfig) {
+      return Object.assign({}, jestConfig, {
+        transformIgnorePatterns: ['@uniswap/conedison/format'],
+        moduleNameMapper: {
+          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
+        },
+      })
+    },
+  },
   webpack: {
     plugins: [
       new VanillaExtractPlugin(),

src/components/PositionListItem/index.tsx

@@ -232,8 +232,12 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
               <Trans>Min: </Trans>
             </ExtentsText>
             <Trans>
-              {formatTickPrice(priceLower, tickAtLimit, Bound.LOWER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
-              per <HoverInlineText text={currencyBase?.symbol ?? ''} />
+              {formatTickPrice({
+                price: priceLower,
+                atLimit: tickAtLimit,
+                direction: Bound.LOWER,
+              })}{' '}
+              <HoverInlineText text={currencyQuote?.symbol} /> per <HoverInlineText text={currencyBase?.symbol ?? ''} />
             </Trans>
           </RangeText>{' '}
           <HideSmall>
@@ -247,8 +251,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
               <Trans>Max:</Trans>
             </ExtentsText>
             <Trans>
-              {formatTickPrice(priceUpper, tickAtLimit, Bound.UPPER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
-              per <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
+              {formatTickPrice({
+                price: priceUpper,
+                atLimit: tickAtLimit,
+                direction: Bound.UPPER,
+              })}{' '}
+              <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
+              <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
             </Trans>
           </RangeText>
         </RangeLineItem>

src/components/PositionPreview/index.tsx

@@ -125,11 +125,13 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Min Price</Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
-                priceLower,
-                ticksAtLimit,
-                Bound.LOWER
-              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">
+                {formatTickPrice({
+                  price: priceLower,
+                  atLimit: ticksAtLimit,
+                  direction: Bound.LOWER,
+                })}
+              </ThemedText.DeprecatedMediumHeader>
               <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
@@ -146,11 +148,13 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Max Price</Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
-                priceUpper,
-                ticksAtLimit,
-                Bound.UPPER
-              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">
+                {formatTickPrice({
+                  price: priceUpper,
+                  atLimit: ticksAtLimit,
+                  direction: Bound.UPPER,
+                })}
+              </ThemedText.DeprecatedMediumHeader>
               <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}

src/pages/Pool/PositionPage.tsx

@@ -882,7 +882,11 @@ export function PositionPage() {
                         <Trans>Min price</Trans>
                       </ExtentsText>
                       <ThemedText.DeprecatedMediumHeader textAlign="center">
-                        {formatTickPrice(priceLower, tickAtLimit, Bound.LOWER)}
+                        {formatTickPrice({
+                          price: priceLower,
+                          atLimit: tickAtLimit,
+                          direction: Bound.LOWER,
+                        })}
                       </ThemedText.DeprecatedMediumHeader>
                       <ExtentsText>
                         {' '}
@@ -906,7 +910,11 @@ export function PositionPage() {
                         <Trans>Max price</Trans>
                       </ExtentsText>
                       <ThemedText.DeprecatedMediumHeader textAlign="center">
-                        {formatTickPrice(priceUpper, tickAtLimit, Bound.UPPER)}
+                        {formatTickPrice({
+                          price: priceUpper,
+                          atLimit: tickAtLimit,
+                          direction: Bound.UPPER,
+                        })}
                       </ThemedText.DeprecatedMediumHeader>
                       <ExtentsText>
                         {' '}

src/utils/formatCurrencyAmount.ts

-import { Currency, CurrencyAmount, Fraction, Price } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core'
 import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
 import JSBI from 'jsbi'
 import formatLocaleNumber from 'lib/utils/formatLocaleNumber'
@@ -23,19 +23,3 @@ export function formatCurrencyAmount(
 
   return formatLocaleNumber({ number: amount, locale, sigFigs, fixedDecimals })
 }
-
-export function formatPrice(
-  price: Price<Currency, Currency> | undefined,
-  sigFigs: number,
-  locale: SupportedLocale = DEFAULT_LOCALE
-): string {
-  if (!price) {
-    return '-'
-  }
-
-  if (parseFloat(price.toFixed(sigFigs)) < 0.0001) {
-    return `<${formatLocaleNumber({ number: 0.00001, locale })}`
-  }
-
-  return formatLocaleNumber({ number: price, locale, sigFigs })
-}

src/utils/formatTickPrice.ts

+import { formatPrice, NumberType } from '@uniswap/conedison/format'
 import { Price, Token } from '@uniswap/sdk-core'
 
 import { Bound } from '../state/mint/v3/actions'
-import { formatPrice } from './formatCurrencyAmount'
 
-export function formatTickPrice(
-  price: Price<Token, Token> | undefined,
-  atLimit: { [bound in Bound]?: boolean | undefined },
-  direction: Bound,
+interface FormatTickPriceArgs {
+  price: Price<Token, Token> | undefined
+  atLimit: { [bound in Bound]?: boolean | undefined }
+  direction: Bound
   placeholder?: string
-) {
+}
+
+export function formatTickPrice({ price, atLimit, direction, placeholder }: FormatTickPriceArgs) {
   if (atLimit[direction]) {
     return direction === Bound.LOWER ? '0' : '∞'
   }
@@ -17,5 +19,5 @@ export function formatTickPrice(
     return placeholder
   }
 
-  return formatPrice(price, 5)
+  return formatPrice(price, NumberType.TokenNonTx)
 }