Add timestamp zone toggle to Explorer (#22616)

* Add timestamp zone toggle to Explorer

* style: code formatting

explorer/src/components/common/TimestampToggle.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { displayTimestampUtc, displayTimestamp } from "utils/date";
+
+type State = "hide" | "show";
+
+function Tooltip({ state }: { state: State }) {
+  const tooltip = {
+    maxWidth: "20rem",
+  };
+
+  if (state === "hide") return null;
+  return (
+    <div className="popover bs-popover-bottom show" style={tooltip}>
+      <div className="arrow" />
+      <div className="popover-body">
+        (Click to toggle between local and UTC)
+      </div>
+    </div>
+  );
+}
+
+export function TimestampToggle({ unixTimestamp }: { unixTimestamp: number }) {
+  const [isTimestampTypeUtc, toggleTimestampType] = useState(true);
+  const [showTooltip, toggleTooltip] = useState<State>("hide");
+
+  const toggle = () => {
+    toggleTimestampType(!isTimestampTypeUtc);
+  };
+
+  const tooltipContainer = {
+    cursor: "pointer",
+  };
+
+  return (
+    <div className="popover-container w-100" style={tooltipContainer}>
+      <span
+        onClick={toggle}
+        onMouseOver={() => toggleTooltip("show")}
+        onMouseOut={() => toggleTooltip("hide")}
+      >
+        {isTimestampTypeUtc === true
+          ? displayTimestampUtc(unixTimestamp)
+          : displayTimestamp(unixTimestamp)}
+      </span>
+      <Tooltip state={showTooltip} />
+    </div>
+  );
+}

explorer/src/pages/ClusterStatsPage.tsx

@@ -10,13 +10,14 @@ import {
 import { abbreviatedNumber, lamportsToSol, slotsToHumanString } from "utils";
 import { ClusterStatus, useCluster } from "providers/cluster";
 import { TpsCard } from "components/TpsCard";
-import { displayTimestampWithoutDate, displayTimestampUtc } from "utils/date";
+import { displayTimestampWithoutDate } from "utils/date";
 import { Status, useFetchSupply, useSupply } from "providers/supply";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { useVoteAccounts } from "providers/accounts/vote-accounts";
 import { CoingeckoStatus, useCoinGecko } from "utils/coingecko";
 import { Epoch } from "components/common/Epoch";
+import { TimestampToggle } from "components/common/TimestampToggle";
 
 const CLUSTER_STATS_TIMEOUT = 5000;
 
@@ -253,7 +254,7 @@ function StatsCardBody() {
         <tr>
           <td className="w-100">Cluster time</td>
           <td className="text-lg-end font-monospace">
-            {displayTimestampUtc(blockTime)}
+            <TimestampToggle unixTimestamp={blockTime}></TimestampToggle>
           </td>
         </tr>
       )}