feat: Number format for rate of pay (#278)

* Number format for rate of pay

* Apply to all number in popup

* Add unit tests

* Fix feedback

src/popup/components/ConnectWalletForm.tsx

@@ -7,7 +7,11 @@ import { Switch } from '@/popup/components/ui/Switch'
 import { Code } from '@/popup/components/ui/Code'
 import { connectWallet } from '@/popup/lib/messages'
 import { getWalletInformation } from '@/shared/helpers'
-import { charIsNumber, getCurrencySymbol } from '@/popup/lib/utils'
+import {
+  charIsNumber,
+  formatNumber,
+  getCurrencySymbol
+} from '@/popup/lib/utils'
 import { useForm } from 'react-hook-form'
 import { numericFormatter } from 'react-number-format'
 
@@ -130,16 +134,7 @@ export const ConnectWalletForm = ({ publicKey }: ConnectWalletFormProps) => {
           onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
             setValue(
               'amount',
-              numericFormatter(e.currentTarget.value, {
-                allowNegative: false,
-                valueIsNumericString: true,
-                allowLeadingZeros: false,
-                decimalSeparator: '.',
-                thousandSeparator: ',',
-                thousandsGroupStyle: 'thousand',
-                fixedDecimalScale: true,
-                decimalScale: currencySymbol.scale
-              })
+              formatNumber(+e.currentTarget.value, currencySymbol.scale)
             )
           }
         })}

src/popup/components/PayWebsiteForm.tsx

@@ -2,7 +2,11 @@ import { Button } from '@/popup/components/ui/Button'
 import { Input } from '@/popup/components/ui/Input'
 import { PopupStateContext } from '@/popup/lib/context'
 import { payWebsite } from '@/popup/lib/messages'
-import { getCurrencySymbol, charIsNumber } from '@/popup/lib/utils'
+import {
+  getCurrencySymbol,
+  charIsNumber,
+  formatNumber
+} from '@/popup/lib/utils'
 import React, { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import { numericFormatter } from 'react-number-format'
@@ -104,16 +108,7 @@ export const PayWebsiteForm = () => {
           onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
             setValue(
               'amount',
-              numericFormatter(e.currentTarget.value, {
-                allowNegative: false,
-                valueIsNumericString: true,
-                allowLeadingZeros: false,
-                decimalSeparator: '.',
-                thousandSeparator: ',',
-                thousandsGroupStyle: 'thousand',
-                fixedDecimalScale: true,
-                decimalScale: walletAddress.assetScale
-              })
+              formatNumber(+e.currentTarget.value, walletAddress.assetScale)
             )
           }
         })}

src/popup/components/WalletInformation.tsx

@@ -2,7 +2,11 @@ import { Input } from '@/popup/components/ui/Input'
 import { Label } from '@/popup/components/ui/Label'
 import React from 'react'
 import { Code } from '@/popup/components/ui/Code'
-import { getCurrencySymbol, transformBalance } from '@/popup/lib/utils'
+import {
+  formatNumber,
+  getCurrencySymbol,
+  transformBalance
+} from '@/popup/lib/utils'
 import { PopupStore } from '@/shared/types'
 import { Button } from '@/popup/components/ui/Button'
 import { disconnectWallet } from '@/popup/lib/messages'
