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 fb36060182c..46e5b155bdb 100644 --- a/app/docs/styles.css +++ b/app/docs/styles.css @@ -359,13 +359,6 @@ body[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..4df6aa22ae5 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}
)} - {!chainName.includes("C-Chain") && ( -
- {/* Main action buttons */} -
- {website && ( - - )} - - {/* Social buttons */} - {currentChain?.socials && (currentChain.socials.twitter || currentChain.socials.linkedin) && ( - <> - {currentChain.socials.twitter && ( - - )} - {currentChain.socials.linkedin && ( - + )} + + {/* Social buttons */} + {socials && (socials.twitter || socials.linkedin) && ( + <> + {socials.twitter && ( + - )} - - )} - - {currentChain?.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 && ( +
+ +
+ )}
- )} + diff --git a/constants/l1-chains.json b/constants/l1-chains.json index e72bda1d4c6..4a2343b2811 100644 --- a/constants/l1-chains.json +++ b/constants/l1-chains.json @@ -58,6 +58,12 @@ { "chainId": "43114", "chainName": "Avalanche C-Chain", + "description": "The Avalanche C-Chain is the EVM chain of the Primary L1. It is the liquidity hub of the Avalanche ecosystem and is validated by a large permissionless validator set.", + "website": "https://avax.network/", + "socials": { + "twitter": "avax", + "linkedin": "avalancheavax" + }, "chainLogoURI": "https://images.ctfassets.net/gcj8jwzm6086/5VHupNKwnDYJvqMENeV7iJ/3e4b8ff10b69bfa31e70080a4b142cd0/avalanche-avax-logo.svg", "subnetId": "11111111111111111111111111111111LpoYY", "slug": "c-chain", @@ -135,6 +141,7 @@ "description": "The Binary Holdings is a Web3 infrastructure firm powers loyalty programs for telcos in South East Asia, has officially deployed its native Avalanche L1, giving TBH the foundation to accelerate user adoption through its unique telco-powered distribution network.", "website": "https://www.thebinaryholdings.com/", "socials": { + "twitter": "thebinaryhldgs", "linkedin": "the-binary-holdings" }, "explorers": [