explorer: Display block timestamp (#20309)

explorer/src/components/block/BlockOverviewCard.tsx

@@ -12,6 +12,7 @@ import { NavLink } from "react-router-dom";
 import { clusterPath } from "utils/url";
 import { BlockProgramsCard } from "./BlockProgramsCard";
 import { BlockAccountsCard } from "./BlockAccountsCard";
+import { displayTimestamp, displayTimestampUtc } from "utils/date";
 
 export function BlockOverviewCard({
   slot,
@@ -65,6 +66,26 @@ export function BlockOverviewCard({
               <span>{block.blockhash}</span>
             </td>
           </tr>
+          {block.blockTime && (
+            <>
+              <tr>
+                <td>Timestamp (Local)</td>
+                <td className="text-lg-right">
+                  <span className="text-monospace">
+                    {displayTimestamp(block.blockTime * 1000, true)}
+                  </span>
+                </td>
+              </tr>
+              <tr>
+                <td>Timestamp (UTC)</td>
+                <td className="text-lg-right">
+                  <span className="text-monospace">
+                    {displayTimestampUtc(block.blockTime * 1000, true)}
+                  </span>
+                </td>
+              </tr>
+            </>
+          )}
           <tr>
             <td className="w-100">Parent Slot</td>
             <td className="text-lg-right text-monospace">

explorer/src/utils/date.ts

@@ -25,7 +25,7 @@ export function displayTimestampUtc(
   const expireDate = new Date(unixTimestamp);
   const dateString = new Intl.DateTimeFormat("en-US", {
     year: "numeric",
-    month: "long",
+    month: "short",
     day: "numeric",
     timeZone: "UTC",
   }).format(expireDate);