feat: vibenet stack — faucet, explorer, landing (Next.js port)#165
Draft
chunter-cb wants to merge 17 commits into
Draft
feat: vibenet stack — faucet, explorer, landing (Next.js port)#165chunter-cb wants to merge 17 commits into
chunter-cb wants to merge 17 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>
…ation
Tx detail:
- Add Type row showing the hex (0x0 / 0x1 / 0x2 / 0x3 / 0x4 / 0x7e)
and the human label (Legacy / EIP-2930 / EIP-1559 / EIP-4844 /
EIP-7702 / Deposit (OP-stack)). Handles viem's string types
("eip1559", "deposit", …) and falls back to typeHex when type is
null (the OP-stack deposit case where viem doesn't name the type).
- Show the FULL input calldata in a pre.raw block, always expanded
with a "{N} bytes" header. The previous <details> collapse was
confusing — the truncated short-hash made it look like the page
was hiding data.
- Show the FULL log data in a pre.raw block per log, with a "{N} bytes"
header. Previously this was truncated to 24 chars with no way to
see the full hex.
Explorer home:
- Detect new blocks / new txs / changed stat counters between polling
refreshes (5s interval), apply .live-row-new (background flash from
Base Blue back to transparent over 1.2s) to new rows and
.live-stat-updated (border + glow flash, 0.9s) to changed stats.
- Skips the flash on the first load so the whole table doesn't light
up on page open.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Created src/app/(vibenet)/explorer/_header.tsx as a reusable client component with the brand mark, search input + button, and Home/Faucet nav links. Wired through src/app/(vibenet)/explorer/layout.tsx so all explorer routes (/explorer, /explorer/tx, /explorer/block, /explorer/address) get the same sticky header — search bar is now always reachable from any tx/address/block detail page, matching the production explorer.vibes.base.org behavior. Removed: - The inline <header> blocks duplicated across each page - The standalone <SearchBar /> in the explorer home main content - The "Back to Explorer" links — clicking the brand mark now does that CSS: - .search now flexes between brand and nav (max-width 460px), input scaled down to 13px to fit the header - Hides on screens narrower than 720px (would crowd the brand) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- bun.lock was deleted in an earlier commit; CI's bun install
--frozen-lockfile was migrating from package-lock.json on every run
and hitting transient ConnectionRefused errors mid-download
- Regenerate bun.lock with bun in Docker (oven/bun:1) so it picks up
better-sqlite3 and stays in sync with package-lock.json
- scripts/indexer.mjs: drop unused viem imports (parseAbiItem); call
the existing wipeDb() instead of inlining the multi-statement DELETE
- src/app/tips/block: add a second biome-ignore for the (tx as any)
cast inside the metering helper — the existing ignore on the
function signature didn't cover the cast on the next line
- biome formatter normalized indexer.mjs (long string + SQL prepares
wrapped to 80 cols)
Verified locally with the same toolchain as CI:
docker run --rm -v "$(pwd)":/app -w /app oven/bun:1 sh -c \
'bun install --frozen-lockfile && bun run lint && \
bun run tsc --noEmit && bun run build'
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
CI was repeatedly failing with ConnectionRefused / FailedToOpenSocket
errors during \`bun install --frozen-lockfile\` after this PR added
better-sqlite3 + extra transitive deps (the previous successful runs
had a warm bun cache for ~164 packages; now it's ~191 and the
fresh-download path hits some kind of network issue in this runner
environment).
Switching the workflow to npm:
- Uses the package-lock.json we already maintain (the source of truth
locally — we install with npm, so this aligns CI with dev)
- Avoids the bun parallel-download network behavior that's tripping
up the runner
- actions/setup-node@v4.4.0 with cache: npm gives us caching for free
Verified locally with the same toolchain (node:20-alpine + npm ci):
docker run --rm -v "\$(pwd)":/app -w /app node:20-alpine sh -ec '
apk add --no-cache python3 make g++ > /dev/null
npm ci && npm run lint && npx tsc --noEmit && npm run build
'
bun.lock stays in the repo for now in case anyone uses bun locally,
but it's no longer the lockfile of record.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The earlier failures with bun were because bun.lock didn't exist —
bun was migrating package-lock.json on every CI run and the
fresh-download fan-out was hitting transient network errors on the
runner. Now that bun.lock is committed and matches the deps, bun
install --frozen-lockfile uses the runner's warm cache plus the
checked-in lockfile and should be both faster and reliable.
The npm attempt also failed: this repo's CI runs on a Coinbase
self-hosted runner with a security-tracing agent that was killing
node mid-install ("Exit handler never called!"), leaving
node_modules without binary symlinks (biome, next, tsc all "not
found" in the next step).
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The CI runner refuses ~half the bun parallel-download connections — every run was failing with hundreds of ConnectionRefused / FailedToOpenSocket on the npm registry. Previous successful runs (164 packages installed in 2-3s) were clearly hitting a warm cache that this PR's expanded dep set blew past. Add actions/cache for ~/.bun/install/cache keyed on bun.lock with a loose restore-keys fallback. First run on a new lockfile still downloads fresh, but subsequent runs and PRs whose dep set overlaps master will hit the cache. 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