d-bis/explorer-monorepo
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refine homepage freshness layout

Browse Source
This commit is contained in:
defiQUG
2026-04-16 11:12:17 -07:00
parent 251e37bd05
commit e1c3b40cb0
2 changed files with 108 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/components/home/HomePage.tsx
View File

@@ -413,6 +413,37 @@ export default function Home({
note: compactStatNote(networkUtilizationSummary.note, networkUtilization != null ? 'Latest stats sample' : 'Unavailable', mode),
},
]
const activityMetricCards = [
{
label: 'Latest Transaction',
value: activityContext.latest_transaction_block_number != null ? `#${activityContext.latest_transaction_block_number}` : 'Unknown',
note: latestTransactionAgeLabel,
detail: `Latest visible transaction freshness${txCompleteness ? ` · ${txCompleteness}` : ''}.`,
},
{
label: 'Last Non-Empty Block',
value: activityContext.last_non_empty_block_number != null ? `#${activityContext.last_non_empty_block_number}` : 'Unknown',
note: formatRelativeAge(activityContext.last_non_empty_block_timestamp),
detail:
activityContext.latest_transaction_block_number != null &&
activityContext.last_non_empty_block_number != null &&
activityContext.latest_transaction_block_number === activityContext.last_non_empty_block_number
? 'Matches the latest visible transaction block.'
: 'Most recent block with at least one indexed transaction.',
},
{
label: 'Block Gap',
value:
activityContext.block_gap_to_latest_transaction != null
? activityContext.block_gap_to_latest_transaction.toLocaleString()
: 'Unknown',
note:
activityContext.block_gap_to_latest_transaction != null
? `${activityContext.block_gap_to_latest_transaction.toLocaleString()} blocks behind tip`
: 'Gap unavailable',
detail: 'Difference between the current tip and the latest visible transaction block.',
},
]
useEffect(() => {
setRelayPage(1)
@@ -540,48 +571,27 @@ export default function Home({
</div>
{chainStatus ? (
<div className="grid gap-3 md:grid-cols-3 xl:grid-cols-5">
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Chain 138 Status</div>
<div className="mt-2 text-lg font-semibold">{chainStatus.status || 'unknown'}</div>
<div className="mt-1 text-sm opacity-80">{chainStatus.name || 'Defi Oracle Meta Mainnet'}</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Head Age</div>
<div className="mt-2 text-lg font-semibold">
{chainStatus.head_age_sec != null ? `${Math.round(chainStatus.head_age_sec)}s` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">Latest public RPC head freshness.</div>
<div className="mt-2 text-xs opacity-75">Chain visibility is currently {chainVisibilityState}.</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">RPC Latency</div>
<div className="mt-2 text-lg font-semibold">
{chainStatus.latency_ms != null ? `${Math.round(chainStatus.latency_ms)}ms` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">Public Chain 138 RPC probe latency.</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Latest Transaction</div>
<div className="mt-2 text-lg font-semibold">
{activityContext.latest_transaction_block_number != null ? `#${activityContext.latest_transaction_block_number}` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">{latestTransactionAgeLabel}</div>
<div className="mt-2 text-xs opacity-75">
Latest visible transaction freshness{txCompleteness ? ` · ${txCompleteness}` : ''}.
</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Last Non-Empty Block</div>
<div className="mt-2 text-lg font-semibold">
{activityContext.last_non_empty_block_number != null ? `#${activityContext.last_non_empty_block_number}` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">
{activityContext.block_gap_to_latest_transaction != null
? `${activityContext.block_gap_to_latest_transaction.toLocaleString()} blocks behind tip`
: 'Gap unavailable'}
</div>
</div>
<div className="grid gap-3 md:grid-cols-3">
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Chain 138 Status</div>
<div className="mt-2 text-lg font-semibold">{chainStatus.status || 'unknown'}</div>
<div className="mt-1 text-sm opacity-80">{chainStatus.name || 'Defi Oracle Meta Mainnet'}</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">Head Age</div>
<div className="mt-2 text-lg font-semibold">
{chainStatus.head_age_sec != null ? `${Math.round(chainStatus.head_age_sec)}s` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">Latest public RPC head freshness.</div>
<div className="mt-2 text-xs opacity-75">Chain visibility is currently {chainVisibilityState}.</div>
</div>
<div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide opacity-70">RPC Latency</div>
<div className="mt-2 text-lg font-semibold">
{chainStatus.latency_ms != null ? `${Math.round(chainStatus.latency_ms)}ms` : 'Unknown'}
</div>
<div className="mt-1 text-sm opacity-80">Public Chain 138 RPC probe latency.</div>
</div>
</div>
) : null}
@@ -683,6 +693,17 @@ export default function Home({
))}
</div>
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-3">
{activityMetricCards.map((card) => (
<Card key={card.label}>
<div className="text-sm text-gray-600 dark:text-gray-400">{card.label}</div>
<div className="text-xl font-bold sm:text-2xl">{card.value}</div>
<div className="mt-2 text-sm text-gray-700 dark:text-gray-300">{card.note}</div>
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{card.detail}</div>
</Card>
))}
</div>
{mode === 'guided' ? (
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-4">
{secondaryMetricCards.map((card) => (
@@ -718,7 +739,11 @@ export default function Home({
)}
<div className="mb-8">
<ActivityContextPanel context={activityContext} title={mode === 'guided' ? 'Chain Activity Context' : 'Freshness & Activity'} />
<ActivityContextPanel
context={activityContext}
title="Freshness Interpretation"
compact
/>
<FreshnessTrustNote
className="mt-3"
context={activityContext}