# SiamDEX — Project Summary

--Update V.1.8

## สิ่งที่ต้องมี และ วิธีการ start program
- รัน node -v ควรขึ้นเลขเวอร์ชั่น
- รัน npm -v ควรขึ้นเลขเวอร์ชั่น
- สร้างไฟล์ .env.local จากนั้น copy ตัวอย่างไปใส่ในไฟล์
```env
NEXT_PUBLIC_BUILDER_ADDRESS=0x00000000000000000000
NEXT_PUBLIC_BUILDER_FEE_BPS=10
NEXT_PUBLIC_HL_API_URL=https://api.hyperliquid.xyz
NEXT_PUBLIC_HL_API_UI_URL=https://api-ui.hyperliquid.xyz
NEXT_PUBLIC_HL_WS_URL=wss://api.hyperliquid.xyz/ws
NEXT_PUBLIC_REF_CODE=XXXXXXX
```
- รัน npm install
- รัน npm run dev
- จากนั้นเข้า browser http://localhost:3000/

## ภาพรวม
SiamDEX คือ Builder Code Interface บน Hyperliquid DEX
เทรด crypto, ทอง, น้ำมัน, หุ้น, ดัชนี บนตลาดระดับโลก volume $10B+/วัน
กำไรเป็น USDC ถอนเข้า Exchange ไทย แปลงเป็นบาทได้เลย ไม่มี KYC เทรดได้ทุกวัน 24/7 เสาร์อาทิตก็เทรดได้

**Stack:** Next.js 15 (App Router) + TypeScript + Tailwind v4 + Zustand

---

## สิ่งที่ทำไปแล้ว

### 🏗️ Core Architecture
- **TradingProvider** — จัดการ WebSocket subscriptions ทั้งหมด ไม่มี polling แล้ว
- **tradingStore (Zustand)** — single source of truth สำหรับทุก state
- **walletStore** — MetaMask connection state + persist ข้าม refresh ด้วย zustand/middleware

### ⚡ WebSocket Real-time
| Subscription | Channel | ผลลัพธ์ |
|---|---|---|
| allMids | `allMids` | ราคาทุกเหรียญ real-time |
| openOrders | `openOrders` dex=ALL_DEXS | ออเดอร์ทั้งหมดรวม HIP-3 |
| positions | `allDexsClearinghouseState` | positions ทุก dex รวม HIP-3 |
| fills | `userFills` | ประวัติการเทรด snapshot + stream |
| availableBuy/Sell | `activeAssetData` | margin ที่ใช้ได้ per-asset |
| maxLeverage | meta fetch ครั้งเดียว cache | leverage สูงสุดต่อ coin |
| ledger | `userNonFundingLedgerUpdates` | ประวัติฝาก/ถอน real-time |

### 🔗 HIP-3 Full Support
- Asset Selector แยก tab Perps / HIP-3 พร้อม dex filter
- openOrders ใช้ `dex: "ALL_DEXS"` ได้ทั้ง regular + HIP-3 ในครั้งเดียว
- positions ใช้ `allDexsClearinghouseState` WebSocket ได้ทุก dex
- coin format รองรับ `xyz:CL`, `xyz:GOLD` ฯลฯ

### 🎯 HIP-4 Prediction Market (Testnet) (ไม่เปิดใช้งาน)
- **`src/lib/hl/predict.ts`** — service layer เชื่อมต่อ HIP-4 testnet API
- **`src/hooks/usePredictMarkets.ts`** — poll 30s, loading/error/refetch
- **`src/hooks/usePredictMarket.ts`** — hook สำหรับ event detail + candles + orderbook

### 📡 Live Trades (Explorer WS)
- **LiveTicker** — แถบ ticker วิ่งบนสุดหน้า /trade คลิกไปหน้า /live
- **LiveTxFeed** — feed real-time ใน sidebar หน้า /live
- **`src/hooks/useExplorerTxs.ts`** — subscribe `explorerTxs` WS mainnet

### 📊 Trading Components
- **TradingViewChart** — lightweight-charts v5 candlestick + volume
- **OrderForm** — Long/Short, Market/Limit, leverage slider
- **OpenOrders** — ปิด position ด้วย market order
- **OpenOrdersList** — TP/SL badge, triggerPx, side label, filter dropdown + cache
- **TradeHistory** — liquidation badge, explorer link, filter + cache
- **LedgerHistory** — ประวัติฝาก/ถอน แสดง source/dest/fee/tx link
- **AssetSelector** — modal, cache 60s, sort, dex filter, refresh

### 💳 Wallet & Setup
- **ConnectWalletButton** — MetaMask icon inline SVG, persist connection ข้าม refresh
- **wagmi reconnect** — `reconnect(wagmiConfig)` ใน Providers.tsx หลัง refresh
- **SetupTradingButton** — ApproveBuilderFee + ApproveAgent
- **ReferralSection** — setReferrer ผ่าน agent wallet

