Frontend Integration

Stack

Layer
Tech

Framework

Next.js 14 (App Router)

Styling

Tailwind CSS + CSS variables

Web3

wagmi v2 + viem

Wallet

RainbowKit

Database

Supabase

Bridge/Swap

LiFi SDK

Fonts

Geist Sans + JetBrains Mono


Key Files

File
Purpose

frontend/app/layout.tsx

Root layout — metadata, OG tags, JSON-LD, fonts

frontend/app/page.tsx

Landing page — hero, ticker, CTAs

frontend/app/markets/page.tsx

Markets list

frontend/app/markets/[id]/page.tsx

Market detail + trade panel

frontend/app/markets/create/page.tsx

Create market form

frontend/components/Header.tsx

Top nav with evently wordmark

frontend/components/MegambleLogo.tsx

evently icon (M+E Heart) + wordmark

frontend/components/MarketModal.tsx

Trade panel — buy/sell YES/NO shares

frontend/components/QuickTradePanel.tsx

Floating quick trade drawer

frontend/components/LiveFeed.tsx

Real-time trade feed

frontend/config/markets.ts

Contract addresses + ABI

frontend/config/wagmi.ts

Wagmi + RainbowKit config


Logo Component

The evently logo is rendered via the MegambleLogo component (filename kept for import compatibility):

Wordmark — "event" in #19191A (dark), "ly" in #70BAD2 (blue):


Brand Colors


MegaETH Chain Config (wagmi)


Real-Time Events (MegaETH ~1ms blocks)

Use watchContractEvent for live trade feed — critical for MegaETH's sub-millisecond finality:


V3 Wiring Checklist


Contract Addresses


Gas Settings (MegaETH)

Last updated

Was this helpful?