add example

KyberNetwork · Sep 11, 2023 · 63fcb53 · 63fcb53
1 parent c82a7d6
commit 63fcb53
Show file tree

Hide file tree

Showing 23 changed files with 151 additions and 148 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,21 +830,19 @@ 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
                 </Trans>
               ) : (
                 <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
@@ -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
@@ -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
@@ -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>
   )