fix: big number handling (#28)

package.json

@@ -27,22 +27,24 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@types/big.js": "^6.2.2",
     "@types/jest": "^27.4.1",
     "@types/node": "^12.20.37",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "dotenv": "^16.0.1",
     "eslint-config-react-app": "^7.0.0",
     "prettier": "^2.6.0",
-    "ts-jest": "^27.1.3",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "ts-jest": "^27.1.3"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fontsource/rubik": "^4.5.14",
     "@react-icons/all-files": "^4.1.0",
+    "big.js": "^6.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^4.0.0-alpha.20",

src/helpers/__tests__/common.test.ts

@@ -5,7 +5,7 @@ function setupParseNumberToBigInt(
   numStr: string,
   maxDigits?: number,
 ) {
-  expect(parseNumberToBigInt(parseFloat(numStr), maxDigits)).toEqual(
+  expect(parseNumberToBigInt(numStr, maxDigits)).toEqual(
     expectedBigInt,
   )
 }
@@ -15,6 +15,7 @@ describe("parseNumberToBigInt", () => {
     setupParseNumberToBigInt(BigInt(1000000000), "1.0")
     setupParseNumberToBigInt(BigInt(1000005599), "1.000005599")
     setupParseNumberToBigInt(BigInt(1000000), ".001")
+    setupParseNumberToBigInt(BigInt("1000000000000001000000000"), "1000000000000001")
     setupParseNumberToBigInt(BigInt(1), ".000000001")
     setupParseNumberToBigInt(BigInt(1), ".00001", 5)
     setupParseNumberToBigInt(BigInt(10000), ".1", 5)
@@ -37,6 +38,7 @@ describe("amountFormatter", () => {
     setupAmountFormatter("0.000000001", BigInt(1))
     setupAmountFormatter("1", BigInt(1000000000))
     setupAmountFormatter("120.000000005", BigInt(120000000005))
+    setupAmountFormatter("1,000,000,000,000,001", BigInt("1000000000000001000000000"))
     setupAmountFormatter("1.5", BigInt(150000), undefined, 5)
     setupAmountFormatter("155.55559", BigInt(15555559), undefined, 5)
     setupAmountFormatter("9,155.55559", BigInt(915555559), undefined, 5)

src/helpers/common.ts

@@ -1,3 +1,8 @@
+import Big from "big.js"
+
+// Big constructor will throw if argument is not a string or Big
+Big.strict = true
+
 const DEFAULT_MAX_DIGITS = 9
 
 export const makeShortId = (idString: string): string => {
@@ -7,20 +12,24 @@ export const makeShortId = (idString: string): string => {
 }
 
 export const parseNumberToBigInt = (
-  v: number,
+  v: string,
   maxDigits: number = DEFAULT_MAX_DIGITS,
-) => BigInt(Math.round(v * 10 ** maxDigits))
+) => {
+  const amount = Big(v)
+  const precision = Big(`1e${maxDigits}`)
+  const b = amount.times(precision).toFixed()
+  return BigInt(b)
+}
 
 export const amountFormatter = (
   amt: bigint,
   minDigits: number = 0,
   maxDigits: number = DEFAULT_MAX_DIGITS,
 ) => {
-  const amount = parseFloat(amt.toString()) / 10 ** maxDigits
-  const amountString = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: minDigits,
-    maximumFractionDigits: maxDigits,
-  }).format(amount)
-
-  return amountString
+  const precision = Big(`1e${-maxDigits}`)
+  const amount = Big(amt.toString()).times(precision)
+    return new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: minDigits,
+      maximumFractionDigits: maxDigits,
+    }).format(amount.toFixed() as any) // Typescript complains about the string parameter but it should be supported
 }