feat: coned on token details/search (#5349)

* fixing alignment

* migrating stats to coned

* fully replaced formatAmount usage

* reformatted pricechart function w/ yannie's suggestions

src/components/NavBar/SuggestionRow.tsx

@@ -1,5 +1,6 @@
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { EventName } from '@uniswap/analytics-events'
+import { formatUSDPrice } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import clsx from 'clsx'
 import AssetLogo from 'components/Logo/AssetLogo'
@@ -20,7 +21,6 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
-import { formatDollar } from 'utils/formatNumbers'
 
 import * as styles from './SearchBar.css'
 
@@ -194,7 +194,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
       <Column className={styles.suggestionSecondaryContainer}>
         {token.priceUsd && (
           <Row gap="4">
-            <Box className={styles.primaryText}>{formatDollar({ num: token.priceUsd, isPrice: true })}</Box>
+            <Box className={styles.primaryText}>{formatUSDPrice(token.priceUsd)}</Box>
           </Row>
         )}
         {token.price24hChange && (

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,13 +1,11 @@
 import { Trans } from '@lingui/macro'
-import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
+import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
-import { formatToDecimal } from 'lib/utils/analytics'
-import { useMemo } from 'react'
 import styled from 'styled-components/macro'
-import { currencyAmountToPreciseFloat, formatDollar } from 'utils/formatNumbers'
 
 const BalancesCard = styled.div`
   box-shadow: ${({ theme }) => theme.shallowShadow};
@@ -44,29 +42,14 @@ const BalanceRow = styled.div`
 `
 const BalanceItem = styled.div`
   display: flex;
+  align-items: center;
 `
 
-export function useFormatBalance(balance: CurrencyAmount<Currency> | undefined) {
-  return useMemo(
-    () => (balance ? formatToDecimal(balance, Math.min(balance.currency.decimals, 2)) : undefined),
-    [balance]
-  )
-}
-
-export function useFormatUsdValue(usdValue: CurrencyAmount<Token> | null) {
-  return useMemo(() => {
-    const float = usdValue ? currencyAmountToPreciseFloat(usdValue) : undefined
-    if (!float) return undefined
-    return formatDollar({ num: float, isPrice: true })
-  }, [usdValue])
-}
-
 export default function BalanceSummary({ token }: { token: Currency }) {
   const { account } = useWeb3React()
   const balance = useCurrencyBalance(account, token)
-  const formattedBalance = useFormatBalance(balance)
-  const usdValue = useStablecoinValue(balance)
-  const formattedUsdValue = useFormatUsdValue(usdValue)
+  const formattedBalance = formatCurrencyAmount(balance, NumberType.TokenNonTx)
+  const formattedUsdValue = formatCurrencyAmount(useStablecoinValue(balance), NumberType.FiatTokenStats)
 
   if (!account || !balance) return null
   return (

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -1,4 +1,5 @@
 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,8 +9,6 @@ import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
 
-import { useFormatBalance, useFormatUsdValue } from './BalanceSummary'
-
 const Wrapper = styled.div`
   align-content: center;
   align-items: center;
@@ -84,9 +83,8 @@ const SwapButton = styled(StyledInternalLink)`
 export default function MobileBalanceSummaryFooter({ token }: { token: Currency }) {
   const { account } = useWeb3React()
   const balance = useCurrencyBalance(account, token)
-  const formattedBalance = useFormatBalance(balance)
-  const usdValue = useStablecoinValue(balance)
-  const formattedUsdValue = useFormatUsdValue(usdValue)
+  const formattedBalance = formatCurrencyAmount(balance, NumberType.TokenNonTx)
+  const formattedUsdValue = formatCurrencyAmount(useStablecoinValue(balance), NumberType.FiatTokenStats)
   const chain = CHAIN_ID_TO_BACKEND_NAME[token.chainId].toLowerCase()
 
   return (

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'
@@ -20,7 +21,6 @@ import {
   monthYearDayFormatter,
   weekFormatter,
 } from 'utils/formatChartTimes'
-import { formatDollar } from 'utils/formatNumbers'
 
 export const DATA_EMPTY = { value: 0, timestamp: 0 }
 
@@ -92,6 +92,16 @@ interface PriceChartProps {
   timePeriod: TimePeriod
 }
 
+function formatDisplayPrice(value: number) {
+  const str = value.toFixed(9)
+  const [digits, decimals] = str.split('.')
+  // Displays longer string for numbers < $2 to show changes in both stablecoins & small values
+  if (digits === '0' || digits === '1')
+    return `$${digits + '.' + decimals.substring(0, 2) + decimals.substring(2).replace(/0+$/, '')}`
+
+  return formatUSDPrice(value)
+}
+
 export function PriceChart({ width, height, prices, timePeriod }: PriceChartProps) {
   const locale = useActiveLocale()
   const theme = useTheme()
@@ -226,7 +236,7 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
   return (
     <>
       <ChartHeader>
-        <TokenPrice>{formatDollar({ num: displayPrice.value, isPrice: true })}</TokenPrice>
+        <TokenPrice>{formatDisplayPrice(displayPrice.value)}</TokenPrice>
         <DeltaContainer>
           {formattedDelta}
           <ArrowCell>{arrow}</ArrowCell>

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro'
+import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { textFadeIn } from 'theme/styles'
-import { formatDollar } from 'utils/formatNumbers'
 
 import { TokenSortMethod } from '../state'
 import { HEADER_DESCRIPTIONS } from '../TokenTable/TokenRow'
@@ -69,7 +69,7 @@ function Stat({
         {description && <InfoTip text={description}></InfoTip>}
       </StatTitle>
 
-      <StatPrice>{formatDollar({ num: value, isPrice })}</StatPrice>
+      <StatPrice>{formatNumber(value, NumberType.FiatTokenStats)}</StatPrice>
     </StatWrapper>
   )
 }

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { EventName } from '@uniswap/analytics-events'
+import { formatNumber, formatUSDPrice, NumberType } from '@uniswap/conedison/format'
 import { ParentSize } from '@visx/responsive'
 import SparklineChart from 'components/Charts/SparklineChart'
 import QueryTokenLogo from 'components/Logo/QueryTokenLogo'
@@ -14,7 +15,6 @@ import { ArrowDown, ArrowUp } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
-import { formatDollar } from 'utils/formatNumbers'
 
 import {
   LARGE_MEDIA_BREAKPOINT,
@@ -481,7 +481,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
           price={
             <ClickableContent>
               <PriceInfoCell>
-                {formatDollar({ num: token.market?.price?.value, isPrice: true, lessPreciseStablecoinValues: true })}
+                {formatUSDPrice(token.market?.price?.value)}
                 <PercentChangeInfoCell>
                   {formattedDelta}
                   {arrow}
@@ -495,8 +495,14 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
               {arrow}
             </ClickableContent>
           }
-          tvl={<ClickableContent>{formatDollar({ num: token.market?.totalValueLocked?.value })}</ClickableContent>}
-          volume={<ClickableContent>{formatDollar({ num: token.market?.volume?.value })}</ClickableContent>}
+          tvl={
+            <ClickableContent>
+              {formatNumber(token.market?.totalValueLocked?.value, NumberType.FiatTokenStats)}
+            </ClickableContent>
+          }
+          volume={
+            <ClickableContent>{formatNumber(token.market?.volume?.value, NumberType.FiatTokenStats)}</ClickableContent>
+          }
           sparkLine={
             <SparkLine>
               <ParentSize>

src/utils/formatNumbers.ts

@@ -132,20 +132,3 @@ export const formatTransactionAmount = (num: number | undefined | null, maxDigit
   }
   return `${Number(num.toFixed(2)).toLocaleString(DEFAULT_LOCALE, { minimumFractionDigits: 2 })}`
 }
-
-// using a currency library here in case we want to add more in future
-export const formatAmount = (num: number | undefined, digits = 2) => {
-  if (num === 0) return '0'
-  if (!num) return '-'
-  if (num < 0.001) {
-    return '$<0.001'
-  }
-  return numbro(num).format({
-    average: true,
-    mantissa: num > 1000 ? 2 : digits,
-    abbreviations: {
-      million: 'M',
-      billion: 'B',
-    },
-  })
-}