feat(explorer): landing bento — live network stats grid#915
Open
feat(explorer): landing bento — live network stats grid#915
Conversation
Apply a typography and UI reskin across the explorer. Introduce HB Set for headings, Pilat for sans-serif, Geist Mono for monospace, alongside polish to top-level list pages and the validators table. - Fonts: add Pilat (8 weights) and HB Set (Light/Regular/Medium) woff2 assets, declare @font-face rules, update --font-heading / --font-display / --font-sans / --font-mono tokens, and preload the primary faces from __root.tsx. HB Set weight kept at Regular (400) so Tailwind font-normal uses the real face rather than synthesizing bold. - Header: shrink Tempo wordmark by 25%, update search placeholder to "Search by address, hash, or block...", simplify address breadcrumb label (drop "Addr" prefix). - Homepage: replace landing-circles.png with an inline SVG (Sphere.tsx) so stroke width, color, and dark-mode inheritance are controllable. - Top-level list pages (Blocks, Tokens, Validators, Fee AMM): add an HB Set page title with a one-line muted Pilat description, indented with ml-2, and drop the duplicated section title so the Sections header shows only the count. - Sections: make `title` optional and render just the count when omitted. - Validators table polish: - Move the "Hide inactive" checkbox into the Sections contextual slot as a rounded switch labeled "Show inactive" with inverted default (inactive hidden). - Replace Check/X icons with a pulsing green / static red dot plus muted Pilat text. - Drop the badge styling on validator names; render as plain sans. - Muted index column with a monospace `#` header for vertical alignment against the tabular numeric cells. - Unify Address and Public Key truncation via Midcut min=6 and fixed column widths so both render at similar character lengths. - Lighten heading weights across NotFound, ErrorBoundary, and the block countdown page so HB Set no longer synthesizes bold. Made-with: Cursor
…, compact search
- light mode: real light palette for previously dark-only tokens, html[data-theme] overrides, pre-hydration bootstrap script, ThemeToggle wired into Header + Footer
- breadcrumbs: split into entity group + mono id ("Transaction" instead of "Tx"), mono + tabular-nums for ids
- gap trim: pt-20 → pt-8 across all list/detail routes
- BlockCard hash: 13px / 33ch max-width so the hash renders in 2 lines instead of 3
- BlockCard number: per-digit slot-machine roll on mount
- Header block number: muted by default + cascading lotto on every tick
- Header: top padding 36→16 (48→24 desktop), mid-width height 88→60
- Network badge: smaller (14→12px), tighter padding
- ExploreInput: new size=compact (34px, 14px text) used in all three Header variants so the placeholder stops clipping
- Fonts: drop HB Set, use Pilat everywhere (--font-heading now points at Pilat)
- Mono: disable OpenType `zero` feature on mono contexts so Geist Mono loses slashed zeros
- Footer: text-ui-meta now uses --color-content-primary so links are visible in light mode
- Light mode field polish: --color-background-alt / --color-base-alt / --color-base-plane-interactive / --color-solid-gray-3 bumped to #fafafa
- DataGrid: min-w-0 + overflow-hidden on header cells so responsive column labels don't visually overlap
- Transaction card: "Relative" pill replaced with muted "· Relative" label, cycle-on-click preserved
Made-with: Cursor
Use theme-aware orb SVGs (landing-orb-light.svg, landing-orb-dark.svg) and reduce container opacity to 20% so the background artwork recedes behind foreground content. Made-with: Cursor
Add a fully-packed responsive masonry grid below the landing hero showing 12 live testnet metrics: Latest Block (lotto + tick flash), Block Time (gradient fade), Uptime (status-bar with halo dot), Activity heatmap with windowed Tx/Gas modes, TVL snapshot, Top Tokens by holder count, Validators with proposal share, New Assets, Popular Calls, Notable Transactions with receipt-decoded descriptions and per-block-share gauge, Chain ID + TPS dropdowns, and a live header indicator. - New server fns under lib/server/landing-stats.ts (PG + CH fallbacks) - New comps/bento/* shell + chart primitives (Sparkline, AreaChart, BarChart, Heatmap, StatusBar, StackedBarTimeChart) - Looping parallax sphere artwork on scroll - Source-order packed at 2/4/6 cols across base/sm/lg Made-with: Cursor
Replace the static landing words + orb sphere with a full-bleed looping video background and a typewriter that cycles five action headlines mirroring the OG dynamic image templates. Each headline is paired with a matching event-description pill (action / asset / connector / address / time) styled like the txn rows on the explorer. - Single h.264 mp4 (~2.3MB at 720p) served from public/landing-hero/ - Light-mode applies CSS filter:invert + hue-rotate to the same source so the wireframe reads black-on-white without a second asset - Soft radial fade hides edges into the page background - Drop the looping parallax Sphere artwork on landing (replaced by hero) Made-with: Cursor
Collaborator
Author
|
Phase 2 layered on:
Smoke test on testnet returns HTTP 200 in ~2.5s; mp4 served at |
Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # apps/explorer/src/routes/_layout/validators.tsx
- LiveStatus: detect navigator.online; show red 'Offline' pill with a red halo pulse when the browser loses connectivity. Healthy / stale states unchanged. - BentoTile.Error: optional onRetry callback renders a small refresh pill below the error icon. Wired through every landing tile to call the corresponding TanStack Query refetch(). - New @Keyframes liveHaloOffline matching the warning halo style. Made-with: Cursor
Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # apps/explorer/src/comps/Sphere.tsx
12 tasks
Collaborator
Author
|
Refreshed for merge:
|
Bundle Size Report
Chunk changes (>1KB)
Compared against main branch (baseline from 4/27/2026, 4:02:54 PM) |
Cloudflare Deployments
|
- Hero: flip theme inversion via CSS var so dark renders source video untouched and light inverts; add subtle radial fade overlay above video; switch search input to rounded-full; pill cross-fades and gets pl-4 + reduced bottom margin - LatestBlockTile: per-digit diff animation (only changed digits flash blue → primary) replacing the tile-root pulse box-shadow - BlockTime + TPS tile titles: add green pulsing live dot via the new LivePulseDot helper component - ActivityHeatmap: reshape into wide GitHub-graph layout (cols ≈ 5×rows) so the wide tile fills horizontally with denser cells - NotableTxs: drop secondary description header, single grid template shared by header + rows, hash column visible on sm+, right-align numerics, widen Age column with whitespace-nowrap, gauge uses bg-distinct so the track is visible in both themes - TVL: stack each legend item vertically (swatch+name on top, % under), drop the wide horizontal row and tighten whitespace; bar trimmed to h-3 - Lists (Top Tokens, Popular Calls, New Assets, Validators, Notable Tx) now share the same divide-y divide-card-border/60 border treatment - styles.css: add liveDot + digitFlash keyframes; add hero-video-filter + hero-video-bg vars driving the theme-aware video filter Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A 12-tile responsive masonry grid + a new looping video hero on the landing page, plus a holistic resilience pass on the data layer. All powered by the existing
tidxdata layer and validator-directory worker, with graceful degradation when queries cap or stall.Bento grid
grid-auto-flow: densepacks every row at every breakpoint (base 2 cols / sm 4 cols / lg 6 cols) with zero empty cells.retry: 1per tile; per-tileRetrybutton on error states;LiveStatusindicator pulses green when block ticks within 10s, amber when stale, red when the browser is offline.Hero
Search Explore Discoverwords with a full-bleed looping<video>background (h.264 720p, ~2.3MB).filter: invert(1) hue-rotate(180deg)in light mode.Depends on
origin/reskin.This branch tracks
reskinand is up-to-date withmainvia merge commits.Test plan
Screenshots
Per-row close-ups
Row 2 — Latest Block + Block Time + Uptime + Chain ID + TPS + Activity heatmap (top)
Row 3 — Activity heatmap (full) + Top Tokens + Popular Calls + Validators (top)
Row 4 — Validators (bottom) + TVL + New Assets + Notable Transactions (top)
Row 5 — New Assets + Notable Transactions (full table)
Tile close-ups
Activity heatmap — Txs / Gas toggle + 7d / 30d / 90d window dropdown, denser GitHub-graph layout
Notable transactions — receipt-decoded description, hash, gwei, per-block-share gauge, age
Total value locked — primary $ figure under the label, vertically-stacked legend items, slim stack bar
Validators — proposal-share bar over the recent block window, active dot per validator
Top tokens by holder count — pill
Viewaction, vertical-rule columns, distinct-holder bar with>10Kcap