From 40ebebe1402ccd826785d4e82d5acf837e7d64bb Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Thu, 6 Oct 2022 14:04:04 +0800
Subject: [PATCH] Explorer: Display block utc timestamp in account history
 (#28248)

---
 .../history/TransactionHistoryCard.tsx        | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/explorer/src/components/account/history/TransactionHistoryCard.tsx b/explorer/src/components/account/history/TransactionHistoryCard.tsx
index 068b0ee62..2d49e3e29 100644
--- a/explorer/src/components/account/history/TransactionHistoryCard.tsx
+++ b/explorer/src/components/account/history/TransactionHistoryCard.tsx
@@ -15,6 +15,7 @@ import {
 import { FetchStatus } from "providers/cache";
 import { LoadingCard } from "components/common/LoadingCard";
 import { ErrorCard } from "components/common/ErrorCard";
+import { displayTimestampUtc } from "utils/date";
 
 export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
   const address = pubkey.toBase58();
@@ -56,7 +57,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
       return (
         <tr key={signature}>
           <td>
-            <Signature signature={signature} link truncate />
+            <Signature signature={signature} link truncateChars={60} />
           </td>
 
           <td className="w-1">
@@ -64,9 +65,16 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
           </td>
 
           {hasTimestamps && (
-            <td className="text-muted">
-              {blockTime ? <Moment date={blockTime * 1000} fromNow /> : "---"}
-            </td>
+            <>
+              <td className="text-muted">
+                {blockTime ? <Moment date={blockTime * 1000} fromNow /> : "---"}
+              </td>
+              <td className="text-muted">
+                {blockTime
+                  ? displayTimestampUtc(blockTime * 1000, true)
+                  : "---"}
+              </td>
+            </>
           )}
 
           <td>
@@ -90,8 +98,13 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
           <thead>
             <tr>
               <th className="text-muted w-1">Transaction Signature</th>
-              <th className="text-muted w-1">Slot</th>
-              {hasTimestamps && <th className="text-muted w-1">Age</th>}
+              <th className="text-muted w-1">Block</th>
+              {hasTimestamps && (
+                <>
+                  <th className="text-muted w-1">Age</th>
+                  <th className="text-muted w-1">Timestamp</th>
+                </>
+              )}
               <th className="text-muted">Result</th>
             </tr>
           </thead>