Ctrlk
Play NowBack The Prize PoolSupportTelegram

Starter Kit

Fork our open-source reference frontend and ship a Megapot integration in an afternoon. The Megapot Starter Kit is a five-page React + wagmi app implementing every core flow — play, claim winnings, back the prize pool, and view round history.

See it before you fork. The kit is running live at demo.megapot.io against Base mainnet. Click through every page, connect a wallet, and check the flows you'd want to ship.

What's in the kit

Page
What it does
What it demonstrates

Home

Live drawing state, countdown, prize-tier projections

Phase-aware RPC polling + event subscriptions

Play

Buy tickets — single, bulk, or subscription

All three ticket-purchase methods + USDC approval

Tickets

Your tickets, unclaimed wins, claim flow

RPC + Data API mix, claim batching, referral fee claim

LP

Deposit + two-step withdraw

LP manager interaction + locked-drawing handling

History

Paginated past rounds with winners

Data API rounds endpoint + cursor pagination

GitHub: coordinationlabs/megapot-starter-kit. MIT licensed.

Get an API key (optional but recommended)

The kit works without an API key on the anonymous tier (10/min, 500/day) — fine for local development and low-traffic deploys.

For production, mint a key at your megapot.io dashboard. The partner tier lifts rate limits to 60/min and 10K/day, plenty for most deploys.

There are three deployment shapes — pick once per fork:

Shape
Setup
Trade-off

Anonymous

No key, no backend

Lowest rate limit; works on any static host

Browser key

Set VITE_MEGAPOT_API_KEY in your host env vars

Higher tier; key ships in browser bundle (acceptable for the read-only Data API; rotate via dashboard if leaked)

Proxy

Set MEGAPOT_API_KEY server-side AND VITE_API_BASE_URL=/api/megapot; deploy server/proxy.ts

Key never reaches the browser; requires a backend (Vercel Functions + Cloudflare Workers wrappers in the kit's examples/)

Full reference: the kit's .env.example documents every variable with rationale.

Get started (5 minutes)

That's it. The kit ships with a dead-address referrer default so a fresh fork runs out of the box, and a dev-mode warning fires while VITE_REFERRER_ADDRESS is unchanged (and while the TICKET_SOURCE analytics tag in src/config/contracts.ts is the placeholder), so you can't accidentally ship without attribution.

Optional .env keys (both recommended for non-trivial deploys):

  • VITE_MEGAPOT_API_KEY — lifts the anonymous Data API tier to partner tier (see above)

  • VITE_WALLETCONNECT_PROJECT_ID — without it, injected wallets (MetaMask, Coinbase Wallet) still work but the WalletConnect QR modal doesn't. Free at cloud.walletconnect.com.

Rebrand checklist

The kit ships with nine ordered rebrand seams. Most forks only touch the first two before shipping:

  1. Brand identity — logo, color scale, copy, HTML head, wallet-connect app name

  2. Referrer attribution — set VITE_REFERRER_ADDRESS in .env (dead-address default); the TICKET_SOURCE analytics tag stays in src/config/contracts.ts

  3. Wallet provider — RainbowKit default; swap to Privy / ConnectKit / vanilla wagmi

  4. Chain — VITE_CHAIN=mainnet | testnet in .env

  5. LP feature toggle — LP_ENABLED in src/config/contracts.ts (default off)

  6. API key safety — the three deployment shapes above

  7. Allowance strategy — exact-amount default; one-line swap to maxUint256

  8. Disclaimer line — src/components/layout/DisclaimerLink.tsx

  9. UI copy — single source at src/config/copy.ts

Full checklist with rationale: docs/CUSTOMIZE.md.

Building with an AI assistant?

Point your agent at llms.megapot.io/starter-kit for the orientation skill that maps every kit file to its protocol counterpart. Every file in the kit's src/ carries a JSDoc header with @skill / @contract / @endpoint / @customize metadata so an agent dropped into the repo orients in one read.

See AI Agent Skills for the full skills library and the one-line instruction to add to your assistant's config.

Resources

PreviousStart HereNextAI Agent Skills

Last updated