improvement: subscript decimals

.github/workflows/pr.yaml

@@ -114,7 +114,7 @@ jobs:
           VITE_TAG: ${{ needs.prepare.outputs.image_tag }}
           CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }}
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: yarn build-adpr
+        run: yarn build-prod
 
       - name: Docker build and push
         uses: docker/build-push-action@v2

src/components/EarningAreaChart/TooltipContent.tsx

@@ -7,26 +7,7 @@ import styled from 'styled-components'
 import Logo, { NetworkLogo } from 'components/Logo'
 import useTheme from 'hooks/useTheme'
 import { EarningStatsTick } from 'types/myEarnings'
-import { formattedNum } from 'utils'
-
-const formatUSDValue = (v: number) => {
-  if (v === 0) {
-    return '$0'
-  }
-
-  if (v < 0.0001) {
-    return '< $0.0001'
-  }
-
-  const formatter = Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    notation: 'compact',
-    maximumSignificantDigits: 4,
-  })
-
-  return formatter.format(v)
-}
+import { formatDisplayNumber } from 'utils/numbers'
 
 const TokensWrapper = styled.div`
   display: flex;
@@ -37,10 +18,6 @@ const TokensWrapper = styled.div`
   font-weight: 500;
 `
 
-const formatTokenAmount = (a: number | string) => {
-  return formattedNum(String(a), false)
-}
-
 type TokensProps = {
   tokens: EarningStatsTick['tokens']
 }
@@ -102,7 +79,7 @@ const Tokens: React.FC<TokensProps> = ({ tokens }) => {
                 lineHeight: '14px',
               }}
             >
-              {formatTokenAmount(token.amount)}
+              {formatDisplayNumber({ value: token.amount })}
             </Text>
           </Flex>
         )
@@ -176,7 +153,7 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>My Total Earnings</Trans>: {formatUSDValue(dataEntry.totalValue)}
+        <Trans>My Total Earnings</Trans>: {formatDisplayNumber({ value: dataEntry.totalValue, style: 'currency' })}
       </Text>
 
       <Text
@@ -189,7 +166,7 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>Pool Fees</Trans>: {formatUSDValue(dataEntry.poolFeesValue)}
+        <Trans>Pool Fees</Trans>: {formatDisplayNumber({ value: dataEntry.poolFeesValue, style: 'currency' })}
       </Text>
 
       <Text
@@ -202,7 +179,7 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>Farm Rewards</Trans>: {formatUSDValue(dataEntry.farmRewardsValue)}
+        <Trans>Farm Rewards</Trans>: {formatDisplayNumber({ value: dataEntry.farmRewardsValue, style: 'currency' })}
       </Text>
 
       <Flex

src/components/EarningAreaChart/index.tsx

@@ -7,10 +7,9 @@ import useTheme from 'hooks/useTheme'
 import { TimePeriod } from 'pages/MyEarnings/MyEarningsOverTimePanel/TimePeriodSelect'
 import KyberLogo from 'pages/TrueSightV2/components/chart/KyberLogo'
 import { EarningStatsTick } from 'types/myEarnings'
-import { toFixed } from 'utils/numbers'
+import { formatDisplayNumber } from 'utils/numbers'
 
 import TooltipContent from './TooltipContent'
-import { formatUSDValue } from './utils'
 
 const labelGapByTimePeriod: Record<TimePeriod, number> = {
   ['7D']: isMobile ? 2 : 1,
@@ -36,53 +35,13 @@ const CustomizedLabel = (props: any) => {
           fill={theme.subText}
           textAnchor="middle"
         >
-          {formatUSDValue(value)}
+          {formatDisplayNumber({ value, style: 'currency', fractionDigits: 3 })}
         </text>
       )}
     </>
   )
 }
 
-const subscriptMap: { [key: string]: string } = {
-  '0': '₀',
-  '1': '₁',
-  '2': '₂',
-  '3': '₃',
-  '4': '₄',
-  '5': '₅',
-  '6': '₆',
-  '7': '₇',
-  '8': '₈',
-  '9': '₉',
-}
-
-const formatter = (value: string) => {
-  const num = parseFloat(value)
-  const numberOfZero = -Math.floor(Math.log10(num) + 1)
-
-  if (num > 0 && num < 1 && numberOfZero > 2) {
-    const temp = Number(toFixed(num).split('.')[1]).toString()
-
-    return `$0.0${numberOfZero
-      .toString()
-      .split('')
-      .map(item => subscriptMap[item])
-      .join('')}${temp.substring(0, 2)}`
-  }
-
-  const formatter = Intl.NumberFormat('en-US', {
-    notation: num >= 1000 ? 'compact' : 'standard',
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    minimumSignificantDigits: 1,
-    maximumSignificantDigits: 2,
-  })
-
-  return formatter.format(num)
-}
-
 type Props = {
   period: TimePeriod
   setHoverValue?: React.Dispatch<React.SetStateAction<number | null>>
@@ -123,7 +82,9 @@ const EarningAreaChart: React.FC<Props> = ({ data, setHoverValue = EMPTY_FUNCTIO
           axisLine={false}
           tickLine={false}
           stroke={theme.subText}
-          tickFormatter={(value: any, _index: number) => formatter(String(value))}
+          tickFormatter={(value: any, _index: number) =>
+            formatDisplayNumber({ value, style: 'currency', fractionDigits: 2 })
+          }
           width={54}
         />
         <Customized component={KyberLogo} />

src/components/EarningPieChart/index.tsx

@@ -11,41 +11,7 @@ import Logo, { NetworkLogo } from 'components/Logo'
 import { EMPTY_ARRAY } from 'constants/index'
 import useTheme from 'hooks/useTheme'
 import { Loading } from 'pages/ProAmmPool/ContentLoader'
-
-const formatUSDValue = (v: string) => {
-  const num = Number(v)
-
-  if (num === 0) {
-    return '$0'
-  }
-
-  if (num < 0.01) {
-    return '< $0.01'
-  }
-
-  const formatter = Intl.NumberFormat('en-US', {
-    notation: 'compact',
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: num < 0.1 ? 2 : 1,
-  })
-
-  return formatter.format(num)
-}
-
-const formatPercent = (num: number) => {
-  if (num < 0.01) {
-    return '< 0.01%'
-  }
-
-  const formatter = Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  })
-
-  return formatter.format(num) + '%'
-}
+import { formatDisplayNumber } from 'utils/numbers'
 
 const LegendsWrapper = styled.div`
   display: flex;
