feat: improve percentage formatting for hypercert display

- add utility functions to format percentages
- format percentages to the first non zero digit on hypercert-window

Author: Jipperism

components/hypercert/hypercert-window.tsx

@@ -3,6 +3,7 @@ import { SUPPORTED_CHAINS, SupportedChainIdType } from "@/configs/constants";
 import { HypercertListFragment } from "@/hypercerts/fragments/hypercert-list.fragment";
 import { getEvaluationStatus } from "@/hypercerts/getEvaluationStatus";
 import { calculateBigIntPercentage } from "@/lib/calculateBigIntPercentage";
+import { formatPercentageToFirstNonZeroDigit } from "@/lib/formatPercentage";
 import { getCurrencyByAddress } from "@/marketplace/utils";
 import Image from "next/image";
 import Link from "next/link";
@@ -95,7 +96,12 @@ const HypercertWindow = memo(
             <section className="flex text-xs justify-between">
               <section>
                 <h6 className="opacity-70">for sale</h6>
-                <p> {percentAvailable ? `${percentAvailable}%` : "--"}</p>
+                <p>
+                  {" "}
+                  {percentAvailable
+                    ? `${formatPercentageToFirstNonZeroDigit(percentAvailable)}%`
+                    : "--"}
+                </p>
               </section>
               <section>
                 <h6 className="text-end opacity-70">lowest per %</h6>

lib/formatPercentage.ts

@@ -0,0 +1,46 @@
+export const formatPercentageToFirstNonZeroDigit = (
+  percentage: number,
+): string => {
+  if (percentage === 0) return "0";
+
+  if (percentage < 1) {
+    const NumberFormat = new Intl.NumberFormat("en-US", {
+      style: "decimal",
+      notation: "standard",
+      maximumSignificantDigits: 21,
+    });
+
+    const result = NumberFormat.format(percentage);
+
+    // Match the first 2 non-zero digits after the decimal point
+    const match = result.match(/\d*\.\d*?[1-9](?:\d*[1-9]|\d)?/);
+
+    // If no decimal or no non-zero digits after decimal, return rounded integer
+    if (!match) {
+      return Math.round(percentage).toString();
+    }
+
+    // Check if we found 1 or 2 non-zero digits after the decimal point
+    // Skip leading zeros after decimal points
+    const numbersAfterDecimal = match[0].split(".")[1];
+    const isSingleNonZeroDigit =
+      numbersAfterDecimal.replace(/^0+/, "").length === 1;
+
+    // If we have 1 significant digit, return the match
+    if (isSingleNonZeroDigit) {
+      return match[0];
+    }
+
+    // If we have 2 significant digits, get the number of digits after the decimal point
+    const fractionDigits = numbersAfterDecimal.length;
+    return new Intl.NumberFormat("en-US", {
+      style: "decimal",
+      notation: "standard",
+      // maximumSignificantDigits: decimalDigits - 1,
+      maximumFractionDigits: fractionDigits - 1,
+    }).format(percentage);
+  }
+
+  // Round to 1 digit, strip trailing zeros
+  return percentage.toFixed(1).replace(/\.?0+$/, "");
+};

test/lib/formatPercentage.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { formatPercentageToFirstNonZeroDigit } from "@/lib/formatPercentage";
+
+describe("formatPercentage", () => {
+  it("should return the original integer if its more than 1", () => {
+    expect(formatPercentageToFirstNonZeroDigit(97)).to.eq("97");
+  });
+
+  it("should round to 1 decimal place if the integer is more than 1", () => {
+    expect(formatPercentageToFirstNonZeroDigit(97.5)).to.eq("97.5");
+    expect(formatPercentageToFirstNonZeroDigit(97.001)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(97.01)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(1.008)).to.eq("1");
+    expect(formatPercentageToFirstNonZeroDigit(1.99)).to.eq("2");
+    expect(formatPercentageToFirstNonZeroDigit(97.0000000000081)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(97.0000000000081)).to.eq("97");
+  });
+
+  it("should round to the first non-zero digit", () => {
+    expect(formatPercentageToFirstNonZeroDigit(0.008)).to.eq("0.008");
+    expect(formatPercentageToFirstNonZeroDigit(0.0081)).to.eq("0.008");
+    expect(formatPercentageToFirstNonZeroDigit(0.000000000008)).to.eq(
+      "0.000000000008",
+    );
+  });
+
+  it("should take the second non-zero digit to round the first non-zero digit", () => {
+    expect(formatPercentageToFirstNonZeroDigit(0.99)).to.eq("1");
+    expect(formatPercentageToFirstNonZeroDigit(0.109)).to.eq("0.11");
+    expect(formatPercentageToFirstNonZeroDigit(0.0000000000081)).to.eq(
+      "0.000000000008",
+    );
+    expect(formatPercentageToFirstNonZeroDigit(0.0000000000085)).to.eq(
+      "0.000000000009",
+    );
+  });
+});