chore: round sankey controls values to 3 decimal places

Author: asuzuki-jumptrading

src/features/Overview/SlotPerformance/SankeyControls.tsx

@@ -1,12 +1,13 @@
 import styles from "./sankeyControls.module.css";
-import { Text } from "@radix-ui/themes";
+import { Text, Tooltip } from "@radix-ui/themes";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import { useAtom, useAtomValue } from "jotai";
 import { DisplayType, sankeyDisplayTypeAtom, selectedSlotAtom } from "./atoms";
 import { useSlotQueryResponse } from "../../../hooks/useSlotQuery";
 import { fixValue } from "../../../utils";
 import { useMemo } from "react";
 import { lamportsPerSol } from "../../../consts";
+import { formatNumber } from "../../../numUtils";
 
 export default function SankeyControls() {
   const [value, setValue] = useAtom(sankeyDisplayTypeAtom);
@@ -60,24 +61,45 @@ function SlotStats() {
     const totalTxns = fixValue(query.response.publish.transactions ?? 0);
     const nonVoteTxns = totalTxns - voteTxns;
 
-    const transactionFeeFull =
-      query.response.publish.transaction_fee != null
-        ? (
-            Number(query.response.publish.transaction_fee) / lamportsPerSol
-          ).toFixed(9)
-        : "0";
+    const transactionFee3Decimals = query.response.publish.transaction_fee
+      ? formatNumber(
+          Number(query.response.publish.transaction_fee) / lamportsPerSol,
+          {
+            decimals: 3,
+          },
+        )
+      : "0";
 
-    const priorityFeeFull =
-      query.response.publish.priority_fee != null
-        ? (
-            Number(query.response.publish.priority_fee) / lamportsPerSol
-          ).toFixed(9)
-        : "0";
+    const transactionFeeFull = query.response.publish.transaction_fee
+      ? (
+          Number(query.response.publish.transaction_fee) / lamportsPerSol
+        ).toFixed(9)
+      : "0";
 
-    const tips =
-      query.response.publish.tips != null
-        ? (Number(query.response.publish.tips) / lamportsPerSol).toFixed(9)
-        : "0";
+    const priorityFee3Decimals = query.response.publish.priority_fee
+      ? formatNumber(
+          Number(query.response.publish.priority_fee) / lamportsPerSol,
+          {
+            decimals: 3,
+          },
+        )
+      : "0";
+
+    const priorityFeeFull = query.response.publish.priority_fee
+      ? (Number(query.response.publish.priority_fee) / lamportsPerSol).toFixed(
+          9,
+        )
+      : "0";
+
+    const tips3Decimals = query.response.publish.tips
+      ? formatNumber(Number(query.response.publish.tips) / lamportsPerSol, {
+          decimals: 3,
+        })
+      : "0";
+
+    const tips = query.response.publish.tips
+      ? (Number(query.response.publish.tips) / lamportsPerSol).toFixed(9)
+      : "0";
 
     const computeUnits = fixValue(query.response.publish.compute_units ?? 0);
 
@@ -86,8 +108,11 @@ function SlotStats() {
       voteTxns,
       nonVoteTxns,
       transactionFeeFull,
+      transactionFee3Decimals,
       priorityFeeFull,
+      priorityFee3Decimals,
       tips,
+      tips3Decimals,
     };
   }, [query.response]);
 
@@ -96,15 +121,33 @@ function SlotStats() {
   return (
     <div className={styles.stats}>
       <Text>Priority Fees</Text>
-      <Text style={{ textAlign: "right" }}>
-        {values?.priorityFeeFull ?? "-"}
-      </Text>
+      <Tooltip
+        content={
+          values?.priorityFeeFull ? `${values?.priorityFeeFull} SOL` : null
+        }
+      >
+        <Text style={{ textAlign: "right" }}>
+          {values?.priorityFee3Decimals ?? "-"}
+        </Text>
+      </Tooltip>
       <Text>Transaction Fees</Text>
-      <Text style={{ textAlign: "right" }}>
-        {values?.transactionFeeFull ?? "-"}
-      </Text>
+      <Tooltip
+        content={
+          values?.transactionFeeFull
+            ? `${values?.transactionFeeFull} SOL`
+            : null
+        }
+      >
+        <Text style={{ textAlign: "right" }}>
+          {values?.transactionFee3Decimals ?? "-"}
+        </Text>
+      </Tooltip>
       <Text>Tips</Text>
-      <Text style={{ textAlign: "right" }}>{values?.tips ?? "-"}</Text>
+      <Tooltip content={values?.tips ? `${values?.tips} SOL` : null}>
+        <Text style={{ textAlign: "right" }}>
+          {values?.tips3Decimals ?? "-"}
+        </Text>
+      </Tooltip>
       <Text>Vote Transactions</Text>
       <Text style={{ textAlign: "right" }}>
         {values?.voteTxns?.toLocaleString() ?? "-"}

src/features/Overview/SlotPerformance/sankeyControls.module.css

@@ -16,7 +16,7 @@
     /* align-items: center; */
     column-gap: 10px;
     row-gap: 4px;
-    min-width: 170px;
+    min-width: 203px;
     font-variant-numeric: tabular-nums;
 
     border-radius: 5px;