Merge pull request sushi-labs#1433 from sushiswap/chore/formatted-number

chore: replace FormattedPrice w/ FormattedNumber & handle large numbers
rainlanguage · May 3, 2024 · d123999 · d123999
2 parents 8cbcc91 + 1db3f55
commit d123999
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 68 deletions.
diff --git a/apps/evm/package.json b/apps/evm/package.json
@@ -90,7 +90,6 @@
     "@types/lodash.once": "4.1.9",
     "@types/lodash.zip": "4.2.9",
     "@types/node": "20",
-    "@types/numeral": "2.0.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@types/react-slider": "1.3.1",

diff --git a/apps/evm/src/ui/pool/PositionView.tsx b/apps/evm/src/ui/pool/PositionView.tsx
@@ -31,7 +31,7 @@ import {
   classNames,
 } from '@sushiswap/ui'
 import { Button } from '@sushiswap/ui/components/button'
-import { FormattedPrice } from '@sushiswap/ui/components/formatted-price'
+import { FormattedNumber } from '@sushiswap/ui/components/formatted-number'
 import { SkeletonText } from '@sushiswap/ui/components/skeleton'
 import {
   getDefaultTTL,
@@ -478,7 +478,7 @@ const Component: FC<{ id: string }> = ({ id }) => {
                       title={
                         <>
                           1 {unwrapToken(currencyBase)?.symbol} ={' '}
-                          <FormattedPrice
+                          <FormattedNumber
                             number={(inverted
                               ? pool?.token1Price
                               : pool?.token0Price
@@ -525,7 +525,7 @@ const Component: FC<{ id: string }> = ({ id }) => {
                             '0'
                           ) : (
                             <>
-                              <FormattedPrice
+                              <FormattedNumber
                                 number={formatTickPrice({
                                   price: priceLower,
                                   atLimit: tickAtLimit,
@@ -605,7 +605,7 @@ const Component: FC<{ id: string }> = ({ id }) => {
                             '∞'
                           ) : (
                             <>
-                              <FormattedPrice
+                              <FormattedNumber
                                 number={formatTickPrice({
                                   price: priceUpper,
                                   atLimit: tickAtLimit,

diff --git a/apps/evm/src/ui/pool/PriceRangeCell.tsx b/apps/evm/src/ui/pool/PriceRangeCell.tsx
@@ -2,7 +2,7 @@
 
 import { ArrowSmLeftIcon, ArrowSmRightIcon } from '@heroicons/react-v1/solid'
 import { classNames } from '@sushiswap/ui'
-import { FormattedPrice } from '@sushiswap/ui/components/formatted-price'
+import { FormattedNumber } from '@sushiswap/ui/components/formatted-number'
 import { ConcentratedLiquidityPositionWithV3Pool } from '@sushiswap/wagmi'
 import { Row } from '@tanstack/react-table'
 import { FC, useMemo, useState } from 'react'
@@ -106,7 +106,7 @@ export const PriceRangeCell: FC<Row<ConcentratedLiquidityPositionWithV3Pool>> =
             {fullRange ? (
               '0'
             ) : (
-              <FormattedPrice
+              <FormattedNumber
                 number={formatTickPrice({
                   price: priceLower,
                   atLimit: tickAtLimit,
@@ -130,7 +130,7 @@ export const PriceRangeCell: FC<Row<ConcentratedLiquidityPositionWithV3Pool>> =
             {fullRange ? (
               '∞'
             ) : (
-              <FormattedPrice
+              <FormattedNumber
                 number={formatTickPrice({
                   price: priceUpper,
                   atLimit: tickAtLimit,
@@ -143,7 +143,7 @@ export const PriceRangeCell: FC<Row<ConcentratedLiquidityPositionWithV3Pool>> =
         </div>
         <span className="text-xs flex items-center gap-1 text-gray-900 dark:text-slate-500">
           Current:{' '}
-          <FormattedPrice
+          <FormattedNumber
             number={(inverted
               ? original.pool?.token1Price
               : original.pool?.token0Price

diff --git a/apps/evm/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx b/apps/evm/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx
@@ -19,7 +19,7 @@ import {
 } from '@sushiswap/ui'
 import { formatPercent, formatUSD } from 'sushi/format'
 
-import { FormattedPrice } from '@sushiswap/ui/components/formatted-price'
+import { FormattedNumber } from '@sushiswap/ui/components/formatted-number'
 import { SteerStrategyComponent } from '.'
 import { APRHoverCard } from '../../APRHoverCard'
 import { SteerAPRChart } from '../SteerAPRChart'
@@ -212,14 +212,14 @@ export const SteerBaseStrategy: SteerStrategyComponent = ({
             <Stat>
               <StatLabel size="sm">Minimum price</StatLabel>
               <StatValue size="sm">
-                <FormattedPrice number={priceExtremes.min} />{' '}
+                <FormattedNumber number={priceExtremes.min} />{' '}
                 {vault.token0.symbol}/{vault.token1.symbol}
               </StatValue>
             </Stat>
             <Stat>
               <StatLabel size="sm">Maximum price</StatLabel>
               <StatValue size="sm">
-                <FormattedPrice number={priceExtremes.max} />{' '}
+                <FormattedNumber number={priceExtremes.max} />{' '}
                 {vault.token0.symbol}/{vault.token1.symbol}
               </StatValue>
             </Stat>

diff --git a/apps/evm/src/ui/pool/columns.tsx b/apps/evm/src/ui/pool/columns.tsx
@@ -1,6 +1,7 @@
 import { Pool, Protocol } from '@sushiswap/client'
 import { AngleRewardsPool } from '@sushiswap/react-query'
 import {
+  FormattedNumber,
   NetworkIcon,
   Tooltip,
   TooltipContent,
@@ -485,14 +486,20 @@ export const TX_AMOUNT_IN_V2_COLUMN = (
   cell: ({ row }) => {
     switch (row.original.type) {
       case TransactionType.Swap:
-        return `${row.original.amountIn.toPrecision(2)} ${
-          row.original.tokenIn.symbol
-        }`
+        return (
+          <span>
+            <FormattedNumber number={row.original.amountIn.toPrecision(2)} />{' '}
+            {row.original.tokenIn.symbol}
+          </span>
+        )
       case TransactionType.Mint:
       case TransactionType.Burn:
-        return `${row.original.amount0.toPrecision(6)} ${
-          row.original.pool.token0.symbol
-        }`
+        return (
+          <span>
+            <FormattedNumber number={row.original.amount0.toPrecision(6)} />{' '}
+            {row.original.pool.token0.symbol}
+          </span>
+        )
     }
   },
   meta: {
@@ -508,14 +515,22 @@ export const TX_AMOUNT_OUT_V2_COLUMN = (
   cell: ({ row }) => {
     switch (row.original.type) {
       case TransactionType.Swap:
-        return `${Math.abs(row.original.amountOut).toFixed(2)} ${
-          row.original.tokenOut.symbol
-        }`
+        return (
+          <span>
+            <FormattedNumber
+              number={Math.abs(row.original.amountOut).toPrecision(2)}
+            />{' '}
+            {row.original.tokenOut.symbol}
+          </span>
+        )
       case TransactionType.Mint:
       case TransactionType.Burn:
-        return `${row.original.amount1.toFixed(2)} ${
-          row.original.pool.token1.symbol
-        }`
+        return (
+          <span>
+            <FormattedNumber number={row.original.amount1.toPrecision(2)} />{' '}
+            {row.original.pool.token1.symbol}
+          </span>
+        )
     }
   },
   meta: {
@@ -580,12 +595,22 @@ export const TX_AMOUNT_IN_V3_COLUMN = (
             ? [row.pool.token0, row.pool.token1]
             : [row.pool.token1, row.pool.token0]
 
-        return `${Math.abs(amounts[0]).toPrecision(6)} ${tokens[0].symbol}`
+        return (
+          <span>
+            <FormattedNumber number={Math.abs(amounts[0]).toPrecision(6)} />{' '}
+            {tokens[0].symbol}
+          </span>
+        )
       }
       case TransactionTypeV3.Mint:
       case TransactionTypeV3.Burn:
       case TransactionTypeV3.Collect:
-        return `${row.amount0.toPrecision(6)} ${row.pool.token0.symbol}`
+        return (
+          <span>
+            <FormattedNumber number={row.amount0.toPrecision(6)} />{' '}
+            {row.pool.token0.symbol}
+          </span>
+        )
     }
   },
   meta: {
@@ -611,12 +636,22 @@ export const TX_AMOUNT_OUT_V3_COLUMN = (
             ? [row.pool.token0, row.pool.token1]
             : [row.pool.token1, row.pool.token0]
 
-        return `${Math.abs(amounts[1]).toFixed(2)} ${tokens[1].symbol}`
+        return (
+          <span>
+            <FormattedNumber number={Math.abs(amounts[1]).toPrecision(2)} />{' '}
+            {tokens[1].symbol}
+          </span>
+        )
       }
       case TransactionTypeV3.Mint:
       case TransactionTypeV3.Burn:
       case TransactionTypeV3.Collect:
-        return `${row.amount1.toFixed(2)} ${row.pool.token1.symbol}`
+        return (
+          <span>
+            <FormattedNumber number={row.amount1.toPrecision(2)} />{' '}
+            {row.pool.token1.symbol}
+          </span>
+        )
     }
   },
   meta: {

diff --git a/apps/evm/src/ui/swap/simple/simple-swap-header.tsx b/apps/evm/src/ui/swap/simple/simple-swap-header.tsx
@@ -4,7 +4,7 @@ import { ArrowTrendingUpIcon } from '@heroicons/react/20/solid'
 import { usePrices } from '@sushiswap/react-query'
 import {
   Button,
-  FormattedPrice,
+  FormattedNumber,
   SkeletonText,
   typographyVariants,
 } from '@sushiswap/ui'
@@ -75,7 +75,7 @@ export const SimpleSwapHeader = () => {
               ({formatUSD(invert ? token0FiatPrice : token1FiatPrice)})
             </span>{' '}
             =
-            <FormattedPrice number={price} />{' '}
+            <FormattedNumber number={price} />{' '}
             {invert ? token1.symbol : token0.symbol}{' '}
             <span className="font-normal">
               ({formatUSD(invert ? token1FiatPrice : token0FiatPrice)})

diff --git a/packages/graph-client/package.json b/packages/graph-client/package.json
@@ -60,7 +60,6 @@
     "@sushiswap/typescript-config": "workspace:*",
     "@types/jest": "29.5.5",
     "@types/node": "20",
-    "@types/numeral": "2.0.2",
     "@wagmi/core": "2.6.17",
     "graphql": "16.6.0",
     "jest": "29.7.0",

diff --git a/packages/sushi/package.json b/packages/sushi/package.json
@@ -202,7 +202,7 @@
     "date-fns": "3.3.1",
     "decimal.js-light": "2.5.1",
     "lodash.flatmap": "4.5.0",
-    "numeral": "2.0.6",
+    "numbro": "2.5.0",
     "seedrandom": "3.0.5",
     "serialijse": "0.3.0",
     "tiny-invariant": "1.3.1",
@@ -216,7 +216,6 @@
     "@tsconfig/strictest": "2.0.2",
     "@types/big.js": "6.2.0",
     "@types/lodash.flatmap": "4.5.9",
-    "@types/numeral": "2.0.3",
     "@types/seedrandom": "3.0.1",
     "@wagmi/core": "2.6.17",
     "ts-node": "10.9.2",

diff --git a/packages/sushi/src/format/number.ts b/packages/sushi/src/format/number.ts
@@ -1,7 +1,19 @@
-import numeral from 'numeral'
+import numeral from 'numbro'
 
-export const formatNumber = (value: any) => {
-  return numeral(value).format('(0.00a)')
+export const formatNumber = (value: any, inputString = '0.[00]a') => {
+  if (typeof value === 'string') value = Number(value)
+
+  let negative = false
+  if (value < 0) {
+    negative = true
+    value = Math.abs(value)
+  }
+
+  if (value === 0) return '0.00'
+  if (value < 0.0001) return numeral(value).format('0.[000000]a')
+  if (value < 0.001) return numeral(value).format('0.[0000]a')
+  if (value < 0.01) return numeral(value).format('0.[000]a')
+  return `${negative ? '-' : ''}${numeral(value).format(inputString)}`
 }
 
 /**

diff --git a/packages/sushi/src/format/percent.ts b/packages/sushi/src/format/percent.ts
@@ -1,4 +1,4 @@
-import numeral from 'numeral'
+import numeral from 'numbro'
 
 export const formatPercent = (value: any) => {
   let negative = false

diff --git a/packages/sushi/src/format/price.ts b/packages/sushi/src/format/price.ts
@@ -1,4 +1,4 @@
-import numeral from 'numeral'
+import numeral from 'numbro'
 
 export const formatUSD = (
   value: string | number,

diff --git a/...ges/ui/src/components/formatted-price.tsx → ...es/ui/src/components/formatted-number.tsx b/...ges/ui/src/components/formatted-price.tsx → ...es/ui/src/components/formatted-number.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { withoutScientificNotation } from 'sushi'
+import { formatNumber, withoutScientificNotation } from 'sushi'
 
-interface FormattedPriceProps {
+interface FormattedNumberProps {
   number: string | undefined
 }
 
-const FormattedPrice: React.FC<FormattedPriceProps> = ({ number }) => {
+const FormattedNumber: React.FC<FormattedNumberProps> = ({ number }) => {
   if (typeof number === 'undefined') return undefined
 
   const numberStr = withoutScientificNotation(number)
@@ -28,7 +28,7 @@ const FormattedPrice: React.FC<FormattedPriceProps> = ({ number }) => {
     zeroGroups[0].length === fractionalPart.length
   ) {
     // If no zero groups found or less than or equal to 4 zeros, return regular rendering
-    return <span>{numberStr}</span>
+    return <span>{formatNumber(numberStr)}</span>
   }
 
   const zeroCount = zeroGroups[0].length
@@ -42,4 +42,4 @@ const FormattedPrice: React.FC<FormattedPriceProps> = ({ number }) => {
   )
 }
 
-export { FormattedPrice }
+export { FormattedNumber }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -23,7 +23,7 @@ export * from './dots'
 export * from './dropdown-menu'
 export * from './dropzone'
 export * from './explainer'
-export * from './formatted-price'
+export * from './formatted-number'
 export * from './form'
 export * from './global-footer'
 export * from './hover-card'