common component for more readable slot numbers
This commit is contained in:
parent
c4913e3c9e
commit
1211d8118c
|
@ -17,6 +17,7 @@ import { ErrorCard } from "components/common/ErrorCard";
|
||||||
import { LoadingCard } from "components/common/LoadingCard";
|
import { LoadingCard } from "components/common/LoadingCard";
|
||||||
import { Signature } from "components/common/Signature";
|
import { Signature } from "components/common/Signature";
|
||||||
import { Address } from "components/common/Address";
|
import { Address } from "components/common/Address";
|
||||||
|
import { Slot } from "components/common/Slot";
|
||||||
import { useTransactionDetails } from "providers/transactions";
|
import { useTransactionDetails } from "providers/transactions";
|
||||||
import { useFetchTransactionDetails } from "providers/transactions/details";
|
import { useFetchTransactionDetails } from "providers/transactions/details";
|
||||||
import { coerce } from "superstruct";
|
import { coerce } from "superstruct";
|
||||||
|
@ -249,8 +250,8 @@ function TokenTransactionRow({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td className="w-1 text-monospace">
|
<td className="w-1">
|
||||||
{tx.slot.toLocaleString("en-US")}
|
<Slot slot={tx.slot} />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
@ -288,7 +289,9 @@ function TokenTransactionRow({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={tx.signature}>
|
<tr key={tx.signature}>
|
||||||
<td className="w-1 text-monospace">{tx.slot.toLocaleString("en-US")}</td>
|
<td className="w-1">
|
||||||
|
<Slot slot={tx.slot} />
|
||||||
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
|
<span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { useFetchAccountHistory } from "providers/accounts/history";
|
||||||
import { Signature } from "components/common/Signature";
|
import { Signature } from "components/common/Signature";
|
||||||
import { ErrorCard } from "components/common/ErrorCard";
|
import { ErrorCard } from "components/common/ErrorCard";
|
||||||
import { LoadingCard } from "components/common/LoadingCard";
|
import { LoadingCard } from "components/common/LoadingCard";
|
||||||
|
import { Slot } from "components/common/Slot";
|
||||||
|
|
||||||
export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
|
export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
|
||||||
const address = pubkey.toBase58();
|
const address = pubkey.toBase58();
|
||||||
|
@ -70,7 +71,9 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
|
||||||
|
|
||||||
detailsList.push(
|
detailsList.push(
|
||||||
<tr key={signature}>
|
<tr key={signature}>
|
||||||
<td className="w-1 text-monospace">{slot.toLocaleString("en-US")}</td>
|
<td className="w-1">
|
||||||
|
<Slot slot={slot} />
|
||||||
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span className={`badge badge-soft-${statusClass}`}>
|
<span className={`badge badge-soft-${statusClass}`}>
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
slot: number;
|
||||||
|
};
|
||||||
|
export function Slot({ slot }: Props) {
|
||||||
|
return <span className="text-monospace">{slot.toLocaleString("en-US")}</span>;
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { TableCardBody } from "components/common/TableCardBody";
|
import { TableCardBody } from "components/common/TableCardBody";
|
||||||
|
import { Slot } from "components/common/Slot";
|
||||||
import {
|
import {
|
||||||
useDashboardInfo,
|
useDashboardInfo,
|
||||||
usePerformanceInfo,
|
usePerformanceInfo,
|
||||||
|
@ -70,18 +71,21 @@ function StatsCardBody() {
|
||||||
slotsInEpoch - slotIndex,
|
slotsInEpoch - slotIndex,
|
||||||
hourlyBlockTime
|
hourlyBlockTime
|
||||||
);
|
);
|
||||||
const blockHeight = epochInfo.blockHeight.toLocaleString("en-US");
|
const { blockHeight, absoluteSlot } = epochInfo;
|
||||||
const currentSlot = epochInfo.absoluteSlot.toLocaleString("en-US");
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableCardBody>
|
<TableCardBody>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="w-100">Slot</td>
|
<td className="w-100">Slot</td>
|
||||||
<td className="text-lg-right text-monospace">{currentSlot}</td>
|
<td className="text-lg-right text-monospace">
|
||||||
|
<Slot slot={absoluteSlot} />
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="w-100">Block height</td>
|
<td className="w-100">Block height</td>
|
||||||
<td className="text-lg-right text-monospace">{blockHeight}</td>
|
<td className="text-lg-right text-monospace">
|
||||||
|
<Slot slot={blockHeight} />
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="w-100">Block time</td>
|
<td className="w-100">Block time</td>
|
||||||
|
|
|
@ -20,6 +20,7 @@ import { StakeDetailsCard } from "components/instruction/stake/StakeDetailsCard"
|
||||||
import { ErrorCard } from "components/common/ErrorCard";
|
import { ErrorCard } from "components/common/ErrorCard";
|
||||||
import { LoadingCard } from "components/common/LoadingCard";
|
import { LoadingCard } from "components/common/LoadingCard";
|
||||||
import { TableCardBody } from "components/common/TableCardBody";
|
import { TableCardBody } from "components/common/TableCardBody";
|
||||||
|
import { Slot } from "components/common/Slot";
|
||||||
import { displayTimestamp } from "utils/date";
|
import { displayTimestamp } from "utils/date";
|
||||||
import { InfoTooltip } from "components/common/InfoTooltip";
|
import { InfoTooltip } from "components/common/InfoTooltip";
|
||||||
import { Address } from "components/common/Address";
|
import { Address } from "components/common/Address";
|
||||||
|
@ -246,7 +247,9 @@ function StatusCard({
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Block</td>
|
<td>Block</td>
|
||||||
<td className="text-lg-right">{info.slot}</td>
|
<td className="text-lg-right">
|
||||||
|
<Slot slot={info.slot} />
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
{blockhash && (
|
{blockhash && (
|
||||||
|
|
Loading…
Reference in New Issue