diff --git a/explorer/src/components/common/TimestampToggle.tsx b/explorer/src/components/common/TimestampToggle.tsx
new file mode 100644
index 0000000000..cdd4b640e3
--- /dev/null
+++ b/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 (
+
+
+
+ (Click to toggle between local and UTC)
+
+
+ );
+}
+
+export function TimestampToggle({ unixTimestamp }: { unixTimestamp: number }) {
+ const [isTimestampTypeUtc, toggleTimestampType] = useState(true);
+ const [showTooltip, toggleTooltip] = useState("hide");
+
+ const toggle = () => {
+ toggleTimestampType(!isTimestampTypeUtc);
+ };
+
+ const tooltipContainer = {
+ cursor: "pointer",
+ };
+
+ return (
+
+ toggleTooltip("show")}
+ onMouseOut={() => toggleTooltip("hide")}
+ >
+ {isTimestampTypeUtc === true
+ ? displayTimestampUtc(unixTimestamp)
+ : displayTimestamp(unixTimestamp)}
+
+
+
+ );
+}
diff --git a/explorer/src/pages/ClusterStatsPage.tsx b/explorer/src/pages/ClusterStatsPage.tsx
index 1f8dd5d5c3..3503a9543d 100644
--- a/explorer/src/pages/ClusterStatsPage.tsx
+++ b/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() {
Cluster time |
- {displayTimestampUtc(blockTime)}
+
|
)}