From 081295c94070d8562728f077068dc83fe169f6a9 Mon Sep 17 00:00:00 2001 From: Martin Eckardt Date: Fri, 28 Nov 2025 10:46:43 -0500 Subject: [PATCH 1/3] Clean up prop handling --- app/(home)/stats/l1/[[...slug]]/page.tsx | 25 ++++------- app/docs/styles.css | 7 --- components/stats/ChainMetricsPage.tsx | 57 ++++++++++-------------- 3 files changed, 32 insertions(+), 57 deletions(-) diff --git a/app/(home)/stats/l1/[[...slug]]/page.tsx b/app/(home)/stats/l1/[[...slug]]/page.tsx index 5552b20e89b..286be04bbcc 100644 --- a/app/(home)/stats/l1/[[...slug]]/page.tsx +++ b/app/(home)/stats/l1/[[...slug]]/page.tsx @@ -4,6 +4,12 @@ import l1ChainsData from "@/constants/l1-chains.json"; import { Metadata } from "next"; import { L1Chain } from "@/types/stats"; +// Helper function to find chain by slug +function findChainBySlug(slug?: string): L1Chain | null { + if (!slug) return null; + return l1ChainsData.find((c) => c.slug === slug) as L1Chain || null; +} + export async function generateMetadata({ params, }: { @@ -11,7 +17,7 @@ export async function generateMetadata({ }): Promise { const resolvedParams = await params; const slug = Array.isArray(resolvedParams.slug) ? resolvedParams.slug[0] : resolvedParams.slug; - const currentChain = l1ChainsData.find((c) => c.slug === slug) as L1Chain; + const currentChain = findChainBySlug(slug); if (!currentChain) { return notFound(); } @@ -52,22 +58,9 @@ export default async function L1Metrics({ if (!slug) { notFound(); } - const currentChain = l1ChainsData.find((c) => c.slug === slug) as L1Chain; + const currentChain = findChainBySlug(slug); if (!currentChain) { notFound(); } - return ( - - ); + return ; } diff --git a/app/docs/styles.css b/app/docs/styles.css index 974ba5e8884..55d9ab15662 100644 --- a/app/docs/styles.css +++ b/app/docs/styles.css @@ -401,13 +401,6 @@ body:has([data-granite-banner])[data-layout="docs"] [data-sidebar="sidebar"] { } } -/* Sidebar content area - DOCS ONLY */ -body[data-layout="docs"] #nd-sidebar > div, -body[data-layout="docs"] [data-sidebar="sidebar"] > div { - /*padding-left: 0.25rem !important; - padding-right: 0.25rem !important;*/ -} - /* Reduce sidebar header spacing - DOCS ONLY */ body[data-layout="docs"] #nd-sidebar > div:first-child { padding-bottom: 0.5rem !important; diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx index d017af4c65c..1eee4a3687f 100644 --- a/components/stats/ChainMetricsPage.tsx +++ b/components/stats/ChainMetricsPage.tsx @@ -5,10 +5,8 @@ import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import {Users, Activity, FileText, MessageSquare, TrendingUp, UserPlus, Hash, Code2, Gauge, DollarSign, Clock, Fuel, ArrowUpRight, Twitter, Linkedin } from "lucide-react"; import { StatsBubbleNav } from "@/components/stats/stats-bubble.config"; -import { ChartSkeletonLoader } from "@/components/ui/chart-skeleton"; import { ExplorerDropdown } from "@/components/stats/ExplorerDropdown"; import { AvalancheLogo } from "@/components/navigation/avalanche-logo"; -import l1ChainsData from "@/constants/l1-chains.json"; import { L1Chain } from "@/types/stats"; interface TimeSeriesDataPoint { @@ -60,35 +58,26 @@ interface CChainMetrics { } interface ChainMetricsPageProps { - chainId?: string; - chainName?: string; - description?: string; - themeColor?: string; - chainLogoURI?: string; - website?: string; - socials?: { - twitter?: string; - linkedin?: string; - }; + chain: L1Chain; } -export default function ChainMetricsPage({ - chainId = "43114", - chainName = "Avalanche C-Chain", - description = "Real-time metrics and analytics for the Avalanche C-Chain", - themeColor = "#E57373", - chainLogoURI, - website, - socials, -}: ChainMetricsPageProps) { +export default function ChainMetricsPage({ chain }: ChainMetricsPageProps) { const [metrics, setMetrics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - // Find the current chain to get explorers - const currentChain = useMemo(() => { - return l1ChainsData.find((chain) => chain.chainId === chainId) as L1Chain | undefined; - }, [chainId]); + // Destructure chain properties for cleaner code + const { + chainId, + chainName, + chainLogoURI, + color: themeColor = "#E57373", + description = `Real-time insights into ${chainName} L1 activity and network usage`, + website, + socials, + category, + explorers + } = chain; const fetchData = async () => { try { @@ -658,7 +647,7 @@ export default function ChainMetricsPage({ {description}

- {currentChain?.category && ( + {category && (
- {currentChain.category} + {category}
)} @@ -693,9 +682,9 @@ export default function ChainMetricsPage({ )} {/* Social buttons */} - {currentChain?.socials && (currentChain.socials.twitter || currentChain.socials.linkedin) && ( + {socials && (socials.twitter || socials.linkedin) && ( <> - {currentChain.socials.twitter && ( + {socials.twitter && ( )} - {currentChain.socials.linkedin && ( + {socials.linkedin && ( - )} - - {/* Social buttons */} - {socials && (socials.twitter || socials.linkedin) && ( - <> - {socials.twitter && ( - - )} - {socials.linkedin && ( - + )} + + {/* Social buttons */} + {socials && (socials.twitter || socials.linkedin) && ( + <> + {socials.twitter && ( + - )} - - )} - - {explorers && ( -
- + + + )} + {socials.linkedin && ( +
- )} - + asChild + className="border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400 dark:hover:border-zinc-600 px-2" + > + + + + + )} + + )} + + {explorers && ( +
+ +
+ )} - )} +