split functions for value/currency

components/shared/FormatNumericValue.tsx

@@ -1,5 +1,5 @@
 import Decimal from 'decimal.js'
-import { formatNumericValue } from 'utils/numbers'
+import { formatCurrencyValue, formatNumericValue } from 'utils/numbers'
 
 const FormatNumericValue = ({
   value,
@@ -12,7 +12,13 @@ const FormatNumericValue = ({
   isUsd?: boolean
   roundUp?: boolean
 }) => {
-  return <span>{formatNumericValue(value, decimals, isUsd, roundUp)}</span>
+  return (
+    <span>
+      {isUsd
+        ? formatCurrencyValue(value, decimals)
+        : formatNumericValue(value, decimals, roundUp)}
+    </span>
+  )
 }
 
 export default FormatNumericValue

utils/numbers.ts

@@ -3,43 +3,54 @@ import Decimal from 'decimal.js'
 export const formatNumericValue = (
   value: number | string | Decimal,
   decimals?: number,
-  isUSD?: boolean,
   roundUp?: boolean
 ): string => {
   const numberValue = Number(value)
   let formattedValue
   if (numberValue > -0.0000000001 && numberValue < 0.000000001) {
-    formattedValue = isUSD ? '$0.00' : '0'
+    formattedValue = '0'
   } else if (decimals) {
-    formattedValue = isUSD
-      ? Intl.NumberFormat('en', {
-          minimumFractionDigits: decimals,
-          maximumFractionDigits: decimals,
-          style: 'currency',
-          currency: 'USD',
-        }).format(numberValue)
-      : roundUp
+    formattedValue = roundUp
       ? roundValue(numberValue, decimals, true)
       : roundValue(numberValue, decimals)
   } else if (Math.abs(numberValue) >= 1000) {
-    formattedValue = isUSD
-      ? usdFormatter0.format(numberValue)
-      : roundUp
+    formattedValue = roundUp
       ? roundValue(numberValue, 0, true)
       : roundValue(numberValue, 0)
   } else if (Math.abs(numberValue) >= 0.1) {
-    formattedValue = isUSD
-      ? usdFormatter2.format(numberValue)
-      : roundUp
+    formattedValue = roundUp
       ? roundValue(numberValue, 3, true)
       : roundValue(numberValue, 3)
   } else {
-    formattedValue = isUSD
-      ? usdFormatter3Sig.format(numberValue)
-      : roundUp
+    formattedValue = roundUp
       ? roundValue(numberValue, 9, true)
       : roundValue(numberValue, 9)
   }
+  return formattedValue
+}
+
+export const formatCurrencyValue = (
+  value: number | string | Decimal,
+  decimals?: number
+): string => {
+  const numberValue = Number(value)
+  let formattedValue
+  if (numberValue > -0.0000000001 && numberValue < 0.000000001) {
+    formattedValue = '$0.00'
+  } else if (decimals) {
+    formattedValue = Intl.NumberFormat('en', {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+      style: 'currency',
+      currency: 'USD',
+    }).format(numberValue)
+  } else if (Math.abs(numberValue) >= 1000) {
+    formattedValue = usdFormatter0.format(numberValue)
+  } else if (Math.abs(numberValue) >= 0.1) {
+    formattedValue = usdFormatter2.format(numberValue)
+  } else {
+    formattedValue = usdFormatter3Sig.format(numberValue)
+  }
 
   if (formattedValue === '-$0.00') return '$0.00'
   return formattedValue
@@ -50,17 +61,30 @@ const roundValue = (
   decimals: number,
   roundUp?: boolean
 ): string => {
-  const decimal = value instanceof Decimal ? value : new Decimal(value)
+  const decimalValue = value instanceof Decimal ? value : new Decimal(value)
   const roundMode = roundUp ? Decimal.ROUND_UP : Decimal.ROUND_FLOOR
-  return Number(decimal.toDecimalPlaces(decimals, roundMode)).toLocaleString(
-    undefined,
-    { maximumFractionDigits: decimals }
-  )
+  const roundedValue = decimalValue
+    .toDecimalPlaces(decimals, roundMode)
+    .toNumber()
+  if (decimals === 2) return digits2.format(roundedValue)
+  if (decimals === 3) return digits3.format(roundedValue)
+  if (decimals === 4) return digits4.format(roundedValue)
+  if (decimals === 5) return digits5.format(roundedValue)
+  if (decimals === 6) return digits6.format(roundedValue)
+  if (decimals === 7) return digits7.format(roundedValue)
+  if (decimals === 8) return digits8.format(roundedValue)
+  if (decimals === 9) return digits9.format(roundedValue)
+  return roundedValue.toLocaleString(undefined, {
+    maximumFractionDigits: decimals,
+  })
 }
 
 const digits2 = new Intl.NumberFormat('en', { maximumFractionDigits: 2 })
+const digits3 = new Intl.NumberFormat('en', { maximumFractionDigits: 3 })
+const digits4 = new Intl.NumberFormat('en', { maximumFractionDigits: 4 })
 const digits5 = new Intl.NumberFormat('en', { maximumFractionDigits: 5 })
 const digits6 = new Intl.NumberFormat('en', { maximumFractionDigits: 6 })
+const digits7 = new Intl.NumberFormat('en', { maximumFractionDigits: 7 })
 const digits8 = new Intl.NumberFormat('en', { maximumFractionDigits: 8 })
 const digits9 = new Intl.NumberFormat('en', { maximumFractionDigits: 9 })