diff --git a/explorer/src/components/account/TransactionHistoryCard.tsx b/explorer/src/components/account/TransactionHistoryCard.tsx index 0973cadc24..6c166fa6db 100644 --- a/explorer/src/components/account/TransactionHistoryCard.tsx +++ b/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 }) { + {hasTimestamps && ( + + {blockTime ? displayTimestamp(blockTime * 1000, true) : "---"} + + )} + {statusText} @@ -118,6 +126,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) { Slot + {hasTimestamps && Timestamp} Result Transaction Signature diff --git a/explorer/src/utils/date.ts b/explorer/src/utils/date.ts index 0f1cc999bb..b06dffb8d9 100644 --- a/explorer/src/utils/date.ts +++ b/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}`; }