@@ -40,8 +44,11 @@ export const WalletInformation = ({ info }: WalletInformationProps) => {
         label="Remaining balance"
         disabled={true}
         readOnly={true}
-        value={transformBalance(
-          info.amount?.value ?? '0',
+        value={formatNumber(
+          +transformBalance(
+            info.amount?.value ?? '0',
+            info.walletAddress?.assetScale ?? 2
+          ),
           info.walletAddress?.assetScale ?? 2
         )}
       />

src/popup/lib/utils.test.ts

@@ -0,0 +1,45 @@
+import { formatNumber } from './utils'
+
+describe('formatNumber', () => {
+  it('should display right format for integers', () => {
+    expect(formatNumber(5, 2)).toEqual('5.00')
+
+    expect(formatNumber(5, 4)).toEqual('5.00')
+
+    expect(formatNumber(5, 9)).toEqual('5.00')
+  })
+
+  it('should display right format for real numbers bigger than 1', () => {
+    expect(formatNumber(5.9, 2)).toEqual('5.90')
+
+    expect(formatNumber(5.09, 4)).toEqual('5.09')
+
+    expect(formatNumber(5.009, 4)).toEqual('5.009')
+
+    expect(formatNumber(5.0009, 4)).toEqual('5.0009')
+
+    expect(formatNumber(5.000009, 9)).toEqual('5.000009')
+
+    expect(formatNumber(5.000000009, 9)).toEqual('5.000000009')
+  })
+
+  it('should display right format for real numbers smaller than 1', () => {
+    expect(formatNumber(0.09, 2)).toEqual('0.09')
+
+    expect(formatNumber(0.0009, 4)).toEqual('0.0009')
+
+    expect(formatNumber(0.000000009, 9)).toEqual('0.000000009')
+
+    expect(formatNumber(0.00009, 9)).toEqual('0.00009')
+
+    expect(formatNumber(0.000000009, 9, true)).toEqual('9e-9')
+
+    expect(formatNumber(0.00009, 9, true)).toEqual('9e-5')
+
+    expect(formatNumber(0.0000109, 9, true)).toEqual('1.09e-5')
+
+    expect(formatNumber(0.000010009, 9, true)).toEqual('1.0009e-5')
+
+    expect(formatNumber(0.000100009, 9)).toEqual('0.000100009')
+  })
+})

src/popup/lib/utils.ts

@@ -29,3 +29,33 @@ export function roundWithPrecision(num: number, precision: number) {
   const multiplier = Math.pow(10, precision)
   return Math.round(num * multiplier) / multiplier
 }
+
+export function formatNumber(
+  value: number,
+  scale: number,
+  allowExponential = false
+): string {
+  // TO DO: handle scale 0
+
+  if (!value) return '0.00'
+  // to avoid floating point issues on multiplication
+  const pow2 = +(value * 100).toFixed(9)
+  const pow4 = +(value * 10 ** 4).toFixed(9)
+
+  if (scale <= 2 || (pow2 >= 1 && pow2 - Math.floor(pow2) === 0)) {
+    return value.toFixed(2)
+  } else if (scale >= 3 && scale <= 4) {
+    return value.toString()
+  } else {
+    if (pow4 >= 1 || !allowExponential) {
+      let fixedScale = 5
+      let powN = +(value * 10 ** fixedScale).toFixed(9)
+      while (powN - Math.floor(powN) > 0 && fixedScale < scale) {
+        ++fixedScale
+        powN = +(value * 10 ** fixedScale).toFixed(9)
+      }
+
+      return value.toFixed(fixedScale)
+    } else return value.toExponential()
+  }
+}

src/popup/pages/Home.tsx

@@ -4,7 +4,11 @@ import { WarningSign } from '@/popup/components/Icons'
 import { Slider } from '../components/ui/Slider'
 import { toggleWM, updateRateOfPay as updateRateOfPay_ } from '../lib/messages'
 import { Label } from '../components/ui/Label'
-import { getCurrencySymbol, roundWithPrecision } from '../lib/utils'
+import {
+  formatNumber,
+  getCurrencySymbol,
+  roundWithPrecision
+} from '../lib/utils'
 import { PayWebsiteForm } from '../components/PayWebsiteForm'
 import { debounceAsync } from '@/shared/helpers'
 import { Switch } from '../components/ui/Switch'
@@ -26,11 +30,9 @@ export const Component = () => {
 
   const rate = React.useMemo(() => {
     const r = Number(rateOfPay) / 10 ** walletAddress.assetScale
-    if (roundWithPrecision(r, 2) > 0) {
-      return r.toFixed(2)
-    }
+    const roundedR = roundWithPrecision(r, walletAddress.assetScale)
 
-    return r.toExponential()
+    return formatNumber(roundedR, walletAddress.assetScale, true)
   }, [rateOfPay, walletAddress.assetScale])
 
   const onRateChange = async (event: React.ChangeEvent<HTMLInputElement>) => {