Explorer: Linkify all displays of slot number (#13262)

explorer/src/components/account/SlotHashesCard.tsx

@@ -1,3 +1,4 @@
+import { Slot } from "components/common/Slot";
 import React from "react";
 import {
   SysvarAccount,
@@ -51,7 +52,7 @@ const renderAccountRow = (entry: SlotHashEntry, index: number) => {
   return (
     <tr key={index}>
       <td className="w-1 text-monospace">
-        {entry.slot.toLocaleString("en-US")}
+        <Slot slot={entry.slot} link />
       </td>
       <td className="text-monospace">{entry.hash}</td>
     </tr>

explorer/src/components/account/SysvarAccountSection.tsx

@@ -19,6 +19,7 @@ import {
   AccountBalanceRow,
 } from "components/common/Account";
 import { displayTimestamp } from "utils/date";
+import { Slot } from "components/common/Slot";
 
 export function SysvarAccountSection({
   account,
@@ -171,7 +172,7 @@ function SysvarAccountSlotHistory({
           <td className="text-lg-right text-monospace">
             {history.map((val) => (
               <p key={val} className="mb-0">
-                {val}
+                <Slot slot={val} link />
               </p>
             ))}
           </td>
@@ -281,7 +282,7 @@ function SysvarAccountEpochScheduleCard({
         <tr>
           <td>First Normal Slot</td>
           <td className="text-lg-right">
-            {sysvarAccount.info.firstNormalSlot}
+            <Slot slot={sysvarAccount.info.firstNormalSlot} />
           </td>
         </tr>
       </TableCardBody>
@@ -329,7 +330,9 @@ function SysvarAccountClockCard({
 
         <tr>
           <td>Slot</td>
-          <td className="text-lg-right">{sysvarAccount.info.slot}</td>
+          <td className="text-lg-right">
+            <Slot slot={sysvarAccount.info.slot} link />
+          </td>
         </tr>
       </TableCardBody>
     </div>

explorer/src/components/account/TokenHistoryCard.tsx

@@ -276,7 +276,7 @@ const TokenTransactionRow = React.memo(
       return (
         <tr key={tx.signature}>
           <td className="w-1">
-            <Slot slot={tx.slot} />
+            <Slot slot={tx.slot} link />
           </td>
 
           <td>
@@ -327,7 +327,7 @@ const TokenTransactionRow = React.memo(
           return (
             <tr key={index}>
               <td className="w-1">
-                <Slot slot={tx.slot} />
+                <Slot slot={tx.slot} link />
               </td>
 
               <td>

explorer/src/components/account/TransactionHistoryCard.tsx

@@ -72,7 +72,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
       detailsList.push(
         <tr key={signature}>
           <td className="w-1">
-            <Slot slot={slot} />
+            <Slot slot={slot} link />
           </td>
 
           <td>

explorer/src/components/account/VoteAccountSection.tsx

@@ -9,6 +9,7 @@ import {
   AccountAddressRow,
   AccountBalanceRow,
 } from "components/common/Account";
+import { Slot } from "components/common/Slot";
 
 export function VoteAccountSection({
   account,
@@ -18,6 +19,7 @@ export function VoteAccountSection({
   voteAccount: VoteAccount;
 }) {
   const refresh = useFetchAccountInfo();
+  const rootSlot = voteAccount.info.rootSlot;
   return (
     <div className="card">
       <AccountHeader
@@ -75,7 +77,9 @@ export function VoteAccountSection({
 
         <tr>
           <td>Root Slot</td>
-          <td className="text-lg-right">{voteAccount.info.rootSlot}</td>
+          <td className="text-lg-right">
+            {rootSlot !== null ? <Slot slot={rootSlot} link /> : "N/A"}
+          </td>
         </tr>
       </TableCardBody>
     </div>

explorer/src/components/account/VotesCard.tsx

@@ -1,3 +1,4 @@
+import { Slot } from "components/common/Slot";
 import React from "react";
 import { VoteAccount, Vote } from "validators/accounts/vote";
 
@@ -44,7 +45,7 @@ const renderAccountRow = (vote: Vote, index: number) => {
   return (
     <tr key={index}>
       <td className="w-1 text-monospace">
-        {vote.slot.toLocaleString("en-US")}
+        <Slot slot={vote.slot} link />
       </td>
       <td className="text-monospace">{vote.confirmationCount}</td>
     </tr>

explorer/src/pages/ClusterStatsPage.tsx

@@ -69,7 +69,7 @@ function StatsCardBody() {
       <tr>
         <td className="w-100">Slot</td>
         <td className="text-lg-right text-monospace">
-          <Slot slot={absoluteSlot} />
+          <Slot slot={absoluteSlot} link />
         </td>
       </tr>
       {blockHeight !== undefined && (