chore: change gossip network bytes to bits

Author: atsai-jumptrading

src/features/Gossip/PeerTable.tsx/index.tsx

@@ -13,10 +13,9 @@ import { gossipPeersSizeAtom } from "../../../api/atoms";
 import usePeerTableQuery, { type SortOrder } from "./usePeerTableQuery";
 import { Box, Flex, Reset, Separator, Table, Text } from "@radix-ui/themes";
 import { lamportsPerSol } from "../../../consts";
-import byteSize from "byte-size";
 import { CaretDownIcon, CaretUpIcon } from "@radix-ui/react-icons";
 import { useKey } from "react-use";
-import { copyToClipboard } from "../../../utils";
+import { copyToClipboard, formatBytesAsBits } from "../../../utils";
 import styles from "./peerTable.module.css";
 import clsx from "clsx";
 import { headerGap } from "../consts";
@@ -31,7 +30,7 @@ interface ColSpec {
 }
 const byteFormat = (value: number | string) => {
   if (typeof value === "number") {
-    const formatted = byteSize(value);
+    const formatted = formatBytesAsBits(value);
     return `${formatted.value} ${formatted.unit}`;
   }
   return value;

src/features/Gossip/RateTableCell.tsx

@@ -1,6 +1,6 @@
 import { Table } from "@radix-ui/themes";
-import byteSize from "byte-size";
 import { useEmaValue } from "../../hooks/useEma";
+import { formatBytesAsBits } from "../../utils";
 
 interface RateTableCellProps {
   inBytes?: boolean;
@@ -10,11 +10,15 @@ interface RateTableCellProps {
 export default function EmaTableCell({ inBytes, value }: RateTableCellProps) {
   const emaValue = useEmaValue(value) ?? 0;
 
-  const formattedValue =
-    emaValue !== undefined
-      ? inBytes
-        ? byteSize(emaValue).toString()
-        : Math.trunc(emaValue).toLocaleString()
-      : "-";
+  let formattedValue = "-";
+  if (emaValue !== undefined) {
+    if (inBytes) {
+      const { value, unit } = formatBytesAsBits(emaValue);
+      formattedValue = `${value.toLocaleString()} ${unit}`;
+    } else {
+      formattedValue = Math.trunc(emaValue).toLocaleString();
+    }
+  }
+
   return <Table.Cell align="right">{formattedValue}</Table.Cell>;
 }

src/features/Gossip/TrafficTreeMap.tsx

@@ -16,10 +16,10 @@ import { useAtomValue } from "jotai";
 import { peersAtom } from "../../atoms";
 import { formatNumberLamports } from "../Overview/ValidatorsCard/formatAmt";
 import { sum } from "lodash";
-import byteSize from "byte-size";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { headerGap } from "./consts";
 import styles from "./trafficTreeMap.module.css";
+import { formatBytesAsBits } from "../../utils";
 
 const colorsList = [
   "#00F0FF",
@@ -123,6 +123,10 @@ export function TrafficTreeMap({
 
   if (!data) return;
 
+  const formattedThroughput = formatBytesAsBits(
+    networkTraffic.total_throughput,
+  );
+
   return (
     <Flex
       direction="column"
@@ -137,7 +141,7 @@ export function TrafficTreeMap({
         <span>
           <Text className={styles.totalText}>Total</Text>
           <Text className={styles.throughputText}>
-            &nbsp;{byteSize(networkTraffic.total_throughput).toString()}/s
+            &nbsp;{`${formattedThroughput.value} ${formattedThroughput.unit}`}/s
           </Text>
         </span>
       </Flex>
@@ -348,12 +352,12 @@ function NodeText({ leaf, total, getPeerValues }: NodeTextProps) {
   const firstBaselineY = textY; // firstLineTop + idFontSize;
   // const iconY = textY; // firstLineTop + Math.max(0, (idFontSize - iconSize) / 2);
 
-  const byteValue = byteSize(leaf.value ?? 0);
-  let throughputLine = `${byteValue ? `${byteValue.toString()} ` : ""}(${pct.toFixed(1)}%)`;
+  const formatted = formatBytesAsBits(leaf.value ?? 0);
+  let throughputLine = `${formatted ? `${formatted.value} ${formatted.unit} ` : ""}(${pct.toFixed(1)}%)`;
 
   const showPct = measureTextWidth(throughputLine, idFont) < availableWidth;
   if (!showPct) {
-    throughputLine = `${byteValue.toString()}`;
+    throughputLine = `${formatted.value} ${formatted.unit}`;
   }
 
   if (rectWidth < minLabelWidth) return;

src/utils.ts

@@ -289,14 +289,14 @@ export function formatBytesAsBits(bytes: number): {
   unit: string;
 } {
   const bits = bytes * 8;
-  if (bits < 1_000) return { value: bits, unit: "bit" };
+  if (bits < 1_000) return { value: bits, unit: "b" };
   if (bits < 1_000_000)
-    return { value: getRoundedBitsValue(bits / 1_000), unit: "Kbit" };
+    return { value: getRoundedBitsValue(bits / 1_000), unit: "Kb" };
   if (bits < 1_000_000_000) {
-    return { value: getRoundedBitsValue(bits / 1_000_000), unit: "Mbit" };
+    return { value: getRoundedBitsValue(bits / 1_000_000), unit: "Mb" };
   }
 
-  return { value: getRoundedBitsValue(bits / 1_000_000_000), unit: "Gbit" };
+  return { value: getRoundedBitsValue(bits / 1_000_000_000), unit: "Gb" };
 }
 
 export interface FormattedBytes {