fix small points amount display

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": true,
   "scripts": {
     "dev": "next dev",

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>

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="."
+    />
+  );
+};

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>
   );