@@ -179,7 +145,8 @@ const Legend: React.FC<LegendProps> = ({
             whiteSpace: 'nowrap',
           }}
         >
-          {formatUSDValue(value)} ({formatPercent(percent)})
+          {formatDisplayNumber({ value, style: 'currency', fractionDigits: 2 })} (
+          {formatDisplayNumber({ value: percent / 100, style: 'percent', fractionDigits: 3 })})
         </Text>
       </Flex>
     </Flex>

src/components/Header/web3/SelectNetwork.tsx

@@ -16,6 +16,7 @@ import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks'
 import { useIsDarkMode } from 'state/user/hooks'
 import { useNativeBalance } from 'state/wallet/hooks'
+import { formatDisplayNumber } from 'utils/numbers'
 
 const NetworkSwitchContainer = styled.div`
   display: flex;
@@ -74,13 +75,8 @@ function SelectNetwork(): JSX.Element | null {
   const userEthBalance = useNativeBalance()
   const labelContent = useMemo(() => {
     if (!userEthBalance) return networkInfo.name
-    const balanceFixedStr = userEthBalance.lessThan(1000 * 10 ** NativeCurrencies[chainId].decimals) // less than 1000
-      ? userEthBalance.lessThan(10 ** NativeCurrencies[chainId].decimals) // less than 1
-        ? parseFloat(userEthBalance.toSignificant(6)).toFixed(6)
-        : parseFloat(userEthBalance.toExact()).toFixed(4)
-      : parseFloat(userEthBalance.toExact()).toFixed(2)
-    const balanceFixed = Number(balanceFixedStr)
-    return `${balanceFixed} ${NativeCurrencies[chainId].symbol}`
+    const balanceFixedStr = formatDisplayNumber({ value: userEthBalance, significantDigits: 6 })
+    return `${balanceFixedStr} ${NativeCurrencies[chainId].symbol}`
   }, [userEthBalance, chainId, networkInfo])
   const walletSupportsChain = useWalletSupportedChains()
   const disableSelectNetwork = walletSupportsChain.length <= 1

src/components/ProAmm/ProAmmPriceRangeConfirm.tsx

@@ -15,8 +15,8 @@ import useTheme from 'hooks/useTheme'
 import { Bound } from 'state/mint/proamm/type'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { ExternalLink, TYPE } from 'theme'
-import { toSignificantOrMaxIntegerPart } from 'utils/formatCurrencyAmount'
 import { formatTickPrice } from 'utils/formatTickPrice'
+import { formatDisplayNumber } from 'utils/numbers'
 import { checkWarningSlippage, formatSlippage } from 'utils/slippage'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 
@@ -80,7 +80,8 @@ export default function ProAmmPriceRangeConfirm({
           </Text>
           <RowFixed>
             <Text fontSize={'12px'} fontWeight="500" style={{ textAlign: 'right' }}>
-              1 {baseCurrency.symbol} = {toSignificantOrMaxIntegerPart(price, 6)} {quoteCurrency.symbol}
+              1 {baseCurrency.symbol} = {formatDisplayNumber({ value: price, significantDigits: 6 })}{' '}
+              {quoteCurrency.symbol}
             </Text>
             <span onClick={handleRateChange} style={{ marginLeft: '2px', cursor: 'pointer' }}>
               <RotateSwapIcon rotated={baseCurrency !== currency0} size={16} />

src/components/SwapForm/TradeSummary.tsx

@@ -20,6 +20,7 @@ import { ExternalLink, TYPE } from 'theme'
 import { DetailedRouteSummary } from 'types/route'
 import { formattedNum } from 'utils'
 import { minimumAmountAfterSlippage } from 'utils/currencyAmount'
+import { formatDisplayNumber } from 'utils/numbers'
 import { checkPriceImpact, formatPriceImpact } from 'utils/prices'
 
 const IconWrapper = styled.div<{ $flip: boolean }>`
