From 456bd57894c2a5d9ba3b37974fadf5989d6d6c35 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Mon, 7 Oct 2024 18:41:46 +0700
Subject: [PATCH] fix small points amount display

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 .../components/Points/DelegationPoints.tsx    | 14 ++-----
 src/app/components/Points/Points.tsx          | 37 +++++++++++++++++++
 src/app/components/Points/StakerPoints.tsx    | 14 ++-----
 5 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/app/components/Points/Points.tsx

diff --git a/package-lock.json b/package-lock.json
index 0c472ca2..615a5e24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.3.7",
+      "version": "0.3.8",
       "dependencies": {
         "@babylonlabs-io/btc-staking-ts": "0.3.0",
         "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
diff --git a/package.json b/package.json
index ee6f818d..3e337c22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/components/Points/DelegationPoints.tsx b/src/app/components/Points/DelegationPoints.tsx
index 7656efaa..dfe9b3d6 100644
--- a/src/app/components/Points/DelegationPoints.tsx
+++ b/src/app/components/Points/DelegationPoints.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { NumericFormat } from "react-number-format";
 
 import { useDelegationsPoints } from "@/app/context/api/DelegationsPointsProvider";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { shouldDisplayPoints } from "@/config";
 
+import { Points } from "./Points";
+
 interface DelegationPointsProps {
   stakingTxHash: string;
   className?: string;
@@ -37,16 +38,7 @@ export const DelegationPoints: React.FC<DelegationPointsProps> = ({
       <div className="flex items-center justify-end gap-1">
         <p className="whitespace-nowrap">
           <span className="lg:hidden">Points: </span>
-          {points !== undefined && points !== 0 ? (
-            <NumericFormat
-              value={points.toFixed(3)}
-              displayType="text"
-              thousandSeparator=","
-              decimalSeparator="."
-            />
-          ) : (
-            "n.a."
-          )}
+          <Points points={points} />
         </p>
       </div>
     </div>
diff --git a/src/app/components/Points/Points.tsx b/src/app/components/Points/Points.tsx
new file mode 100644
index 00000000..815cb2a8
--- /dev/null
+++ b/src/app/components/Points/Points.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { NumericFormat } from "react-number-format";
+import { Tooltip } from "react-tooltip";
+
+interface PointsProps {
+  points: number | undefined;
+}
+
+export const Points: React.FC<PointsProps> = ({ points }) => {
+  if (points === undefined || points === 0) {
+    return <>n.a.</>;
+  }
+
+  if (points < 0.001 && points > 0) {
+    return (
+      <>
+        <span
+          className="cursor-pointer text-xs"
+          data-tooltip-id={`tooltip-points-${points}`}
+          data-tooltip-content={points.toFixed(8)}
+        >
+          &lt;0.001
+        </span>
+        <Tooltip id={`tooltip-points-${points}`} className="tooltip-wrap" />
+      </>
+    );
+  }
+
+  return (
+    <NumericFormat
+      value={points.toFixed(3)}
+      displayType="text"
+      thousandSeparator=","
+      decimalSeparator="."
+    />
+  );
+};
diff --git a/src/app/components/Points/StakerPoints.tsx b/src/app/components/Points/StakerPoints.tsx
index 57a30f40..4767ebe7 100644
--- a/src/app/components/Points/StakerPoints.tsx
+++ b/src/app/components/Points/StakerPoints.tsx
@@ -1,9 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import React from "react";
-import { NumericFormat } from "react-number-format";
 
 import { getStakersPoints } from "@/app/api/getPoints";
 
+import { Points } from "./Points";
+
 interface StakerPointsProps {
   publicKeyNoCoord: string;
 }
@@ -35,16 +36,7 @@ export const StakerPoints: React.FC<StakerPointsProps> = ({
   return (
     <div className="flex items-center justify-end gap-1">
       <p className="whitespace-nowrap font-semibold">
-        {points !== undefined && points !== 0 ? (
-          <NumericFormat
-            value={points.toFixed(3)}
-            displayType="text"
-            thousandSeparator=","
-            decimalSeparator="."
-          />
-        ) : (
-          "n.a."
-        )}
+        <Points points={points} />
       </p>
     </div>
   );