diff --git a/src/components/EarningAreaChart/TooltipContent.tsx b/src/components/EarningAreaChart/TooltipContent.tsx
index 3e64e42e4c..f3367de4f2 100644
--- a/src/components/EarningAreaChart/TooltipContent.tsx
+++ b/src/components/EarningAreaChart/TooltipContent.tsx
@@ -79,7 +79,7 @@ const Tokens: React.FC<TokensProps> = ({ tokens }) => {
                 lineHeight: '14px',
               }}
             >
-              {formatDisplayNumber({ value: token.amount })}
+              {formatDisplayNumber(token.amount, { significantDigits: 6 })}
             </Text>
           </Flex>
         )
@@ -153,7 +153,8 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>My Total Earnings</Trans>: {formatDisplayNumber({ value: dataEntry.totalValue, style: 'currency' })}
+        <Trans>My Total Earnings</Trans>:{' '}
+        {formatDisplayNumber(dataEntry.totalValue, { style: 'currency', significantDigits: 6 })}
       </Text>
 
       <Text
@@ -166,7 +167,8 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>Pool Fees</Trans>: {formatDisplayNumber({ value: dataEntry.poolFeesValue, style: 'currency' })}
+        <Trans>Pool Fees</Trans>:{' '}
+        {formatDisplayNumber(dataEntry.poolFeesValue, { style: 'currency', significantDigits: 6 })}
       </Text>
 
       <Text
@@ -179,7 +181,8 @@ const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
           whiteSpace: 'nowrap',
         }}
       >
-        <Trans>Farm Rewards</Trans>: {formatDisplayNumber({ value: dataEntry.farmRewardsValue, style: 'currency' })}
+        <Trans>Farm Rewards</Trans>:{' '}
+        {formatDisplayNumber(dataEntry.farmRewardsValue, { style: 'currency', significantDigits: 6 })}
       </Text>
 
       <Flex
diff --git a/src/components/EarningAreaChart/index.tsx b/src/components/EarningAreaChart/index.tsx
index ad95204d70..d006eb687f 100644
--- a/src/components/EarningAreaChart/index.tsx
+++ b/src/components/EarningAreaChart/index.tsx
@@ -35,7 +35,7 @@ const CustomizedLabel = (props: any) => {
           fill={theme.subText}
           textAnchor="middle"
         >
-          {formatDisplayNumber({ value, style: 'currency', fractionDigits: 3 })}
+          {formatDisplayNumber(value, { style: 'currency', fractionDigits: 3 })}
         </text>
       )}
     </>
