chore: moving coned formatting to interface (#7114)

craco.config.cjs

@@ -57,9 +57,8 @@ module.exports = {
           '\\.(t|j)sx?$': '@swc/jest',
         },
         // Use @uniswap/conedison's build directly, as jest does not support its exports.
-        transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
+        transformIgnorePatterns: ['@uniswap/conedison/provider'],
         moduleNameMapper: {
-          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
           '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
         },
       })

src/components/AccountDrawer/AuthenticatedHeader.tsx

 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName, SharedEventName } from '@uniswap/analytics-events'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, TraceEvent } from 'analytics'
@@ -24,6 +23,7 @@ import { updateSelectedWallet } from 'state/user/reducer'
 import styled, { useTheme } from 'styled-components'
 import { CopyHelper, ExternalLink, ThemedText } from 'theme'
 import { shortenAddress } from 'utils'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 import { useCloseModal, useFiatOnrampAvailability, useOpenModal, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'

src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts

 import { BigNumber } from '@ethersproject/bignumber'
 import { t } from '@lingui/macro'
-import { formatCurrencyAmount } from '@uniswap/conedison/format'
 import { ChainId, Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { nativeOnChain } from '@uniswap/smart-order-router'
 import UniswapXBolt from 'assets/svg/bolt.svg'
@@ -24,6 +23,7 @@ import {
   TransactionType,
   WrapTransactionInfo,
 } from 'state/transactions/types'
+import { formatCurrencyAmount } from 'utils/formatNumbers'
 
 import { CancelledTransactionTitleTable, getActivityTitle, OrderTextTable } from '../constants'
 import { Activity, ActivityMap } from './types'

src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx

 import { t } from '@lingui/macro'
-import { formatFiatPrice, formatNumberOrString, NumberType } from '@uniswap/conedison/format'
 import { ChainId, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, UNI_ADDRESSES } from '@uniswap/sdk-core'
 import UniswapXBolt from 'assets/svg/bolt.svg'
 import moonpayLogoSrc from 'assets/svg/moonpay.svg'
@@ -22,6 +21,7 @@ import { logSentryErrorForUnsupportedChain, supportedChainIdFromGQLChain } from
 import ms from 'ms'
 import { useEffect, useState } from 'react'
 import { isAddress } from 'utils'
+import { formatFiatPrice, formatNumberOrString, NumberType } from 'utils/formatNumbers'
 
 import { MOONPAY_SENDER_ADDRESSES, OrderStatusTable, OrderTextTable } from '../constants'
 import { Activity } from './types'

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

 import { t } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { Position } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
@@ -14,6 +13,7 @@ import { useCallback, useMemo, useReducer } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 import { ExpandoRow } from '../ExpandoRow'
 import { PortfolioLogo } from '../PortfolioLogo'

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { TraceEvent } from 'analytics'
 import { useCachedPortfolioBalancesQuery } from 'components/AccountDrawer/PrefetchBalancesWrapper'
 import Row from 'components/Row'
@@ -12,6 +11,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { EllipsisStyle, ThemedText } from 'theme'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 import { useToggleAccountDrawer } from '../..'
 import { PortfolioArrow } from '../../AuthenticatedHeader'

src/components/CurrencyInputPanel/FiatValue.tsx

 import { Trans } from '@lingui/macro'
-import { formatNumber, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Percent } from '@uniswap/sdk-core'
 import Row from 'components/Row'
 import { LoadingBubble } from 'components/Tokens/loading'
@@ -7,6 +6,7 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatNumber, formatPriceImpact, NumberType } from 'utils/formatNumbers'
 import { warningSeverity } from 'utils/prices'
 
 const FiatLoadingBubble = styled(LoadingBubble)`

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -15,6 +14,7 @@ import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'

src/components/NavBar/SuggestionRow.tsx

 import { InterfaceEventName } from '@uniswap/analytics-events'
-import { formatUSDPrice } from '@uniswap/conedison/format'
 import { sendAnalyticsEvent } from 'analytics'
 import clsx from 'clsx'
 import QueryTokenLogo from 'components/Logo/QueryTokenLogo'
@@ -19,6 +18,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatUSDPrice } from 'utils/formatNumbers'
 
 import { DeltaText, getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
 import { useAddRecentlySearchedAsset } from './RecentlySearchedAssets'

src/components/Tokens/TokenDetails/BalanceSummary.tsx

 import { Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
@@ -9,6 +8,7 @@ import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 
 const BalancesCard = styled.div`
   box-shadow: ${({ theme }) => theme.shallowShadow};

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

 import { Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
@@ -8,6 +7,7 @@ import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled from 'styled-components'
 import { StyledInternalLink } from 'theme'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 
 const Wrapper = styled.div`
   align-content: center;

src/components/Tokens/TokenDetails/PriceChart.tsx

 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'
@@ -24,6 +23,7 @@ import {
   monthYearDayFormatter,
   weekFormatter,
 } from 'utils/formatChartTimes'
+import { formatUSDPrice } from 'utils/formatNumbers'
 
 const DATA_EMPTY = { value: 0, timestamp: 0 }
 

src/components/Tokens/TokenDetails/StatsSection.tsx

 import { Trans } from '@lingui/macro'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { ChainId } from '@uniswap/sdk-core'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { getChainInfo } from 'constants/chainInfo'
@@ -7,6 +6,7 @@ import { ReactNode } from 'react'
 import styled from 'styled-components'
 import { ExternalLink, ThemedText } from 'theme'
 import { textFadeIn } from 'theme/styles'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 import { UNSUPPORTED_METADATA_CHAINS } from '../constants'
 import { TokenSortMethod } from '../state'

src/components/Tokens/TokenTable/TokenRow.tsx

 import { Trans } from '@lingui/macro'
 import { InterfaceEventName } from '@uniswap/analytics-events'
-import { formatNumber, formatUSDPrice, NumberType } from '@uniswap/conedison/format'
 import { ParentSize } from '@visx/responsive'
 import { sendAnalyticsEvent } from 'analytics'
 import SparklineChart from 'components/Charts/SparklineChart'
@@ -15,6 +14,7 @@ import { ArrowDown, ArrowUp, Info } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components'
 import { BREAKPOINTS, ClickableStyle } from 'theme'
+import { formatNumber, formatUSDPrice, NumberType } from 'utils/formatNumbers'
 
 import {
   LARGE_MEDIA_BREAKPOINT,

src/components/swap/AdvancedSwapDetails.tsx

 import { Plural, Trans } from '@lingui/macro'
 import { InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, formatNumber, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'analytics'
@@ -9,6 +8,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { InterfaceTrade } from 'state/routing/types'
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
+import { formatCurrencyAmount, formatNumber, formatPriceImpact, NumberType } from 'utils/formatNumbers'
 
 import { Separator, ThemedText } from '../../theme'
 import Column from '../Column'

src/components/swap/ConfirmSwapModal.tsx

@@ -5,7 +5,6 @@ import {
   SwapEventName,
   SwapPriceUpdateUserResponse,
 } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency, Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, Trace, useTrace } from 'analytics'
@@ -30,6 +29,7 @@ import styled from 'styled-components'
 import { ThemedText } from 'theme'
 import invariant from 'tiny-invariant'
 import { isL2ChainId } from 'utils/chains'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 import { formatSwapPriceUpdatedEventProperties } from 'utils/loggingFormatters'
 import { didUserReject } from 'utils/swapErrorToUserReadableMessage'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'

src/components/swap/GasBreakdownTooltip.tsx

 import { Trans } from '@lingui/macro'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { AutoColumn } from 'components/Column'
 import UniswapXRouterLabel, { UniswapXGradient } from 'components/RouterLabel/UniswapXRouterLabel'
 import Row from 'components/Row'
@@ -8,6 +7,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import { isClassicTrade, isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
 import { Divider, ExternalLink, ThemedText } from 'theme'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 const Container = styled(AutoColumn)`
   padding: 4px;

src/components/swap/GasEstimateTooltip.tsx

 import { InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'analytics'
 import { LoadingOpacityContainer } from 'components/Loader/styled'
@@ -11,6 +10,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 
 import { ReactComponent as GasIcon } from '../../assets/images/gas-icon.svg'
 import { GasBreakdownTooltip } from './GasBreakdownTooltip'

src/components/swap/PriceImpactModal.tsx

 import { Trans } from '@lingui/macro'
-import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Percent } from '@uniswap/sdk-core'
 import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
 import { ColumnCenter } from 'components/Column'
@@ -7,6 +6,7 @@ import Row from 'components/Row'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
 import { CloseIcon, ThemedText } from 'theme'
+import { formatPriceImpact } from 'utils/formatNumbers'
 
 import Modal from '../Modal'
 

src/components/swap/SwapModalFooter.tsx

 import { Plural, Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { formatNumber, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
@@ -16,6 +15,7 @@ import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatNumber, formatPriceImpact, NumberType } from 'utils/formatNumbers'
 import { formatTransactionAmount, priceToPreciseFloat } from 'utils/formatNumbers'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'

src/components/swap/SwapModalHeader.test.tsx

-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import {
   ETH_MAINNET,
   TEST_ALLOWED_SLIPPAGE,
@@ -7,6 +6,7 @@ import {
   TEST_TRADE_EXACT_OUTPUT,
 } from 'test-utils/constants'
 import { render, screen } from 'test-utils/render'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 
 import SwapModalHeader from './SwapModalHeader'
 

src/components/swap/SwapModalHeaderAmount.tsx

-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,6 +9,7 @@ import { TextProps } from 'rebass'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
+import { formatNumber, NumberType } from 'utils/formatNumbers'
 import { formatReviewSwapCurrencyAmount } from 'utils/formatNumbers'
 
 export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>`

src/components/swap/TradePrice.tsx

 import { Trans } from '@lingui/macro'
-import { formatNumber, formatPrice, NumberType } from '@uniswap/conedison/format'
 import { Currency, Price } from '@uniswap/sdk-core'
 import { useUSDPrice } from 'hooks/useUSDPrice'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { ThemedText } from 'theme'
+import { formatNumber, formatPrice, NumberType } from 'utils/formatNumbers'
 
 interface TradePriceProps {
   price: Price<Currency, Currency>

src/nft/components/explore/CarouselCard.tsx

-import { formatNumberOrString, NumberType } from '@uniswap/conedison/format'
 import { loadingAnimation } from 'components/Loader/styled'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { useCollection } from 'graphql/data/nft/Collection'
@@ -7,6 +6,7 @@ import { Markets, TrendingCollection } from 'nft/types'
 import { ethNumberStandardFormatter } from 'nft/utils'
 import styled from 'styled-components'
 import { ThemedText } from 'theme/components/text'
+import { formatNumberOrString, NumberType } from 'utils/formatNumbers'
 
 const CarouselCardBorder = styled.div`
   width: 100%;

src/nft/components/profile/list/ListPage.tsx

 import { Trans } from '@lingui/macro'
 import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, useTrace } from 'analytics'
 import Column from 'components/Column'
@@ -26,6 +25,7 @@ import { ArrowLeft } from 'react-feather'
 import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 import { shallow } from 'zustand/shallow'
 
 import { ListModal } from './Modal/ListModal'

src/nft/components/profile/list/Modal/ListModal.tsx

 import { Trans } from '@lingui/macro'
 import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, Trace, useTrace } from 'analytics'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
@@ -16,6 +15,7 @@ import { X } from 'react-feather'
 import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 import { shallow } from 'zustand/shallow'
 
 import { TitleRow } from '../shared'

src/nft/components/profile/list/Modal/SuccessScreen.tsx

 import { Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
 import { ScrollBarStyles } from 'components/Common'
@@ -14,6 +13,7 @@ import { useMemo } from 'react'
 import { Twitter, X } from 'react-feather'
 import styled, { css, useTheme } from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 
 import { TitleRow } from '../shared'
 

src/pages/Pool/PositionPage.tsx

@@ -2,7 +2,6 @@ import { BigNumber } from '@ethersproject/bignumber'
 import type { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { InterfacePageName } from '@uniswap/analytics-events'
-import { formatPrice, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Fraction, Percent, Price, Token } from '@uniswap/sdk-core'
 import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -38,6 +37,7 @@ import styled, { useTheme } from 'styled-components'
 import { ExternalLink, HideExtraSmall, HideSmall, StyledRouterLink, ThemedText } from 'theme'
 import { currencyId } from 'utils/currencyId'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { formatPrice, NumberType } from 'utils/formatNumbers'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/pages/Swap/index.tsx

@@ -8,7 +8,6 @@ import {
   SharedEventName,
   SwapEventName,
 } from '@uniswap/analytics-events'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { ChainId, Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -58,6 +57,7 @@ import swapReducer, { initialState as initialSwapState, SwapState } from 'state/
 import styled, { useTheme } from 'styled-components'
 import { LinkStyledButton, ThemedText } from 'theme'
 import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
+import { formatCurrencyAmount, NumberType } from 'utils/formatNumbers'
 import { maxAmountSpend } from 'utils/maxAmountSpend'
 import { computeRealizedPriceImpact, warningSeverity } from 'utils/prices'
 import { didUserReject } from 'utils/swapErrorToUserReadableMessage'

src/utils/formatNumbers.test.ts

-import { CurrencyAmount, Price } from '@uniswap/sdk-core'
+import { CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
 import { renBTC, USDC_MAINNET } from 'constants/tokens'
 
 import {
   currencyAmountToPreciseFloat,
+  formatNumber,
+  formatPriceImpact,
   formatReviewSwapCurrencyAmount,
+  formatSlippage,
   formatTransactionAmount,
+  formatUSDPrice,
+  NumberType,
   priceToPreciseFloat,
 } from './formatNumbers'
 
+it('formats token reference numbers correctly', () => {
+  expect(formatNumber(1234567000000000, NumberType.TokenNonTx)).toBe('>999T')
+  expect(formatNumber(1002345, NumberType.TokenNonTx)).toBe('1.00M')
+  expect(formatNumber(1234, NumberType.TokenNonTx)).toBe('1,234.00')
+  expect(formatNumber(0.00909, NumberType.TokenNonTx)).toBe('0.009')
+  expect(formatNumber(0.09001, NumberType.TokenNonTx)).toBe('0.090')
+  expect(formatNumber(0.00099, NumberType.TokenNonTx)).toBe('<0.001')
+  expect(formatNumber(0, NumberType.TokenNonTx)).toBe('0')
+})
+
+it('formats token transaction numbers correctly', () => {
+  expect(formatNumber(1234567.8901, NumberType.TokenTx)).toBe('1,234,567.89')
+  expect(formatNumber(765432.1, NumberType.TokenTx)).toBe('765,432.10')
+
+  expect(formatNumber(7654.321, NumberType.TokenTx)).toBe('7,654.32')
+  expect(formatNumber(765.4321, NumberType.TokenTx)).toBe('765.432')
+  expect(formatNumber(76.54321, NumberType.TokenTx)).toBe('76.5432')
+  expect(formatNumber(7.654321, NumberType.TokenTx)).toBe('7.65432')
+  expect(formatNumber(7.60000054321, NumberType.TokenTx)).toBe('7.60')
+  expect(formatNumber(7.6, NumberType.TokenTx)).toBe('7.60')
+  expect(formatNumber(7, NumberType.TokenTx)).toBe('7.00')
+
+  expect(formatNumber(0.987654321, NumberType.TokenTx)).toBe('0.98765')
+  expect(formatNumber(0.9, NumberType.TokenTx)).toBe('0.90')
+  expect(formatNumber(0.901000123, NumberType.TokenTx)).toBe('0.901')
+  expect(formatNumber(0.000000001, NumberType.TokenTx)).toBe('<0.00001')
+  expect(formatNumber(0, NumberType.TokenTx)).toBe('0')
+})
+
+it('formats fiat estimates on token details pages correctly', () => {
+  expect(formatNumber(1234567.891, NumberType.FiatTokenDetails)).toBe('$1.23M')
+  expect(formatNumber(1234.5678, NumberType.FiatTokenDetails)).toBe('$1,234.57')
+  expect(formatNumber(1.048942, NumberType.FiatTokenDetails)).toBe('$1.049')
+
+  expect(formatNumber(0.001231, NumberType.FiatTokenDetails)).toBe('$0.00123')
+  expect(formatNumber(0.00001231, NumberType.FiatTokenDetails)).toBe('$0.0000123')
+
+  expect(formatNumber(0.0000001234, NumberType.FiatTokenDetails)).toBe('$0.000000123')
+  expect(formatNumber(0.000000009876, NumberType.FiatTokenDetails)).toBe('<$0.00000001')
+})
+
+it('formats fiat estimates for tokens correctly', () => {
+  expect(formatNumber(1234567.891, NumberType.FiatTokenPrice)).toBe('$1.23M')
+  expect(formatNumber(1234.5678, NumberType.FiatTokenPrice)).toBe('$1,234.57')
+
+  expect(formatNumber(0.010235, NumberType.FiatTokenPrice)).toBe('$0.0102')
+  expect(formatNumber(0.001231, NumberType.FiatTokenPrice)).toBe('$0.00123')
+  expect(formatNumber(0.00001231, NumberType.FiatTokenPrice)).toBe('$0.0000123')
+
+  expect(formatNumber(0.0000001234, NumberType.FiatTokenPrice)).toBe('$0.000000123')
+  expect(formatNumber(0.000000009876, NumberType.FiatTokenPrice)).toBe('<$0.00000001')
+  expect(formatNumber(10000000000000000000000000000000, NumberType.FiatTokenPrice)).toBe('$1.000000E31')
+})
+
+it('formats fiat estimates for token stats correctly', () => {
+  expect(formatNumber(1234576, NumberType.FiatTokenStats)).toBe('$1.2M')
+  expect(formatNumber(234567, NumberType.FiatTokenStats)).toBe('$234.6K')
+  expect(formatNumber(123.456, NumberType.FiatTokenStats)).toBe('$123.46')
+  expect(formatNumber(1.23, NumberType.FiatTokenStats)).toBe('$1.23')
+  expect(formatNumber(0.123, NumberType.FiatTokenStats)).toBe('$0.12')
+  expect(formatNumber(0.00123, NumberType.FiatTokenStats)).toBe('<$0.01')
+  expect(formatNumber(0, NumberType.FiatTokenStats)).toBe('-')
+})
+
+it('formats gas USD prices correctly', () => {
+  expect(formatNumber(1234567.891, NumberType.FiatGasPrice)).toBe('$1.23M')
+  expect(formatNumber(18.448, NumberType.FiatGasPrice)).toBe('$18.45')
+  expect(formatNumber(0.0099, NumberType.FiatGasPrice)).toBe('<$0.01')
+  expect(formatNumber(0, NumberType.FiatGasPrice)).toBe('$0.00')
+})
+
+it('formats USD token quantities prices correctly', () => {
+  expect(formatNumber(1234567.891, NumberType.FiatTokenQuantity)).toBe('$1.23M')
+  expect(formatNumber(18.448, NumberType.FiatTokenQuantity)).toBe('$18.45')
+  expect(formatNumber(0.0099, NumberType.FiatTokenQuantity)).toBe('<$0.01')
+  expect(formatNumber(0, NumberType.FiatTokenQuantity)).toBe('$0.00')
+})
+
+it('formats Swap text input/output numbers correctly', () => {
+  expect(formatNumber(1234567.8901, NumberType.SwapTradeAmount)).toBe('1234570')
+  expect(formatNumber(765432.1, NumberType.SwapTradeAmount)).toBe('765432')
+
+  expect(formatNumber(7654.321, NumberType.SwapTradeAmount)).toBe('7654.32')
+  expect(formatNumber(765.4321, NumberType.SwapTradeAmount)).toBe('765.432')
+  expect(formatNumber(76.54321, NumberType.SwapTradeAmount)).toBe('76.5432')
+  expect(formatNumber(7.654321, NumberType.SwapTradeAmount)).toBe('7.65432')
+  expect(formatNumber(7.60000054321, NumberType.SwapTradeAmount)).toBe('7.60')
+  expect(formatNumber(7.6, NumberType.SwapTradeAmount)).toBe('7.60')
+  expect(formatNumber(7, NumberType.SwapTradeAmount)).toBe('7.00')
+
+  expect(formatNumber(0.987654321, NumberType.SwapTradeAmount)).toBe('0.98765')
+  expect(formatNumber(0.9, NumberType.SwapTradeAmount)).toBe('0.90')
+  expect(formatNumber(0.901000123, NumberType.SwapTradeAmount)).toBe('0.901')
+  expect(formatNumber(0.000000001, NumberType.SwapTradeAmount)).toBe('0.000000001')
+  expect(formatNumber(0, NumberType.SwapTradeAmount)).toBe('0')
+})
+
+it('formats NFT numbers correctly', () => {
+  expect(formatNumber(1234567000000000, NumberType.NFTTokenFloorPrice)).toBe('>999T')
+  expect(formatNumber(1002345, NumberType.NFTTokenFloorPrice)).toBe('1M')
+  expect(formatNumber(1234, NumberType.NFTTokenFloorPrice)).toBe('1.23K')
+  expect(formatNumber(12.34467, NumberType.NFTTokenFloorPrice)).toBe('12.34')
+  expect(formatNumber(12.1, NumberType.NFTTokenFloorPrice)).toBe('12.1')
+  expect(formatNumber(0.00909, NumberType.NFTTokenFloorPrice)).toBe('0.009')
+  expect(formatNumber(0.09001, NumberType.NFTTokenFloorPrice)).toBe('0.09')
+  expect(formatNumber(0.00099, NumberType.NFTTokenFloorPrice)).toBe('<0.001')
+  expect(formatNumber(0, NumberType.NFTTokenFloorPrice)).toBe('0')
+
+  expect(formatNumber(12.1, NumberType.NFTTokenFloorPriceTrailingZeros)).toBe('12.10')
+  expect(formatNumber(0.09001, NumberType.NFTTokenFloorPriceTrailingZeros)).toBe('0.090')
+
+  expect(formatNumber(0.987654321, NumberType.NFTCollectionStats)).toBe('1')
+  expect(formatNumber(0.9, NumberType.NFTCollectionStats)).toBe('1')
+  expect(formatNumber(76543.21, NumberType.NFTCollectionStats)).toBe('76.5K')
+  expect(formatNumber(7.60000054321, NumberType.NFTCollectionStats)).toBe('8')
+  expect(formatNumber(1234567890, NumberType.NFTCollectionStats)).toBe('1.2B')
+  expect(formatNumber(1234567000000000, NumberType.NFTCollectionStats)).toBe('1234.6T')
+})
+
+describe('formatUSDPrice', () => {
+  it('should correctly format 0.000000009876', () => {
+    expect(formatUSDPrice(0.000000009876)).toBe('<$0.00000001')
+  })
+  it('should correctly format 0.00001231', () => {
+    expect(formatUSDPrice(0.00001231)).toBe('$0.0000123')
+  })
+  it('should correctly format 0.001231', () => {
+    expect(formatUSDPrice(0.001231)).toBe('$0.00123')
+  })
+  it('should correctly format 0.0', () => {
+    expect(formatUSDPrice(0.0)).toBe('$0.00')
+  })
+  it('should correctly format 0', () => {
+    expect(formatUSDPrice(0)).toBe('$0.00')
+  })
+  it('should correctly format 1.048942', () => {
+    expect(formatUSDPrice(1.048942)).toBe('$1.05')
+  })
+  it('should correctly format 0.10235', () => {
+    expect(formatUSDPrice(0.10235)).toBe('$0.102')
+  })
+  it('should correctly format 1234.5678', () => {
+    expect(formatUSDPrice(1_234.5678)).toBe('$1,234.57')
+  })
+  it('should correctly format 1234567.8910', () => {
+    expect(formatUSDPrice(1_234_567.891)).toBe('$1.23M')
+  })
+  it('should correctly format 1000000000000', () => {
+    expect(formatUSDPrice(1_000_000_000_000)).toBe('$1.00T')
+  })
+  it('should correctly format 1000000000000000', () => {
+    expect(formatUSDPrice(1_000_000_000_000_000)).toBe('$1000.00T')
+  })
+})
+
+describe('formatPriceImpact', () => {
+  it('should correctly format undefined', () => {
+    expect(formatPriceImpact(undefined)).toBe('-')
+  })
+
+  it('correctly formats a percent with 3 significant digits', () => {
+    expect(formatPriceImpact(new Percent(-1, 100000))).toBe('0.001%')
+    expect(formatPriceImpact(new Percent(-1, 1000))).toBe('0.100%')
+    expect(formatPriceImpact(new Percent(-1, 100))).toBe('1.000%')
+    expect(formatPriceImpact(new Percent(-1, 10))).toBe('10.000%')
+    expect(formatPriceImpact(new Percent(-1, 1))).toBe('100.000%')
+  })
+})
+
+describe('formatSlippage', () => {
+  it('should correctly format undefined', () => {
+    expect(formatSlippage(undefined)).toBe('-')
+  })
+
+  it('correctly formats a percent with 3 significant digits', () => {
+    expect(formatSlippage(new Percent(1, 100000))).toBe('0.001%')
+    expect(formatSlippage(new Percent(1, 1000))).toBe('0.100%')
+    expect(formatSlippage(new Percent(1, 100))).toBe('1.000%')
+    expect(formatSlippage(new Percent(1, 10))).toBe('10.000%')
+    expect(formatSlippage(new Percent(1, 1))).toBe('100.000%')
+  })
+})
+
 describe('currencyAmountToPreciseFloat', () => {
   it('small number', () => {
     const currencyAmount = CurrencyAmount.fromFractionalAmount(USDC_MAINNET, '20000', '7')

src/utils/formatTickPrice.ts

-import { formatPrice, NumberType } from '@uniswap/conedison/format'
 import { Price, Token } from '@uniswap/sdk-core'
+import { formatPrice, NumberType } from 'utils/formatNumbers'
 
 import { Bound } from '../state/mint/v3/actions'