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

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

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

***

## Brand Colors

```tsx
// 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)

```ts
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:

```ts
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

```ts
// 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)

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