explorer: format cluster time and locked stake accounts as utc (#14461)

explorer/src/components/account/StakeAccountSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TableCardBody } from "components/common/TableCardBody";
 import { lamportsToSolString } from "utils";
-import { displayTimestamp } from "utils/date";
+import { displayTimestampUtc } from "utils/date";
 import { Account, useFetchAccountInfo } from "providers/accounts";
 import { Address } from "components/common/Address";
 import {
@@ -50,7 +50,7 @@ export function StakeAccountSection({
 function LockupCard({ stakeAccount }: { stakeAccount: StakeAccountInfo }) {
   const unixTimestamp = stakeAccount.meta?.lockup.unixTimestamp;
   if (unixTimestamp && unixTimestamp > 0) {
-    const prettyTimestamp = displayTimestamp(unixTimestamp * 1000);
+    const prettyTimestamp = displayTimestampUtc(unixTimestamp * 1000);
     return (
       <div className="alert alert-warning text-center">
         <strong>Account is locked!</strong> Lockup expires on {prettyTimestamp}

explorer/src/pages/ClusterStatsPage.tsx

@@ -10,7 +10,7 @@ import {
 import { slotsToHumanString } from "utils";
 import { useCluster } from "providers/cluster";
 import { TpsCard } from "components/TpsCard";
-import { displayTimestamp } from "utils/date";
+import { displayTimestampUtc } from "utils/date";
 
 const CLUSTER_STATS_TIMEOUT = 10000;
 
@@ -90,7 +90,7 @@ function StatsCardBody() {
         <tr>
           <td className="w-100">Cluster time</td>
           <td className="text-lg-right text-monospace">
-            {displayTimestamp(blockTime)}
+            {displayTimestampUtc(blockTime)}
           </td>
         </tr>
       )}

explorer/src/utils/date.ts

@@ -14,3 +14,22 @@ export function displayTimestamp(unixTimestamp: number): string {
   }).format(expireDate);
   return `${dateString} at ${timeString}`;
 }
+
+export function displayTimestampUtc(unixTimestamp: number): string {
+  const expireDate = new Date(unixTimestamp);
+  const dateString = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC",
+  }).format(expireDate);
+  const timeString = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+    timeZoneName: "short",
+    timeZone: "UTC",
+  }).format(expireDate);
+  return `${dateString} at ${timeString}`;
+}