d-bis/explorer-monorepo
4
0
Fork 0
Code Issues Pull Requests 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

77
frontend/src/components/common/ActivityContextPanel.tsx
View File

@@ -49,9 +49,11 @@ function renderHeadline(context: ChainActivityContext): string {
export default function ActivityContextPanel({
context,
title = 'Chain Activity Context',
compact = false,
}: {
context: ChainActivityContext
title?: string
compact?: boolean
}) {
const { mode } = useUiMode()
const tone = resolveTone(context.state)
@@ -62,7 +64,7 @@ export default function ActivityContextPanel({
return (
<Card className="border border-sky-200 bg-sky-50/60 dark:border-sky-900/40 dark:bg-sky-950/20" title={title}>
<div className="flex flex-col gap-4">
<div className={`flex flex-col ${compact ? 'gap-3' : 'gap-4'}`}>
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div>
<div className="text-base font-semibold text-gray-900 dark:text-white">{renderHeadline(context)}</div>
@@ -75,48 +77,49 @@ export default function ActivityContextPanel({
<EntityBadge label={resolveLabel(context.state)} tone={tone} />
</div>
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Latest Block</div>
<div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
{compact ? (
<div className="rounded-2xl border border-white/50 bg-white/70 px-4 py-3 text-sm leading-6 text-gray-700 dark:border-white/10 dark:bg-black/10 dark:text-gray-300">
Latest block{' '}
<span className="font-semibold text-gray-900 dark:text-white">
{context.latest_block_number != null ? `#${context.latest_block_number}` : 'Unknown'}
</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{formatRelativeAge(context.latest_block_timestamp)}
</div>
</div>
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Latest Transaction</div>
<div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
</span>{' '}
was {formatRelativeAge(context.latest_block_timestamp)}. Latest visible transaction was{' '}
<span className="font-semibold text-gray-900 dark:text-white">
{context.latest_transaction_block_number != null ? `#${context.latest_transaction_block_number}` : 'Unknown'}
</span>{' '}
{formatRelativeAge(context.latest_transaction_timestamp)}.{' '}
{mode === 'guided'
? 'Use the block gap and last non-empty block above to tell low activity apart from an indexing issue.'
: dualTimelineLabel}
</div>
) : (
<div className="grid gap-3 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Timeline Summary</div>
<div className="mt-2 text-sm leading-6 text-gray-700 dark:text-gray-300">
Latest block{' '}
<span className="font-semibold text-gray-900 dark:text-white">
{context.latest_block_number != null ? `#${context.latest_block_number}` : 'Unknown'}
</span>{' '}
was {formatRelativeAge(context.latest_block_timestamp)}. Latest visible transaction was{' '}
<span className="font-semibold text-gray-900 dark:text-white">
{context.latest_transaction_block_number != null ? `#${context.latest_transaction_block_number}` : 'Unknown'}
</span>{' '}
{formatRelativeAge(context.latest_transaction_timestamp)}.
</div>
</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{formatRelativeAge(context.latest_transaction_timestamp)}
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Visibility Signal</div>
<div className="mt-2 text-sm leading-6 text-gray-700 dark:text-gray-300">
{mode === 'guided'
? 'Use the block gap and the last non-empty block above to tell low activity apart from an indexing issue.'
: dualTimelineLabel}
</div>
</div>
</div>
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Last Non-Empty Block</div>
<div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
{context.last_non_empty_block_number != null ? `#${context.last_non_empty_block_number}` : 'Unknown'}
</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{formatRelativeAge(context.last_non_empty_block_timestamp)}
</div>
</div>
<div className="rounded-2xl border border-white/50 bg-white/70 p-4 dark:border-white/10 dark:bg-black/10">
<div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Block Gap</div>
<div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
{context.block_gap_to_latest_transaction != null ? context.block_gap_to_latest_transaction.toLocaleString() : 'Unknown'}
</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{mode === 'guided'
? 'Difference between the current tip and the latest visible transaction block.'
: dualTimelineLabel}
</div>
</div>
</div>
)}
<div className="flex flex-wrap gap-4 text-sm text-gray-600 dark:text-gray-400">
<div className={`flex flex-wrap text-sm text-gray-600 dark:text-gray-400 ${compact ? 'gap-x-4 gap-y-2' : 'gap-4'}`}>
{context.latest_transaction_block_number != null ? (
<Link href={`/blocks/${context.latest_transaction_block_number}`} className="text-primary-600 hover:underline">
Open latest transaction block →