feat(explorer-ui): formatAmount (#2956)

* `formatAmount`

* Show greater than minimum value if amount is zero (assume no bridge tx has absolute zero value)

packages/explorer-ui/components/misc/IconAndAmount.tsx

@@ -25,6 +25,8 @@ export const IconAndAmount = ({
     amount = formattedValue / (dec / 10 ** 6)
   }
 
+  const displayAmount = amount ? formatAmount(amount) : '< 0.001'
+
   return (
     <div className={`flex items-center ${className}`}>
       <div className="flex flex-row items-center text-white">
@@ -35,11 +37,11 @@ export const IconAndAmount = ({
           className={`${iconSize} min-w-[1rem] min-h-[1rem] inline rounded-full`}
         />
         <div
-          data-tooltip-content={amount}
+          data-tooltip-content={displayAmount}
           data-tooltip-id="amount"
           className="flex-1 pl-1 mr-1 text-white"
         >
-          {formatAmount(amount)}
+          {displayAmount}
         </div>
       </div>
       <span className="text-white">{tokenSymbol}</span>

packages/explorer-ui/utils/formatAmount.ts

@@ -1,21 +1,81 @@
-import numeral from 'numeral'
+interface FormatOptions {
+  fullAmount?: boolean
+  standardDigits?: number
+  useCompactNotation?: boolean
+  compactDigits?: number
+  minimumAmount?: number
+  roundingMode?: string
+}
+
+export const formatAmount = (
+  amount: string,
+  options?: FormatOptions
+): string => {
+  if (amount === '') {
+    return ''
+  }
+
+  const floatAmount = parseFloat(amount)
+
+  try {
+    if (!Number.isFinite(floatAmount)) {
+      throw new TypeError(`"${amount}" is not a finite number`)
+    }
+  } catch ({ name, message }) {
+    // console.error(name, message)
+    return amount
+  }
+
+  const fullAmount = options?.fullAmount ?? false
+  const standardDigits = options?.standardDigits ?? 4
+  const useCompactNotation = options?.useCompactNotation ?? true
+  const compactDigits = options?.compactDigits ?? (useCompactNotation ? 2 : 0)
+  const minimumAmount = options?.minimumAmount ?? 0.0001
+
+  const locales = 'en-UK'
+
+  if (!floatAmount) {
+    return '0.0'
+  }
+
+  if (fullAmount) {
+    return Intl.NumberFormat(locales).format(floatAmount)
+  }
+
+  if (floatAmount < minimumAmount) {
+    return `< ${minimumAmount}`
+  }
 
-export const formatAmount = (value) => {
-  numeral.nullFormat('--')
+  const absAmount = Math.abs(floatAmount)
+
+  if (absAmount < 0.0001) {
+    return Intl.NumberFormat(locales, {
+      maximumSignificantDigits: 1,
+    }).format(floatAmount)
+  }
+
+  if (absAmount < 1) {
+    return Intl.NumberFormat(locales, {
+      minimumFractionDigits: standardDigits,
+    }).format(floatAmount)
+  }
 
-  // Round up if the value is less than 0.001
-  if (value > 0 && value < 0.001) {
-    value = 0.001
+  if (absAmount < 1000) {
+    return Intl.NumberFormat(locales, {
+      minimumSignificantDigits: standardDigits,
+      maximumSignificantDigits: standardDigits,
+    }).format(floatAmount)
   }
 
-  let format
-  if (value >= 1000) {
-    format = '0,0' // No decimal places for values 1000 or greater
-  } else if (value < 0.01) {
-    format = '0,0.000' // Four decimal places for values less than 0.01
-  } else {
-    format = '0,0.00' // Two decimal places for all other values
+  if (absAmount < 1000000) {
+    return Intl.NumberFormat(locales, {
+      maximumFractionDigits: 0,
+    }).format(floatAmount)
   }
 
-  return numeral(value).format(format)
+  return Intl.NumberFormat(locales, {
+    minimumFractionDigits: compactDigits,
+    maximumFractionDigits: compactDigits,
+    notation: useCompactNotation ? 'compact' : 'standard',
+  }).format(floatAmount)
 }