@@ -83,7 +83,7 @@ const EarningAreaChart: React.FC<Props> = ({ data, setHoverValue = EMPTY_FUNCTIO
           tickLine={false}
           stroke={theme.subText}
           tickFormatter={(value: any, _index: number) =>
-            formatDisplayNumber({ value, style: 'currency', fractionDigits: 2 })
+            formatDisplayNumber(value, { style: 'currency', fractionDigits: 2 })
           }
           width={54}
         />
diff --git a/src/components/EarningPieChart/index.tsx b/src/components/EarningPieChart/index.tsx
index 5a1d99e8ad..26dca83f20 100644
--- a/src/components/EarningPieChart/index.tsx
+++ b/src/components/EarningPieChart/index.tsx
@@ -145,8 +145,8 @@ const Legend: React.FC<LegendProps> = ({
             whiteSpace: 'nowrap',
           }}
         >
-          {formatDisplayNumber({ value, style: 'currency', fractionDigits: 2 })} (
-          {formatDisplayNumber({ value: percent / 100, style: 'percent', fractionDigits: 3 })})
+          {formatDisplayNumber(value, { style: 'currency', fractionDigits: 2 })} (
+          {formatDisplayNumber(percent / 100, { style: 'percent', fractionDigits: 3 })})
         </Text>
       </Flex>
     </Flex>
diff --git a/src/components/Header/web3/SelectNetwork.tsx b/src/components/Header/web3/SelectNetwork.tsx
index 6af4257e3d..5cb6b18179 100644
--- a/src/components/Header/web3/SelectNetwork.tsx
+++ b/src/components/Header/web3/SelectNetwork.tsx
@@ -75,7 +75,7 @@ function SelectNetwork(): JSX.Element | null {
   const userEthBalance = useNativeBalance()
   const labelContent = useMemo(() => {
     if (!userEthBalance) return networkInfo.name
-    const balanceFixedStr = formatDisplayNumber({ value: userEthBalance, significantDigits: 6 })
+    const balanceFixedStr = formatDisplayNumber(userEthBalance, { significantDigits: 6 })
     return `${balanceFixedStr} ${NativeCurrencies[chainId].symbol}`
   }, [userEthBalance, chainId, networkInfo])
   const walletSupportsChain = useWalletSupportedChains()
diff --git a/src/components/ProAmm/ProAmmPriceRangeConfirm.tsx b/src/components/ProAmm/ProAmmPriceRangeConfirm.tsx
index e83dace7c8..c1a48aadcb 100644
--- a/src/components/ProAmm/ProAmmPriceRangeConfirm.tsx
+++ b/src/components/ProAmm/ProAmmPriceRangeConfirm.tsx
@@ -80,8 +80,7 @@ export default function ProAmmPriceRangeConfirm({
           </Text>
           <RowFixed>
             <Text fontSize={'12px'} fontWeight="500" style={{ textAlign: 'right' }}>
-              1 {baseCurrency.symbol} = {formatDisplayNumber({ value: price, significantDigits: 6 })}{' '}
-              {quoteCurrency.symbol}
+              1 {baseCurrency.symbol} = {formatDisplayNumber(price, { significantDigits: 6 })} {quoteCurrency.symbol}
             </Text>
             <span onClick={handleRateChange} style={{ marginLeft: '2px', cursor: 'pointer' }}>
               <RotateSwapIcon rotated={baseCurrency !== currency0} size={16} />
diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx
index ee3dbc7cf4..6bbc3825e8 100644
--- a/src/components/SwapForm/TradeSummary.tsx
+++ b/src/components/SwapForm/TradeSummary.tsx
@@ -70,8 +70,7 @@ type TooltipTextOfSwapFeeProps = {
   feeAmountText: string
 }
 export const TooltipTextOfSwapFee: React.FC<TooltipTextOfSwapFeeProps> = ({ feeBips, feeAmountText }) => {
-  const feePercent = formatDisplayNumber({
-    value: Number(feeBips) / Number(BIPS_BASE.toString()),
+  const feePercent = formatDisplayNumber(Number(feeBips) / Number(BIPS_BASE.toString()), {
     style: 'percent',
     fractionDigits: 2,
   })
diff --git a/src/components/YieldPools/FarmingPoolAPRCell.tsx b/src/components/YieldPools/FarmingPoolAPRCell.tsx
index 9ffc678f61..83c1d376a6 100644
--- a/src/components/YieldPools/FarmingPoolAPRCell.tsx
+++ b/src/components/YieldPools/FarmingPoolAPRCell.tsx
@@ -44,7 +44,7 @@ export const APRTooltipContent = ({
           <Text as="span" fontSize={'14px'}>
             Total APR:{' '}
             <Text as="span" color={theme.text} fontWeight={500}>
-              {formatDisplayNumber({ value: (poolAPR + maxFarmAPR) / 100, style: 'percent', fractionDigits: 2 })}
+              {formatDisplayNumber((poolAPR + maxFarmAPR) / 100, { style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Box
@@ -66,7 +66,7 @@ export const APRTooltipContent = ({
         <Text as="span">
           Pool APR:{' '}
           <Text as="span" color={theme.text} fontWeight={500}>
-            {formatDisplayNumber({ value: poolAPR / 100, style: 'percent', fractionDigits: 2 })}
+            {formatDisplayNumber(poolAPR / 100, { style: 'percent', fractionDigits: 2 })}
           </Text>
         </Text>
         <Text
@@ -91,7 +91,7 @@ export const APRTooltipContent = ({
           <Text as="span" color={theme.warning}>
             Farm APR:{' '}
             <Text as="span" fontWeight={500}>
-              {formatDisplayNumber({ value: farmAPR / 100, style: 'percent', fractionDigits: 2 })}
+              {formatDisplayNumber(farmAPR / 100, { style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Text
@@ -117,7 +117,7 @@ export const APRTooltipContent = ({
           <Text as="span" color={theme.warning}>
             Farm APR:{' '}
             <Text as="span" fontWeight={500}>
-              {formatDisplayNumber({ value: farmV2APR / 100, style: 'percent', fractionDigits: 2 })}
+              {formatDisplayNumber(farmV2APR / 100, { style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Text
@@ -192,7 +192,7 @@ const FarmingPoolAPRCell: React.FC<Props> = ({
         text={<APRTooltipContent farmAPR={farmAPR} farmV2APR={farmV2APR} poolAPR={poolAPR} />}
       >
         <Text as="span" marginRight="4px">
-          {formatDisplayNumber({ value: (poolAPR + maxFarmAPR) / 100, style: 'percent', fractionDigits: 2 })}
+          {formatDisplayNumber((poolAPR + maxFarmAPR) / 100, { style: 'percent', fractionDigits: 2 })}
         </Text>
         <Info size={14} />
       </MouseoverTooltip>
@@ -218,9 +218,7 @@ export const ClassicFarmingPoolAPRCell = ({ poolAPR, farm }: { poolAPR: number;
         gap: '4px',
       }}
     >
-      <Text as="span">
-        {formatDisplayNumber({ value: (poolAPR + farmAPR) / 100, style: 'percent', fractionDigits: 2 })}
-      </Text>
+      <Text as="span">{formatDisplayNumber((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>
diff --git a/src/components/swapv2/TradePrice.tsx b/src/components/swapv2/TradePrice.tsx
index 6555e20fb8..be8b493881 100644
--- a/src/components/swapv2/TradePrice.tsx
+++ b/src/components/swapv2/TradePrice.tsx
@@ -24,7 +24,7 @@ export default function TradePrice({ price, label, icon, style = {}, color }: Tr
   const [showInverted, setShowInverted] = useState<boolean>(false)
   let formattedPrice
   try {
-    formattedPrice = formatDisplayNumber({ value: showInverted ? price?.invert() : price, significantDigits: 7 })
+    formattedPrice = formatDisplayNumber(showInverted ? price?.invert() : price, { significantDigits: 7 })
   } catch (error) {}
 
   const show = Boolean(price?.baseCurrency && price?.quoteCurrency && formattedPrice)
diff --git a/src/pages/AddLiquidityV2/components/NewPoolNote.tsx b/src/pages/AddLiquidityV2/components/NewPoolNote.tsx
index 766e228329..bf1bc4bc85 100644
--- a/src/pages/AddLiquidityV2/components/NewPoolNote.tsx
+++ b/src/pages/AddLiquidityV2/components/NewPoolNote.tsx
@@ -43,12 +43,10 @@ function NewPoolNote({
                 maxCharacters={24}
                 text={
                   !invertMarketPrice
-                    ? `1 ${baseCurrency?.symbol} = ${formatDisplayNumber({
-                        value: marketPrice,
+                    ? `1 ${baseCurrency?.symbol} = ${formatDisplayNumber(marketPrice, {
                         significantDigits: 6,
                       })} ${quoteCurrency?.symbol}`
-                    : `1 ${quoteCurrency?.symbol} = ${formatDisplayNumber({
-                        value: 1 / marketPrice,
+                    : `1 ${quoteCurrency?.symbol} = ${formatDisplayNumber(1 / marketPrice, {
                         significantDigits: 6,
                       })} ${baseCurrency?.symbol}`
                 }
diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
index 70e48216ab..6b6de01c6f 100644
--- a/src/pages/AddLiquidityV2/index.tsx
+++ b/src/pages/AddLiquidityV2/index.tsx
@@ -806,11 +806,11 @@ export default function AddLiquidity() {
             <TYPE.black ml="12px" fontSize="12px" flex={1}>
               <Trans>
                 Note: A very small amount of your liquidity about{' '}
-                {formatDisplayNumber({ value: amountUnlockUSD, style: 'currency', significantDigits: 6 })}{' '}
+                {formatDisplayNumber(amountUnlockUSD, { style: 'currency', significantDigits: 6 })}{' '}
                 <Text as="span" color={theme.text}>
-                  ({formatDisplayNumber({ value: amountUnlocks[Field.CURRENCY_A], significantDigits: 6 })}{' '}
+                  ({formatDisplayNumber(amountUnlocks[Field.CURRENCY_A], { significantDigits: 6 })}{' '}
                   {amountUnlocks[Field.CURRENCY_A].currency.symbol},{' '}
-                  {formatDisplayNumber({ value: amountUnlocks[Field.CURRENCY_B], significantDigits: 6 })}{' '}
+                  {formatDisplayNumber(amountUnlocks[Field.CURRENCY_B], { significantDigits: 6 })}{' '}
                   {amountUnlocks[Field.CURRENCY_B].currency.symbol})
                 </Text>{' '}
                 will be used to first initialize the pool. Read more{' '}
@@ -830,10 +830,9 @@ export default function AddLiquidity() {
               {noLiquidity ? (
                 <Trans>
                   The pool’s current price of 1 {baseCurrency.symbol} ={' '}
-                  {formatDisplayNumber({ value: invertPrice ? price.invert() : price, significantDigits: 4 })}{' '}
+                  {formatDisplayNumber(invertPrice ? price.invert() : price, { significantDigits: 4 })}{' '}
                   {quoteCurrency.symbol} deviates from the market price (1 {baseCurrency.symbol} ={' '}
-                  {formatDisplayNumber({
-                    value: usdPrices[tokenA.wrapped.address] / usdPrices[tokenB.wrapped.address],
+                  {formatDisplayNumber(usdPrices[tokenA.wrapped.address] / usdPrices[tokenB.wrapped.address], {
                     significantDigits: 4,
                   })}{' '}
                   {quoteCurrency.symbol}). You might have high impermanent loss after the pool is created
@@ -841,10 +840,9 @@ export default function AddLiquidity() {
               ) : (
                 <Trans>
                   The pool’s current price of 1 {baseCurrency.symbol} ={' '}
-                  {formatDisplayNumber({ value: invertPrice ? price.invert() : price, significantDigits: 4 })}{' '}
+                  {formatDisplayNumber(invertPrice ? price.invert() : price, { significantDigits: 4 })}{' '}
                   {quoteCurrency.symbol} deviates from the market price (1 {baseCurrency.symbol} ={' '}
-                  {formatDisplayNumber({
-                    value: usdPrices[tokenA.wrapped.address] / usdPrices[tokenB.wrapped.address],
+                  {formatDisplayNumber(usdPrices[tokenA.wrapped.address] / usdPrices[tokenB.wrapped.address], {
                     significantDigits: 4,
                   })}{' '}
                   {quoteCurrency.symbol}). You might have high impermanent loss after you add liquidity to this pool
@@ -1102,8 +1100,7 @@ export default function AddLiquidity() {
                   <Text fontWeight={500} textAlign="center" fontSize={12}>
                     <HoverInlineText
                       maxCharacters={20}
-                      text={formatDisplayNumber({
-                        value: invertPrice ? price.invert() : price,
+                      text={formatDisplayNumber(invertPrice ? price.invert() : price, {
                         significantDigits: 6,
                       })}
                     />
@@ -1546,10 +1543,12 @@ export default function AddLiquidity() {
                             <RowFixed>
                               <HoverInlineText
                                 maxCharacters={24}
-                                text={`1 ${baseCurrency?.symbol} = ${formatDisplayNumber({
-                                  value: invertPrice ? price.invert() : price,
-                                  significantDigits: 6,
-                                })} ${quoteCurrency?.symbol}`}
+                                text={`1 ${baseCurrency?.symbol} = ${formatDisplayNumber(
+                                  invertPrice ? price.invert() : price,
+                                  {
+                                    significantDigits: 6,
+                                  },
+                                )} ${quoteCurrency?.symbol}`}
                               />
                             </RowFixed>
                           </TYPE.main>
diff --git a/src/pages/GrantProgram/SingleProgram/LeaderBoardSection/index.tsx b/src/pages/GrantProgram/SingleProgram/LeaderBoardSection/index.tsx
index 2dbaf5aeac..a12f8ea50b 100644
--- a/src/pages/GrantProgram/SingleProgram/LeaderBoardSection/index.tsx
+++ b/src/pages/GrantProgram/SingleProgram/LeaderBoardSection/index.tsx
@@ -42,7 +42,7 @@ const rankByConfigs: RankByConfig[] = [
   },
   {
     extracter: (p: ProjectRanking) => {
-      return formatDisplayNumber({ value: p.totalVolume, style: 'currency', significantDigits: 10, fractionDigits: 0 })
+      return formatDisplayNumber(p.totalVolume, { style: 'currency', significantDigits: 10, fractionDigits: 0 })
     },
     param: 'total_volume',
     title: t`Trading Volume`,
diff --git a/src/pages/GrantProgram/SingleProgram/Stats.tsx b/src/pages/GrantProgram/SingleProgram/Stats.tsx
index cd9c520fd7..5a1d28b5d6 100644
--- a/src/pages/GrantProgram/SingleProgram/Stats.tsx
+++ b/src/pages/GrantProgram/SingleProgram/Stats.tsx
@@ -124,9 +124,7 @@ const Stats: React.FC<Props> = ({ participants, trades, volume }) => {
       <StatsCard
         icon={<CampaignVolume />}
         value={
-          volume
-            ? formatDisplayNumber({ value: volume, style: 'currency', fractionDigits: 2, significantDigits: 6 })
-            : volume
+          volume ? formatDisplayNumber(volume, { style: 'currency', fractionDigits: 2, significantDigits: 6 }) : volume
         }
         title="Total Trading Volume"
       />
diff --git a/src/pages/MyEarnings/ClassicPools/SinglePool/Position.tsx b/src/pages/MyEarnings/ClassicPools/SinglePool/Position.tsx
index e2b9dcf2a0..103b399e42 100644
--- a/src/pages/MyEarnings/ClassicPools/SinglePool/Position.tsx
+++ b/src/pages/MyEarnings/ClassicPools/SinglePool/Position.tsx
@@ -59,13 +59,14 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
 
   const myLiquidityBalance =
     poolEarning.liquidityTokenBalanceIncludingStake !== '0' && poolEarning.pool.totalSupply !== '0'
-      ? formatDisplayNumber({
-          value:
-            (+poolEarning.liquidityTokenBalanceIncludingStake * +poolEarning.pool.reserveUSD) /
+      ? formatDisplayNumber(
+          (+poolEarning.liquidityTokenBalanceIncludingStake * +poolEarning.pool.reserveUSD) /
             +poolEarning.pool.totalSupply,
-          style: 'currency',
-          significantDigits: 6,
-        })
+          {
+            style: 'currency',
+            significantDigits: 6,
+          },
+        )
       : '--'
 
   const myShareOfPool = +poolEarning.liquidityTokenBalanceIncludingStake / +poolEarning.pool.totalSupply
@@ -98,11 +99,13 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
   )
 
   const liquidityStaked = +poolEarning.liquidityTokenBalanceIncludingStake - +poolEarning.liquidityTokenBalance
-  const myStakedBalance = formatDisplayNumber({
-    value: (liquidityStaked * +poolEarning.pool.reserveUSD) / +poolEarning.pool.totalSupply,
-    style: 'currency',
-    significantDigits: 6,
-  })
+  const myStakedBalance = formatDisplayNumber(
+    (liquidityStaked * +poolEarning.pool.reserveUSD) / +poolEarning.pool.totalSupply,
+    {
+      style: 'currency',
+      significantDigits: 6,
+    },
+  )
 
   const stakedShare = liquidityStaked / +poolEarning.pool.totalSupply
 
@@ -158,15 +161,13 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
                     <Flex alignItems="center">
                       <CurrencyLogo currency={unwrappedToken(token0)} size="16px" />
                       <Text fontSize={12} marginLeft="4px">
-                        {formatDisplayNumber({ value: pooledToken0, significantDigits: 6 })}{' '}
-                        {unwrappedToken(token0).symbol}
+                        {formatDisplayNumber(pooledToken0, { significantDigits: 6 })} {unwrappedToken(token0).symbol}
                       </Text>
                     </Flex>
                     <Flex alignItems="center" marginTop="8px">
                       <CurrencyLogo currency={unwrappedToken(token1)} size="16px" />
                       <Text fontSize={12} marginLeft="4px">
-                        {formatDisplayNumber({ value: pooledToken1, significantDigits: 6 })}{' '}
-                        {unwrappedToken(token1).symbol}
+                        {formatDisplayNumber(pooledToken1, { significantDigits: 6 })} {unwrappedToken(token1).symbol}
                       </Text>
                     </Flex>
                   </div>
@@ -188,15 +189,13 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
                     <Flex alignItems="center">
                       <CurrencyLogo currency={unwrappedToken(token0)} size="16px" />
                       <Text fontSize={12} marginLeft="4px">
-                        {formatDisplayNumber({ value: stakedToken0, significantDigits: 6 })}{' '}
-                        {unwrappedToken(token0).symbol}
+                        {formatDisplayNumber(stakedToken0, { significantDigits: 6 })} {unwrappedToken(token0).symbol}
                       </Text>
                     </Flex>
                     <Flex alignItems="center" marginTop="8px">
                       <CurrencyLogo currency={unwrappedToken(token1)} size="16px" />
                       <Text fontSize={12} marginLeft="4px">
-                        {formatDisplayNumber({ value: stakedToken1, significantDigits: 6 })}{' '}
-                        {unwrappedToken(token1).symbol}
+                        {formatDisplayNumber(stakedToken1, { significantDigits: 6 })} {unwrappedToken(token1).symbol}
                       </Text>
                     </Flex>
                   </div>
@@ -208,18 +207,15 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
 
         <Column
           label={t`Total LP Tokens`}
-          value={formatDisplayNumber({ value: poolEarning.liquidityTokenBalanceIncludingStake, significantDigits: 6 })}
+          value={formatDisplayNumber(poolEarning.liquidityTokenBalanceIncludingStake, { significantDigits: 6 })}
         />
 
         <Column
           label={t`Share of Pool`}
-          value={formatDisplayNumber({ value: myShareOfPool, style: 'percent', fractionDigits: 2 })}
+          value={formatDisplayNumber(myShareOfPool, { style: 'percent', fractionDigits: 2 })}
         />
 
-        <Column
-          label={t`Staked LP Tokens`}
-          value={formatDisplayNumber({ value: liquidityStaked, significantDigits: 6 })}
-        />
+        <Column label={t`Staked LP Tokens`} value={formatDisplayNumber(liquidityStaked, { significantDigits: 6 })} />
       </Box>
     </Flex>
   )
diff --git a/src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx b/src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx
index 6f2335d46c..3047e1709f 100644
--- a/src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx
+++ b/src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx
@@ -126,13 +126,14 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
   )
   const myLiquidityBalance =
     poolEarning.liquidityTokenBalanceIncludingStake !== '0' && poolEarning.pool.totalSupply !== '0'
-      ? formatDisplayNumber({
-          value:
-            (+poolEarning.liquidityTokenBalanceIncludingStake * +poolEarning.pool.reserveUSD) /
+      ? formatDisplayNumber(
+          (+poolEarning.liquidityTokenBalanceIncludingStake * +poolEarning.pool.reserveUSD) /
             +poolEarning.pool.totalSupply,
-          style: 'currency',
-          significantDigits: 4,
-        })
+          {
+            style: 'currency',
+            significantDigits: 4,
+          },
+        )
       : '--'
 
   const here = (
@@ -267,8 +268,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
           <MobileStat mobileView={mobileView}>
             <StatItem
               label="TVL"
-              value={formatDisplayNumber({
-                value: poolEarning.pool.reserveUSD,
+              value={formatDisplayNumber(poolEarning.pool.reserveUSD, {
                 style: 'currency',
                 significantDigits: 4,
               })}
@@ -285,8 +285,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
               value={
                 <Flex alignItems="center">
                   <Text as="span" marginRight="4px" color={theme.apr}>
-                    {formatDisplayNumber({
-                      value: (+poolEarning.pool.apr + +poolEarning.pool.farmApr) / 100,
+                    {formatDisplayNumber((+poolEarning.pool.apr + +poolEarning.pool.farmApr) / 100, {
                       style: 'percent',
                       fractionDigits: 2,
                     })}
@@ -310,16 +309,17 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
             />
             <StatItem
               label={t`Volume (24h)`}
-              value={formatDisplayNumber({
-                value: Number(poolEarning.pool.volumeUsd) - Number(poolEarning.pool.volumeUsdOneDayAgo),
-                style: 'currency',
-                significantDigits: 4,
-              })}
+              value={formatDisplayNumber(
+                Number(poolEarning.pool.volumeUsd) - Number(poolEarning.pool.volumeUsdOneDayAgo),
+                {
+                  style: 'currency',
+                  significantDigits: 4,
+                },
+              )}
             />
             <StatItem
               label={t`Fees (24h)`}
-              value={formatDisplayNumber({
-                value: Number(poolEarning.pool.feeUSD) - Number(poolEarning.pool.feesUsdOneDayAgo),
+              value={formatDisplayNumber(Number(poolEarning.pool.feeUSD) - Number(poolEarning.pool.feesUsdOneDayAgo), {
                 style: 'currency',
                 significantDigits: 4,
               })}
@@ -327,7 +327,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
             <StatItem label={t`My Liquidity`} value={myLiquidityBalance} />
             <StatItem
               label={t`My Earnings`}
-              value={formatDisplayNumber({ value: poolEarningToday, style: 'currency', significantDigits: 4 })}
+              value={formatDisplayNumber(poolEarningToday, { style: 'currency', significantDigits: 4 })}
             />
           </MobileStat>
 
@@ -475,21 +475,19 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
 
           <div>
             <Text>
-              {formatDisplayNumber({
-                value: ampLiquidity,
+              {formatDisplayNumber(ampLiquidity, {
                 style: 'currency',
                 significantDigits: 7,
               })}
             </Text>
             <Text color={theme.subText} fontSize={12} marginTop="4px">
-              {formatDisplayNumber({ value: poolEarning.pool.reserveUSD, style: 'currency', significantDigits: 7 })}
+              {formatDisplayNumber(poolEarning.pool.reserveUSD, { style: 'currency', significantDigits: 7 })}
             </Text>
           </div>
 
           <Flex alignItems="center">
             <Text as="span" marginRight="4px" color={theme.apr}>
-              {formatDisplayNumber({
-                value: (+poolEarning.pool.apr + +poolEarning.pool.farmApr) / 100,
+              {formatDisplayNumber((+poolEarning.pool.apr + +poolEarning.pool.farmApr) / 100, {
                 style: 'percent',
                 fractionDigits: 2,
               })}
@@ -507,21 +505,19 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
           </Flex>
 
           <Text>
-            {formatDisplayNumber({
-              value: Number(poolEarning.pool.volumeUsd) - Number(poolEarning.pool.volumeUsdOneDayAgo),
+            {formatDisplayNumber(Number(poolEarning.pool.volumeUsd) - Number(poolEarning.pool.volumeUsdOneDayAgo), {
               style: 'currency',
               significantDigits: 4,
             })}
           </Text>
           <Text>
-            {formatDisplayNumber({
-              value: Number(poolEarning.pool.feeUSD) - Number(poolEarning.pool.feesUsdOneDayAgo),
+            {formatDisplayNumber(Number(poolEarning.pool.feeUSD) - Number(poolEarning.pool.feesUsdOneDayAgo), {
               style: 'currency',
               significantDigits: 4,
             })}
           </Text>
           <Text>{myLiquidityBalance}</Text>
-          <Text>{formatDisplayNumber({ value: poolEarningToday, style: 'currency', significantDigits: 4 })}</Text>
+          <Text>{formatDisplayNumber(poolEarningToday, { style: 'currency', significantDigits: 4 })}</Text>
 
           <Flex sx={{ gap: '8px' }} justifyContent="flex-end">
             <ButtonIcon
diff --git a/src/pages/MyEarnings/EarningsBreakdownPanel.tsx b/src/pages/MyEarnings/EarningsBreakdownPanel.tsx
index 144ab104db..eafe9bf4a0 100644
--- a/src/pages/MyEarnings/EarningsBreakdownPanel.tsx
+++ b/src/pages/MyEarnings/EarningsBreakdownPanel.tsx
@@ -141,7 +141,7 @@ const EarningsBreakdownPanel: React.FC<Props> = ({ isLoading, data, className, h
                 ? tokens[item.chainId]?.[item.address]?.symbol || ''
                 : item.symbol,
           }))}
-          totalValue={formatDisplayNumber({ value: data.totalValue, style: 'currency', significantDigits: 3 })}
+          totalValue={formatDisplayNumber(data.totalValue, { style: 'currency', significantDigits: 3 })}
         />
       )}
     </Wrapper>
diff --git a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
index bfa4293e2c..c05561cdc3 100644
--- a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
+++ b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
@@ -273,8 +273,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
           <MobileStat mobileView={mobileView}>
             <StatItem
               label="TVL"
-              value={formatDisplayNumber({
-                value: poolEarning.totalValueLockedUsd,
+              value={formatDisplayNumber(poolEarning.totalValueLockedUsd, {
                 style: 'currency',
                 significantDigits: 7,
                 fractionDigits: 4,
@@ -304,7 +303,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
                   }
                 >
                   <Text as="span" marginRight="4px" color={theme.apr}>
-                    {formatDisplayNumber({ value: (poolAPR + farmAPR) / 100, style: 'percent', fractionDigits: 2 })}
+                    {formatDisplayNumber((poolAPR + farmAPR) / 100, { style: 'percent', fractionDigits: 2 })}
                   </Text>
                   <Info size={14} color={theme.apr} />
                 </MouseoverTooltip>
@@ -312,31 +311,28 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
             />
             <StatItem
               label={t`Volume (24h)`}
-              value={formatDisplayNumber({
-                value: Number(poolEarning.volumeUsd) - Number(poolEarning.volumeUsdOneDayAgo),
+              value={formatDisplayNumber(Number(poolEarning.volumeUsd) - Number(poolEarning.volumeUsdOneDayAgo), {
                 style: 'currency',
                 significantDigits: 4,
               })}
             />
             <StatItem
               label={t`Fees (24h)`}
-              value={formatDisplayNumber({
-                value: Number(poolEarning.feesUsd) - Number(poolEarning.feesUsdOneDayAgo),
+              value={formatDisplayNumber(Number(poolEarning.feesUsd) - Number(poolEarning.feesUsdOneDayAgo), {
                 style: 'currency',
                 significantDigits: 4,
               })}
             />
             <StatItem
               label={t`My Liquidity`}
-              value={formatDisplayNumber({
-                value: myLiquidityUsd,
+              value={formatDisplayNumber(myLiquidityUsd, {
                 style: 'currency',
                 significantDigits: 4,
               })}
             />
             <StatItem
               label={t`My Earnings`}
-              value={formatDisplayNumber({ value: poolEarningToday, style: 'currency', significantDigits: 4 })}
+              value={formatDisplayNumber(poolEarningToday, { style: 'currency', significantDigits: 4 })}
             />
           </MobileStat>
 
@@ -436,8 +432,7 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
           </Flex>
         </Flex>
         <Text>
-          {formatDisplayNumber({
-            value: poolEarning.totalValueLockedUsd,
+          {formatDisplayNumber(poolEarning.totalValueLockedUsd, {
             style: 'currency',
             significantDigits: 7,
             fractionDigits: 4,
@@ -459,27 +454,25 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
           }
         >
           <Text as="span" marginRight="4px" color={theme.apr}>
-            {formatDisplayNumber({ value: (poolAPR + farmAPR) / 100, style: 'percent', fractionDigits: 2 })}
+            {formatDisplayNumber((poolAPR + farmAPR) / 100, { style: 'percent', fractionDigits: 2 })}
           </Text>
           <Info size={14} color={theme.apr} />
         </MouseoverTooltip>
 
         <Text>
-          {formatDisplayNumber({
-            value: Number(poolEarning.volumeUsd) - Number(poolEarning.volumeUsdOneDayAgo),
+          {formatDisplayNumber(Number(poolEarning.volumeUsd) - Number(poolEarning.volumeUsdOneDayAgo), {
             style: 'currency',
             significantDigits: 4,
           })}
         </Text>
         <Text>
-          {formatDisplayNumber({
-            value: Number(poolEarning.feesUsd) - Number(poolEarning.feesUsdOneDayAgo),
+          {formatDisplayNumber(Number(poolEarning.feesUsd) - Number(poolEarning.feesUsdOneDayAgo), {
             style: 'currency',
             significantDigits: 4,
           })}
         </Text>
-        <Text>{formatDisplayNumber({ value: myLiquidityUsd, style: 'currency', significantDigits: 4 })}</Text>
-        <Text>{formatDisplayNumber({ value: poolEarningToday, style: 'currency', significantDigits: 4 })}</Text>
+        <Text>{formatDisplayNumber(myLiquidityUsd, { style: 'currency', significantDigits: 4 })}</Text>
+        <Text>{formatDisplayNumber(poolEarningToday, { style: 'currency', significantDigits: 4 })}</Text>
 
         <Flex sx={{ gap: '8px' }} justifyContent="flex-end">
           <ButtonIcon
diff --git a/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx b/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx
index 2a655a9deb..bd52dd9e73 100644
--- a/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx
+++ b/src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx
@@ -62,9 +62,7 @@ const EarningView: React.FC<CommonProps> = props => {
         <HoverDropdown
           disabled={!earningToday?.totalValue}
           anchor={
-            <Value>
-              {earningToday ? formatDisplayNumber({ value: earningToday.totalValue, style: 'currency' }) : '--'}
-            </Value>
+            <Value>{formatDisplayNumber(earningToday?.totalValue, { style: 'currency', significantDigits: 6 })}</Value>
           }
           text={
             <>
@@ -78,7 +76,7 @@ const EarningView: React.FC<CommonProps> = props => {
                 >
                   <Logo srcs={[token.logoUrl]} style={{ flex: '0 0 16px', height: '16px', borderRadius: '999px' }} />
                   <Text fontSize={12} sx={{ whiteSpace: 'nowrap' }}>
-                    {formatDisplayNumber({ value: token.amount })} {token.symbol}
+                    {formatDisplayNumber(token.amount, { significantDigits: 6 })} {token.symbol}
                   </Text>
                 </Flex>
               ))}
@@ -98,8 +96,8 @@ const EarningView: React.FC<CommonProps> = props => {
         </Row>
 
         <Row>
-          <ValueAPR>{myPoolAPR ? myPoolAPR.toFixed(2) + '%' : '--'}</ValueAPR>
-          <ValueAPR>{myFarmAPR ? myFarmAPR.toFixed(2) + '%' : '--'}</ValueAPR>
+          <ValueAPR>{formatDisplayNumber(myPoolAPR / 100, { style: 'percent', fractionDigits: 2 })}</ValueAPR>
+          <ValueAPR>{formatDisplayNumber(myFarmAPR / 100, { style: 'percent', fractionDigits: 2 })}</ValueAPR>
         </Row>
       </Column>
 
diff --git a/src/pages/MyEarnings/ElasticPools/SinglePosition/PositionView.tsx b/src/pages/MyEarnings/ElasticPools/SinglePosition/PositionView.tsx
index eb667b6f1c..b51b52c3e7 100644
--- a/src/pages/MyEarnings/ElasticPools/SinglePosition/PositionView.tsx
+++ b/src/pages/MyEarnings/ElasticPools/SinglePosition/PositionView.tsx
@@ -199,7 +199,7 @@ const PositionView: React.FC<CommonProps> = props => {
 
         <Row>
           <HoverDropdown
-            anchor={<Value>{formatDisplayNumber({ value: liquidityInUsd, style: 'currency' })}</Value>}
+            anchor={<Value>{formatDisplayNumber(liquidityInUsd, { style: 'currency', significantDigits: 6 })}</Value>}
             disabled={!liquidityInUsd || Number.isNaN(liquidityInUsd)}
             text={
               <div>
@@ -221,7 +221,9 @@ const PositionView: React.FC<CommonProps> = props => {
 
           {myStakedBalance ? (
             <HoverDropdown
-              anchor={<Value>{formatDisplayNumber({ value: myStakedBalance, style: 'currency' })}</Value>}
+              anchor={
+                <Value>{formatDisplayNumber(myStakedBalance, { style: 'currency', significantDigits: 6 })}</Value>
+              }
               text={
                 <div>
                   <Flex alignItems="center">
@@ -274,7 +276,7 @@ const PositionView: React.FC<CommonProps> = props => {
             anchor={
               <Text as="span" fontSize="16px" fontWeight={500} lineHeight={'20px'}>
                 {+positionEarning.pendingRewardUSD
-                  ? formatDisplayNumber({ value: positionEarning.pendingRewardUSD, style: 'currency' })
+                  ? formatDisplayNumber(positionEarning.pendingRewardUSD, { style: 'currency', significantDigits: 6 })
                   : '--'}
               </Text>
             }
diff --git a/src/pages/MyEarnings/ShareModal.tsx b/src/pages/MyEarnings/ShareModal.tsx
index 50bd046021..426565de64 100644
--- a/src/pages/MyEarnings/ShareModal.tsx
+++ b/src/pages/MyEarnings/ShareModal.tsx
@@ -281,7 +281,7 @@ export default function ShareModal({ isOpen, setIsOpen, title, value, poolInfo }
               {renderPool()}
 
               <Text fontSize={isSharePc ? 50 : 30} fontWeight="500" color={theme.primary}>
-                {formatDisplayNumber({ value, style: 'currency' })}
+                {formatDisplayNumber(value, { style: 'currency', fractionDigits: 2 })}
               </Text>
             </InnerContent>
           </InnerContentWrapper>
diff --git a/src/pages/MyEarnings/TotalEarningsAndChainSelect.tsx b/src/pages/MyEarnings/TotalEarningsAndChainSelect.tsx
index 22fd82fd33..764c1cee8d 100644
--- a/src/pages/MyEarnings/TotalEarningsAndChainSelect.tsx
+++ b/src/pages/MyEarnings/TotalEarningsAndChainSelect.tsx
@@ -136,11 +136,10 @@ const TotalEarningsAndChainSelect: React.FC<Props> = ({ totalEarningToday, total
     return <Value>--</Value>
   }
 
-  const totalValue = formatDisplayNumber({ value: totalEarningToday, style: 'currency', significantDigits: 6 })
+  const totalValue = formatDisplayNumber(totalEarningToday, { style: 'currency', significantDigits: 6 })
   const diffPercent =
     totalEarningYesterday && !Number.isNaN(totalEarningYesterday)
-      ? formatDisplayNumber({
-          value: totalEarningToday / totalEarningYesterday - 1,
+      ? formatDisplayNumber(totalEarningToday / totalEarningYesterday - 1, {
           style: 'percent',
           fractionDigits: 2,
           significantDigits: 6,
diff --git a/src/utils/fee.ts b/src/utils/fee.ts
index 33d90db40e..daba1d412a 100644
--- a/src/utils/fee.ts
+++ b/src/utils/fee.ts
@@ -40,8 +40,9 @@ export const calculateFeeFromBuildData = (
   const feeUsd = buildData.feeUsd
 
   return {
-    feeAmount: formatDisplayNumber({ value: fee, significantDigits: 10 }),
-    feeAmountUsd: feeUsd && feeUsd !== '0' ? formatDisplayNumber({ value: feeUsd, style: 'currency' }) : '',
+    feeAmount: formatDisplayNumber(fee, { significantDigits: 10 }),
+    feeAmountUsd:
+      feeUsd && feeUsd !== '0' ? formatDisplayNumber(feeUsd, { style: 'currency', significantDigits: 10 }) : '',
     currency: currencyAmountToTakeFee.currency,
   }
 }
diff --git a/src/utils/formatTickPrice.ts b/src/utils/formatTickPrice.ts
index 1f2ebe62d2..fcd6fa47c9 100644
--- a/src/utils/formatTickPrice.ts
+++ b/src/utils/formatTickPrice.ts
@@ -2,7 +2,7 @@ import { Currency, Price } from '@kyberswap/ks-sdk-core'
 
 import { Bound } from 'state/mint/proamm/type'
 
-import { formatPrice } from './formatCurrencyAmount'
+import { formatDisplayNumber } from './numbers'
 
 export function formatTickPrice(
   price: Price<Currency, Currency> | undefined,
@@ -17,5 +17,5 @@ export function formatTickPrice(
   if (!price && placeholder !== undefined) {
     return placeholder
   }
-  return formatPrice(price, 5)
+  return formatDisplayNumber(price, { significantDigits: 6 })
 }
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index a6984742b9..f3865eabab 100644
--- a/src/utils/numbers.ts
+++ b/src/utils/numbers.ts
@@ -82,7 +82,7 @@ const log10 = (n: Fraction): number => {
   return Math.log10(parsedN)
 }
 
-const parseNum = (value: FormatParam['value']): Fraction => {
+const parseNum = (value: FormatValue): Fraction => {
   try {
     if (
       typeof value === 'string' ||
@@ -111,24 +111,46 @@ const parseNum = (value: FormatParam['value']): Fraction => {
   }
 }
 
-type FormatParam = {
-  value: string | number | bigint | JSBI | Fraction | undefined | null
+type FormatValue = string | number | bigint | JSBI | Fraction | undefined | null
+type FormatOptions = {
   style?: 'decimal' | 'currency' | 'percent'
   fractionDigits?: number // usually for percent  & currency styles
   significantDigits?: number // usually for decimal style
   fallback?: string
   allowNegative?: boolean
 }
+interface RequiredFraction extends FormatOptions {
+  fractionDigits: number // usually for percent  & currency styles
+}
+interface RequiredSignificant extends FormatOptions {
+  significantDigits: number // usually for percent  & currency styles
+}
 
 // todo: deprecated others format functions and all .toSignificant() to only use this function
-export const formatDisplayNumber = ({
-  value,
-  style = 'decimal',
-  significantDigits,
-  fractionDigits,
-  fallback = '--',
-  allowNegative = false,
-}: FormatParam): string => {
+/**
+ * Format number to displaying to the UI
+ * @example
+ * // returns 0.2
+ * formatDisplayNumber(0.2, { style: 'decimal', significantDigits: 6 })
+ * @example
+ * // returns $0.2
+ * formatDisplayNumber(0.2, { style: 'currency', significantDigits: 6 })
+ * @example
+ * // returns 20%
+ * formatDisplayNumber(0.2, { style: 'percent', significantDigits: 6 })
+ * @example
+ * @returns {string} Returns the formatted number in string
+ */
+export const formatDisplayNumber = (
+  value: FormatValue,
+  {
+    style = 'decimal',
+    significantDigits,
+    fractionDigits,
+    fallback = '--',
+    allowNegative = false,
+  }: RequiredFraction | RequiredSignificant,
+): string => {
   const currency = style === 'currency' ? '$' : ''
   const percent = style === 'percent' ? '%' : ''
   const fallbackResult = `${currency}${fallback}${percent}`
@@ -147,7 +169,7 @@ export const formatDisplayNumber = ({
     const decimal = shownFraction.toSignificant(30).split('.')[1]
     const negative = shownFraction.lessThan(BIG_INT_ZERO) ? '-' : ''
     const numberOfLeadingZeros = -Math.floor(
-      log10(shownFraction.lessThan(0) ? shownFraction.multiply(-1) : shownFraction) + 1,
+      log10(shownFraction.lessThan(0) ? shownFraction.invert() : shownFraction) + 1,
     )
     const slicedDecimal = decimal
       .replace(/^0+/, '')
@@ -164,7 +186,9 @@ export const formatDisplayNumber = ({
       return `${negative}${currency}0.0${subscripts}${slicedDecimal}${percent}`
     }
 
-    return `${negative}${currency}0${slicedDecimal.length ? '.' + slicedDecimal : ''}${percent}`
+    return `${negative}${currency}0${
+      slicedDecimal.length ? '.' + '0'.repeat(numberOfLeadingZeros) + slicedDecimal : ''
+    }${percent}`
   }
 
   const formatter = Intl.NumberFormat('en-US', {