common component for more readable slot numbers

explorer/src/components/account/TokenHistoryCard.tsx

@@ -17,6 +17,7 @@ import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { Signature } from "components/common/Signature";
 import { Address } from "components/common/Address";
+import { Slot } from "components/common/Slot";
 import { useTransactionDetails } from "providers/transactions";
 import { useFetchTransactionDetails } from "providers/transactions/details";
 import { coerce } from "superstruct";
@@ -249,8 +250,8 @@ function TokenTransactionRow({
 
             return (
               <tr key={index}>
-                <td className="w-1 text-monospace">
-                  {tx.slot.toLocaleString("en-US")}
+                <td className="w-1">
+                  <Slot slot={tx.slot} />
                 </td>
 
                 <td>
@@ -288,7 +289,9 @@ function TokenTransactionRow({
 
   return (
     <tr key={tx.signature}>
-      <td className="w-1 text-monospace">{tx.slot.toLocaleString("en-US")}</td>
+      <td className="w-1">
+        <Slot slot={tx.slot} />
+      </td>
 
       <td>
         <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>

explorer/src/components/account/TransactionHistoryCard.tsx

@@ -6,6 +6,7 @@ import { useFetchAccountHistory } from "providers/accounts/history";
 import { Signature } from "components/common/Signature";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
+import { Slot } from "components/common/Slot";
 
 export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
   const address = pubkey.toBase58();
@@ -70,7 +71,9 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
 
       detailsList.push(
         <tr key={signature}>
-          <td className="w-1 text-monospace">{slot.toLocaleString("en-US")}</td>
+          <td className="w-1">
+            <Slot slot={slot} />
+          </td>
 
           <td>
             <span className={`badge badge-soft-${statusClass}`}>

explorer/src/components/common/Slot.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+type Props = {
+  slot: number;
+};
+export function Slot({ slot }: Props) {
+  return <span className="text-monospace">{slot.toLocaleString("en-US")}</span>;
+}

explorer/src/pages/ClusterStatsPage.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { TableCardBody } from "components/common/TableCardBody";
+import { Slot } from "components/common/Slot";
 import {
   useDashboardInfo,
   usePerformanceInfo,
@@ -70,18 +71,21 @@ function StatsCardBody() {
     slotsInEpoch - slotIndex,
     hourlyBlockTime
   );
-  const blockHeight = epochInfo.blockHeight.toLocaleString("en-US");
-  const currentSlot = epochInfo.absoluteSlot.toLocaleString("en-US");
+  const { blockHeight, absoluteSlot } = epochInfo;
 
   return (
     <TableCardBody>
       <tr>
         <td className="w-100">Slot</td>
-        <td className="text-lg-right text-monospace">{currentSlot}</td>
+        <td className="text-lg-right text-monospace">
+          <Slot slot={absoluteSlot} />
+        </td>
       </tr>
       <tr>
         <td className="w-100">Block height</td>
-        <td className="text-lg-right text-monospace">{blockHeight}</td>
+        <td className="text-lg-right text-monospace">
+          <Slot slot={blockHeight} />
+        </td>
       </tr>
       <tr>
         <td className="w-100">Block time</td>

explorer/src/pages/TransactionDetailsPage.tsx

@@ -20,6 +20,7 @@ import { StakeDetailsCard } from "components/instruction/stake/StakeDetailsCard"
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { TableCardBody } from "components/common/TableCardBody";
+import { Slot } from "components/common/Slot";
 import { displayTimestamp } from "utils/date";
 import { InfoTooltip } from "components/common/InfoTooltip";
 import { Address } from "components/common/Address";
@@ -246,7 +247,9 @@ function StatusCard({
 
         <tr>
           <td>Block</td>
-          <td className="text-lg-right">{info.slot}</td>
+          <td className="text-lg-right">
+            <Slot slot={info.slot} />
+          </td>
         </tr>
 
         {blockhash && (