### 📄 Pages
- `/trade` — หน้าเทรดหลัก
- `/predict` — HIP-4 Prediction Market (ไม่เปิดใช้งาน)
- `/live` — Live Trades หน้าเต็ม
- `/portfolio` — พอร์ตรวม, PnL chart, unrealizedPnl real-time
- `/about` — SiamDEX คืออะไร, Hyperliquid, HIP-3, FAQ
- `/guide` — คู่มือ 6 ขั้นตอน accordion
- `/settings` — เคลียร์ cache, reset tabs, ยกเลิก agent
- `/coins` — Coins Hub (SEO hub รวม coins ทั้งหมด)
- `/coins/[coin]` — Programmatic SEO ต่อเหรียญ (ISR revalidate 3600s)
- `/coins/category/[category]` — Category pages ทุก locale (31 categories × 3 ภาษา)
- `/news`
- `/news/[slug]`
- `/news/category/[category]`
- `/blog`
- `/blog/[slug]`
- `/blog/category/[category]`
- `/sitemap.ts` — auto sitemap รวม coin pages + category pages
- `/robots.ts` — robots.txt auto


### 🖼️ Self-hosted Coin Images
- **`download-coin-images.mjs`** — script ดึงรูปทุก coin จาก Hyperliquid มาเก็บ `public/coins/`
  - Regular perps → `public/coins/BTC.svg`
  - HIP-3 → `public/coins/xyz_GOLD.svg` (แทน `:` ด้วย `_` สำหรับ filesystem)
  - สร้าง `public/coins/manifest.json` สำหรับ lookup
  - throttle 50ms ระหว่าง request ป้องกัน rate limit
- รันด้วย: `node download-coin-images.mjs`


### 🔍 SEO Improvements
- 🪙 Coins & Category Pages
- 🪙 news & news Pages
- 🪙 blog & blog Pages


---

## Architecture ปัจจุบัน
```
hlWS (WebSocket singleton)
├── onMids()           → store.mids
├── onOrders()         → store.openOrders
├── onPositions()      → store.positions
├── onFills()          → store.fills
└── onActiveAsset()    → store.availableBuy/Sell, leverage

useLivePrices()        → อ่าน store.mids อย่างเดียว
useLiveOrderBook()     → WS l2Book per-asset (local hook)
useExplorerTxs()       → WS explorerTxs mainnet (Live Trades)
useLedgerUpdates()     → WS userNonFundingLedgerUpdates per-user
usePredictMarkets()    → REST poll 30s (HIP-4 testnet)
usePredictMarket()     → REST poll 30s + candles + l2Book (HIP-4 testnet)

tradingStore           → single source of truth
TradingProvider        → mount/unmount WS subscriptions

app/
├── (th)/              → root
└── en/, lo/           → locale layouts Multi-lang

```

---

## 🚀 Performance (PageSpeed)
**Desktop 93/100** | **Mobile 71/100**

---

## TODO ที่ยังเหลือ
- [ ] **Cross Margin Mode** — ปัจจุบันรองรับแค่ Isolate (เน้นมือใหม่) ถ้าจะเพิ่ม Cross Margin Mode ให้ปรับตรง await updateLeverage(asset, newLeverage, false, address); ในส่วนพารามิเตอร์ตัวที่ 3 คือ false ซึ่งหมายถึง isCross = false จะได้ Isolate ถ้าเปลี่ยนเป็น true จะได้ cross
- [ ] **TP/SL UI** — ยังไม่มี UI ตั้ง TP/SL
- [ ] **Close Position แบบกำหนด % แบ่งปิด** — ยังไม่มี UI ตั้ง % แบ่งปิด ปัจจุบัน ปิดทั้งหมด 100%
- [ ] **HIP-4 mainnet** — ยังไม่พัฒนาต่อ เนื่องจากในไทย กฏหมาย Prediction Markets ยังไม่ชัดเจน

---

## Deploy
- Vercel ✅
- Domain: siamdex.com
- Environment variables (.env.local):
```env
NEXT_PUBLIC_BUILDER_ADDRESS=0x00000000000000000000 (ใส่กระเป๋าของคุณที่ต้องการรับค่าธรรมเนียม ต้องเป็น lower case เท่านั้น และ บัญชีนั้นจะต้องมี Perps Available ขั้นต่ำ 100 USDC)
NEXT_PUBLIC_BUILDER_FEE_BPS=10
NEXT_PUBLIC_HL_API_URL=https://api.hyperliquid.xyz
NEXT_PUBLIC_HL_API_UI_URL=https://api-ui.hyperliquid.xyz
NEXT_PUBLIC_HL_WS_URL=wss://api.hyperliquid.xyz/ws
NEXT_PUBLIC_REF_CODE=XXXXXXX (เป็น referral code จากกระเป๋าของคุณที่ใช้รับค่าธรรมเนียม)
```