feat: vibenet stack — faucet, explorer, landing (Next.js port)#165
Draft
chunter-cb wants to merge 10 commits into
Draft
feat: vibenet stack — faucet, explorer, landing (Next.js port)#165chunter-cb wants to merge 10 commits into
chunter-cb wants to merge 10 commits into
Conversation
Ports the vibenet Rust/nginx stack to this Next.js app: - Landing page (/) with chain info, features, contracts - Faucet page + API routes (/faucet, /api/vibenet/faucet/*) using viem for signing, in-memory rate limiting per IP/address - Block explorer pages + API routes (/explorer/*, /api/vibenet/explorer/*) backed by better-sqlite3 (same schema as vibescan Rust crate) - Background indexer script (scripts/indexer.mjs) that backfills and subscribes to newHeads via WebSocket - Subdomain routing via proxy.ts: faucet.vibes.base.org → /faucet, explorer.vibes.base.org → /explorer - TIPS pages moved to /tips to free up root for vibenet landing - Dockerfile updated: self-contained build context, starts both Next.js server and background indexer Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
better-sqlite3 prepare() rejects SQL with multiple statements. Replace wipeAll prepared statement with a wipeDb() function that uses db.exec() which handles multi-statement SQL correctly. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- Switch Dockerfile from bun to npm (bun.lock lacked better-sqlite3) - Add apk build tools (python3/make/g++) for better-sqlite3 native compile - Add .dockerignore to exclude node_modules/.next/tmp from build context - Fix proxy.ts: skip /api/* paths in subdomain rewrites so API routes work correctly when called from faucet/explorer subdomains Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
next start (non-standalone) + full node_modules lets indexer.mjs resolve viem and better-sqlite3 without special packaging. For a devnet image the extra layer size is not a concern. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
6 tasks
Bugs: - Landing page FAUCET_URL was using port-hopping math from old multi-port nginx layout; switch to /faucet path - Landing page chain_id was looking for it in vibenet.yaml; pull from /api/vibenet/faucet/status which already returns it - Filter out _branch/_commit/faucetAddress metadata from contracts list - isProd() referenced window in second clause without SSR guard Features: - New /api/vibenet/faucet/drip-nfv endpoint (calls NFV.mint(addr)) - Faucet UI gets a third button when nfv_address is present - Explorer home page gets a search bar that auto-classifies queries: block number → /explorer/block, address → /explorer/address, 64-char hash → tries /explorer/tx, falls back to /explorer/block Cleanup: - Delete bun.lock (we use npm now; bun.lock was stale, missing better-sqlite3) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The hardcoded ERC20_TRANSFER topic had a typo in the second half
(0x...00b2d2b3179ef118821c0b55d5 instead of the real
0x...163c4a11628f55a4df523b3ef). Effect: USDV/NFV mint events were
silently dropped from address_activity, so address pages didn't show
token-to/token-from entries.
The correct hash is keccak256("Transfer(address,address,uint256)").
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The first pass used Tailwind utility classes for a generic dark UI. The production deployments at vibes/faucet/explorer.vibes.base.org used a specific hand-crafted design with: - Base Blue accent (#0052FF), specific near-black palette - System sans + ui-monospace font stack - Brand mark (small Base-blue square) next to "base vibenet" - Specific layout primitives: chain-card with copy-to-clipboard rows, features-grid, contracts-list with watch-asset buttons, drip-buttons, stats cards with left blue border, key/value tables for detail pages Changes: - New src/styles/vibenet.css with the original CSS, scoped to .vibenet-app so it doesn't bleed into /tips - New (vibenet) route group with a layout.tsx that wraps in .vibenet-app - Move landing, faucet, explorer pages into the route group (URLs unchanged — route groups don't affect paths) - Rewrite each page to use the original semantic class names - Add wallet_addEthereumChain + wallet_watchAsset (USDV) via viem Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The first pass crammed faucet/USDV/NFV addresses into the body as
verbose info rows. The original production design is more minimal:
- Status: 3-pill grid (ETH balance / USDV state / NFV state)
- Form: address input + drip buttons (ETH primary, USDV+NFV secondary)
- Drip result: pending / success / error states
- Footer: small "address chips" (rounded pills) for faucet/USDV/NFV
contracts linking to their explorer pages
Also adds:
- Drip button labels show actual amounts ("Request 0.1 ETH" /
"Request 1000 USDV") pulled from /status
- Pending state on drip-result during in-flight requests
- Auto-refresh of status after a drip so balance updates
- Friendly "rate limited — wait a minute" message on 429s
- Missing CSS classes: .faucet-summary, .faucet-pill,
.faucet-pill-key, .faucet-pill-value, .faucet-footer-links,
.address-chip, .drip-result.pending
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
make table links visibly clickable
- Both lists are now 3 columns of similar visual weight:
Latest Blocks: Block | Txs | Age
Latest Transactions: Hash | From → To | Block
(was 4 vs 3, with the truncated block hash crammed into the blocks
list and making the column too narrow)
- Drop the leading # from block numbers everywhere:
list cells, block detail title, tx detail block link, address
activity rows
- Add link affordance for table cells: subtle dotted underline by
default, solid + brighter on hover. Links inside <td> now look
obviously clickable without screaming for attention
- Add row-hover background on .live-table for an extra cue
- Add .nowrap helper for the "Age" column so "5s ago" doesn't break
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Three things:
1. Fix vertical alignment in two-col grid
The .vibenet-app main section + section { margin-top: 2.5rem } rule was
cascading into .two-col, pushing "Latest Transactions" h2 below
"Latest Blocks" h2 instead of aligning at the top of each grid cell.
Changed the selector to direct-child only (main > section + section).
2. Split From → To into separate columns
Latest Transactions table now has 4 cols: Hash | From | To | Block
(was 3 cols with combined From → To). Each address is also a clickable
row-link.
3. Rewrite tx + address detail to match the original Rust templates
tx page now shows: Block, Timestamp + age, Status (with color pill),
From, To (or contract created), Value, Nonce, Fee, Gas limit,
Gas used (+ % of limit), Effective gas price, Selector, Input
(expandable details), and a Logs section with ERC-20 Transfer
decoding (event-badge + decoded-event grid).
address page now shows: hash subtitle, Type (EOA/Contract + code
size), Balance, Nonce, then Activity table (Block | Tx | Role | Detail).
Both use the original .detail dl with 160px label column.
Backend changes to support these views:
- /api/vibenet/explorer/tx/[hash] now includes timestamp, gasUsed, fee,
effectiveGasPrice, contractAddress, and the receipt logs array
- /api/vibenet/explorer/address/[addr] now includes is_contract,
code_size, and nonce
CSS additions:
- .detail (dl grid 160px 1fr), .hash, .dim
- .status-ok / .status-fail / .status-pending color pills
- .button-row + .btn for action links above detail
- .input-details + pre.raw for expandable hex
- .log + .log-header + .log-index, .topics, .data
- .event-badge (Base-blue rounded pill), .decoded-event (72px label grid)
- .empty rendered italic to match original
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.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
Ports the vibenet stack from
base/base(Rust/nginx) into this Next.js app.vibes.base.org→/) — readsconfig.json+contracts.jsonfrom mounted volumes, chain connect card, wallet addfaucet.vibes.base.org→/faucet) — ETH drip + USDV mint via viem, per-IP/address in-memory rate limiting matching Rust cooldown semanticsexplorer.vibes.base.org→/explorer) — SQLite-backed (same schema as vibescan Rust crate), address activity index, backfill + live newHeads subscriptionscripts/indexer.mjs) — runs alongside Next.js in Docker viascripts/start.shsrc/proxy.ts) —faucet.*andexplorer.*rewrite to/faucetand/explorerpaths/tipsto free the root for vibenet landingui/prefix), starts indexer + serverArchitecture decisions
better-sqlite3(native, synchronous) used for SQLite in API routes — correct for a single-instance devnetTest plan
npx tsc --noEmit— cleannpx @biomejs/biome check src/— clean/,/faucet,/explorer,/tips) return 200{"blocks":0,"txs":0,"addresses":0}(SQLite schema init works){}gracefully when no volume mountedjust vibefrom base/base)just vibeFollow-up needed in base/base
Update
etc/vibenet/docker-compose.vibenet.ymlto:vibenet-faucet+vibescanservices withnext-app(builds from../../ui)nginx-gatewayservicebase-client:8546port directly for WebSocket RPC🤖 Generated with Claude Code