From fb0e8a9fbd89c5c124ddf570318d55fb8e8a9692 Mon Sep 17 00:00:00 2001 From: Matt Beuttenmuller Date: Mon, 31 Aug 2026 08:57:48 -0400 Subject: [PATCH 1/6] Remove upgrades/changelog --- README.md | 5 +- app/components/AppShell.tsx | 86 ++-- app/components/ui/EmptyState.tsx | 2 +- app/navigation.test.ts | 5 - app/navigation.ts | 4 +- app/page.tsx | 6 - app/sitemap.ts | 5 +- app/snapshots/page.tsx | 2 +- app/upgrades/UpgradesClient.tsx | 336 -------------- app/upgrades/changelog/ChangelogClient.tsx | 322 ------------- .../changelog/[slug]/ChangeDetailClient.tsx | 269 ----------- app/upgrades/changelog/[slug]/loading.tsx | 31 -- app/upgrades/changelog/[slug]/page.tsx | 79 ---- app/upgrades/changelog/loading.tsx | 26 -- app/upgrades/changelog/page.tsx | 19 - app/upgrades/components/Badges.tsx | 156 ------- app/upgrades/components/Breadcrumb.tsx | 48 -- app/upgrades/components/Carousel.tsx | 134 ------ app/upgrades/components/Decentralized.tsx | 7 - app/upgrades/components/DecentralizedV2.tsx | 431 ------------------ .../components/FeaturedVibenetCarousel.tsx | 71 --- app/upgrades/components/LifecycleTooltip.tsx | 90 ---- .../components/UpgradeIllustration.tsx | 23 - app/upgrades/data/changes.ts | 370 --------------- app/upgrades/data/upgrades.ts | 112 ----- app/upgrades/data/vibenet.ts | 66 --- app/upgrades/library/display.ts | 125 ----- app/upgrades/library/format.ts | 83 ---- app/upgrades/library/lifecycle.ts | 21 - app/upgrades/library/specUrls.ts | 3 - app/upgrades/library/types.ts | 99 ---- app/upgrades/library/upgrades.test.ts | 187 -------- app/upgrades/loading.tsx | 21 - app/upgrades/page.tsx | 18 - app/upgrades/upgrade/[fork]/loading.tsx | 43 -- app/upgrades/upgrade/[fork]/page.tsx | 129 ------ app/vibenet/data/features.ts | 6 +- app/vibenet/library/types.ts | 2 +- public/AGENTS.md | 8 +- public/llms-full.txt | 2 - public/llms.txt | 11 +- scripts/agents.mjs | 2 +- scripts/lib/config.mjs | 10 +- 43 files changed, 60 insertions(+), 3415 deletions(-) delete mode 100644 app/upgrades/UpgradesClient.tsx delete mode 100644 app/upgrades/changelog/ChangelogClient.tsx delete mode 100644 app/upgrades/changelog/[slug]/ChangeDetailClient.tsx delete mode 100644 app/upgrades/changelog/[slug]/loading.tsx delete mode 100644 app/upgrades/changelog/[slug]/page.tsx delete mode 100644 app/upgrades/changelog/loading.tsx delete mode 100644 app/upgrades/changelog/page.tsx delete mode 100644 app/upgrades/components/Badges.tsx delete mode 100644 app/upgrades/components/Breadcrumb.tsx delete mode 100644 app/upgrades/components/Carousel.tsx delete mode 100644 app/upgrades/components/Decentralized.tsx delete mode 100644 app/upgrades/components/DecentralizedV2.tsx delete mode 100644 app/upgrades/components/FeaturedVibenetCarousel.tsx delete mode 100644 app/upgrades/components/LifecycleTooltip.tsx delete mode 100644 app/upgrades/components/UpgradeIllustration.tsx delete mode 100644 app/upgrades/data/changes.ts delete mode 100644 app/upgrades/data/upgrades.ts delete mode 100644 app/upgrades/data/vibenet.ts delete mode 100644 app/upgrades/library/display.ts delete mode 100644 app/upgrades/library/format.ts delete mode 100644 app/upgrades/library/lifecycle.ts delete mode 100644 app/upgrades/library/specUrls.ts delete mode 100644 app/upgrades/library/types.ts delete mode 100644 app/upgrades/library/upgrades.test.ts delete mode 100644 app/upgrades/loading.tsx delete mode 100644 app/upgrades/page.tsx delete mode 100644 app/upgrades/upgrade/[fork]/loading.tsx delete mode 100644 app/upgrades/upgrade/[fork]/page.tsx diff --git a/README.md b/README.md index 478bdf24..5cfa13fb 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Base Chain Dashboard -One UI for Base network dashboards and stats: snapshots, network upgrades, and -the Vibenet devnet explorer/faucet, under a single shell. +One UI for Base network dashboards and stats: snapshots and the Vibenet devnet +explorer/faucet, under a single shell. A standalone Next.js (App Router) app, deployed on Vercel. Migrated out of the internal Nx template so it builds and ships with the standard Next toolchain. @@ -61,7 +61,6 @@ outside this repo at the org/platform level. - `app/` — App Router routes and API handlers - `snapshots/` — Reth v2 snapshot browser (`/api/snapshots` reads Cloudflare R2) - - `upgrades/` — network upgrade schedule, changelog, per-fork detail - `vibenet/` — devnet explorer and faucet - `components/` — shared shell and UI primitives - `theme.ts` / `spectrum.ts` / `globals.css` — BDS design tokens diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx index d7781b59..fbd6ee67 100644 --- a/app/components/AppShell.tsx +++ b/app/components/AppShell.tsx @@ -8,10 +8,9 @@ import { AnimatePresence, easeOut, motion, useIsPresent, useMotionTemplate, useM import { Toaster } from 'sonner'; import { getActiveParent, isChildActive, isTopNavActive, navActiveParent, navHighlightPath, NAV_ITEMS, NavIcon, titleForPath } from '../navigation'; -import { BLUE, BORDER, DISABLED, INK, MUTED, SELECTED } from '../theme'; -import { getChangeBySlug } from '../upgrades/data/changes'; -import { demoBreadcrumb } from '../vibenet/demos/catalogue'; -import { getUpgradeById } from '../upgrades/data/upgrades'; + +import { BLUE, BORDER, BRAND_BLUE, DISABLED, INK, MUTED, SELECTED } from '../theme'; +import { demoLabel, demoBreadcrumb } from '../vibenet/demos/catalogue'; import { trackNavClick } from '../analytics/events'; import { navExitingHighlightPath, navSlideDirection, type NavPresenceCustom } from './nav-motion'; @@ -95,8 +94,8 @@ const styles: Record = { borderRadius: 999, padding: '1px 6px', }, - // Pinned below the sliding panes so Status/Support/Docs/Blog stay put when - // a section sub-nav slides in. The switch sits on the last row beside Blog. + // Pinned below the sliding panes so Status/Support/Docs/Upgrades/Blog stay put + // when a section sub-nav slides in. The switch sits on the last row beside Blog. sidebarFooter: { display: 'flex', flexDirection: 'column', @@ -203,22 +202,6 @@ function NavGlyph({ name }: NavGlyphProps) { ); - case 'upgrades': - return ( - - - - - ); - case 'changelog': - return ( - - - - ); case 'vibenet': return ( @@ -581,8 +564,41 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
- - + + + + + + + Status + + + + + + + + Support + + + + + + + + Docs + + + + + + + + + Upgrades + +
+ @@ -843,28 +859,6 @@ export function AppShell({ children }: PropsWithChildren) { >
{(() => { - const slugMatch = pathname.match(/^\/upgrades\/changelog\/(.+)$/); - if (slugMatch) { - const change = getChangeBySlug(slugMatch[1]); - return ( - - ); - } - const upgradeMatch = pathname.match(/^\/upgrades\/upgrade\/(.+)$/); - if (upgradeMatch) { - const upgrade = getUpgradeById(upgradeMatch[1]); - return ( - - ); - } if (pathname.startsWith('/vibenet') && pathname !== '/vibenet') { let childLabel = title; let middle: { label: string; href: string } | undefined; diff --git a/app/components/ui/EmptyState.tsx b/app/components/ui/EmptyState.tsx index 1444b881..56dba82e 100644 --- a/app/components/ui/EmptyState.tsx +++ b/app/components/ui/EmptyState.tsx @@ -13,7 +13,7 @@ type EmptyStateProps = { }; // Shared "nothing here" / "coming soon" message. Consolidates the repeated -// muted-text-in-a-card blocks across the changelog, carousels, and detail view. +// muted-text-in-a-card blocks across list and detail views. export function EmptyState({ description, title, bordered = true, className }: EmptyStateProps) { return (
{ }); describe('isTopNavActive', () => { - it('does not highlight Upgrades on the changelog path', () => { - expect(isTopNavActive({ label: 'Upgrades', href: '/upgrades', icon: 'upgrades', enabled: true }, '/upgrades/changelog')).toBe(false); - expect(isTopNavActive({ label: 'Changelog', href: '/upgrades/changelog', icon: 'changelog', enabled: true }, '/upgrades/changelog')).toBe(true); - }); - it('highlights a section root while inside it', () => { expect(isTopNavActive({ label: 'Vibenet', href: '/vibenet', icon: 'vibenet', enabled: true, children: [] }, '/vibenet/faucet')).toBe(true); }); diff --git a/app/navigation.ts b/app/navigation.ts index d2947338..d6e3f90e 100644 --- a/app/navigation.ts +++ b/app/navigation.ts @@ -2,7 +2,7 @@ import { BENCHMARK_ENABLED } from './benchmark/flag'; import { EXPLORER_ENABLED, EXPLORER_LABEL } from './internal-explorer/flag'; import { demoBreadcrumb } from './vibenet/demos/catalogue'; -export type NavIcon = 'home' | 'snapshots' | 'upgrades' | 'changelog' | 'vibenet' | 'overview' | 'demos' | 'faucet' | 'explorer' | 'internal-explorer' | 'benchmark' | 'runs' | 'loadtest'; +export type NavIcon = 'home' | 'snapshots' | 'vibenet' | 'overview' | 'demos' | 'faucet' | 'explorer' | 'internal-explorer' | 'benchmark' | 'runs' | 'loadtest'; export type NavChild = { label: string; @@ -32,8 +32,6 @@ export const NAV_ITEMS: NavItem[] = [ { label: 'Explorer', href: '/vibenet/explorer', icon: 'explorer' }, ], }, - { label: 'Upgrades', href: '/upgrades', icon: 'upgrades', enabled: true }, - { label: 'Changelog', href: '/upgrades/changelog', icon: 'changelog', enabled: true }, { label: 'Snapshots', href: '/snapshots', icon: 'snapshots', enabled: true }, // Internal Explorer is internal-only; present only in the internal build // target (deploy.config.mjs). See app/internal-explorer/flag.ts. diff --git a/app/page.tsx b/app/page.tsx index 63c5b115..5ab2e138 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -19,12 +19,6 @@ const SURFACES: Surface[] = [ description: 'An ephemeral Base developer network for testing in-flight features.', enabled: true, }, - { - label: 'Upgrades', - href: '/upgrades', - description: 'Track Base network upgrades and the features shipping in each fork.', - enabled: true, - }, { label: 'Snapshots', href: '/snapshots', diff --git a/app/sitemap.ts b/app/sitemap.ts index bbc6d614..a8e62207 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -3,8 +3,7 @@ import type { MetadataRoute } from 'next'; // Served by Next at /sitemap.xml. Sitemap entries need absolute URLs, so paths // are joined onto BASE_URL (kept in sync with metadataBase in app/layout.tsx). // -// Static, publicly indexable routes only. Dynamic routes -// (upgrades/changelog/[slug], upgrades/upgrade/[fork], vibenet/explorer/*) +// Static, publicly indexable routes only. Dynamic routes (vibenet/explorer/*) // are omitted because their URLs depend on runtime data; add a data-driven // entry per record if/when those pages should be indexed. const BASE_URL = 'https://chain.base.org'; @@ -14,8 +13,6 @@ export default function sitemap(): MetadataRoute.Sitemap { const routes: Array<{ path: string; priority: number; changeFrequency: MetadataRoute.Sitemap[number]['changeFrequency'] }> = [ { path: '/', priority: 1.0, changeFrequency: 'weekly' }, - { path: '/upgrades', priority: 0.8, changeFrequency: 'weekly' }, - { path: '/upgrades/changelog', priority: 0.7, changeFrequency: 'weekly' }, { path: '/snapshots', priority: 0.7, changeFrequency: 'daily' }, // Internal Explorer and Benchmark are internal-only and never on the public // chain.base.org, so they are deliberately absent from this public SEO diff --git a/app/snapshots/page.tsx b/app/snapshots/page.tsx index 4f8c5b8d..64a8eef3 100644 --- a/app/snapshots/page.tsx +++ b/app/snapshots/page.tsx @@ -4,7 +4,7 @@ import { SAMPLE_SNAPSHOTS, Snapshot } from './data'; import { getSnapshots, isNetworkVisibleInUi } from './r2'; import { SnapshotsClient } from './SnapshotsClient'; -// Statically rendered and revalidated, matching app/upgrades/page.tsx. This keeps the +// Statically rendered and revalidated. This keeps the // route prefetchable, so tapping Snapshots paints complete content instead of the // loading skeleton a per-request render would show on every visit. Must stay a // literal for Next to read it; mirrors SNAPSHOT_CACHE_SECONDS in ./r2. diff --git a/app/upgrades/UpgradesClient.tsx b/app/upgrades/UpgradesClient.tsx deleted file mode 100644 index 8a7bc468..00000000 --- a/app/upgrades/UpgradesClient.tsx +++ /dev/null @@ -1,336 +0,0 @@ -'use client'; - -import { useMemo, useState } from 'react'; -import Link from 'next/link'; -import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; - -import { SlideInUp } from '../components/ui/SlideInUp'; - -import { Button } from '../components/ui/Button'; -import { Card } from '../components/ui/Card'; -import { Tabs } from '../components/ui/Tabs'; -import { Text } from '../components/ui/Text'; - -import { StatusPill } from './components/Badges'; -import { UpgradeIllustration } from './components/UpgradeIllustration'; -import { changes } from './data/changes'; -import { upgrades } from './data/upgrades'; -import { - LIFECYCLE_LABELS, - NETWORK_LABELS, - UPGRADE_NETWORKS, -} from './library/display'; -import { formatLifecycleDate } from './library/format'; -import { getLifecycleState } from './library/lifecycle'; -import type { Lifecycle, LifecycleState } from './library/types'; - -type View = 'timeline' | 'upgrade'; - -const GridIcon = ( - -); - -const TimelineIcon = ( - -); - -const VIEW_TABS = [ - { value: 'upgrade', label: 'Grid', icon: GridIcon }, - { value: 'timeline', label: 'Timeline', icon: TimelineIcon }, -]; - -const MONTH_NAMES = [ - 'January', 'February', 'March', 'April', 'May', 'June', - 'July', 'August', 'September', 'October', 'November', 'December', -]; - -type TimelineEntry = { - date: Date; - dateLabel: string; - upgradeId: string; - upgradeName: string; - upgradeSummary: string; - network: keyof Lifecycle; - state: LifecycleState; - changeCount: number; -}; - -function buildTimelineEntries(nowMs: number): TimelineEntry[] { - const entries: TimelineEntry[] = []; - - for (const upgrade of upgrades) { - const count = changes.filter((c) => c.upgrade === upgrade.id).length; - for (const network of UPGRADE_NETWORKS) { - const entry = upgrade.lifecycle[network]; - if (!entry.timestamp) continue; - const date = new Date(entry.timestamp); - entries.push({ - date, - dateLabel: `${MONTH_NAMES[date.getUTCMonth()]} ${date.getUTCDate()}`, - upgradeId: upgrade.id, - upgradeName: upgrade.name, - upgradeSummary: upgrade.summary, - network, - state: getLifecycleState(entry, nowMs), - changeCount: count, - }); - } - } - - entries.sort((a, b) => b.date.getTime() - a.date.getTime()); - return entries; -} - -type MonthGroup = { - label: string; - entries: TimelineEntry[]; -}; - -function groupByMonth(entries: TimelineEntry[]): MonthGroup[] { - const groups: MonthGroup[] = []; - for (const entry of entries) { - const label = `${MONTH_NAMES[entry.date.getUTCMonth()]}`; - const last = groups[groups.length - 1]; - if (last && last.label === label) { - last.entries.push(entry); - } else { - groups.push({ label, entries: [entry] }); - } - } - return groups; -} - -function networkDotColor() { - return 'bg-bds-gray-20'; -} - -function TimelineView({ nowMs }: { nowMs: number }) { - const entries = useMemo(() => buildTimelineEntries(nowMs), [nowMs]); - const months = useMemo(() => groupByMonth(entries), [entries]); - - const planningUpgrades = upgrades - .filter((u) => !u.lifecycle.sepolia.timestamp && !u.lifecycle.mainnet.timestamp) - .reverse(); - - let entryIndex = 0; - - return ( -
-
- - {planningUpgrades.length > 0 && ( -
- - - Upcoming - - -
- {planningUpgrades.map((upgrade) => { - const count = changes.filter((c) => c.upgrade === upgrade.id).length; - const i = entryIndex++; - return ( - -
- - {upgrade.estimate?.mainnet ?? upgrade.estimate?.sepolia ?? 'Coming Soon'} - -
-
- -
- - - {upgrade.name} - - - {upgrade.summary} - -
- Planning - · - - {count} changes - -
- - - ); - })} -
-
- )} - - {months.map((month, mi) => ( -
0 ? 'mt-12' : ''}> - - - {month.label} - - - -
- {month.entries.map((entry) => { - const i = entryIndex++; - return ( - -
- - {entry.dateLabel} - -
- -
- -
- - - - {entry.upgradeName} - - - {entry.upgradeSummary} - -
- - {LIFECYCLE_LABELS[entry.state]} - - · - - {NETWORK_LABELS[entry.network]} - - · - - {entry.changeCount} changes - -
- - - ); - })} -
-
- ))} -
- ); -} - -function UpgradeView({ nowMs }: { nowMs: number }) { - return ( -
- {[...upgrades].reverse().map((upgrade, idx) => { - return ( - - -
-
- - {upgrade.name} - -
- -
-
- - {upgrade.summary} - -
-
-
-
- Sepolia - - {formatLifecycleDate(upgrade.lifecycle.sepolia, upgrade.estimate?.sepolia)} - -
-
- Mainnet - - {formatLifecycleDate(upgrade.lifecycle.mainnet, upgrade.estimate?.mainnet)} - -
-
- -
-
- - - ); - })} -
- ); -} - -export function UpgradesClient() { - const [view, setView] = useState('upgrade'); - const reducedMotion = useReducedMotion(); - const nowMs = Date.now(); - - return ( -
-
- setView(v as View)} - ariaLabel="View mode" - /> -
- - {/* `initial={false}`: the crossfade is for switching views, not for first paint — - on mount it fades up over a just-removed skeleton, leaving the column blank. */} - - {view === 'timeline' ? ( - - - - ) : ( - - - - )} - -
- ); -} diff --git a/app/upgrades/changelog/ChangelogClient.tsx b/app/upgrades/changelog/ChangelogClient.tsx deleted file mode 100644 index caae28e5..00000000 --- a/app/upgrades/changelog/ChangelogClient.tsx +++ /dev/null @@ -1,322 +0,0 @@ -'use client'; - -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import type { ChangeEvent } from 'react'; -import Link from 'next/link'; -import { motion } from 'motion/react'; - -import { LinkCard } from '../../components/ui/Card'; -import { FilterSelect } from '../../components/ui/FilterSelect'; -import { VibenetIcon } from '../../components/ui/icons'; -import { Text } from '../../components/ui/Text'; -import { CategoryBadge, KindBadge, StatusPill } from '../components/Badges'; -import { UpgradeIllustration } from '../components/UpgradeIllustration'; -import { changes } from '../data/changes'; -import { getLifecycleForChange, getUpgradeById, getUpgradesReversed } from '../data/upgrades'; -import { getVibenetChangeById } from '../data/vibenet'; -import { - CATEGORY_METADATA, - CATEGORY_ORDER, - changeDisplayTitle, - changeRefs, - kindLabel, - LIFECYCLE_LABELS, -} from '../library/display'; -import { formatShortDate, toPlainText } from '../library/format'; -import { getLifecycleState } from '../library/lifecycle'; -import type { Change, ChangeCategory, ChangeKind, LifecycleState } from '../library/types'; - -const allKinds: ChangeKind[] = ['eip', 'base']; -const allLifecycle: LifecycleState[] = ['live', 'scheduled', 'planning']; - -function scheduleLabel(change: Change): string { - if (change.upgrade) return getUpgradeById(change.upgrade)?.name ?? change.upgrade; - return getVibenetChangeById(change.id) ? 'Vibenet' : 'Not scheduled'; -} - -// Reverse-chronological rank per upgrade id -const upgradeRankById = new Map( - getUpgradesReversed().map((upgrade, index) => [upgrade.id, index]), -); - -function upgradeRank(change: Change): number { - // Vibenet changes aren't in an upgrade yet, but should display at the top for testing - if (!change.upgrade) { - return getVibenetChangeById(change.id) ? -1 : Number.MAX_SAFE_INTEGER; - } - return upgradeRankById.get(change.upgrade) ?? Number.MAX_SAFE_INTEGER; -} - -function NetworkStatus({ change, network }: { change: Change; network: 'sepolia' | 'mainnet' }) { - const lifecycle = getLifecycleForChange(change); - if (lifecycle) { - const state = getLifecycleState(lifecycle[network]); - const ts = lifecycle[network].timestamp; - if (state === 'live' && ts) { - return {formatShortDate(ts)}; - } - return ( -
- {LIFECYCLE_LABELS[state]} - {ts ? ( - {formatShortDate(ts)} - ) : null} -
- ); - } - - return Coming Soon; -} - -export function ChangelogClient() { - const [query, setQuery] = useState(''); - const [upgradeFilter, setUpgradeFilter] = useState('all'); - const [kindFilter, setKindFilter] = useState('all'); - const [categoryFilter, setCategoryFilter] = useState('all'); - const [lifecycleFilter, setLifecycleFilter] = useState('all'); - const filtered = useMemo(() => { - const rawQuery = query.trim(); - - // Treat the query as a regex when possible so partial patterns like - // "eip-79" or "modexp|clz" work; fall back to a case-insensitive substring - // match when the pattern is incomplete/invalid (e.g. a lone "("). - let matcher: ((text: string) => boolean) | null = null; - if (rawQuery) { - try { - const regex = new RegExp(rawQuery, 'i'); - matcher = (text) => regex.test(text); - } catch { - const lower = rawQuery.toLowerCase(); - matcher = (text) => text.toLowerCase().includes(lower); - } - } - - const next = changes.filter((change) => { - if (upgradeFilter !== 'all' && change.upgrade !== upgradeFilter) return false; - if (kindFilter !== 'all' && change.kind !== kindFilter) return false; - if (categoryFilter !== 'all' && change.category !== categoryFilter) return false; - if (lifecycleFilter !== 'all') { - const lifecycle = getLifecycleForChange(change); - if (!lifecycle) return false; - const matches = - getLifecycleState(lifecycle.sepolia) === lifecycleFilter || - getLifecycleState(lifecycle.mainnet) === lifecycleFilter; - if (!matches) return false; - } - if (matcher) { - const haystack = `${changeDisplayTitle(change)} ${toPlainText(change.summary)} ${change.category} ${changeRefs(change).join(' ')}`; - if (!matcher(haystack)) return false; - } - return true; - }); - - return next.sort((a, b) => { - const rankCmp = upgradeRank(a) - upgradeRank(b); - if (rankCmp !== 0) return rankCmp; - // Fall back to alphabetical for equal rank - return a.title.localeCompare(b.title); - }); - }, [categoryFilter, kindFilter, lifecycleFilter, query, upgradeFilter]); - - const handleQueryChange = useCallback( - (event: ChangeEvent) => setQuery(event.target.value), - [], - ); - const handleKindChange = useCallback( - (value: string) => setKindFilter(value as ChangeKind | 'all'), - [], - ); - const handleCategoryChange = useCallback( - (value: string) => setCategoryFilter(value as ChangeCategory | 'all'), - [], - ); - const handleLifecycleChange = useCallback( - (value: string) => setLifecycleFilter(value as LifecycleState | 'all'), - [], - ); - - // Rows fade in when the filters change, but not on first paint: on mount that plays - // over a just-removed loading skeleton, leaving the table blank for ~180ms. - const mountedRef = useRef(false); - useEffect(() => { - mountedRef.current = true; - }, []); - - return ( - <> -
- ({ value: u.id, label: u.name })), - ]} - /> - ({ value: k, label: kindLabel(k) })), - ]} - /> - ({ value: c, label: CATEGORY_METADATA[c].label })), - ]} - /> - ({ value: s, label: LIFECYCLE_LABELS[s] })), - ]} - /> - -
- -
- - - - - - - - - - - - - {filtered.map((change, idx) => ( - - - - - - - - - ))} - {filtered.length === 0 ? ( - - - - ) : null} - -
- Title - - Type - - Category - - Upgrade - - Sepolia - - Mainnet -
- - - {changeDisplayTitle(change)} - - - - - - - -
- {change.upgrade ? ( -
- -
- ) : getVibenetChangeById(change.id) ? ( - - ) : null} - - {scheduleLabel(change)} - -
- 		- - - -
- No Changes - Try adjusting your search or filter criteria. -
-
- -
- {filtered.map((change) => ( - -
- -
- - -
-
- - {change.title} - - - {toPlainText(change.summary)} - -
- - - {formatShortDate(change.lastUpdated)} - -
- - ))} - {filtered.length === 0 ? ( -
- No Changes - Try adjusting your search or filter criteria. -
- ) : null} -
- -
- - {filtered.length} of {changes.length} changes - -
- - ); -} diff --git a/app/upgrades/changelog/[slug]/ChangeDetailClient.tsx b/app/upgrades/changelog/[slug]/ChangeDetailClient.tsx deleted file mode 100644 index 6399f962..00000000 --- a/app/upgrades/changelog/[slug]/ChangeDetailClient.tsx +++ /dev/null @@ -1,269 +0,0 @@ -'use client'; - -import { useCallback, useMemo, useState } from 'react'; -import type { MouseEvent } from 'react'; -import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; - -import { Button } from '../../../components/ui/Button'; -import { cn } from '../../../components/ui/cn'; -import { ExternalLinkIcon } from '../../../components/ui/icons'; -import { LabeledCard } from '../../../components/ui/LabeledCard'; -import { Text } from '../../../components/ui/Text'; -import { StatusPill } from '../../components/Badges'; -import { getLifecycleForChange, getUpgradeForChange } from '../../data/upgrades'; -import { getVibenetChangeById } from '../../data/vibenet'; -import { - changeRefs, - LIFECYCLE_LABELS, - NETWORK_LABELS, - UPGRADE_NETWORKS, -} from '../../library/display'; -import { formatShortDate } from '../../library/format'; -import { getLifecycleState } from '../../library/lifecycle'; -import type { Change } from '../../library/types'; - -type Tab = 'overview' | 'activity'; - -type ChangeDetailClientProps = { - change: Change; -}; - -export function ChangeDetailClient({ change }: ChangeDetailClientProps) { - const [tab, setTab] = useState('overview'); - const reducedMotion = useReducedMotion(); - const upgrade = getUpgradeForChange(change); - const lifecycle = getLifecycleForChange(change); - const vibenetChange = getVibenetChangeById(change.id); - const vibenetDemo = - vibenetChange && vibenetChange.vibenet.status === 'live' ? vibenetChange.vibenet.demo : undefined; - const relatedEips = changeRefs(change); - - const handleTabClick = useCallback((event: MouseEvent) => { - setTab(event.currentTarget.dataset.tab as Tab); - }, []); - - const summaryHtml = useMemo(() => ({ __html: change.summary }), [change.summary]); - const migrationNotesHtml = useMemo( - () => ({ __html: change.migrationNotes ?? '' }), - [change.migrationNotes], - ); - - return ( -
-
- {(['overview', 'activity'] as const).map((item) => ( - - ))} -
- - {/* `initial={false}`: the crossfade is for switching, not first paint. */} - - {tab === 'overview' ? ( - -
-
- - Summary - - -
- {change.migrationNotes ? ( -
- - Migration Notes - - -
- ) : null} - {change.specUrl ? ( -
- - Specification - - -
- ) : null} - {change.relatedRepos && change.relatedRepos.length > 0 ? ( -
- - Related Repos - -
- {change.relatedRepos.map((repoUrl) => { - const match = repoUrl.match(/github\.com\/([^/]+\/[^/]+)/); - const label = match ? match[1] : repoUrl; - return ( - - ); - })} -
-
- ) : null} - {relatedEips.length > 0 ? ( -
- - Related EIPs - -
- {relatedEips.map((ref) => ( - - {ref} - - ))} -
-
- ) : null} -
- - - ) : null} - - {tab === 'activity' ? ( - -
- Activity Feed Is Coming Soon - - This is where you will be able to track Github issues and PRs for this change. - -
- - ) : null} - -
- ); -} diff --git a/app/upgrades/changelog/[slug]/loading.tsx b/app/upgrades/changelog/[slug]/loading.tsx deleted file mode 100644 index 1d5800c4..00000000 --- a/app/upgrades/changelog/[slug]/loading.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Skeleton } from '../../../components/ui/Skeleton'; - -export default function ChangeDetailLoading() { - return ( -
-
-
-
- - - -
- - -
-
- - -
-
- -
- - - - - -
-
- ); -} diff --git a/app/upgrades/changelog/[slug]/page.tsx b/app/upgrades/changelog/[slug]/page.tsx deleted file mode 100644 index 8410517c..00000000 --- a/app/upgrades/changelog/[slug]/page.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import type { Metadata } from 'next'; -import { notFound } from 'next/navigation'; - -import { Button } from '../../../components/ui/Button'; -import { ExternalLinkIcon } from '../../../components/ui/icons'; -import { Text } from '../../../components/ui/Text'; -import { CategoryBadge, KindBadge, StatusPill } from '../../components/Badges'; -import { getChangeBySlug } from '../../data/changes'; -import { getVibenetChangeById } from '../../data/vibenet'; -import { LIFECYCLE_LABELS } from '../../library/display'; -import { toPlainText } from '../../library/format'; - -import { ChangeDetailClient } from './ChangeDetailClient'; - -type ChangePageProps = { - params: Promise<{ slug: string }>; -}; - -export async function generateMetadata(props: ChangePageProps): Promise { - const { slug } = await props.params; - const change = getChangeBySlug(slug); - if (!change) return {}; - return { - title: `${change.title} · Base Upgrades`, - description: toPlainText(change.summary), - alternates: { - canonical: `/upgrades/changelog/${change.slug}`, - }, - openGraph: { - title: `${change.title} · Base Upgrades`, - description: toPlainText(change.summary), - url: `/upgrades/changelog/${change.slug}`, - }, - }; -} - -export default async function ChangePage(props: ChangePageProps) { - const { slug } = await props.params; - const change = getChangeBySlug(slug); - if (!change) notFound(); - - const vibenetChange = getVibenetChangeById(change.id); - - return ( -
-
-
-
- - - {vibenetChange ? ( - - Vibenet {LIFECYCLE_LABELS[vibenetChange.vibenet.status]} - - ) : null} -
- - {change.title} - -
- {change.kind === 'eip' ? ( -
- -
- ) : null} -
- -
- ); -} diff --git a/app/upgrades/changelog/loading.tsx b/app/upgrades/changelog/loading.tsx deleted file mode 100644 index 08728e1b..00000000 --- a/app/upgrades/changelog/loading.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Skeleton } from '../../components/ui/Skeleton'; - -export default function ChangelogLoading() { - return ( -
-
- - -
- - - -
- {[0, 1, 2, 3, 4, 5].map((i) => ( -
- - -
- ))} -
-
- ); -} diff --git a/app/upgrades/changelog/page.tsx b/app/upgrades/changelog/page.tsx deleted file mode 100644 index 4fcf8883..00000000 --- a/app/upgrades/changelog/page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata } from 'next'; - -import { ChangelogClient } from './ChangelogClient'; - -export const metadata: Metadata = { - title: 'Changelog · Base Upgrades', - description: 'Search and filter Base protocol changes across upgrades and Vibenet testing.', - alternates: { - canonical: '/upgrades/changelog', - }, -}; - -export default function ChangelogPage() { - return ( -
- -
- ); -} diff --git a/app/upgrades/components/Badges.tsx b/app/upgrades/components/Badges.tsx deleted file mode 100644 index 3df132b7..00000000 --- a/app/upgrades/components/Badges.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { cn } from '../../components/ui/cn'; -import { - CATEGORY_METADATA, - kindLabel, - LIFECYCLE_LABELS, - type StatusVariant, - UPGRADE_NETWORKS, -} from '../library/display'; -import { formatShortDate } from '../library/format'; -import { getLifecycleState } from '../library/lifecycle'; -import type { ChangeCategory, ChangeKind, Lifecycle } from '../library/types'; - - -// Each pill reads a step-0 surface, a step-20 border and a step-70/80 label. -// The spectrum inverts under `.dark`, so one set of classes covers both modes: -// step 0 is always the quietest surface and step 70+ always the loudest text. -const statusClassName: Record = { - live: 'border-bds-green-20 bg-bds-green-0 text-bds-green-70', - scheduled: 'border-bds-yellow-20 bg-bds-yellow-0 text-bds-yellow-80', - planning: 'border-bds-gray-15 bg-bds-gray-5 text-bds-gray-60', - draft: 'border-bds-orange-20 bg-bds-orange-0 text-bds-orange-80', - // Base blue reads better than blue-70 against the deep-navy dark surface. - accepted: 'border-bds-blue-20 bg-bds-blue-0 text-bds-blue-70 dark:text-base-blue', -}; - -const dotClassName: Record = { - live: 'bg-bds-green-40', - scheduled: 'bg-bds-yellow-40', - planning: 'bg-bds-gray-30', - draft: 'bg-bds-orange-40', - accepted: 'bg-bds-blue-50', -}; - -type StatusPillProps = { - variant: StatusVariant; - children: React.ReactNode; - className?: string; -}; - -function StatusIcon({ variant }: { variant: StatusVariant }) { - const cls = "h-3 w-3 shrink-0"; - switch (variant) { - case 'live': - return ( - - - - - ); - case 'scheduled': - return ( - - ); - case 'planning': - return ( - - ); - case 'draft': - return ( - - ); - case 'accepted': - return ( - - ); - } -} - -export function StatusPill({ variant, children, className }: StatusPillProps) { - return ( - - - {children} - - ); -} - -type CategoryBadgeProps = { - category: ChangeCategory; -}; - -export function CategoryBadge({ category }: CategoryBadgeProps) { - return ( - - {CATEGORY_METADATA[category].label} - - ); -} - -type KindBadgeProps = { - kind: ChangeKind; -}; - -export function KindBadge({ kind }: KindBadgeProps) { - return ( - - {kindLabel(kind)} - - ); -} - -type LifecycleBadgeProps = { - lifecycle: Lifecycle; - nowMs?: number; -}; - -const NETWORK_ABBREVIATIONS: Record = { - sepolia: 'S', - mainnet: 'M', -}; - -export function LifecycleBadge({ - lifecycle, - nowMs = Date.now(), -}: LifecycleBadgeProps) { - return ( -
- {UPGRADE_NETWORKS.map((network) => { - const state = getLifecycleState(lifecycle[network], nowMs); - const ts = lifecycle[network].timestamp; - return ( -
- - {NETWORK_ABBREVIATIONS[network] ?? network[0].toUpperCase()} - - {LIFECYCLE_LABELS[state]} - {ts ? ( - {formatShortDate(ts)} - ) : null} -
- ); - })} -
- ); -} diff --git a/app/upgrades/components/Breadcrumb.tsx b/app/upgrades/components/Breadcrumb.tsx deleted file mode 100644 index f1ad4c5d..00000000 --- a/app/upgrades/components/Breadcrumb.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Link from 'next/link'; - -import { Text } from '../../components/ui/Text'; - -type BreadcrumbItem = { - label: string; - href?: string; -}; - -type BreadcrumbProps = { - items: BreadcrumbItem[]; -}; - -export function Breadcrumb({ items }: BreadcrumbProps) { - return ( - - ); -} diff --git a/app/upgrades/components/Carousel.tsx b/app/upgrades/components/Carousel.tsx deleted file mode 100644 index 571a64e1..00000000 --- a/app/upgrades/components/Carousel.tsx +++ /dev/null @@ -1,134 +0,0 @@ -'use client'; - -import { - Children, - isValidElement, - type ReactNode, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; - -import { cn } from '../../components/ui/cn'; - -// Card width per breakpoint for each supported `perView`. These strings are -// intentionally written as literals so Tailwind's JIT compiler can see them -// (dynamically-built arbitrary values would not be emitted). On small screens -// we always show ~1 card and step up to `perView` at the `lg` breakpoint. -const PER_VIEW_CARD_CLASS: Record = { - 1: 'w-[86%] sm:w-[70%] md:w-[calc(50%-0.5rem)] lg:w-full', - 2: 'w-[86%] sm:w-[70%] md:w-[calc(50%-0.5rem)] lg:w-[calc(50%-0.5rem)]', - 3: 'w-[86%] sm:w-[60%] md:w-[calc(50%-0.5rem)] lg:w-[calc(33.333%-0.667rem)]', - 4: 'w-[86%] sm:w-[60%] md:w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.75rem)]', -}; - -// Matches the `gap-4` (1rem = 16px) between cards below. -const CARD_GAP_PX = 16; - -type CarouselProps = { - children: ReactNode; - /** Number of cards visible at the `lg` breakpoint. Defaults to 3. */ - perView?: number; - emptyState?: ReactNode; - className?: string; -}; - -export function Carousel({ - children, - perView = 3, - emptyState, - className, -}: CarouselProps): ReactNode { - const scrollerRef = useRef(null); - const [canPrev, setCanPrev] = useState(false); - const [canNext, setCanNext] = useState(false); - - const cards = Children.toArray(children); - - const updateButtons = useCallback(() => { - const scroller = scrollerRef.current; - if (!scroller) return; - setCanPrev(scroller.scrollLeft > 4); - setCanNext(scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 4); - }, []); - - useEffect(() => { - updateButtons(); - const scroller = scrollerRef.current; - if (scroller) { - scroller.addEventListener('scroll', updateButtons, { passive: true }); - window.addEventListener('resize', updateButtons); - } - return () => { - if (scroller) { - scroller.removeEventListener('scroll', updateButtons); - window.removeEventListener('resize', updateButtons); - } - }; - }, [cards.length, updateButtons]); - - const scrollByCard = useCallback((direction: 1 | -1) => { - const scroller = scrollerRef.current; - if (!scroller) return; - const card = scroller.querySelector('[data-carousel-card]'); - const amount = card ? card.offsetWidth + CARD_GAP_PX : scroller.clientWidth * 0.8; - scroller.scrollBy({ left: direction * amount, behavior: 'smooth' }); - }, []); - - const handlePrev = useCallback(() => scrollByCard(-1), [scrollByCard]); - const handleNext = useCallback(() => scrollByCard(1), [scrollByCard]); - - if (cards.length === 0) { - return emptyState ?? null; - } - - const cardWidthClass = PER_VIEW_CARD_CLASS[perView] ?? PER_VIEW_CARD_CLASS[3]; - - return ( -
-
- {cards.map((card) => ( - // Children.toArray assigns a stable key to every child, so we can - // reuse it here rather than falling back to the array index. -
- {card} -
- ))} -
- {/* Arrows sit below the cards, centered. Each stays visible but greyed - out when its direction is unusable; the whole row is hidden only when - neither direction can be scrolled (nothing overflows). */} - {canPrev || canNext ? ( -
- - -
- ) : null} -
- ); -} diff --git a/app/upgrades/components/Decentralized.tsx b/app/upgrades/components/Decentralized.tsx deleted file mode 100644 index f46461dd..00000000 --- a/app/upgrades/components/Decentralized.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function Decentralized() { - return ( -
-

Decentralized

-
- ); -} diff --git a/app/upgrades/components/DecentralizedV2.tsx b/app/upgrades/components/DecentralizedV2.tsx deleted file mode 100644 index 3e9673f7..00000000 --- a/app/upgrades/components/DecentralizedV2.tsx +++ /dev/null @@ -1,431 +0,0 @@ -"use client"; - -import { motion, animate } from "motion/react"; -import { Fragment, useEffect, useRef } from "react"; - -const GRID_DOT_SIZE = 6.90346; -const GRID_DOT_RX = 0.782701; - -const TOP_GRID: { x: number; y: number }[] = [ - // 13 columns × 3 rows - { x: 49.4388, y: 18.9502 }, { x: 49.4388, y: 30.4561 }, { x: 49.4388, y: 41.9614 }, - { x: 60.9452, y: 18.9502 }, { x: 60.9452, y: 30.4561 }, { x: 60.9452, y: 41.9614 }, - { x: 72.45, y: 18.9502 }, { x: 72.45, y: 30.4561 }, { x: 72.45, y: 41.9614 }, - { x: 83.9562, y: 18.9502 }, { x: 83.9562, y: 30.4561 }, { x: 83.9562, y: 41.9614 }, - // tab row 4 (cols 2–3) - { x: 72.45, y: 53.9502 }, { x: 83.9562, y: 53.9502 }, - { x: 95.671, y: 18.9502 }, { x: 95.671, y: 30.4561 }, { x: 95.671, y: 41.9614 }, - { x: 107.177, y: 18.9502 }, { x: 107.177, y: 30.4561 }, { x: 107.177, y: 41.9614 }, - { x: 118.682, y: 18.9502 }, { x: 118.682, y: 30.4561 }, { x: 118.682, y: 41.9614 }, - { x: 130.188, y: 18.9502 }, { x: 130.188, y: 30.4561 }, { x: 130.188, y: 41.9614 }, - { x: 141.903, y: 18.9502 }, { x: 141.903, y: 30.4561 }, { x: 141.903, y: 41.9614 }, - { x: 153.41, y: 18.9502 }, { x: 153.41, y: 30.4561 }, { x: 153.41, y: 41.9614 }, - { x: 164.914, y: 18.9502 }, { x: 164.914, y: 30.4561 }, { x: 164.914, y: 41.9614 }, - { x: 176.421, y: 18.9502 }, { x: 176.421, y: 30.4561 }, { x: 176.421, y: 41.9614 }, - { x: 188.135, y: 18.9502 }, { x: 188.135, y: 30.4561 }, { x: 188.135, y: 41.9614 }, - // tab row 4 (cols 11–12) - { x: 176.421, y: 53.9502 }, { x: 188.135, y: 53.9502 }, -]; - -const BOTTOM_GRID: { x: number; y: number }[] = [ - // matrix(1 0 0 -1 X Y) → top-left at (X, Y - GRID_DOT_SIZE) - { x: 67.6389, y: 185.5506 }, { x: 67.6389, y: 174.0437 }, { x: 67.6389, y: 162.5387 }, - { x: 79.1451, y: 185.5506 }, { x: 79.1451, y: 174.0437 }, { x: 79.1451, y: 162.5387 }, - { x: 90.6499, y: 185.5506 }, { x: 90.6499, y: 174.0437 }, { x: 90.6499, y: 162.5387 }, - { x: 102.156, y: 185.5506 }, { x: 102.156, y: 174.0437 }, { x: 102.156, y: 162.5387 }, - // tab (cols 1–2 from left) - { x: 78.8389, y: 150.5506 }, { x: 90.3451, y: 150.5506 }, - { x: 113.871, y: 185.5506 }, { x: 113.871, y: 174.0437 }, { x: 113.871, y: 162.5387 }, - { x: 125.377, y: 185.5506 }, { x: 125.377, y: 174.0437 }, { x: 125.377, y: 162.5387 }, - { x: 136.882, y: 185.5506 }, { x: 136.882, y: 174.0437 }, { x: 136.882, y: 162.5387 }, - { x: 148.389, y: 185.5506 }, { x: 148.389, y: 174.0437 }, { x: 148.389, y: 162.5387 }, - { x: 160.103, y: 185.5506 }, { x: 160.103, y: 174.0437 }, { x: 160.103, y: 162.5387 }, - { x: 171.61, y: 185.5506 }, { x: 171.61, y: 174.0437 }, { x: 171.61, y: 162.5387 }, - { x: 183.114, y: 185.5506 }, { x: 183.114, y: 174.0437 }, { x: 183.114, y: 162.5387 }, - { x: 194.621, y: 185.5506 }, { x: 194.621, y: 174.0437 }, { x: 194.621, y: 162.5387 }, - { x: 206.335, y: 185.5506 }, { x: 206.335, y: 174.0437 }, { x: 206.335, y: 162.5387 }, - // tab (cols 9–10 from left) - { x: 171.239, y: 150.5506 }, { x: 182.954, y: 150.5506 }, -]; - -const ALL_DOTS = [...TOP_GRID, ...BOTTOM_GRID]; - -const DOT_HALF = GRID_DOT_SIZE / 2; -const DOT_GLOW_RADIUS = 36; -const DOT_GLOW_FADE_RATE = 3.5; -const DOT_GLOW_COLOR = "#D0D8E0"; - -const PHANTOM_CENTER_X = 132; -const PHANTOM_CENTER_Y = 105; -const PHANTOM_AMP_X = 80; -const PHANTOM_AMP_Y = 75; -const PHANTOM_FREQ_X1 = 0.13; -const PHANTOM_FREQ_X2 = 0.31; -const PHANTOM_FREQ_Y1 = 0.19; -const PHANTOM_FREQ_Y2 = 0.37; - -const _wait = (ms: number) => new Promise((r) => setTimeout(r, ms)); - -function CenterSquares() { - const staticRef = useRef(null); - const quadGroupRef = useRef(null); - const cellGroupRef = useRef(null); - const quadRefs = useRef<(SVGRectElement | null)[]>(Array(4).fill(null)); - const cellRefs = useRef<(SVGRectElement | null)[]>(Array(16).fill(null)); - - useEffect(() => { - let alive = true; - - const setLayer = (layer: "static" | "quads" | "cells") => { - if (staticRef.current) staticRef.current.style.opacity = layer === "static" ? "1" : "0"; - if (quadGroupRef.current) quadGroupRef.current.style.opacity = layer === "quads" ? "1" : "0"; - if (cellGroupRef.current) cellGroupRef.current.style.opacity = layer === "cells" ? "1" : "0"; - }; - - (async () => { - while (alive) { - setLayer("quads"); - await Promise.all( - quadRefs.current.map((el, qi) => { - if (!el) return; - const qr = qi < 2 ? 0 : 1; - const qc = qi % 2; - return animate(el, { x: qc === 0 ? -4.5 : 4.5, y: qr === 0 ? -4.5 : 4.5 }, { duration: 0.5, ease: [0, 0, 0.25, 1.3] }); - }), - ); - if (!alive) break; - - await _wait(120); - - await Promise.all( - cellRefs.current.map((el, i) => { - if (!el) return; - const c = i % 4; - const r = Math.floor(i / 4); - return animate(el, { x: c < 2 ? -4.5 : 4.5, y: r < 2 ? -4.5 : 4.5 }, { duration: 0 }); - }), - ); - setLayer("cells"); - - await Promise.all( - cellRefs.current.map((el, i) => { - if (!el) return; - const c = i % 4; - const r = Math.floor(i / 4); - return animate(el, { x: -6 + c * 4, y: -6 + r * 4 }, { delay: i * 0.014, duration: 0.46, ease: [0, 0, 0.25, 1.3] }); - }), - ); - if (!alive) break; - - await _wait(420); - - await Promise.all( - cellRefs.current.map((el, i) => { - if (!el) return; - const c = i % 4; - const r = Math.floor(i / 4); - return animate(el, { x: c < 2 ? -4.5 : 4.5, y: r < 2 ? -4.5 : 4.5 }, { delay: (15 - i) * 0.014, duration: 0.42, ease: [0.4, 0, 0.15, 1] }); - }), - ); - if (!alive) break; - - await _wait(100); - setLayer("quads"); - - await Promise.all( - quadRefs.current.map((el) => { - if (!el) return; - return animate(el, { x: 0, y: 0 }, { duration: 0.42, ease: [0.4, 0, 0.15, 1] }); - }), - ); - if (!alive) break; - - setLayer("static"); - await _wait(4500); - } - })(); - - return () => { alive = false; }; - }, []); - - const CX = 114.8; - const CY = 88.9502; - const SZ = 33.6; - const HALF = SZ / 2; - - return ( - <> - - - {[0, 1, 2, 3].map((qi) => ( - { quadRefs.current[qi] = el; }} - x={CX + (qi % 2) * HALF} - y={CY + (qi < 2 ? 0 : 1) * HALF} - width={HALF} - height={HALF} - rx="1.4" - fill="var(--bds-brand)" - /> - ))} - - - {Array.from({ length: 16 }, (_, i) => { - const c = i % 4; - const r = Math.floor(i / 4); - const cellW = SZ / 4 + 0.4; - return ( - { cellRefs.current[i] = el; }} - x={CX + c * (SZ / 4) - 0.2} - y={CY + r * (SZ / 4) - 0.2} - width={cellW} - height={cellW} - rx="0.7" - fill="var(--bds-brand)" - /> - ); - })} - - - ); -} - -export function DecentralizedV2() { - const svgRef = useRef(null); - const cursorRef = useRef<{ x: number; y: number } | null>(null); - const dotRefs = useRef<(SVGRectElement | null)[]>(Array(ALL_DOTS.length).fill(null)); - const boosts = useRef(new Float64Array(ALL_DOTS.length)); - - const updateCursor = (e: React.PointerEvent) => { - const svg = svgRef.current; - if (!svg) return; - const ctm = svg.getScreenCTM(); - if (!ctm) return; - const pt = svg.createSVGPoint(); - pt.x = e.clientX; - pt.y = e.clientY; - const t = pt.matrixTransform(ctm.inverse()); - cursorRef.current = { x: t.x, y: t.y }; - }; - - useEffect(() => { - let frameId: number; - const start = performance.now(); - let lastTick = start; - - const tick = () => { - const now = performance.now(); - const dt = Math.min(0.1, (now - lastTick) / 1000); - lastTick = now; - const elapsed = (now - start) / 1000; - - const phantomX = - PHANTOM_CENTER_X + PHANTOM_AMP_X * (Math.sin(elapsed * 2 * Math.PI * PHANTOM_FREQ_X1) * 0.85 + Math.sin(elapsed * 2 * Math.PI * PHANTOM_FREQ_X2 + 1.3) * 0.15); - const phantomY = - PHANTOM_CENTER_Y + PHANTOM_AMP_Y * (Math.sin(elapsed * 2 * Math.PI * PHANTOM_FREQ_Y1 + 0.5) * 0.85 + Math.sin(elapsed * 2 * Math.PI * PHANTOM_FREQ_Y2) * 0.15); - - const cursor = cursorRef.current; - const ax = cursor ? cursor.x : phantomX; - const ay = cursor ? cursor.y : phantomY; - - const blend = 1 - Math.exp(-DOT_GLOW_FADE_RATE * dt); - const r2 = DOT_GLOW_RADIUS * DOT_GLOW_RADIUS; - - let nearestIdx = 0; - let nearestD2 = Infinity; - for (let i = 0; i < ALL_DOTS.length; i++) { - const dx = ALL_DOTS[i].x + DOT_HALF - ax; - const dy = ALL_DOTS[i].y + DOT_HALF - ay; - const d2 = dx * dx + dy * dy; - if (d2 < nearestD2) { nearestD2 = d2; nearestIdx = i; } - } - const snapX = ALL_DOTS[nearestIdx].x + DOT_HALF; - const snapY = ALL_DOTS[nearestIdx].y + DOT_HALF; - const scale = Math.exp(-nearestD2 / r2); - - for (let i = 0; i < ALL_DOTS.length; i++) { - const dx = ALL_DOTS[i].x + DOT_HALF - snapX; - const dy = ALL_DOTS[i].y + DOT_HALF - snapY; - const ideal = scale * Math.exp(-(dx * dx + dy * dy) / r2); - boosts.current[i] += (ideal - boosts.current[i]) * blend; - const el = dotRefs.current[i]; - if (el) el.style.opacity = String(boosts.current[i]); - } - - frameId = requestAnimationFrame(tick); - }; - - frameId = requestAnimationFrame(tick); - return () => cancelAnimationFrame(frameId); - }, []); - - const pillKeyframes = { - duration: 6.0, - times: [0, 0.108, 0.333, 0.442, 0.667, 0.775, 1], - ease: [[0, 0, 0.3, 1.4], "linear", [0, 0, 0.3, 1.4], "linear", [0, 0, 0.3, 1.4], "linear"] as any, - repeat: Infinity, - }; - - const BOTTOM_BARS_X = [102.2, 107.8, 113.4, 119, 124.6, 130.2, 135.8, 141.4, 147, 152.6, 158.2]; - const TOP_BARS_X = [158.2, 152.6, 147, 141.4, 135.8, 130.2, 124.6, 119, 113.4, 107.8, 102.2]; - - return ( -
{ cursorRef.current = null; }} - > - - {/* Dot grids */} - {ALL_DOTS.map((dot, i) => ( - - - { dotRefs.current[i] = el; }} - x={dot.x} y={dot.y} width={GRID_DOT_SIZE} height={GRID_DOT_SIZE} rx={GRID_DOT_RX} - fill={DOT_GLOW_COLOR} style={{ opacity: 0 }} - /> - - ))} - - {/* Main curved connection paths */} - - - - - - {/* Center double-box frame */} - - - - {/* Left pills — rotate downward */} - - - - - {/* Right pills — rotate upward */} - - - - - {/* Connection arms */} - - - - {/* Center animated square */} - - - {/* Small accent rects beside pills */} - - - - {/* Bottom-left U-bracket */} - - - - {/* Bottom endpoint squares */} - - - - {/* Top-right U-bracket (inverted) */} - - - - {/* Top endpoint squares */} - - - - {/* Left node — circle + spinning diamond */} - - - - - - - {/* Right node — circle + 2×2 breathing grid */} - - - - - - - - {/* Bottom bars — L→R sweep, blue highlight static */} - {BOTTOM_BARS_X.map((x, i) => { - const C = 2.4; - const f = (i + 0.5) / 11; - const hw = 0.05; - return ( - - ); - })} - - - {/* Top bars — R→L sweep, green highlight static */} - {TOP_BARS_X.map((x, i) => { - const C = 2.4; - const f = (i + 0.5) / 11; - const hw = 0.05; - return ( - - ); - })} - - -
- ); -} diff --git a/app/upgrades/components/FeaturedVibenetCarousel.tsx b/app/upgrades/components/FeaturedVibenetCarousel.tsx deleted file mode 100644 index a0d70644..00000000 --- a/app/upgrades/components/FeaturedVibenetCarousel.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { LinkCard } from '../../components/ui/Card'; -import { cn } from '../../components/ui/cn'; -import { EmptyState } from '../../components/ui/EmptyState'; -import { Text } from '../../components/ui/Text'; -import type { VibenetChange } from '../data/vibenet'; -import { CATEGORY_METADATA, LIFECYCLE_LABELS } from '../library/display'; -import { formatShortDate, toPlainText } from '../library/format'; - -import { KindBadge, StatusPill } from './Badges'; -import { Carousel } from './Carousel'; - -type FeaturedVibenetCarouselProps = { - changes: VibenetChange[]; -}; - -export function FeaturedVibenetCarousel({ changes }: FeaturedVibenetCarouselProps) { - return ( - } - > - {changes.map((change) => ( - -
-
-
- -
-
-
- - {change.title} - - - {toPlainText(change.summary)} - -
- - {LIFECYCLE_LABELS[change.vibenet.status]} - - - {change.vibenet.timestamp ? formatShortDate(change.vibenet.timestamp) : 'Vibenet'} - -
-
- - ))} - - ); -} diff --git a/app/upgrades/components/LifecycleTooltip.tsx b/app/upgrades/components/LifecycleTooltip.tsx deleted file mode 100644 index d9d27b84..00000000 --- a/app/upgrades/components/LifecycleTooltip.tsx +++ /dev/null @@ -1,90 +0,0 @@ -'use client'; - -import { Tooltip } from '@base-ui/react/tooltip'; - -import { cn } from '../../components/ui/cn'; - -type LifecycleTooltipEntry = { - networkKey: string; - network: string; - state: string; - date: string | null; - dotClassName: string; -}; - -type LifecycleTooltipProps = { - entries: LifecycleTooltipEntry[]; - summary: string; - size: 'sm' | 'md'; - showLabels: boolean; -}; - -export function LifecycleTooltip({ entries, summary, size, showLabels }: LifecycleTooltipProps) { - return ( - - - - {entries.map((entry) => ( - - - {showLabels ? ( - - {entry.networkKey.slice(0, 1)} - - ) : null} - - ))} - - - - - - {entries.map((entry) => ( - - - {entry.network} - - - {entry.state} - {entry.date ? ` · ${entry.date}` : ''} - - - ))} - - - - - - - - - - ); -} diff --git a/app/upgrades/components/UpgradeIllustration.tsx b/app/upgrades/components/UpgradeIllustration.tsx deleted file mode 100644 index b552d69e..00000000 --- a/app/upgrades/components/UpgradeIllustration.tsx +++ /dev/null @@ -1,23 +0,0 @@ -const ILLO_MAP: Record = { - azul: '/azul-illo.svg', - beryl: '/beryl-illo.svg', - cobalt: '/cobalt-illo.svg', - denim: '/denim-illo.svg', -}; - -type UpgradeIllustrationProps = { - upgradeId: string; -}; - -export function UpgradeIllustration({ upgradeId }: UpgradeIllustrationProps) { - const src = ILLO_MAP[upgradeId]; - if (!src) { - return ( - - ); - } - return ; -} diff --git a/app/upgrades/data/changes.ts b/app/upgrades/data/changes.ts deleted file mode 100644 index dcfb49e0..00000000 --- a/app/upgrades/data/changes.ts +++ /dev/null @@ -1,370 +0,0 @@ -import { buildChangeSpecUrl } from '../library/specUrls'; -import type { Change } from '../library/types'; - -function eipUrl(n: string) { - return `https://eips.ethereum.org/EIPS/eip-${n}`; -} -function azulExecUrl(anchor: string) { - return `https://docs.base.org/base-chain/specs/upgrades/azul/exec-engine#${anchor}`; -} -function azulProofsUrl(anchor = '') { - return `https://docs.base.org/base-chain/specs/upgrades/azul/proofs${anchor ? `#${anchor}` : ''}`; -} - -export const changes: Change[] = [ - { - kind: 'eip', - id: 'eip-7823', - slug: 'upper-bound-modexp', - eipNumber: '7823', - relatedEips: ['EIP-198'], - upstreamUrl: eipUrl('7823'), - ethereumFork: 'Fusaka', - title: 'Upper-Bound MODEXP', - category: 'execution', - upgrade: 'azul', - summary: - 'Caps MODEXP precompile inputs to a maximum of 1024 bytes per field. Calls with larger inputs are rejected.', - migrationNotes: - 'RSA-style verifiers and pairing libraries should add explicit length guards. Update unit tests to cover the new gas profile so regressions surface early.', - lastUpdated: '2026-04-21', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('upper-bound-modexp'), - }, - { - kind: 'eip', - id: 'eip-7825', - slug: 'transaction-gas-limit-cap', - eipNumber: '7825', - relatedEips: [], - upstreamUrl: eipUrl('7825'), - ethereumFork: 'Fusaka', - title: 'Transaction Gas Limit Cap', - category: 'execution', - upgrade: 'azul', - summary: - 'Introduces a protocol-level maximum gas limit of 16,777,216 (2^24) per transaction. Transactions above this cap are rejected during validation, and Base adopts the same cap as L1 to maximize Ethereum equivalence. Deposit transactions will be exempt from the transaction gas limit cap. They are already limited to 20,000,000 gas as that is the most gas that can be included in an L1 block.', - migrationNotes: - "App developers with very large gas transactions may need to make adjustments to their contracts to ensure they don't exceed the gas limit. Wallet developers should enforce the cap at transaction creation.", - lastUpdated: '2026-04-22', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('transaction-gas-limit-cap'), - }, - { - kind: 'eip', - id: 'eip-7883', - slug: 'modexp-gas-cost-increase', - eipNumber: '7883', - relatedEips: ['EIP-2565'], - upstreamUrl: eipUrl('7883'), - ethereumFork: 'Fusaka', - title: 'MODEXP Gas Cost Increase', - category: 'execution', - upgrade: 'azul', - summary: - 'Raises the MODEXP precompile minimum gas cost from 200 to 500 and triples the general cost calculation.', - migrationNotes: - 'Tooling and infrastructure for gas cost estimation and optimization should be updated to reflect the new gas cost.', - lastUpdated: '2026-04-21', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('modexp-gas-cost-increase'), - }, - { - kind: 'eip', - id: 'eip-7939', - slug: 'clz-opcode', - eipNumber: '7939', - relatedEips: [], - upstreamUrl: eipUrl('7939'), - ethereumFork: 'Fusaka', - title: 'CLZ Opcode', - category: 'execution', - upgrade: 'azul', - summary: - 'Adds a new CLZ opcode that counts the number of leading zero bits in a 256-bit word, returning 256 if the input is zero.', - migrationNotes: - 'This opcode will enable more efficient implementations of certain cryptographic and mathematical operations onchain.', - lastUpdated: '2026-04-19', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('clz-opcode'), - }, - { - kind: 'eip', - id: 'eip-7951', - slug: 'secp256r1-precompile-gas-cost', - eipNumber: '7951', - relatedEips: [], - upstreamUrl: eipUrl('7951'), - ethereumFork: 'Fusaka', - title: 'secp256r1 Precompile', - category: 'execution', - upgrade: 'azul', - summary: - 'Specifies the secp256r1 precompile at address 0x100. From Azul, the gas cost increases to 6,900 to match the L1 gas cost specified in EIP-7951.', - migrationNotes: - 'App and wallet developers can support native signing from secp256r1 enabled devices to provide better user experience.', - lastUpdated: '2026-04-18', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('secp256r1-precompile-gas-cost'), - }, - { - kind: 'eip', - id: 'eip-7642', - slug: 'eth-69', - eipNumber: '7642', - relatedEips: [], - upstreamUrl: eipUrl('7642'), - ethereumFork: 'Fusaka', - title: 'eth/69', - category: 'networking', - upgrade: 'azul', - summary: - 'Updates the Ethereum wire protocol to version 69, removing legacy fields from the Status message and simplifying the handshake.', - migrationNotes: '', - lastUpdated: '2026-04-17', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('eth69'), - }, - { - kind: 'eip', - id: 'eip-7910', - slug: 'eth-config-rpc-method', - eipNumber: '7910', - relatedEips: [], - upstreamUrl: eipUrl('7910'), - ethereumFork: 'Fusaka', - title: 'eth_config RPC Method', - category: 'rpc', - upgrade: 'azul', - summary: - 'Introduces the eth_config JSON-RPC method, which returns chain configuration parameters such as fork activation timestamps.', - migrationNotes: - "After the Azul upgrade, Base will expose eth_config using the standard EIP-7910 response schema. For Base-specific behavior, please reference our docs site.", - lastUpdated: '2026-04-23', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('eth_config-rpc-method'), - }, - { - kind: 'base', - id: 'base-0001', - slug: 'multiproofs', - baseNumber: '0001', - owner: 'Proofs team', - title: 'Multiproofs', - category: 'proofs', - upgrade: 'azul', - summary: - "

Proof System

Introduces a multi-proof system for L2 checkpoints, where AggregateVerifier can verify one or two proofs for the same proposal before withdrawals rely on it.

New/Changed Onchain Components

Adds AggregateVerifier plus proof-specific verifier contracts, reduces DelayedWETH to a 1-day withdrawal delay, and moves legacy finality timing out of OptimismPortal2 and AnchorStateRegistry.

Proposer

Turns safe or finalized Base L2 checkpoints into L1 AggregateVerifier games by requesting TEE proofs, verifying output roots, and submitting proposals with the required bond.

Challenger

Checks in-progress AggregateVerifier games against canonical L2 state and disputes incorrect claims through the permissionless ZK proof challenge path.

TEE Provers

Adds AWS Nitro Enclave-backed TEE provers for the common proposal path. The enclave re-executes requested L2 block ranges and signs resulting checkpoint outputs.

ZK Provers

Adds permissionless ZK provers for dispute verification, especially to challenge invalid TEE-backed proposals or invalidate bad ZK claims.

Prover Registrar

Keeps the onchain TEEProverRegistry in sync with the live set of Nitro prover signers, attesting active signer identities and removing orphaned signers.

", - migrationNotes: - 'Refer to our docs site for full details on the proofs system migration.', - lastUpdated: '2026-04-12', - relatedRepos: [], - githubIssues: [], - specUrl: azulProofsUrl(), - }, - { - kind: 'base', - id: 'base-0002', - slug: 'remove-account-balances-receipts', - baseNumber: '0002', - owner: 'Flashblocks team', - title: 'Remove Account Balances & Receipts', - category: 'networking', - upgrade: 'azul', - summary: - 'Simplifies the FlashblocksMetadata payload by removing new_account_balances and receipts from the Flashblocks WebSocket format.', - migrationNotes: - 'Hydrate balances and receipts from canonical RPC instead of Flashblocks WebSocket payloads. The access_list field remains but is not populated in Azul.', - lastUpdated: '2026-04-17', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('remove-account-balances--receipts'), - }, - { - kind: 'base', - id: 'base-0003', - slug: 'basev0-protocol-id-discv5', - baseNumber: '0003', - owner: 'Node team', - title: 'Use basev0 protocol ID for discv5', - category: 'networking', - upgrade: 'azul', - summary: - 'Updates execution-layer discovery to use basev0 as the protocol ID so Base nodes can find each other more quickly, especially on smaller networks like Sepolia.', - migrationNotes: - 'Upgrade node clients before Azul activation so discovery uses the Base-specific basev0 protocol ID.', - lastUpdated: '2026-04-17', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('discovery-protocol-now-uses-basev0-protocol-id'), - }, - { - kind: 'base', - id: 'base-0004', - slug: 'engine-api-usage', - baseNumber: '0004', - owner: 'Node team', - title: 'Engine API Usage', - category: 'rpc', - upgrade: 'azul', - summary: - "At and after Azul activation, block production and import use the following Engine API methods:
  • engine_forkchoiceUpdatedV3 for starting block builds and forkchoice synchronization.
  • engine_getPayloadV5 for fetching built payloads.
  • engine_newPayloadV4 for importing payloads into the execution engine.
engine_getPayloadV5 returns a V5 envelope, but the contained execution payload is still V4-shaped. As a result, payload insertion continues through engine_newPayloadV4 (there is no engine_newPayloadV5 path used by Base Azul clients).

Azul constraints for this flow:

  • Blob-related Engine API inputs are constrained to empty values:
    • expectedBlobVersionedHashes MUST be an empty array.
    • blobsBundle in engine_getPayloadV5 responses is expected to be empty.
  • executionRequests in engine_newPayloadV4 MUST be an empty array.
", - migrationNotes: - 'Use the registry as the source of accepted TEE signer identities instead of hard-coding Nitro prover signers.', - lastUpdated: '2026-04-12', - relatedRepos: [], - githubIssues: [], - specUrl: azulExecUrl('engine-api-usage'), - }, - { - kind: 'base', - id: 'base-0005', - slug: 'b20', - baseNumber: '0005', - owner: 'Protocol team', - title: 'B20', - category: 'precompile', - upgrade: 'beryl', - // Sepolia activates with Beryl (inherited); Mainnet is turned on after the - // upgrade goes live. - activation: { - mainnet: { timestamp: '2026-07-08T18:00:00Z' }, - }, - summary: - "B20 implements the ERC-20 specification, making it interoperable with all existing systems built on ERC-20 like wallets, exchanges, data indexers, and onchain protocols. What's different is how it runs. Rather than a conventional smart contract, a B20 is a precompiled contract: its logic runs natively in the node software, written in Rust and executed directly instead of as onchain EVM bytecode.

Issuers can deploy and configure tokens of all kinds: stablecoins, real-world assets, and onchain-native tokens. When deploying new tokens, we've consistently seen issuers rebuild compliance features from scratch, slowing their speed to market and introducing the risk of missteps. To accelerate issuing new high-quality assets, B20 comes with an Issuer Toolkit purpose-built for teams facing these requirements.", - migrationNotes: - 'For new Base tokens, choose the Asset or Stablecoin variant and configure policy scopes, supply caps, pause controls, memos, ERC-2612 permit, and ERC-7572 contract metadata during bootstrap. Existing ERC-20 tooling can continue to use the standard ERC-20 selector surface.', - lastUpdated: '2026-06-09', - relatedRepos: ['https://github.com/base/base-std/blob/main/docs/B20'], - githubIssues: [], - specUrl: 'https://github.com/base/base-std/blob/main/docs/B20/README.md', - }, - { - kind: 'base', - id: 'base-0006', - slug: 'reducing-canonical-withdrawal-delay', - baseNumber: '0006', - owner: 'Bridge team', - title: 'Reducing Canonical Withdrawal Delay', - category: 'bridging', - upgrade: 'beryl', - summary: - 'The single-proof dispute game finalization window is reduced from 7 days to 5 days. The dual-proof fast path (TEE + ZK) introduced in Azul remains at 1 day.

Shortening the single-proof window frees capital for fast-bridge liquidity providers sooner, reducing fees and improving reliability for users who bridge through third-party partners.', - migrationNotes: - 'Update any bridge monitoring dashboards or user-facing copy that references the 7-day withdrawal period.', - lastUpdated: '2026-05-28', - relatedRepos: [], - githubIssues: [], - specUrl: buildChangeSpecUrl('beryl', 'reducing-canonical-withdrawal-delay'), - }, - { - kind: 'base', - id: 'base-0007', - slug: 'reth-2-2', - baseNumber: '0007', - owner: 'Node team', - title: 'Reth V2', - category: 'execution', - upgrade: 'beryl', - summary: - 'Ships Reth V2 as the reference execution client for Base nodes, delivering significant sync speed and throughput improvements.', - migrationNotes: - 'Node operators should upgrade to the Reth V2 binary before Beryl activation. No application-level changes are required.', - lastUpdated: '2026-05-28', - relatedRepos: [], - githubIssues: [], - specUrl: buildChangeSpecUrl('beryl', 'reth-2-2'), - }, - { - kind: 'eip', - id: 'eip-8130', - slug: 'native-account-abstraction', - eipNumber: '8130', - relatedEips: ['EIP-170', 'EIP-2718'], - upstreamUrl: eipUrl('8130'), - ethereumFork: 'Not scheduled', - title: 'Native Account Abstraction', - category: 'accounts', - upgrade: 'cobalt', - summary: - "

EIP-8130 will bring Native Account Abstraction to Base and allow us to keep transactions opinionated and optimizable. Compared to the previous generation of Smart Accounts, we’ve been able to dramatically reduce the per transaction cost to end users by over 2x, while not compromising on our scaling goals.

Native Account Abstraction makes the following features native to the chain:

Batch calls: Group multiple actions into a single transaction

Sponsorship: Applications can pay for their users’ gas fees or allow them to pay in any token.

Portability: Use the same account on any chain, even those that don’t support Native AA.

Quantum Ready: Key rotation and multiple authentication schemes allow users to upgrade to post quantum authentication.

High-throughput: Parallel nonces and large sender limits unlock high levels of concurrency.

Session keys: Applications can act on your behalf with bounded and revocable permissions or create

Sub-accounts: Fully isolated account owned by you and controllable by an application.

Metadata: Add memos and attributions to your transactions.

", - migrationNotes: - "

Users

If you’re using a standard (EOA) account, your account can automatically leverage new features such as gas sponsorship and batching. If you are using a smart (ERC-4337) account, there’s a one-time upgrade step that’ll allow you to benefit from lower gas costs and faster transaction inclusion.

Native Account Abstraction doesn’t lock you into Base. You can take your accounts to any other chain, even those that don’t currently support Native AA.

Application Developers

Applications will continue to work the same without any changes (e.g. wallet_sendCalls will work for Native AA). You’ll also be able to leverage new features such as memos (to provide attribution) and better account management (via session keys and sub-accounts).

Wallets

Wallets will continue to work the same way they do today without any changes. By adding support for Native AA, you can unlock new revenue opportunities via subscriptions and ERC-8168 payer services.

Node Operators

The only action required is to update your nodes to support Base Cobalt and allow access to several new RPC methods.

", - lastUpdated: '2026-07-21', - relatedRepos: ['https://github.com/base/eip-8130'], - githubIssues: [], - specUrl: '', - }, - { - kind: 'base', - id: 'base-0008', - slug: 'b20-improvements-cobalt', - baseNumber: '0008', - owner: 'Protocol team', - title: 'B20 Improvements (Cobalt)', - category: 'precompile', - upgrade: 'cobalt', - summary: - "

Cobalt will bring the following improvements to the B20 token standard:

Pay transaction fees in B20s: as part of our rollout of EIP-8130, users will be able to pay transaction fees in B20s.

Schedule Multiplier Updates: allows issuers to schedule (and optionally cancel) a multiplier to tokens. This allows for onchain representation of splits, without needing to mint or burn tokens. Only available on the Asset variant of B20. Technical spec →

Transfer blocked: simplifies the current freeze and seize model by reducing the burnBlocked + mint steps into a new transferFromBlocked action. Technical spec →

New Policies - Union (||) & Intersect (&&): the Union policy allows asset issuers managing many tokens the ability to share policies by default with the ability to enable overrides per token. The Intersect policy allows asset issuers the ability to compose allowlist behaviors with commonly-needed blocklists. Technical spec →

", - migrationNotes: - 'Asset issuers can optionally adopt any of the new functionality provided in Cobalt.', - lastUpdated: '2026-07-21', - relatedRepos: ['https://github.com/base/base-std/blob/main/docs/B20'], - githubIssues: [], - specUrl: '', - }, - { - kind: 'base', - id: 'base-0009', - slug: 'dynamic-upgrades', - baseNumber: '0009', - owner: 'Node team', - title: 'Dynamic Upgrades', - category: 'rpc', - upgrade: 'cobalt', - summary: - 'Dynamic Upgrades introduces an Ethereum smart contract that stores upgrade timestamps for Base nodes, allowing nodes to query the contract and apply changes live.

The EL and CL each run an upgrade-signal poller that reads the contract over L1 RPC, saves the schedule into the client\'s activation overrides, and applies them wherever the schedule is used. Forks activate at the scheduled time with no restart.

We expect the decoupling of node releases and upgrade timestamps to reduce the number of node releases operators need to run.

NOTE: This change will be rolled out in metrics-only mode for Cobalt, as we collect data to validate that the upgrades work smoothly.', - migrationNotes: - 'This change will be baked into the node release for Cobalt, so no action is required for node operators.', - lastUpdated: '2026-07-21', - relatedRepos: [], - githubIssues: [], - specUrl: '', - }, - { - kind: 'base', - id: 'base-0010', - slug: '200ms-blocks', - baseNumber: '0010', - owner: 'Protocol team', - title: '200ms Blocks', - category: 'execution', - upgrade: 'denim', - summary: - '

Base will produce native L2 blocks at a 200ms cadence. Each block has its own number, hash, state root, receipts, and unsafe-to-finalized lifecycle.

Unlike Flashblocks, which expose sub-second updates while building one block, this change runs the full rollup block lifecycle every 200ms.

Deprecation Notice

Flashblocks will be deprecated as part of this release. Because native 200ms blocks deliver the same sub-second confirmation experience directly on the canonical chain, the Flashblocks WebSocket stream is no longer needed and will be removed. Migrate off the Flashblocks WebSocket stream before Denim activation.

Ethereum block headers and block.timestamp remain in whole seconds. The BaseTime predeploy records the sub-second component before user transactions, while optional timestampMs and blockTimestampMs RPC fields expose the complete millisecond timestamp to applications and infrastructure.

', - migrationNotes: - '

Application developers

Existing contracts and applications remain compatible. Use the BaseTime timestampMs() getter when contracts need same-block millisecond precision; continue using block.timestamp when second-level precision is sufficient.

RPC and indexing providers

Support the optional timestampMs block and header field and blockTimestampMs on mined transactions and logs. Do not infer millisecond timestamps from the whole-second header value.

Node operators

Upgrade to a Denim-compatible release before activation. Plan capacity for the higher native block rate across execution, storage, RPC events, and peer-to-peer propagation.

', - lastUpdated: '2026-08-24', - relatedRepos: [ - 'https://github.com/base/base', - 'https://github.com/base/contracts/blob/4848ec70d8f1062fec59470d6e731e13ece8a728/src/L2/BaseTime.sol', - ], - githubIssues: [], - specUrl: 'https://docs.base.org/base-chain/specs/upgrades/denim/200ms-native-blocks', - }, -]; - -export function getChangeById(id: string): Change | undefined { - return changes.find((c) => c.id.toLowerCase() === id.toLowerCase()); -} - -export function getChangeBySlug(slug: string): Change | undefined { - return changes.find((c) => c.slug.toLowerCase() === slug.toLowerCase()); -} diff --git a/app/upgrades/data/upgrades.ts b/app/upgrades/data/upgrades.ts deleted file mode 100644 index 257ae366..00000000 --- a/app/upgrades/data/upgrades.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { CATEGORY_ORDER } from '../library/display'; -import type { Change, ChangeCategory, Lifecycle, Upgrade } from '../library/types'; - -import { changes } from './changes'; - -export function categoryGroupsForUpgrade(upgradeId: string): Upgrade['categories'] { - return CATEGORY_ORDER.map((category: ChangeCategory) => ({ - category, - changeIds: changes - .filter((c) => c.upgrade === upgradeId && c.category === category) - .map((c) => c.id), - })); -} - -export const upgrades: Upgrade[] = [ - { - id: 'azul', - name: 'Azul', - summary: - "Azul is Base's first independent network upgrade. It focuses on increasing security and decentralization, accelerating the path to 1 gigagas/s, and improving developer experience.", - lifecycle: { - sepolia: { timestamp: '2026-04-20T18:00:00Z' }, - mainnet: { timestamp: '2026-05-28T18:00:00Z' }, - }, - categories: categoryGroupsForUpgrade('azul'), - migrationGuide: [], - specUrl: 'https://docs.base.org/base-chain/specs/upgrades/azul/', - blog: 'https://blog.base.dev/introducing-base-azul', - }, - { - id: 'beryl', - name: 'Beryl', - summary: - 'Beryl makes Base a first-class issuance platform with B20 tokens, more capital efficient with reduced withdrawal delays, and more scalable with Reth V2.', - lifecycle: { - sepolia: { timestamp: '2026-06-18T18:00:00Z' }, - mainnet: { timestamp: '2026-06-25T18:00:00Z' }, - }, - categories: categoryGroupsForUpgrade('beryl'), - migrationGuide: [], - specUrl: 'https://docs.base.org/base-chain/specs/upgrades/beryl/', - blog: 'https://blog.base.dev/introducing-base-beryl', - }, - { - id: 'cobalt', - name: 'Cobalt', - summary: - 'Cobalt adds native account abstraction with EIP-8130, makes improvements to the B20 token standard, and introduces dynamic node upgrades.', - lifecycle: { - sepolia: { }, - mainnet: { }, - }, - estimate: { - sepolia: 'September 2026', - mainnet: 'September 2026', - }, - categories: categoryGroupsForUpgrade('cobalt'), - migrationGuide: [], - specUrl: '', - blog: '', - }, - { - id: 'denim', - name: 'Denim', - summary: - 'Denim introduces native blocks at a 200ms cadence, millisecond-resolution RPC timestamps, and onchain millisecond time through BaseTime.', - lifecycle: { - sepolia: { }, - mainnet: { }, - }, - estimate: { - sepolia: 'November 2026', - mainnet: 'November 2026', - }, - categories: categoryGroupsForUpgrade('denim'), - migrationGuide: [], - specUrl: '', - blog: '', - }, -]; - -let reversedUpgrades: Upgrade[] | null = null; - -export function getUpgradesReversed(): Upgrade[] { - if (!reversedUpgrades) { - reversedUpgrades = [...upgrades].reverse(); - } - return [...reversedUpgrades]; -} - -export function getUpgradeById(id: string): Upgrade | undefined { - return upgrades.find((u) => u.id.toLowerCase() === id.toLowerCase()); -} - -export function getUpgradeForChange(change: Change): Upgrade | undefined { - return change.upgrade ? upgrades.find((u) => u.id === change.upgrade) : undefined; -} - -export function getLifecycleForChange(change: Change): Lifecycle | undefined { - const upgradeLifecycle = getUpgradeForChange(change)?.lifecycle; - if (!upgradeLifecycle) return undefined; - - const override = change.activation; - if (!override) return upgradeLifecycle; - - // A network override is authoritative for that network (even an empty `{}`, - // which reads as "planning"). Omitted networks inherit the upgrade's date. - return { - sepolia: override.sepolia ?? upgradeLifecycle.sepolia, - mainnet: override.mainnet ?? upgradeLifecycle.mainnet, - }; -} diff --git a/app/upgrades/data/vibenet.ts b/app/upgrades/data/vibenet.ts deleted file mode 100644 index d7a68c7e..00000000 --- a/app/upgrades/data/vibenet.ts +++ /dev/null @@ -1,66 +0,0 @@ -import type { Change, LifecycleState } from '../library/types'; - -import { getChangeById } from './changes'; - -type FeaturedChangePresentation = { - image?: string; -}; - -type VibenetAvailability = FeaturedChangePresentation & { - changeId: string; - status: LifecycleState; - timestamp?: string; - featured?: boolean; - demo?: string; -}; - -const vibenetAvailability: VibenetAvailability[] = [ - { - changeId: 'eip-8130', - status: 'live', - timestamp: '2026-07-02', - featured: true, - image: '/images/upgrades/layered-squares.png', - demo: '/vibenet/demos/account' - }, - { - changeId: 'base-0005', - status: 'live', - demo: '/vibenet/demos/b20' - }, -]; - -export type VibenetChange = Change & - FeaturedChangePresentation & { - vibenet: { - status: LifecycleState; - timestamp?: string; - featured: boolean; - demo?: string; - }; - }; - -export function getVibenetChanges(): VibenetChange[] { - return vibenetAvailability.map(({ changeId, status, timestamp, featured = false, image, demo }) => { - const change = getChangeById(changeId); - if (!change) throw new Error(`Vibenet change "${changeId}" was not found`); - return { - ...change, - image, - vibenet: { - status, - timestamp, - featured, - demo, - }, - }; - }); -} - -export function getFeaturedVibenetChanges(): VibenetChange[] { - return getVibenetChanges().filter((change) => change.vibenet.featured); -} - -export function getVibenetChangeById(changeId: string): VibenetChange | undefined { - return getVibenetChanges().find((change) => change.id === changeId); -} diff --git a/app/upgrades/library/display.ts b/app/upgrades/library/display.ts deleted file mode 100644 index 0e10f4ca..00000000 --- a/app/upgrades/library/display.ts +++ /dev/null @@ -1,125 +0,0 @@ -import type { Change, ChangeCategory, Lifecycle, LifecycleState, UpgradeStatus } from './types'; - -export type StatusVariant = LifecycleState | 'draft' | 'accepted'; - -export const UPGRADE_NETWORKS = ['sepolia', 'mainnet'] as const satisfies (keyof Lifecycle)[]; - -export const CATEGORY_ORDER = [ - 'execution', - 'networking', - 'flashblocks', - 'rpc', - 'proofs', - 'accounts', - 'bridging', - 'precompile', -] as const satisfies ChangeCategory[]; - -export const CATEGORY_METADATA = { - execution: { - label: 'Execution', - className: - 'border-bds-blue-20 bg-bds-blue-0 text-bds-blue-70 dark:border-bds-blue-80 dark:bg-bds-blue-100 dark:text-bds-blue-15', - accentClassName: 'bg-bds-blue-50', - }, - proofs: { - label: 'Proofs', - className: - 'border-bds-pink-20 bg-bds-pink-0 text-bds-pink-70 dark:border-bds-pink-80 dark:bg-bds-pink-100 dark:text-bds-pink-15', - accentClassName: 'bg-bds-pink-40', - }, - accounts: { - label: 'Accounts', - className: - 'border-bds-teal-20 bg-bds-teal-0 text-bds-teal-70 dark:border-bds-teal-80 dark:bg-bds-teal-100 dark:text-bds-teal-15', - accentClassName: 'bg-bds-teal-40', - }, - flashblocks: { - label: 'Flashblocks', - className: - 'border-bds-yellow-20 bg-bds-yellow-0 text-bds-yellow-80 dark:border-bds-yellow-80 dark:bg-bds-yellow-100 dark:text-bds-yellow-15', - accentClassName: 'bg-bds-yellow-40', - }, - rpc: { - label: 'RPC', - className: - 'border-bds-chartreuse-20 bg-bds-chartreuse-0 text-bds-chartreuse-80 dark:border-bds-chartreuse-80 dark:bg-bds-chartreuse-100 dark:text-bds-chartreuse-15', - accentClassName: 'bg-bds-chartreuse-40', - }, - networking: { - label: 'Networking', - className: - 'border-bds-orange-20 bg-bds-orange-0 text-bds-orange-80 dark:border-bds-orange-80 dark:bg-bds-orange-100 dark:text-bds-orange-15', - accentClassName: 'bg-bds-orange-40', - }, - precompile: { - label: 'Precompile', - className: - 'border-bds-orange-20 bg-bds-orange-0 text-bds-orange-80 dark:border-bds-orange-80 dark:bg-bds-orange-100 dark:text-bds-orange-15', - accentClassName: 'bg-bds-orange-40', - }, - bridging: { - label: 'Bridging', - className: - 'border-bds-yellow-20 bg-bds-yellow-0 text-bds-yellow-80 dark:border-bds-yellow-80 dark:bg-bds-yellow-100 dark:text-bds-yellow-15', - accentClassName: 'bg-bds-yellow-40', - }, -} as const satisfies Record< - ChangeCategory, - { label: string; className: string; accentClassName: string } ->; - -export const UPGRADE_STATUS_METADATA = { - live: { label: 'Live', detailLabel: 'Live', variant: 'live' }, - shipping: { - label: 'Shipping', - detailLabel: 'Shipping to Mainnet', - variant: 'scheduled', - }, - scheduled: { label: 'Scheduled', detailLabel: 'Scheduled', variant: 'scheduled' }, - planning: { label: 'Planning', detailLabel: 'Planning', variant: 'planning' }, -} as const satisfies Record< - UpgradeStatus, - { label: string; detailLabel: string; variant: StatusVariant } ->; - -export const LIFECYCLE_LABELS = { - live: 'Live', - scheduled: 'Scheduled', - planning: 'Planning', -} as const satisfies Record; - -export const NETWORK_LABELS = { - sepolia: 'Sepolia', - mainnet: 'Mainnet', -} as const satisfies Record; - -export function changeRefs(change: Change): string[] { - if (change.kind === 'eip') { - return [...change.relatedEips]; - } - return []; -} - -/** - * The human-readable title shown in the UI. EIP changes are prefixed with their - * uppercased id (e.g. "EIP-7823: Upper-Bound MODEXP") so the prefix must be part - * of anything that matches against what the user actually sees (e.g. search). - */ -export function changeDisplayTitle(change: Change): string { - if (change.kind === 'eip') { - return `${change.id.toUpperCase()}: ${change.title}`; - } - return change.title; -} - -export function kindLabel(kind: Change['kind']): string { - switch (kind) { - case 'eip': - return 'EIP'; - case 'base': - return 'Base'; - default: - return 'Base'; - } -} diff --git a/app/upgrades/library/format.ts b/app/upgrades/library/format.ts deleted file mode 100644 index f5d05cf4..00000000 --- a/app/upgrades/library/format.ts +++ /dev/null @@ -1,83 +0,0 @@ -import type { LifecycleStatusEntry } from './types'; - -export function formatDate(iso: string | undefined, opts?: Intl.DateTimeFormatOptions): string { - if (!iso) return 'TBD'; - try { - return new Date(iso).toLocaleString(undefined, { - year: 'numeric', - month: 'long', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - timeZone: 'UTC', - timeZoneName: 'short', - ...opts, - }); - } catch { - return iso; - } -} - -export function formatShortDate(iso: string | undefined): string { - return formatDate(iso, { - hour: undefined, - minute: undefined, - timeZoneName: undefined, - }); -} - -/** - * Resolves the label shown for a network: a confirmed timestamp wins, otherwise - * fall back to a coarse human estimate ("Q3 2026"), otherwise "Coming Soon". - */ -export function formatLifecycleDate( - entry: LifecycleStatusEntry, - estimate?: string, -): string { - if (entry.timestamp) return formatShortDate(entry.timestamp); - return estimate ?? 'Coming Soon'; -} - -export function sentenceJoin(parts: string[]): string { - return parts.filter(Boolean).join(' '); -} - -const NAMED_ENTITIES: Record = { - amp: '&', - lt: '<', - gt: '>', - quot: '"', - apos: "'", - nbsp: ' ', -}; - -function decodeEntities(value: string): string { - return value.replace(/&(#x?[0-9a-f]+|[a-z]+);/gi, (match, entity: string) => { - if (entity[0] === '#') { - const codePoint = - entity[1] === 'x' || entity[1] === 'X' - ? parseInt(entity.slice(2), 16) - : parseInt(entity.slice(1), 10); - return Number.isNaN(codePoint) ? match : String.fromCodePoint(codePoint); - } - const named = NAMED_ENTITIES[entity.toLowerCase()]; - return named ?? match; - }); -} - -/** - * Strips HTML tags and decodes entities so a rich-text `summary` can be reused - * as plain text in compact previews, search haystacks, and SEO metadata. DOM - * free so it runs in both server and client components. - */ -export function toPlainText(html: string): string { - return decodeEntities( - html - // Treat block-ish boundaries as spaces so words don't collapse together. - .replace(/<\/(p|div|li|ul|ol|br|h[1-6])>/gi, ' ') - .replace(//gi, ' ') - .replace(/<[^>]*>/g, ''), - ) - .replace(/\s+/g, ' ') - .trim(); -} diff --git a/app/upgrades/library/lifecycle.ts b/app/upgrades/library/lifecycle.ts deleted file mode 100644 index 225aa7c2..00000000 --- a/app/upgrades/library/lifecycle.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Lifecycle, LifecycleState, LifecycleStatusEntry, UpgradeStatus } from './types'; - -export function getLifecycleState( - entry: LifecycleStatusEntry, - nowMs: number = Date.now(), -): LifecycleState { - if (!entry.timestamp) return 'planning'; - return Date.parse(entry.timestamp) <= nowMs ? 'live' : 'scheduled'; -} - -export function getUpgradeStatus(lifecycle: Lifecycle, nowMs: number = Date.now()): UpgradeStatus { - const mainnetState = getLifecycleState(lifecycle.mainnet, nowMs); - const sepoliaState = getLifecycleState(lifecycle.sepolia, nowMs); - - if (mainnetState === 'live') return 'live'; - if (sepoliaState === 'live') return 'shipping'; - if (mainnetState === 'scheduled' || sepoliaState === 'scheduled') { - return 'scheduled'; - } - return 'planning'; -} diff --git a/app/upgrades/library/specUrls.ts b/app/upgrades/library/specUrls.ts deleted file mode 100644 index d3602073..00000000 --- a/app/upgrades/library/specUrls.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function buildChangeSpecUrl(upgradeId: string, anchor: string): string { - return `https://docs.base.org/base-chain/specs/upgrades/${upgradeId}/#${anchor.replace(/^#/, '')}`; -} diff --git a/app/upgrades/library/types.ts b/app/upgrades/library/types.ts deleted file mode 100644 index 190917e4..00000000 --- a/app/upgrades/library/types.ts +++ /dev/null @@ -1,99 +0,0 @@ -export type LifecycleState = 'live' | 'scheduled' | 'planning'; - -export type LifecycleStatusEntry = { - timestamp?: string; -}; - -export type Lifecycle = { - sepolia: LifecycleStatusEntry; - mainnet: LifecycleStatusEntry; -}; - -/** - * Human-readable launch estimate per network (e.g. "Q3 2026", "September 2026"). - * Display-only: it intentionally carries no parseable instant, so it never - * affects lifecycle state (an upgrade with only an estimate stays "planning") - * and gives date-scrapers nothing to mistake for a confirmed launch time. - */ -export type LifecycleEstimate = { - sepolia?: string; - mainnet?: string; -}; - -export type UpgradeStatus = 'live' | 'shipping' | 'scheduled' | 'planning'; - -export type ChangeCategory = - | 'execution' - | 'proofs' - | 'networking' - | 'rpc' - | 'flashblocks' - | 'accounts' - | 'precompile' - | 'bridging'; - -export type ChangeKind = 'eip' | 'base'; - -export type GithubIssueRef = { - number: number; - title: string; - state: 'open' | 'closed' | 'merged'; - url: string; -}; - -type ChangeBase = { - id: string; - slug: string; - title: string; - category: ChangeCategory; - upgrade?: string; - /** - * Per-network activation override for features that are turned on after their - * upgrade has gone live. A network entry here is authoritative for that - * network (even an empty `{}`, which reads as "planning"), letting a change - * stay scheduled/planning while its upgrade is already live. Omitted networks - * inherit the upgrade's lifecycle. - */ - activation?: Partial; - summary: string; - migrationNotes: string; - lastUpdated: string; - githubIssues: GithubIssueRef[]; - relatedRepos?: string[]; - specUrl?: string; - image?: string; -}; - -export type EipChange = ChangeBase & { - kind: 'eip'; - eipNumber: string; - relatedEips: string[]; - upstreamUrl: string; - ethereumFork?: string; -}; - -export type BaseChange = ChangeBase & { - kind: 'base'; - baseNumber: string; - owner?: string; -}; - -export type Change = EipChange | BaseChange; - -export type UpgradeCategoryGroup = { - category: ChangeCategory; - changeIds: string[]; -}; - -export type Upgrade = { - id: string; - name: string; - summary: string; - lifecycle: Lifecycle; - /** Optional coarse launch estimate shown wherever an exact date is absent. */ - estimate?: LifecycleEstimate; - categories: UpgradeCategoryGroup[]; - migrationGuide: string[]; - specUrl: string; - blog?: string; -}; diff --git a/app/upgrades/library/upgrades.test.ts b/app/upgrades/library/upgrades.test.ts deleted file mode 100644 index 7cf9f141..00000000 --- a/app/upgrades/library/upgrades.test.ts +++ /dev/null @@ -1,187 +0,0 @@ -import { changes, getChangeById, getChangeBySlug } from '../data/changes'; -import { - categoryGroupsForUpgrade, - getLifecycleForChange, - getUpgradeById, - getUpgradeForChange, -} from '../data/upgrades'; -import { getVibenetChangeById, getVibenetChanges } from '../data/vibenet'; - -import { UPGRADE_NETWORKS } from './display'; -import { getLifecycleState, getUpgradeStatus } from './lifecycle'; - -// NOTE (migration from the upstream app): several assertions in the source test were -// stale relative to data/changes.ts (renumbered base-000X ids, a "network" vs -// "networking" category typo, and an empty-Vibenet expectation that no longer -// matched the data). They have been corrected here to match the migrated data, -// which is the source of truth. -describe('upgrades route helpers', () => { - const beforeBeryl = Date.parse('2026-06-20T12:00:00Z'); - const afterBeryl = Date.parse('2026-06-26T12:00:00Z'); - - it('evaluates lifecycle state with a fixed nowMs', () => { - expect(getLifecycleState({ timestamp: '2026-06-18T18:00:00Z' }, beforeBeryl)).toBe('live'); - expect(getLifecycleState({ timestamp: '2026-06-25T18:00:00Z' }, beforeBeryl)).toBe('scheduled'); - expect(getLifecycleState({}, beforeBeryl)).toBe('planning'); - }); - - it('evaluates upgrade status with a fixed nowMs', () => { - const beryl = getUpgradeById('beryl'); - expect(beryl).toBeDefined(); - if (!beryl) throw new Error('beryl not found'); - expect(getUpgradeStatus(beryl.lifecycle, beforeBeryl)).toBe('shipping'); - expect(getUpgradeStatus(beryl.lifecycle, afterBeryl)).toBe('live'); - }); - - it('looks up upgrades case-insensitively', () => { - expect(getUpgradeById('AZUL')?.id).toBe('azul'); - expect(getUpgradeById('missing')).toBeUndefined(); - }); - - it('includes Denim with its November 2026 estimate', () => { - const denim = getUpgradeById('denim'); - expect(denim?.estimate).toEqual({ - sepolia: 'November 2026', - mainnet: 'November 2026', - }); - expect(denim?.lifecycle).toEqual({ sepolia: {}, mainnet: {} }); - }); - - it('lists 200ms Blocks as a Denim execution feature', () => { - const change = getChangeBySlug('200ms-blocks'); - expect(change).toMatchObject({ - id: 'base-0010', - title: '200ms Blocks', - category: 'execution', - upgrade: 'denim', - specUrl: 'https://docs.base.org/base-chain/specs/upgrades/denim/200ms-native-blocks', - }); - - const execution = categoryGroupsForUpgrade('denim').find( - (group) => group.category === 'execution', - ); - expect(execution?.changeIds).toEqual(['base-0010']); - }); - - it('looks up changelog entries by slug', () => { - const change = getChangeBySlug('native-account-abstraction'); - expect(change?.id).toBe('eip-8130'); - expect(getChangeBySlug('missing')).toBeUndefined(); - }); - - it('groups upgrade changes by category', () => { - const groups = categoryGroupsForUpgrade('azul'); - const execution = groups.find((group) => group.category === 'execution'); - const networking = groups.find((group) => group.category === 'networking'); - const flashblocks = groups.find((group) => group.category === 'flashblocks'); - const rpc = groups.find((group) => group.category === 'rpc'); - const proofs = groups.find((group) => group.category === 'proofs'); - expect(execution?.changeIds).toEqual([ - 'eip-7823', - 'eip-7825', - 'eip-7883', - 'eip-7939', - 'eip-7951', - ]); - expect(networking?.changeIds).toEqual(['eip-7642', 'base-0002', 'base-0003']); - expect(flashblocks?.changeIds).toEqual([]); - expect(rpc?.changeIds).toEqual(['eip-7910', 'base-0004']); - // The Azul proofs changes are consolidated into a single "Multiproofs" entry. - expect(proofs?.changeIds).toEqual(['base-0001']); - }); - - it('matches the Azul overview execution and proofs titles', () => { - const azulChanges = categoryGroupsForUpgrade('azul').flatMap((group) => - group.changeIds.map((id) => getChangeById(id)), - ); - const titlesById = Object.fromEntries( - azulChanges.filter(Boolean).map((change) => { - if (!change) throw new Error('change not found'); - return [change.id, change.title]; - }), - ); - - expect([ - titlesById['eip-7823'], - titlesById['eip-7825'], - titlesById['eip-7883'], - titlesById['eip-7939'], - titlesById['eip-7951'], - titlesById['eip-7642'], - titlesById['eip-7910'], - titlesById['base-0002'], - titlesById['base-0003'], - ]).toEqual([ - 'Upper-Bound MODEXP', - 'Transaction Gas Limit Cap', - 'MODEXP Gas Cost Increase', - 'CLZ Opcode', - 'secp256r1 Precompile', - 'eth/69', - 'eth_config RPC Method', - 'Remove Account Balances & Receipts', - 'Use basev0 protocol ID for discv5', - ]); - - expect(titlesById['base-0001']).toBe('Multiproofs'); - }); - - it('applies a per-change activation override without affecting other networks', () => { - const b20 = getChangeById('base-0005'); - const beryl = getUpgradeById('beryl'); - if (!b20) throw new Error('base-0005 not found'); - if (!beryl) throw new Error('beryl not found'); - const lifecycle = getLifecycleForChange(b20); - // Mainnet is turned on after Beryl; Sepolia inherits the upgrade date. - expect(lifecycle?.mainnet.timestamp).toBe('2026-07-08T18:00:00Z'); - expect(lifecycle?.sepolia.timestamp).toBe(beryl.lifecycle.sepolia.timestamp); - }); - - it('keeps upgrade-inherited lifecycle for changes without an override', () => { - const rethV2 = getChangeById('base-0007'); - const beryl = getUpgradeById('beryl'); - if (!rethV2) throw new Error('base-0007 not found'); - if (!beryl) throw new Error('beryl not found'); - expect(getLifecycleForChange(rethV2)).toEqual(beryl.lifecycle); - }); - - it('never activates a change before its upgrade', () => { - const activatedChanges = changes.filter((change) => change.activation); - const missingUpgradeLifecycles = activatedChanges.filter( - (change) => getUpgradeForChange(change)?.lifecycle === undefined, - ); - expect(missingUpgradeLifecycles).toEqual([]); - - const earlyActivations = activatedChanges.flatMap((change) => { - const upgradeLifecycle = getUpgradeForChange(change)?.lifecycle; - return UPGRADE_NETWORKS.flatMap((network) => { - const changeTs = change.activation?.[network]?.timestamp; - const upgradeTs = upgradeLifecycle?.[network].timestamp; - if (!changeTs || !upgradeTs) return []; - return Date.parse(changeTs) < Date.parse(upgradeTs) - ? [{ id: change.id, network, changeTs, upgradeTs }] - : []; - }); - }); - expect(earlyActivations).toEqual([]); - }); - - it('exposes the featured Vibenet change', () => { - const vibenetChanges = getVibenetChanges(); - expect(vibenetChanges).toHaveLength(2); - - const change = getVibenetChangeById('eip-8130'); - expect(change).toBeDefined(); - expect(change?.vibenet.featured).toBe(true); - expect(change?.vibenet.status).toBe('live'); - }); - - it('links the B20 changelog entry to its Vibenet demo', () => { - const b20 = getVibenetChangeById('base-0005'); - expect(b20?.vibenet.status).toBe('live'); - expect(b20?.vibenet.demo).toBe('/vibenet/demos/b20'); - // Not featured — the demo link surfaces on the changelog entry, not the - // featured-changes rail. - expect(b20?.vibenet.featured).toBe(false); - }); -}); diff --git a/app/upgrades/loading.tsx b/app/upgrades/loading.tsx deleted file mode 100644 index 467764ed..00000000 --- a/app/upgrades/loading.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Skeleton } from '../components/ui/Skeleton'; - -export default function UpgradesLoading() { - return ( -
- -
- {[0, 1, 2].map((i) => ( -
- - - -
- ))} -
-
- ); -} diff --git a/app/upgrades/page.tsx b/app/upgrades/page.tsx deleted file mode 100644 index 053a3cad..00000000 --- a/app/upgrades/page.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Metadata } from 'next'; - -import { UpgradesClient } from './UpgradesClient'; - -export const metadata: Metadata = { - title: 'Upgrades · Base Chain', - description: - 'Track Base network upgrades and their activation status across Base Sepolia and Mainnet.', - alternates: { - canonical: '/upgrades', - }, -}; - -export const revalidate = 300; - -export default function UpgradesPage() { - return ; -} diff --git a/app/upgrades/upgrade/[fork]/loading.tsx b/app/upgrades/upgrade/[fork]/loading.tsx deleted file mode 100644 index b4fe63d2..00000000 --- a/app/upgrades/upgrade/[fork]/loading.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Skeleton } from '../../../components/ui/Skeleton'; - -export default function UpgradeDetailLoading() { - return ( -
-
- - - - - -
- {[0, 1].map((i) => ( -
- -
- - -
-
- ))} -
-
- - {[0, 1].map((i) => ( -
- -
- {[0, 1, 2].map((j) => ( -
- - -
- ))} -
-
- ))} -
- ); -} diff --git a/app/upgrades/upgrade/[fork]/page.tsx b/app/upgrades/upgrade/[fork]/page.tsx deleted file mode 100644 index 6f80a6ae..00000000 --- a/app/upgrades/upgrade/[fork]/page.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import type { Metadata } from 'next'; -import { notFound } from 'next/navigation'; - -import { Button } from '../../../components/ui/Button'; -import { AnimatedArrowIcon, ExternalLinkIcon } from '../../../components/ui/icons'; -import { Text } from '../../../components/ui/Text'; -import { CategoryBadge, KindBadge, StatusPill } from '../../components/Badges'; -import { UpgradeIllustration } from '../../components/UpgradeIllustration'; -import { changes } from '../../data/changes'; -import { getUpgradeById } from '../../data/upgrades'; -import { changeDisplayTitle, LIFECYCLE_LABELS, NETWORK_LABELS, UPGRADE_NETWORKS } from '../../library/display'; -import { formatLifecycleDate, toPlainText } from '../../library/format'; -import { getLifecycleState } from '../../library/lifecycle'; - -// Time-based lifecycle states depend on Date.now(). Revalidate so the page -// regenerates instead of freezing build-time lifecycle state. -export const revalidate = 300; - -type UpgradePageProps = { - params: Promise<{ fork: string }>; -}; - -export async function generateMetadata(props: UpgradePageProps): Promise { - const { fork } = await props.params; - const upgrade = getUpgradeById(fork); - if (!upgrade) return {}; - - return { - title: `${upgrade.name} · Base Upgrades`, - description: upgrade.summary, - alternates: { - canonical: `/upgrades/upgrade/${upgrade.id}`, - }, - openGraph: { - title: `${upgrade.name} · Base Upgrades`, - description: upgrade.summary, - url: `/upgrades/upgrade/${upgrade.id}`, - }, - }; -} - -export default async function UpgradeDetailPage(props: UpgradePageProps) { - const { fork } = await props.params; - const upgrade = getUpgradeById(fork); - if (!upgrade) notFound(); - - const nowMs = Date.now(); - const categories = upgrade.categories.filter((group) => group.changeIds.length > 0); - - return ( -
-
-
-
- -
- {upgrade.name} - - {upgrade.summary} - -
-
- {UPGRADE_NETWORKS.map((network) => { - const state = getLifecycleState(upgrade.lifecycle[network], nowMs); - return ( -
- - {NETWORK_LABELS[network]} - -
- - {LIFECYCLE_LABELS[state]} - - · - - {formatLifecycleDate(upgrade.lifecycle[network], upgrade.estimate?.[network])} - -
-
- ); - })} -
- {upgrade.specUrl ? ( -
- -
- ) : null} -
- -
-
- Features -
- {categories.map((group) => - group.changeIds.map((id) => { - const change = changes.find((item) => item.id === id); - if (!change) return null; - return ( - -
-
- - {changeDisplayTitle(change)} - - - -
- - {toPlainText(change.summary)} - -
- - - ); - }) - )} -
-
-
-
- ); -} diff --git a/app/vibenet/data/features.ts b/app/vibenet/data/features.ts index 547021af..73fd44a5 100644 --- a/app/vibenet/data/features.ts +++ b/app/vibenet/data/features.ts @@ -1,7 +1,6 @@ import type { VibenetFeature } from '../library/types'; // Curated capability catalog rendered at the top of the Accounts demo. -// (Mirrors how the Upgrades section keeps its `changes` in a data module.) export const FEATURES: VibenetFeature[] = [ { id: 'eip-8130-account-abstraction', @@ -11,7 +10,7 @@ export const FEATURES: VibenetFeature[] = [ 'Built into the protocol. No bundler, no entrypoint. Powerful UX primitives in accounts that work on Base.', status: 'live', availability: 'Coming soon in ', - availabilityHref: '/upgrades/upgrade/cobalt', + availabilityHref: {label: 'Learn more', href: 'https://docs.base.org/base-chain/specs/upgrades/cobalt', external: true}, highlights: [ { title: 'Authorize How You Want', detail: 'Support for secp256k1, P-256, and WebAuthn passkeys.' }, { title: 'Portable Everywhere', detail: 'Same account and address on any EVM chain.' }, @@ -35,8 +34,7 @@ export const FEATURES: VibenetFeature[] = [ // 200ms Blocks is intentionally absent: it is a Denim roadmap item that has // not landed on vibenet yet (blocks are still ~2s, `timestampMs` is not on // the RPC payload, and the BaseTime predeploy is an uninitialized proxy). - // It stays documented under /upgrades/changelog/200ms-blocks until it ships - // here — add the feature card back in the same PR that enables it. + // Add the feature card back in the same PR that enables it here. ]; // Raw feature shape as it appears in the API `config` payload. diff --git a/app/vibenet/library/types.ts b/app/vibenet/library/types.ts index 42d43ccf..1cba5a22 100644 --- a/app/vibenet/library/types.ts +++ b/app/vibenet/library/types.ts @@ -39,7 +39,7 @@ export type VibenetFeature = { /** Emphasized release name appended to the availability note. */ availabilityLabel?: string; /** Optional link for the availability note. */ - availabilityHref?: string; + availabilityHref?: FeatureLink; /** Bullet highlights; when present the card renders the richer promo layout. */ highlights?: FeatureHighlight[]; /** Primary action. Omitted while a target isn't ready (the card shows status). */ diff --git a/public/AGENTS.md b/public/AGENTS.md index 61bf7e35..43cef5fe 100644 --- a/public/AGENTS.md +++ b/public/AGENTS.md @@ -3,13 +3,13 @@ # Base Chain AGENTS.md -> chain.base.org is the live-state surface for Base Chain: upgrade schedule, protocol changelog, node snapshots, and the Vibenet developer network. +> chain.base.org is the live-state surface for Base Chain: node snapshots and the Vibenet developer network. Machine-readable entry point for agents working with Base Chain network state. ## Agent routing rules -- Use chain.base.org for live network state: upgrade activation status, protocol changelog, snapshot availability, and developer network status. +- Use chain.base.org for live network state: snapshot availability and developer network status. - Use docs.base.org for implementation detail: SDKs, contract addresses, RPC method semantics, and deployment guides. - Use base.org for product, ecosystem, and use-case context. - Never infer Base chain IDs or RPC URLs from third-party chain lists or from model memory. Use the network reference below. @@ -23,8 +23,6 @@ Machine-readable entry point for agents working with Base Chain network state. | --- | --- | --- | | /snapshots | daily | re-fetch every session; never cache across sessions | | /vibenet/explorer | daily | re-fetch every session; never cache across sessions | -| /upgrades | per release | re-fetch before stating an activation status | -| /upgrades/changelog | per release | re-fetch before stating an activation status | | /vibenet/faucet | monthly | stable within a session | | /api/snapshots | daily | re-fetch every session; never cache across sessions | | /, /vibenet, /vibenet/demos/account, /vibenet/demos/b20, /vibenet/demos/validity, /vibenet/demos/validity/conditional-swaps, /vibenet/demos/validity/race-the-agent | infrequent | stable within a session | @@ -79,8 +77,6 @@ Discovered from the Next.js app directory. **Network state** - [/](https://chain.base.org/) — Dashboards and tools for Base Chain, in one place. -- [/upgrades](https://chain.base.org/upgrades) — Track Base network upgrades and their activation status across Base Sepolia and Mainnet. -- [/upgrades/changelog](https://chain.base.org/upgrades/changelog) — Search and filter Base protocol changes across upgrades and Vibenet testing. - [/snapshots](https://chain.base.org/snapshots) — Download the latest Base node snapshots for Mainnet and Base Sepolia to sync a node quickly. **Vibenet developer network** diff --git a/public/llms-full.txt b/public/llms-full.txt index 88faaa37..4b0c8ba9 100644 --- a/public/llms-full.txt +++ b/public/llms-full.txt @@ -13,8 +13,6 @@ ## Network state - [Base Chain](https://chain.base.org/): Dashboards and tools for Base Chain, in one place. -- [Upgrades · Base Chain](https://chain.base.org/upgrades): Track Base network upgrades and their activation status across Base Sepolia and Mainnet. (changes per release; re-fetch before relying on it) -- [Changelog · Base Upgrades](https://chain.base.org/upgrades/changelog): Search and filter Base protocol changes across upgrades and Vibenet testing. (changes per release; re-fetch before relying on it) - [Snapshots · Base Chain](https://chain.base.org/snapshots): Download the latest Base node snapshots for Mainnet and Base Sepolia to sync a node quickly. (changes daily; re-fetch before relying on it) ## Vibenet developer network diff --git a/public/llms.txt b/public/llms.txt index a4904b5f..8d1add0e 100644 --- a/public/llms.txt +++ b/public/llms.txt @@ -1,18 +1,15 @@ # Base Chain > Monitor and test Base, all in one place. chain.base.org is the live-state surface for -> Base Chain: the network upgrade schedule, the protocol changelog, node snapshots, and -> Vibenet, an ephemeral developer network for testing in-flight features such as -> EIP-8130 native account abstraction. +> Base Chain: node snapshots and Vibenet, an ephemeral developer network for testing +> in-flight features such as EIP-8130 native account abstraction. -Use this site for current network state. Use https://docs.base.org for implementation detail: how to write, deploy, and debug code. If the two disagree on an activation date, an upgrade status, or a snapshot URL, this site is authoritative; for API shapes, contract addresses, and code, docs.base.org is authoritative. Do not infer Base chain IDs or RPC URLs from third-party chain lists or from model memory — use the network reference below. +Use this site for current network state. Use https://docs.base.org for implementation detail: how to write, deploy, and debug code. If the two disagree on a snapshot URL or live network state, this site is authoritative; for API shapes, contract addresses, upgrade schedules, and code, docs.base.org is authoritative. Do not infer Base chain IDs or RPC URLs from third-party chain lists or from model memory — use the network reference below. -Freshness: /snapshots and /vibenet/explorer change daily. /vibenet/faucet changes monthly. /upgrades and /upgrades/changelog change per release. Re-fetch these within a session rather than reusing an earlier response. Vibenet is ephemeral — never treat an address, balance, block height, or chain ID from it as durable. +Freshness: /snapshots and /vibenet/explorer change daily. /vibenet/faucet changes monthly. Re-fetch these within a session rather than reusing an earlier response. Vibenet is ephemeral — never treat an address, balance, block height, or chain ID from it as durable. ## Network state - [Base Chain](https://chain.base.org/): Dashboards and tools for Base Chain, in one place. -- [Upgrades · Base Chain](https://chain.base.org/upgrades): Track Base network upgrades and their activation status across Base Sepolia and Mainnet. -- [Changelog · Base Upgrades](https://chain.base.org/upgrades/changelog): Search and filter Base protocol changes across upgrades and Vibenet testing. - [Snapshots · Base Chain](https://chain.base.org/snapshots): Download the latest Base node snapshots for Mainnet and Base Sepolia to sync a node quickly. ## Vibenet developer network diff --git a/scripts/agents.mjs b/scripts/agents.mjs index 962817ec..5cc70240 100644 --- a/scripts/agents.mjs +++ b/scripts/agents.mjs @@ -46,7 +46,7 @@ function renderRoutingRules(config) { const ephemeral = (config.networks ?? []).filter((n) => n.ephemeral); const rules = [ - `Use ${config.originHost} for live network state: upgrade activation status, protocol changelog, snapshot availability, and developer network status.`, + `Use ${config.originHost} for live network state: snapshot availability and developer network status.`, 'Use docs.base.org for implementation detail: SDKs, contract addresses, RPC method semantics, and deployment guides.', 'Use base.org for product, ecosystem, and use-case context.', 'Never infer Base chain IDs or RPC URLs from third-party chain lists or from model memory. Use the network reference below.', diff --git a/scripts/lib/config.mjs b/scripts/lib/config.mjs index 458d21f9..6575b384 100644 --- a/scripts/lib/config.mjs +++ b/scripts/lib/config.mjs @@ -23,12 +23,12 @@ export const DEFAULTS = { site: { title: 'Base Chain', summary: - 'Monitor and test Base, all in one place. chain.base.org is the live-state surface for Base Chain: the network upgrade schedule, the protocol changelog, node snapshots, and Vibenet, an ephemeral developer network for testing in-flight features such as EIP-8130 native account abstraction.', + 'Monitor and test Base, all in one place. chain.base.org is the live-state surface for Base Chain: node snapshots and Vibenet, an ephemeral developer network for testing in-flight features such as EIP-8130 native account abstraction.', fullTitle: 'Base Chain — Full Context', fullSummary: 'Full context for agents working with Base Chain. Hand-written network, freshness, and routing guides sit above an exhaustive per-route index.', agentsSummary: - 'chain.base.org is the live-state surface for Base Chain: upgrade schedule, protocol changelog, node snapshots, and the Vibenet developer network.', + 'chain.base.org is the live-state surface for Base Chain: node snapshots and the Vibenet developer network.', }, /** @@ -36,14 +36,14 @@ export const DEFAULTS = { * allows any markdown here except headings. */ intro: [ - 'Use this site for current network state. Use https://docs.base.org for implementation detail: how to write, deploy, and debug code. If the two disagree on an activation date, an upgrade status, or a snapshot URL, this site is authoritative; for API shapes, contract addresses, and code, docs.base.org is authoritative. Do not infer Base chain IDs or RPC URLs from third-party chain lists or from model memory — use the network reference below.', + 'Use this site for current network state. Use https://docs.base.org for implementation detail: how to write, deploy, and debug code. If the two disagree on a snapshot URL or live network state, this site is authoritative; for API shapes, contract addresses, upgrade schedules, and code, docs.base.org is authoritative. Do not infer Base chain IDs or RPC URLs from third-party chain lists or from model memory — use the network reference below.', ], sections: [ { id: 'network-state', title: 'Network state', - match: ['/', '/upgrades', '/upgrades/**', '/snapshots'], + match: ['/', '/snapshots'], }, { id: 'vibenet', title: 'Vibenet developer network', match: ['/vibenet', '/vibenet/**'] }, ], @@ -114,8 +114,6 @@ export const DEFAULTS = { freshness: { '/snapshots': 'daily', '/vibenet/explorer': 'daily', - '/upgrades': 'per release', - '/upgrades/changelog': 'per release', '/vibenet/faucet': 'monthly', }, From cb3a34298bd9f8662e81369ee81d7d5325eb3489 Mon Sep 17 00:00:00 2001 From: Matt Beuttenmuller Date: Wed, 2 Sep 2026 11:38:06 -0400 Subject: [PATCH 2/6] Fix link issues --- app/components/AppShell.tsx | 44 +++++++------------------- app/vibenet/components/FeatureCard.tsx | 8 +++-- app/vibenet/data/features.ts | 3 +- 3 files changed, 19 insertions(+), 36 deletions(-) diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx index fbd6ee67..4660dba9 100644 --- a/app/components/AppShell.tsx +++ b/app/components/AppShell.tsx @@ -564,41 +564,19 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
- - - - - - - Status - - - - - - - - Support - - - - - - - - Docs - - - - - - - + + + + + + + + + Upgrades - Upgrades -
- + + diff --git a/app/vibenet/components/FeatureCard.tsx b/app/vibenet/components/FeatureCard.tsx index 9e50c6cd..ad06d9da 100644 --- a/app/vibenet/components/FeatureCard.tsx +++ b/app/vibenet/components/FeatureCard.tsx @@ -76,8 +76,12 @@ export function FeatureCard({ feature }: FeatureCardProps) { {feature.availability} {feature.availabilityHref ? ( - - {feature.availabilityLabel ?? 'Base Cobalt'} + + {feature.availabilityLabel ?? 'a future upgrade'} ) : feature.availabilityLabel ? ( {feature.availabilityLabel} diff --git a/app/vibenet/data/features.ts b/app/vibenet/data/features.ts index 73fd44a5..d591e3b6 100644 --- a/app/vibenet/data/features.ts +++ b/app/vibenet/data/features.ts @@ -10,7 +10,8 @@ export const FEATURES: VibenetFeature[] = [ 'Built into the protocol. No bundler, no entrypoint. Powerful UX primitives in accounts that work on Base.', status: 'live', availability: 'Coming soon in ', - availabilityHref: {label: 'Learn more', href: 'https://docs.base.org/base-chain/specs/upgrades/cobalt', external: true}, + availabilityLabel: 'Base Cobalt', + availabilityHref: {label: 'Base Cobalt', href: 'https://docs.base.org/base-chain/specs/upgrades/cobalt/overview', external: true}, highlights: [ { title: 'Authorize How You Want', detail: 'Support for secp256k1, P-256, and WebAuthn passkeys.' }, { title: 'Portable Everywhere', detail: 'Same account and address on any EVM chain.' }, From bb751cbc7271909a7411388efbb566f7fe7fe76a Mon Sep 17 00:00:00 2001 From: Matt Beuttenmuller Date: Wed, 2 Sep 2026 21:14:27 -0400 Subject: [PATCH 3/6] Restyle homepage --- app/components/DemoCarousel.tsx | 113 +++++++++++++++++++++ app/components/ui/CommandLine.tsx | 139 ++++++++++++++++++++++++++ app/components/ui/icons.tsx | 27 +++++ app/page.tsx | 113 ++++++++++++++++----- app/snapshots/SnapshotDownloadBox.tsx | 58 +++++++++++ app/snapshots/SnapshotsClient.tsx | 116 +-------------------- app/vibenet/demos/DemoCard.tsx | 61 +++++++++++ app/vibenet/page.tsx | 55 ++-------- 8 files changed, 497 insertions(+), 185 deletions(-) create mode 100644 app/components/DemoCarousel.tsx create mode 100644 app/components/ui/CommandLine.tsx create mode 100644 app/snapshots/SnapshotDownloadBox.tsx create mode 100644 app/vibenet/demos/DemoCard.tsx diff --git a/app/components/DemoCarousel.tsx b/app/components/DemoCarousel.tsx new file mode 100644 index 00000000..3ea1d7d3 --- /dev/null +++ b/app/components/DemoCarousel.tsx @@ -0,0 +1,113 @@ +'use client'; + +import { useCallback, useEffect, useRef, useState } from 'react'; + +import { ChevronIcon } from './ui/icons'; +import { cn } from './ui/cn'; +import { DemoCard } from '../vibenet/demos/DemoCard'; +import type { DemoEntry } from '../vibenet/demos/catalogue'; + +// Horizontal, scroll-snapping row of demo cards with prev/next controls and edge +// fades. Native scroll drives everything (so touch/trackpad work for free); the +// buttons just nudge scrollLeft, and their enabled state and the fades track how +// far the row is scrolled. +export function DemoCarousel({ demos }: { demos: DemoEntry[] }) { + const scrollerRef = useRef(null); + const [canPrev, setCanPrev] = useState(false); + const [canNext, setCanNext] = useState(false); + + const updateEdges = useCallback(() => { + const el = scrollerRef.current; + if (!el) return; + // 1px slack so sub-pixel scroll widths don't leave a button stuck enabled. + setCanPrev(el.scrollLeft > 1); + setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 1); + }, []); + + useEffect(() => { + const el = scrollerRef.current; + if (!el) return; + updateEdges(); + el.addEventListener('scroll', updateEdges, { passive: true }); + window.addEventListener('resize', updateEdges); + return () => { + el.removeEventListener('scroll', updateEdges); + window.removeEventListener('resize', updateEdges); + }; + }, [updateEdges]); + + const scroll = useCallback((direction: 1 | -1) => { + const el = scrollerRef.current; + if (!el) return; + // Page by roughly one card-width so a click lands on the next card. + const amount = Math.min(el.clientWidth * 0.85, 340); + el.scrollBy({ left: direction * amount, behavior: 'smooth' }); + }, []); + + return ( +
+
+ {demos.map((demo) => ( + + ))} +
+ + {/* Edge fades hint at more content without covering a full card. */} + ); } - -function DemoCardBody({ demo }: { demo: DemoEntry }) { - return ( - <> -
-
- {demo.title} - {!demo.available ? ( - - Coming soon - - ) : null} -
- - {demo.summary} - -
-
    - {demo.points.map((point) => ( -
  • -
    • - ))} -
- - ); -} From ba2362bf58ccdf04ee48588a9b645967527663da Mon Sep 17 00:00:00 2001 From: Matt Beuttenmuller Date: Thu, 3 Sep 2026 08:31:37 -0400 Subject: [PATCH 4/6] Minor homepage edits & test fix --- app/components/DemoCarousel.tsx | 113 -------------------------- app/components/ui/icons.tsx | 27 ------ app/page.tsx | 16 ++-- app/snapshots/SnapshotDownloadBox.tsx | 4 +- e2e/home.spec.ts | 4 +- 5 files changed, 15 insertions(+), 149 deletions(-) delete mode 100644 app/components/DemoCarousel.tsx diff --git a/app/components/DemoCarousel.tsx b/app/components/DemoCarousel.tsx deleted file mode 100644 index 3ea1d7d3..00000000 --- a/app/components/DemoCarousel.tsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client'; - -import { useCallback, useEffect, useRef, useState } from 'react'; - -import { ChevronIcon } from './ui/icons'; -import { cn } from './ui/cn'; -import { DemoCard } from '../vibenet/demos/DemoCard'; -import type { DemoEntry } from '../vibenet/demos/catalogue'; - -// Horizontal, scroll-snapping row of demo cards with prev/next controls and edge -// fades. Native scroll drives everything (so touch/trackpad work for free); the -// buttons just nudge scrollLeft, and their enabled state and the fades track how -// far the row is scrolled. -export function DemoCarousel({ demos }: { demos: DemoEntry[] }) { - const scrollerRef = useRef(null); - const [canPrev, setCanPrev] = useState(false); - const [canNext, setCanNext] = useState(false); - - const updateEdges = useCallback(() => { - const el = scrollerRef.current; - if (!el) return; - // 1px slack so sub-pixel scroll widths don't leave a button stuck enabled. - setCanPrev(el.scrollLeft > 1); - setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 1); - }, []); - - useEffect(() => { - const el = scrollerRef.current; - if (!el) return; - updateEdges(); - el.addEventListener('scroll', updateEdges, { passive: true }); - window.addEventListener('resize', updateEdges); - return () => { - el.removeEventListener('scroll', updateEdges); - window.removeEventListener('resize', updateEdges); - }; - }, [updateEdges]); - - const scroll = useCallback((direction: 1 | -1) => { - const el = scrollerRef.current; - if (!el) return; - // Page by roughly one card-width so a click lands on the next card. - const amount = Math.min(el.clientWidth * 0.85, 340); - el.scrollBy({ left: direction * amount, behavior: 'smooth' }); - }, []); - - return ( -
-
- {demos.map((demo) => ( - - ))} -
- - {/* Edge fades hint at more content without covering a full card. */} -