79 lines
3.1 KiB
Markdown
79 lines
3.1 KiB
Markdown
# CoinEx Futures Dashboard — Rebuild in Next.js
|
|
|
|
**Priority:** HIGH
|
|
**Assigned:** Glitch (build) → Hawk (review)
|
|
**Created:** 2026-02-26
|
|
**Port:** 8891 (same as current)
|
|
|
|
## Overview
|
|
Rebuild the CoinEx Futures Scanner dashboard from plain HTML into the standard stack.
|
|
|
|
## Stack (MANDATORY)
|
|
- **Next.js 15** (App Router)
|
|
- **Tailwind CSS v4**
|
|
- **Framer Motion** (animations)
|
|
- **ShadCN UI** (component library)
|
|
- **Lucide Icons**
|
|
- **TypeScript** throughout
|
|
- **SSE or WebSockets** for real-time data (no third-party backend — we handle it ourselves)
|
|
- **NO Convex**
|
|
|
|
## Current Dashboard Features (must replicate)
|
|
The existing dashboard at `projects/crypto-signals/dashboard/index.html` (433 lines) has:
|
|
|
|
### Header
|
|
- Title: "⚡ CoinEx Futures Scanner"
|
|
- Live indicator, last scan timestamp, auto-refresh countdown (30s)
|
|
|
|
### Controls
|
|
- Sort: Long Score, Short Score, Name, 24h Change, RSI
|
|
- Filter: All Coins, Long Signals Only, Short Signals Only, Any Signal
|
|
|
|
### Summary Bar
|
|
- Coin count, Long signals count, Short signals count, Average RSI
|
|
|
|
### Thresholds Display
|
|
- LONG threshold: 45 pts, SHORT threshold: 50 pts
|
|
- TP: +5%, SL: -3%
|
|
- Leverage: 5x / 7x (score≥60)
|
|
|
|
### Coin Cards (grid layout, responsive)
|
|
Each card shows:
|
|
- Coin name + signal badges (LONG ✓ / SHORT ✓)
|
|
- Price + 24h change %
|
|
- 4 indicator boxes: RSI (14) with gauge, VWAP %, 24h Change, BB Position
|
|
- Each indicator shows Long/Short point contributions
|
|
- Score bars for LONG and SHORT with threshold markers
|
|
- Signal badge with direction + leverage
|
|
|
|
### Data Source
|
|
- Binance US API: `https://api.binance.us/api/v3/klines?symbol=${symbol}&interval=1h&limit=100`
|
|
- 29 coins: BTC, ETH, SOL, XRP, DOGE, ADA, AVAX, LINK, DOT, MATIC, NEAR, ATOM, LTC, UNI, AAVE, FIL, ALGO, XLM, VET, ICP, APT, SUI, ARB, OP, SEI, HYPE, TRUMP, PUMP, ASTER
|
|
- All client-side calculated: RSI(14), VWAP(24h), Bollinger Bands(20), scoring
|
|
|
|
### Scoring System
|
|
- **Long score** (max 80): RSI(<25=30, <30=25, <35=15, <40=5) + VWAP(<-3%=20, <-1.5%=15, <0=8) + 24hChange(<-10%=15, <-5%=10, <-2%=5) + BB(<0=15, <0.2=10)
|
|
- **Short score** (max 80): RSI(>75=30, >70=25, >65=15, >60=5) + VWAP(>3%=20, >1.5%=15, >0=8) + 24hChange(>10%=15, >5%=10, >2%=5) + BB(>1=15, >0.8=10)
|
|
|
|
## Enhancements for v2
|
|
1. **Dark theme** (keep the current dark aesthetic — bg #0a0e17 / #111827)
|
|
2. **Animated transitions** with Framer Motion when data updates
|
|
3. **Mobile responsive** — card grid should work on phone
|
|
4. **SSE endpoint** for real-time price updates instead of polling from client
|
|
5. **Live positions panel** — read from `projects/crypto-signals/data/coinex-live/trader_state.json` to show current open positions with P&L
|
|
6. **Trade history** — read from `projects/crypto-signals/data/coinex-live/trade_log.json`
|
|
|
|
## Project Location
|
|
`projects/coinex-dashboard/` (new directory, clean Next.js project)
|
|
|
|
## Systemd
|
|
Create `~/.config/systemd/user/coinex-dashboard.service` on port 8891.
|
|
Kill the old Python server first (pid of old `server.py`).
|
|
|
|
## Context7
|
|
Use Context7 for Next.js 15, Tailwind v4, ShadCN UI, and Framer Motion docs before writing any code.
|
|
|
|
## Tests
|
|
- Unit tests for scoring functions
|
|
- E2E smoke test that the page loads and renders coin cards
|