@@ -64,22 +65,16 @@ const Wrapper = styled.div.attrs<WrapperProps>(props => ({
   }
 `
 
-const formatPercent = (v: number) => {
-  const formatter = Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-    style: 'percent',
-  })
-
-  return formatter.format(v)
-}
-
 type TooltipTextOfSwapFeeProps = {
   feeBips: string | undefined
   feeAmountText: string
 }
 export const TooltipTextOfSwapFee: React.FC<TooltipTextOfSwapFeeProps> = ({ feeBips, feeAmountText }) => {
-  const feePercent = formatPercent(Number(feeBips) / Number(BIPS_BASE.toString()))
+  const feePercent = formatDisplayNumber({
+    value: Number(feeBips) / Number(BIPS_BASE.toString()),
+    style: 'percent',
+    fractionDigits: 2,
+  })
   const hereLink = (
     <ExternalLink href="https://docs.kyberswap.com/kyberswap-solutions/kyberswap-interface/user-guides/instantly-swap-at-superior-rates#swap-fees-supporting-transactions-on-low-trading-volume-chains">
       <b>

src/components/YieldPools/FarmingPoolAPRCell.tsx

@@ -15,6 +15,7 @@ import { useElasticFarms } from 'state/farms/elastic/hooks'
 import { useTokenPrices } from 'state/tokenPrices/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 import { useFarmApr } from 'utils/dmm'
+import { formatDisplayNumber } from 'utils/numbers'
 
 export const APRTooltipContent = ({
   poolAPR,
@@ -43,7 +44,7 @@ export const APRTooltipContent = ({
           <Text as="span" fontSize={'14px'}>
             Total APR:{' '}
             <Text as="span" color={theme.text} fontWeight={500}>
-              {(poolAPR + maxFarmAPR).toFixed(2)}%
+              {formatDisplayNumber({ value: (poolAPR + maxFarmAPR) / 100, style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Box
@@ -65,7 +66,7 @@ export const APRTooltipContent = ({
         <Text as="span">
           Pool APR:{' '}
           <Text as="span" color={theme.text} fontWeight={500}>
-            {poolAPR.toFixed(2)}%
+            {formatDisplayNumber({ value: poolAPR / 100, style: 'percent', fractionDigits: 2 })}
           </Text>
         </Text>
         <Text
@@ -90,7 +91,7 @@ export const APRTooltipContent = ({
           <Text as="span" color={theme.warning}>
             Farm APR:{' '}
             <Text as="span" fontWeight={500}>
-              {farmAPR.toFixed(2)}%
+              {formatDisplayNumber({ value: farmAPR / 100, style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Text
@@ -116,7 +117,7 @@ export const APRTooltipContent = ({
           <Text as="span" color={theme.warning}>
             Farm APR:{' '}
             <Text as="span" fontWeight={500}>
-              {farmV2APR.toFixed(2)}%
+              {formatDisplayNumber({ value: farmV2APR / 100, style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Text
@@ -191,7 +192,7 @@ const FarmingPoolAPRCell: React.FC<Props> = ({
         text={<APRTooltipContent farmAPR={farmAPR} farmV2APR={farmV2APR} poolAPR={poolAPR} />}
       >
         <Text as="span" marginRight="4px">
-          {(poolAPR + maxFarmAPR).toFixed(2)}%
+          {formatDisplayNumber({ value: (poolAPR + maxFarmAPR) / 100, style: 'percent', fractionDigits: 2 })}%
         </Text>
         <Info size={14} />
       </MouseoverTooltip>
@@ -217,7 +218,9 @@ export const ClassicFarmingPoolAPRCell = ({ poolAPR, farm }: { poolAPR: number;
         gap: '4px',
       }}
     >
-      <Text as="span">{(poolAPR + farmAPR).toFixed(2)}%</Text>
+      <Text as="span">
+        {formatDisplayNumber({ value: (poolAPR + farmAPR) / 100, style: 'percent', fractionDigits: 2 })}%
+      </Text>
       <MouseoverTooltip width="fit-content" text={<APRTooltipContent farmAPR={farmAPR} poolAPR={poolAPR} />}>
         <MoneyBag size={16} color={theme.apr} />
       </MouseoverTooltip>

src/components/swapv2/TradePrice.tsx

@@ -7,6 +7,7 @@ import { CSSProperties } from 'styled-components'
 
 import useTheme from 'hooks/useTheme'
 import { useCurrencyConvertedToNative } from 'utils/dmm'
+import { formatDisplayNumber } from 'utils/numbers'
 
 import { Dots, StyledBalanceMaxMini } from './styleds'
 
@@ -23,7 +24,7 @@ export default function TradePrice({ price, label, icon, style = {}, color }: Tr
   const [showInverted, setShowInverted] = useState<boolean>(false)
   let formattedPrice
   try {
-    formattedPrice = showInverted ? price?.invert()?.toSignificant(6) : price?.toSignificant(6)
+    formattedPrice = formatDisplayNumber({ value: showInverted ? price?.invert() : price, significantDigits: 7 })
   } catch (error) {}
 
   const show = Boolean(price?.baseCurrency && price?.quoteCurrency && formattedPrice)