Skip to content

Commit 9e294db

Browse files
martineckardtmartineckardt
authored
Merge pull request #3337 from ava-labs/federiconardelli7/improve-header-stat-page
improve header stat page
2 parents b30791a + 1989060 commit 9e294db

File tree

2 files changed

+141
-117
lines changed

2 files changed

+141
-117
lines changed

‎app/(home)/stats/overview/page.tsx‎

Lines changed: 137 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -363,139 +363,159 @@ export default function AvalancheMetrics() {
363363
return (
364364
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
365365
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
366-
<div className="mb-10">
367-
<div className="flex items-start justify-between gap-4 mb-3">
368-
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
369-
Avalanche L1s Index
370-
</h1>
371-
<Button
372-
size="sm"
373-
onClick={() =>
374-
window.open(
375-
"https://github.com/ava-labs/builders-hub/blob/master/constants/l1-chains.json",
376-
"_blank"
377-
)
378-
}
379-
className="flex-shrink-0 bg-black dark:bg-white text-white dark:text-black transition-colors hover:bg-neutral-800 dark:hover:bg-neutral-200"
380-
>
381-
Submit Your L1
382-
<ArrowUpRight className="ml-1.5 h-4 w-4" />
383-
</Button>
384-
</div>
385-
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
386-
Opinionated stats for Mainnet L1s in the Avalanche ecosystem.
387-
</p>
388-
</div>
366+
{/* Hero Section */}
367+
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12 mb-10">
368+
{/* Multi-layer gradient background */}
369+
<div className="absolute inset-0 bg-black" />
370+
<div
371+
className="absolute inset-0 opacity-60"
372+
style={{
373+
background: 'linear-gradient(140deg, #E84142 0%, transparent 70%)'
374+
}}
375+
/>
376+
<div
377+
className="absolute inset-0 opacity-40"
378+
style={{
379+
background: 'linear-gradient(to top left, #3752AC 0%, transparent 50%)'
380+
}}
381+
/>
382+
<div
383+
className="absolute inset-0 opacity-30"
384+
style={{
385+
background: 'radial-gradient(circle at 50% 50%, #E84142 0%, #3752AC 30%, transparent 70%)'
386+
}}
387+
/>
388+
389+
{/* Content */}
390+
<div className="relative z-10 space-y-8">
391+
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
392+
{/* Title and description */}
393+
<div className="flex-1">
394+
<h1 className="text-3xl sm:text-4xl font-semibold text-white mb-3">
395+
Avalanche L1s Index
396+
</h1>
397+
<p className="text-white/80 text-sm sm:text-base max-w-3xl">
398+
Opinionated stats for Mainnet L1s in the Avalanche ecosystem.
399+
</p>
400+
</div>
389401

390-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
391-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
392-
<div className="p-6 text-center">
393-
<p className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
394-
Mainnet Avalanche L1s
395-
</p>
396-
<p className="text-4xl font-semibold tracking-tight text-black dark:text-white">
397-
{overviewMetrics.chains.length}
398-
</p>
402+
{/* Submit button */}
403+
<Button
404+
size="sm"
405+
onClick={() =>
406+
window.open(
407+
"https://github.com/ava-labs/builders-hub/blob/master/constants/l1-chains.json",
408+
"_blank"
409+
)
410+
}
411+
className="flex-shrink-0 border border-white bg-black text-white hover:bg-neutral-800 dark:bg-transparent dark:hover:border-neutral-400 transition-colors"
412+
>
413+
Submit Your L1
414+
<ArrowUpRight className="ml-1.5 h-4 w-4" />
415+
</Button>
399416
</div>
400-
</Card>
401417

402-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
403-
<div className="p-6 text-center">
404-
<p className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
405-
Daily Transactions
406-
</p>
407-
<p className="text-4xl font-semibold tracking-tight text-black dark:text-white">
408-
{formatNumber(
409-
typeof overviewMetrics.aggregated.totalTxCount
410-
.current_value === "number"
411-
? Math.round(
412-
overviewMetrics.aggregated.totalTxCount.current_value /
413-
365
414-
)
415-
: 0
416-
)}
417-
</p>
418-
</div>
419-
</Card>
418+
{/* Separator */}
419+
<div className="border-t border-white/20" />
420420

421-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
422-
<div className="p-6 text-center">
423-
<p className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
424-
Combined Throughput
425-
</p>
426-
<p className="text-4xl font-semibold tracking-tight text-black dark:text-white">
427-
{(() => {
428-
// Calculate total TPS from all chains
429-
const totalTxs =
421+
{/* Main metrics */}
422+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
423+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center">
424+
<p className="mb-2 text-sm font-medium text-white/60">
425+
Mainnet Avalanche L1s
426+
</p>
427+
<p className="text-4xl font-semibold tracking-tight text-white">
428+
{overviewMetrics.chains.length}
429+
</p>
430+
</div>
431+
432+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center">
433+
<p className="mb-2 text-sm font-medium text-white/60">
434+
Daily Transactions
435+
</p>
436+
<p className="text-4xl font-semibold tracking-tight text-white">
437+
{formatNumber(
430438
typeof overviewMetrics.aggregated.totalTxCount
431439
.current_value === "number"
432-
? overviewMetrics.aggregated.totalTxCount.current_value
433-
: 0;
434-
const secondsInYear = 365 * 24 * 60 * 60;
435-
const tps = (totalTxs / secondsInYear).toFixed(2);
436-
return tps;
437-
})()}{" "}
438-
TPS
439-
</p>
440-
</div>
441-
</Card>
442-
</div>
440+
? Math.round(
441+
overviewMetrics.aggregated.totalTxCount.current_value /
442+
365
443+
)
444+
: 0
445+
)}
446+
</p>
447+
</div>
443448

444-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
445-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
446-
<div className="p-5 text-center">
447-
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
448-
Daily ICM Count
449-
</p>
450-
<p className="text-2xl font-semibold text-black dark:text-white">
451-
{formatNumber(
452-
Math.round(
453-
overviewMetrics.aggregated.totalICMMessages.current_value /
454-
365
455-
)
456-
)}
457-
</p>
449+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center">
450+
<p className="mb-2 text-sm font-medium text-white/60">
451+
Combined Throughput
452+
</p>
453+
<p className="text-4xl font-semibold tracking-tight text-white">
454+
{(() => {
455+
const totalTxs =
456+
typeof overviewMetrics.aggregated.totalTxCount
457+
.current_value === "number"
458+
? overviewMetrics.aggregated.totalTxCount.current_value
459+
: 0;
460+
const secondsInYear = 365 * 24 * 60 * 60;
461+
const tps = (totalTxs / secondsInYear).toFixed(2);
462+
return tps;
463+
})()}{" "}
464+
TPS
465+
</p>
466+
</div>
458467
</div>
459-
</Card>
460468

461-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
462-
<div className="p-5 text-center">
463-
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
464-
Total Validators
465-
</p>
466-
<p className="text-2xl font-semibold text-black dark:text-white">
467-
{formatNumber(overviewMetrics.aggregated.totalValidators)}
468-
</p>
469-
</div>
470-
</Card>
469+
{/* Secondary metrics */}
470+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
471+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center">
472+
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-white/60">
473+
Daily ICM Count
474+
</p>
475+
<p className="text-2xl font-semibold text-white">
476+
{formatNumber(
477+
Math.round(
478+
overviewMetrics.aggregated.totalICMMessages.current_value /
479+
365
480+
)
481+
)}
482+
</p>
483+
</div>
471484

472-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
473-
<div className="p-5 text-center">
474-
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
475-
All-Time Validation Fees
476-
</p>
477-
<div className="flex items-center justify-center gap-2">
478-
<AvalancheLogo className="w-6 h-6" fill="#E84142" />
479-
<p className="text-2xl font-semibold text-black dark:text-white">
480-
8,310
485+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center">
486+
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-white/60">
487+
Total Validators
488+
</p>
489+
<p className="text-2xl font-semibold text-white">
490+
{formatNumber(overviewMetrics.aggregated.totalValidators)}
481491
</p>
482492
</div>
483-
</div>
484-
</Card>
485493

486-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0">
487-
<div className="p-5 text-center">
488-
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
489-
Total Network Fees Burned
490-
</p>
491-
<div className="flex items-center justify-center gap-2">
492-
<AvalancheLogo className="w-6 h-6" fill="#E84142" />
493-
<p className="text-2xl font-semibold text-black dark:text-white">
494-
{formatNumber(4930978)}
494+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center">
495+
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-white/60">
496+
All-Time Validation Fees
495497
</p>
498+
<div className="flex items-center justify-center gap-2">
499+
<AvalancheLogo className="w-6 h-6" fill="white" />
500+
<p className="text-2xl font-semibold text-white">
501+
8,310
502+
</p>
503+
</div>
504+
</div>
505+
506+
<div className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center">
507+
<p className="mb-3 text-xs font-medium uppercase tracking-wide text-white/60">
508+
Total Network Fees Burned
509+
</p>
510+
<div className="flex items-center justify-center gap-2">
511+
<AvalancheLogo className="w-6 h-6" fill="white" />
512+
<p className="text-2xl font-semibold text-white">
513+
{formatNumber(4930978)}
514+
</p>
515+
</div>
496516
</div>
497517
</div>
498-
</Card>
518+
</div>
499519
</div>
500520

501521
<div className="border-t border-neutral-200 dark:border-neutral-800 my-8"></div>

‎constants/l1-chains.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
{
7272
"name": "Avalanche Explorer",
7373
"link": "https://subnets.avax.network/c-chain"
74+
},
75+
{
76+
"name": "SnowScan",
77+
"link": "https://snowscan.xyz/"
7478
}
7579
]
7680
},

0 commit comments

Comments
 (0)