chore: show 4 decimals

Author: asuzuki-jumptrading

src/consts.ts

@@ -2,6 +2,8 @@ export const slotsPerLeader = 4;
 export const slotsListPinnedSlotOffset = 5;
 export const scheduleUpcomingSlotsCount = 3;
 
+export const solDecimals = 4;
+
 export const lamportsPerSol = 1_000_000_000;
 
 /** Max compute units is dynamic and pulled from the server,

src/features/LeaderSchedule/Slots/CardValidatorSummary.tsx

@@ -128,13 +128,15 @@ function ValidatorInfo({ peer }: ValidatorInfoProps) {
     ? `${peer.gossip.version[0] === "0" ? "Frankendancer" : "Agave"} v${peer.gossip.version}`
     : undefined;
 
-  const message = [
-    peer?.gossip?.version
-      ? `${peer.gossip.version[0] === "0" ? "Frankendancer" : "Agave"} v${peer.gossip.version}`
-      : undefined,
-    getStakeMsg(peer, peerStats?.activeStake, peerStats?.delinquentStake),
-    peer?.gossip?.sockets["tvu"]?.split(":")[0],
-  ]
+  const stakeMsg = getStakeMsg(
+    peer,
+    peerStats?.activeStake,
+    peerStats?.delinquentStake,
+  );
+
+  const ipWithoutPort = peer?.gossip?.sockets["tvu"]?.split(":")[0];
+
+  const message = [validator, stakeMsg, ipWithoutPort]
     .filter(isDefined)
     .join(" - ");
 
@@ -143,9 +145,8 @@ function ValidatorInfo({ peer }: ValidatorInfoProps) {
   const isFd = validator?.startsWith("Frankendancer");
   const isAgave = validator && !isFd;
   const validatorText = validator || "Unknown";
-  const stakeText =
-    getStakeMsg(peer, peerStats?.activeStake, peerStats?.delinquentStake) ?? "";
-  const ipText = peer?.gossip?.sockets["tvu"]?.split(":")[0] || "Offline";
+  const stakeText = stakeMsg ?? "";
+  const ipText = ipWithoutPort || "Offline";
   const textLength = (validatorText + stakeText + ipText).length;
   const shouldWrap = textLength > 54;
   const textProps: TextProps = shouldWrap

src/features/LeaderSchedule/Slots/SlotCardGrid.tsx

@@ -8,7 +8,11 @@ import { useSlotQueryPublish } from "../../../hooks/useSlotQuery";
 import type { SlotPublish } from "../../../api/types";
 import { fixValue } from "../../../utils";
 import { useMedia, usePrevious, useUnmount } from "react-use";
-import { defaultMaxComputeUnits, lamportsPerSol } from "../../../consts";
+import {
+  defaultMaxComputeUnits,
+  lamportsPerSol,
+  solDecimals,
+} from "../../../consts";
 import { formatNumberLamports } from "../../Overview/ValidatorsCard/formatAmt";
 import {
   setScrollFuncsAtom,
@@ -222,9 +226,9 @@ function getRowValues(publish: SlotPublish): RowValues {
   );
   const totalFees = formatNumberLamports(
     (publish.transaction_fee ?? 0n) + (publish.priority_fee ?? 0n),
-    3,
+    solDecimals,
     {
-      decimals: 3,
+      decimals: solDecimals,
       trailingZeroes: true,
     },
   );
@@ -239,8 +243,8 @@ function getRowValues(publish: SlotPublish): RowValues {
       ? (Number(publish.priority_fee) / lamportsPerSol).toString()
       : "0";
 
-  const tips = formatNumberLamports(publish.tips ?? 0n, 3, {
-    decimals: 3,
+  const tips = formatNumberLamports(publish.tips ?? 0n, solDecimals, {
+    decimals: solDecimals,
     trailingZeroes: true,
   });
   const tipsFull =

src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChartTooltip.tsx

@@ -5,6 +5,7 @@ import styles from "./cuChartTooltip.module.css";
 import { Text } from "@radix-ui/themes";
 import clsx from "clsx";
 import { getFmtStake } from "../../../../utils";
+import { solDecimals } from "../../../../consts";
 
 export default function CuChartTooltip() {
   const chartData = useAtomValue(cuChartTooltipDataAtom);
@@ -34,11 +35,11 @@ export default function CuChartTooltip() {
           </Text>
           <Text className={clsx(styles.tips, styles.label)}>Tips</Text>
           <Text className={styles.tips}>
-            {getFmtStake(BigInt(chartData.tips || 0))}
+            {getFmtStake(BigInt(chartData.tips || 0), solDecimals)}
           </Text>
           <Text className={clsx(styles.fees, styles.label)}>Fees</Text>
           <Text className={styles.fees}>
-            {getFmtStake(BigInt(chartData.fees || 0))}
+            {getFmtStake(BigInt(chartData.fees || 0), solDecimals)}
           </Text>
         </div>
       )}

src/features/Overview/SlotPerformance/SankeyControls.tsx

@@ -6,7 +6,7 @@ import { DisplayType, sankeyDisplayTypeAtom, selectedSlotAtom } from "./atoms";
 import { useSlotQueryResponseDetailed } from "../../../hooks/useSlotQuery";
 import { fixValue } from "../../../utils";
 import { useMemo, useState } from "react";
-import { lamportsPerSol } from "../../../consts";
+import { lamportsPerSol, solDecimals } from "../../../consts";
 import { formatNumber } from "../../../numUtils";
 import RowSeparator from "../../../components/RowSeparator";
 import { PlusIcon, MinusIcon } from "@radix-ui/react-icons";
@@ -61,11 +61,11 @@ function SlotStats() {
   const values = useMemo(() => {
     if (!query.response?.publish) return;
 
-    const transactionFee3Decimals = query.response.publish.transaction_fee
+    const transactionFeeRounded = query.response.publish.transaction_fee
       ? formatNumber(
           Number(query.response.publish.transaction_fee) / lamportsPerSol,
           {
-            decimals: 3,
+            decimals: solDecimals,
           },
         )
       : "0";
@@ -76,11 +76,11 @@ function SlotStats() {
         ).toFixed(9)
       : "0";
 
-    const priorityFee3Decimals = query.response.publish.priority_fee
+    const priorityFeeRounded = query.response.publish.priority_fee
       ? formatNumber(
           Number(query.response.publish.priority_fee) / lamportsPerSol,
           {
-            decimals: 3,
+            decimals: solDecimals,
           },
         )
       : "0";
@@ -91,9 +91,9 @@ function SlotStats() {
         )
       : "0";
 
-    const tips3Decimals = query.response.publish.tips
+    const tipsRounded = query.response.publish.tips
       ? formatNumber(Number(query.response.publish.tips) / lamportsPerSol, {
-          decimals: 3,
+          decimals: solDecimals,
         })
       : "0";
 
@@ -106,11 +106,11 @@ function SlotStats() {
     return {
       computeUnits,
       transactionFeeFull,
-      transactionFee3Decimals,
+      transactionFeeRounded,
       priorityFeeFull,
-      priorityFee3Decimals,
+      priorityFeeRounded,
       tips,
-      tips3Decimals,
+      tipsRounded,
     };
   }, [query.response]);
 
@@ -141,7 +141,7 @@ function SlotStats() {
             }
           >
             <Text align="right" color="cyan">
-              {values?.priorityFee3Decimals ?? "-"}
+              {values?.priorityFeeRounded ?? "-"}
             </Text>
           </Tooltip>
           <Text color="indigo">Transaction Fees</Text>
@@ -153,13 +153,13 @@ function SlotStats() {
             }
           >
             <Text align="right" color="indigo">
-              {values?.transactionFee3Decimals ?? "-"}
+              {values?.transactionFeeRounded ?? "-"}
             </Text>
           </Tooltip>
           <Text color="jade">Tips</Text>
           <Tooltip content={values?.tips ? `${values?.tips} SOL` : null}>
             <Text align="right" color="jade">
-              {values?.tips3Decimals ?? "-"}
+              {values?.tipsRounded ?? "-"}
             </Text>
           </Tooltip>
           <div style={{ gridColumn: "span 2" }}>

src/features/Overview/SlotPerformance/TransactionBarsCard/ChartTooltip.tsx

@@ -27,6 +27,7 @@ import {
   incomePerCuToggleControlColor,
   iconButtonColor,
 } from "../../../../colors";
+import { solDecimals } from "../../../../consts";
 
 export default function ChartTooltip() {
   const slot = useAtomValue(selectedSlotAtom);
@@ -164,10 +165,9 @@ function IncomeDisplay({ transactions, txnIdx }: IncomeDisplayProps) {
   return (
     <LabelValueDisplay
       label="CU Income"
-      value={`${calcTxnIncome(
-        transactions,
-        txnIdx,
-      )?.toLocaleString()}${rankText}`}
+      value={`${calcTxnIncome(transactions, txnIdx)?.toLocaleString(undefined, {
+        maximumFractionDigits: solDecimals,
+      })}${rankText}`}
       color={incomePerCuToggleControlColor}
     />
   );

src/features/Overview/ValidatorsCard/formatAmt.ts

@@ -1,10 +1,10 @@
-import { lamportsPerSol } from "../../../consts";
+import { lamportsPerSol, solDecimals } from "../../../consts";
 import type { FormatNumberOptions } from "../../../numUtils";
 import { formatNumber } from "../../../numUtils";
 
 export function formatNumberLamports(
   value: bigint,
-  decimalCount: number = 3,
+  decimalCount: number = solDecimals,
   formatOptions?: FormatNumberOptions,
 ) {
   if (!value) return "0";

src/numUtils.ts

@@ -16,13 +16,6 @@ export interface NumberFormatOptions {
   trailingZeroes?: boolean;
 }
 
-export const numberFormat = ({
-  decimals = 4,
-  significantDigits,
-  trailingZeroes = true,
-}: NumberFormatOptions = {}): Intl.NumberFormat =>
-  nfMemo(decimals, significantDigits, trailingZeroes);
-
 const nfMemo = memoize(
   (decimals?: number, significantDigits?: number, trailingZeroes?: boolean) => {
     return new Intl.NumberFormat(undefined, {

src/utils.ts

@@ -105,12 +105,17 @@ export function getStake(peer: Peer) {
   );
 }
 
-export function getSolString(lamportAmount?: bigint) {
+export function getSolString(
+  lamportAmount?: bigint,
+  smallValueDecimals?: number,
+) {
   if (lamportAmount === undefined) return;
 
   const solAmount = Number(lamportAmount) / lamportsPerSol;
   if (solAmount < 1) {
-    return solAmount.toLocaleString();
+    return solAmount.toLocaleString(undefined, {
+      maximumFractionDigits: smallValueDecimals,
+    });
   }
 
   if (solAmount < 100) {
@@ -124,8 +129,8 @@ export function getSolString(lamportAmount?: bigint) {
   });
 }
 
-export function getFmtStake(stake?: bigint) {
-  const solString = getSolString(stake);
+export function getFmtStake(stake?: bigint, smallValueDecimals?: number) {
+  const solString = getSolString(stake, smallValueDecimals);
   if (solString === undefined) return;
 
   return `${solString}\xa0SOL`;