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):

import { MegambleLogo } from "@/components/MegambleLogo";

// Icon only — adapts to currentColor (dark/light)
<MegambleLogo size={32} />

// With dark background
<MegambleLogo size={32} withBg />

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

<span>
  <span style={{ color: "var(--t1)" }}>event</span>
  <span style={{ color: "#70BAD2" }}>ly</span>
</span>

---

Brand Colors

// Tailwind custom colors (tailwind.config.js)
colors: {
  "mega-pink":  "#F786C6",  // Create market only
  "mega-blue":  "#70BAD2",  // Primary accent / logo "ly"
  "mega-green": "#6DD0A9",  // Buy / Yes / action
}

// CSS variables
"--pink":  "#F786C6"
"--blue":  "#70BAD2"
"--green": "#6DD0A9"
"--t1":    "#111113"  // Primary text (light mode)
"--t2":    "#52525b"  // Secondary text

---

MegaETH Chain Config (wagmi)

import { defineChain } from "viem";

export const megaEth = defineChain({
  id: 4326,
  name: "MegaETH Mainnet",
  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
  rpcUrls: {
    default: { http: ["https://mainnet.megaeth.com/rpc"] },
  },
  blockExplorers: {
    default: { name: "Blockscout", url: "https://megaeth.blockscout.com" },
  },
});

---

Real-Time Events (MegaETH ~1ms blocks)

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

import { useWatchContractEvent } from "wagmi";

useWatchContractEvent({
  address: MARKETS_ADDRESS,
  abi: MARKETS_ABI,
  eventName: "OrderFilled",
  onLogs(logs) {
    // Update live feed — fires every ~1ms block
    setTrades(prev => [...logs.map(parseTrade), ...prev].slice(0, 50));
  },
});

---

V3 Wiring Checklist

• getImpliedPrices(marketId) — display live YES/NO probabilities

• quoteBuy(marketId, optionIdx, usdmIn) — slippage preview before trade

• quoteSell(marketId, optionIdx, shares) — slippage preview for sells

• ERC-1155 position display in portfolio (balanceOfBatch)

• watchContractEvent polling for live trade feed

• Order book panel — display resting limit orders

• Post-trade confirmation toast with shares received

• sellToAMM() instant sell flow

---

Contract Addresses

// config/markets.ts
export const MARKETS_ADDRESS = process.env.NEXT_PUBLIC_MARKETS_V3_ADDRESS as `0x${string}`;
export const PROFILES_ADDRESS = "0x9F0708145BCCD1F5B16F610cB8a75A63fA4A9a24";
export const USDM_ADDRESS = "0xFAfDdbb3FC7688494971a79cc65DCa3EF82079E7";

---

Gas Settings (MegaETH)

// Near-zero gas on MegaETH — use these for all transactions
const txConfig = {
  maxFeePerGas: 1_000_000n,      // 1 gwei
  maxPriorityFeePerGas: 0n,
};