reef block listener

A Farcaster Mini App with one clear job: listen for the current reef-chain block, show what happened inside it, and flush the view when the next block arrives.

The client now renders with @reef-chain/ui-kit, and the bundled app.css comes directly from the kit instead of a handwritten stylesheet.

It uses your RPC by default:

http://eth.reeftestnet1-reefdevcluster-f70119-72-60-35-83.traefik.me/

What It Does

• Polls eth_getBlockByNumber("latest", true) every three seconds.
• Shows one block at a time: number, tx count, gas, base fee, latency, and hash.
• Flushes the event list when a new block arrives.
• Displays quiet blocks honestly when there are no transactions.
• Lets users pause/resume listening, share the current block, or copy the HTTPS RPC proxy.

Run It Locally

npm run dev

Open:

http://localhost:3000

If port 3000 is busy:

PORT=3001 npm run dev

Then open:

http://localhost:3001

The app generates:

http://localhost:3000/.well-known/farcaster.json

Change The RPC Target

REEF_RPC_URL="http://your-rpc-url.example/" npm run dev

Preview In Farcaster

Farcaster needs a public HTTPS URL to scrape the Mini App metadata.

1. Run the app locally with npm run dev.
2. Expose it with a tunnel, for example:

cloudflared tunnel --url http://localhost:3000

Use http://localhost:3001 in that command if you started the app with PORT=3001.

3. Open the tunnel URL once in your browser.
4. Use the tunnel URL in Farcaster developer tools or the Mini App embed preview.

For production, deploy this as a small Node app and set:

APP_URL="https://your-real-domain.example"
REEF_RPC_URL="http://eth.reeftestnet1-reefdevcluster-f70119-72-60-35-83.traefik.me/"
FARCASTER_ACCOUNT_ASSOCIATION='{"header":"...","payload":"...","signature":"..."}'

The Node server includes /api/rpc, which proxies the HTTP RPC safely from an HTTPS app. That is also the URL shown in the Network Kit panel for wallet setup.

Vercel is supported through api/page.mjs, api/manifest.mjs, api/rpc.mjs, and vercel.json.

The root page includes a single modern fc:miniapp embed tag. The embed image is assets/embed.png, a PNG in the required 3:2 ratio.

Publish Notes

Before publishing publicly:

1. Deploy to a stable HTTPS production domain.
2. Set APP_URL to that exact production origin when running the Node server.
3. Generate an accountAssociation from the Farcaster Manifest Tool for your exact domain.
4. Set it as FARCASTER_ACCOUNT_ASSOCIATION in your production environment.
5. Refresh or register the manifest in Farcaster developer tools.
6. Keep the icon/splash/hero/embed PNG files in assets/.

The signed accountAssociation.payload.domain must match the hosted domain exactly, including subdomains.

Check Syntax

npm run check