explorer: Add timestamps to transaction history (#14782)

* add timestamps to transaction history

* use local timestamps for blocktime display

* revert to showing full universal time systemwide

explorer/src/components/account/TransactionHistoryCard.tsx

@@ -7,6 +7,7 @@ import { Signature } from "components/common/Signature";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { Slot } from "components/common/Slot";
+import { displayTimestamp } from "utils/date";
 
 export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
   const address = pubkey.toBase58();
@@ -48,6 +49,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
     );
   }
 
+  const hasTimestamps = !!transactions.find((element) => !!element.blockTime);
   const detailsList: React.ReactNode[] = [];
   for (var i = 0; i < transactions.length; i++) {
     const slot = transactions[i].slot;
@@ -58,7 +60,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
       slotTransactions.push(transactions[++i]);
     }
 
-    slotTransactions.forEach(({ signature, err }) => {
+    slotTransactions.forEach(({ signature, err, blockTime }) => {
       let statusText;
       let statusClass;
       if (err) {
@@ -75,6 +77,12 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
             <Slot slot={slot} link />
           </td>
 
+          {hasTimestamps && (
+            <td className="text-muted">
+              {blockTime ? displayTimestamp(blockTime * 1000, true) : "---"}
+            </td>
+          )}
+
           <td>
             <span className={`badge badge-soft-${statusClass}`}>
               {statusText}
@@ -118,6 +126,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
           <thead>
             <tr>
               <th className="text-muted w-1">Slot</th>
+              {hasTimestamps && <th className="text-muted">Timestamp</th>}
               <th className="text-muted">Result</th>
               <th className="text-muted">Transaction Signature</th>
             </tr>

explorer/src/utils/date.ts

@@ -1,4 +1,7 @@
-export function displayTimestamp(unixTimestamp: number): string {
+export function displayTimestamp(
+  unixTimestamp: number,
+  shortTimeZoneName = false
+): string {
   const expireDate = new Date(unixTimestamp);
   const dateString = new Intl.DateTimeFormat("en-US", {
     year: "numeric",
@@ -10,12 +13,15 @@ export function displayTimestamp(unixTimestamp: number): string {
     minute: "numeric",
     second: "numeric",
     hour12: false,
-    timeZoneName: "long",
+    timeZoneName: shortTimeZoneName ? "short" : "long",
   }).format(expireDate);
   return `${dateString} at ${timeString}`;
 }
 
-export function displayTimestampUtc(unixTimestamp: number): string {
+export function displayTimestampUtc(
+  unixTimestamp: number,
+  shortTimeZoneName = false
+): string {
   const expireDate = new Date(unixTimestamp);
   const dateString = new Intl.DateTimeFormat("en-US", {
     year: "numeric",
@@ -29,6 +35,7 @@ export function displayTimestampUtc(unixTimestamp: number): string {
     second: "numeric",
     hour12: false,
     timeZone: "UTC",
+    timeZoneName: shortTimeZoneName ? "short" : "long",
   }).format(expireDate);
   return `${dateString} at ${timeString}`;
 }