Merge pull request #6 from cyyber/main

Fix for incorrect balance shown in some cases

Author: cyyber

package-lock.json

@@ -2,7 +2,7 @@
   "name": "zond-web3-wallet",
   "description": "A browser extension, for creating accounts, signing transactions and sending transactions over the zond blockchain.",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -50,6 +50,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
+    "bignumber.js": "^4.0.4",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package.json

@@ -30,9 +30,9 @@ describe("getOptimalTokenBalance", () => {
     expect(getOptimalTokenBalance(balance)).toBe(tokenBalance);
   });
 
-  it("should return the balance 1787372.5556 if the balance is 1787372.5556", () => {
-    const balance = "1787372.5556";
-    const tokenBalance = "1787372.5556 ZND";
+  it("should return the balance 1,787,372.5556 if the balance is 1787372.55569", () => {
+    const balance = "1787372.55569";
+    const tokenBalance = "1,787,372.5556 ZND";
 
     expect(getOptimalTokenBalance(balance)).toBe(tokenBalance);
   });
@@ -72,6 +72,27 @@ describe("getOptimalTokenBalance", () => {
     expect(getOptimalTokenBalance(balance)).toBe(tokenBalance);
   });
 
+  it("should return the balance 10,000.0 if the balance is 10000", () => {
+    const balance = "10000";
+    const tokenBalance = "10,000.0 ZOND";
+
+    expect(getOptimalTokenBalance(balance, "ZOND")).toBe(tokenBalance);
+  });
+
+  it("should return the balance 100,000.0 if the balance is 100000", () => {
+    const balance = "100000";
+    const tokenBalance = "100,000.0 ZOND";
+
+    expect(getOptimalTokenBalance(balance, "ZOND")).toBe(tokenBalance);
+  });
+
+  it("should return the balance 0.0 if the balance is a text `Zond`", () => {
+    const balance = "Zond";
+    const tokenBalance = "0.0 ZND";
+
+    expect(getOptimalTokenBalance(balance)).toBe(tokenBalance);
+  });
+
   it("should return the balance 1.9999 if the balance is 1.999999999999999999", () => {
     const balance = "1.999999999999999999";
     const tokenBalance = "1.9999 ZND";
@@ -92,4 +113,25 @@ describe("getOptimalTokenBalance", () => {
 
     expect(getOptimalTokenBalance(balance, "XYZ")).toBe(tokenBalance);
   });
+
+  it("should return the balance 3,453.5678 with the passed token symbol if the balance is 3453.567889", () => {
+    const balance = "3453.567889";
+    const tokenBalance = "3,453.5678 ZYZ";
+
+    expect(getOptimalTokenBalance(balance, "ZYZ")).toBe(tokenBalance);
+  });
+
+  it("should return the balance 100,000,000.0 with the passed token symbol if the balance is 100000000", () => {
+    const balance = "100000000";
+    const tokenBalance = "100,000,000.0 TOK";
+
+    expect(getOptimalTokenBalance(balance, "TOK")).toBe(tokenBalance);
+  });
+
+  it("should return the balance 23,000,000,000.0 if the balance is 23000000000", () => {
+    const balance = "23000000000";
+    const tokenBalance = "23,000,000,000.0 ZND";
+
+    expect(getOptimalTokenBalance(balance)).toBe(tokenBalance);
+  });
 });

src/functions/__tests__/getOptimalTokenBalance.test.ts

@@ -1,27 +1,36 @@
 import { NATIVE_TOKEN } from "@/constants/nativeToken";
+import { BigNumber } from "bignumber.js";
+
+BigNumber.config({
+  DECIMAL_PLACES: 18,
+  EXPONENTIAL_AT: 1e9,
+  ROUNDING_MODE: BigNumber.ROUND_DOWN,
+  FORMAT: {
+    decimalSeparator: ".",
+    groupSeparator: ",",
+    groupSize: 3,
+  },
+});
 
 export const getOptimalTokenBalance = (
   balance: string,
   tokenSymbol?: string,
 ) => {
   const symbol = tokenSymbol ?? NATIVE_TOKEN.symbol;
   try {
-    if (Number(balance) == 0) return `0.0 ${symbol}`;
-    const precisionFloat = parseFloat(
-      balance.slice(0, balance.indexOf(".") + 5),
-    ).toFixed(4);
-    let deleteIndex = precisionFloat.length - 1;
-    const postDecimalIndex = precisionFloat.indexOf(".") + 2;
+    const bigNumber = new BigNumber(balance);
+    if (bigNumber.isNaN() || bigNumber.isZero()) return `0.0 ${symbol}`;
+
+    let formatted = bigNumber
+      .toFormat(4, BigNumber.ROUND_DOWN)
+      .replace(/\.?0+$/, "");
 
-    while (
-      deleteIndex >= postDecimalIndex &&
-      precisionFloat[deleteIndex] === "0"
-    ) {
-      deleteIndex--;
+    if (!formatted.includes(".")) {
+      formatted += ".0";
     }
 
-    return `${precisionFloat.substring(0, deleteIndex + 1)} ${symbol}`;
-  } catch (error) {
-    return `${balance} ${symbol}`;
+    return `${formatted} ${symbol}`;
+  } catch {
+    return `0.0 ${symbol}`;
   }
 };