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
This commit is contained in:
parent
5bf5a5ec41
commit
a3e0a365a5
|
@ -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>
|
||||
|
|
|
@ -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}`;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue