From 88bf3c70636ab30f367e9116ff5e51e879af7737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radu=20Pa=C8=99parug=C4=83?= <radupasparuga25@gmail.com>
Date: Sat, 22 Jan 2022 06:41:41 +0200
Subject: [PATCH] Add timestamp zone toggle to Explorer (#22616)

* Add timestamp zone toggle to Explorer

* style: code formatting
---
 .../src/components/common/TimestampToggle.tsx | 48 +++++++++++++++++++
 explorer/src/pages/ClusterStatsPage.tsx       |  5 +-
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 explorer/src/components/common/TimestampToggle.tsx

diff --git a/explorer/src/components/common/TimestampToggle.tsx b/explorer/src/components/common/TimestampToggle.tsx
new file mode 100644
index 00000000000000..cdd4b640e323d3
--- /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 (
+    <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>
+  );
+}
diff --git a/explorer/src/pages/ClusterStatsPage.tsx b/explorer/src/pages/ClusterStatsPage.tsx
index 1f8dd5d5c3ebce..3503a9543dd08e 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() {
         <tr>
           <td className="w-100">Cluster time</td>
           <td className="text-lg-end font-monospace">
-            {displayTimestampUtc(blockTime)}
+            <TimestampToggle unixTimestamp={blockTime}></TimestampToggle>
           </td>
         </tr>
       )}