177 lines
6.9 KiB
Markdown
177 lines
6.9 KiB
Markdown
# Task: CoinEx Dashboard — Unified Navigation & Settings Consolidation
|
|
|
|
**Priority:** HIGH
|
|
**Assigned:** Glitch → Hawk → Jinx + Pixel
|
|
**Status:** Spec
|
|
**Date:** 2026-03-01
|
|
|
|
## Overview
|
|
|
|
Reorganize the CoinEx Dashboard with a consistent nav bar across all pages and consolidate all settings into one centralized Settings page. Settings flow downstream: Scanner uses them for signal calculation, Trader bot uses them for trade execution.
|
|
|
|
## Navigation Bar
|
|
|
|
Every page gets the same persistent nav bar at the top:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ⚡ CoinEx Platform [Home] [Trader] [Settings] [Logs] [Status] │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
- **Home** (`/`) — Futures scanner grid (existing)
|
|
- **Trader** (`/trader`) — Trader control panel (existing, minus config tab)
|
|
- **Settings** (`/settings`) — NEW: all configuration in one place
|
|
- **Logs** (`/logs`) — Unified audit log (existing)
|
|
- **Status** (`/status`) — System status (existing)
|
|
|
|
Active page is highlighted. Nav is a shared component used by all pages.
|
|
|
|
### Implementation
|
|
- Create `components/NavBar.tsx` — shared nav component
|
|
- Use `usePathname()` from `next/navigation` for active state
|
|
- Replace the ad-hoc headers on each page with `<NavBar />`
|
|
- Remove the back arrows (← ) since nav handles navigation now
|
|
- Remove inline "Trader Control" and "Audit Log" links from home page header
|
|
|
|
## Settings Page (`/settings`)
|
|
|
|
### Single Source of Truth
|
|
All settings stored in one config file: `trader_config.json` at
|
|
`/home/wdjones/.openclaw/workspace/projects/crypto-signals/data/coinex-live/trader_config.json`
|
|
|
|
The scanner reads thresholds and coin list from this config too — no more hardcoded values in `scanner.ts`.
|
|
|
|
### Settings Sections
|
|
|
|
**1. Signal Configuration**
|
|
These control how the homepage scanner calculates and displays signals:
|
|
- Long signal threshold (currently hardcoded 45 in scanner.ts)
|
|
- Short signal threshold (currently hardcoded 50 in scanner.ts)
|
|
- Coin watchlist (currently hardcoded COINS array in scanner.ts) — add/remove coins with search
|
|
- Scan interval (currently 30s in scanner.ts)
|
|
|
|
**2. Trading Configuration**
|
|
These control how the trader bot operates:
|
|
- Mode: LIVE / DRY-RUN / PAUSED
|
|
- Position size % (default 5%)
|
|
- Max concurrent positions (default 3)
|
|
- Max leverage cap (default 10x)
|
|
- Leverage tiers (score-based, e.g. ≥45→5x, ≥60→7x)
|
|
- TP % / SL %
|
|
- Trailing stop %
|
|
- Circuit breaker failure count (default 3)
|
|
- Kill switch drawdown % (default 50%)
|
|
|
|
**3. Coin Blacklist / Whitelist**
|
|
- Which coins can be traded (separate from which coins are scanned)
|
|
- Toggle individual coins on/off for trading
|
|
|
|
**4. CoinEx API Connection**
|
|
- Move the existing Settings modal content here (API credentials, connection test)
|
|
|
|
### Config File Schema Update
|
|
```json
|
|
{
|
|
"mode": "paused",
|
|
"scan_interval_seconds": 30,
|
|
"long_threshold": 45,
|
|
"short_threshold": 50,
|
|
"coin_watchlist": ["BTCUSDT", "ETHUSDT", ...],
|
|
"position_size_pct": 5.0,
|
|
"max_positions": 3,
|
|
"max_leverage": 10,
|
|
"leverage_tiers": [
|
|
{"min_score": 45, "leverage": 5},
|
|
{"min_score": 60, "leverage": 7}
|
|
],
|
|
"kill_switch_drawdown_pct": 50,
|
|
"tp_pct": 5.0,
|
|
"sl_pct": -3.0,
|
|
"trailing_stop_pct": 2.0,
|
|
"circuit_breaker_threshold": 3,
|
|
"coin_blacklist": [],
|
|
"coin_whitelist": [],
|
|
"coinex_access_id": "",
|
|
"coinex_secret_key": "",
|
|
"last_updated": "..."
|
|
}
|
|
```
|
|
|
|
### Backend Changes
|
|
|
|
**Scanner (`lib/server/scanner.ts`):**
|
|
- Remove hardcoded `COINS` array — read `coin_watchlist` from config
|
|
- Remove hardcoded `LONG_THRESHOLD` / `SHORT_THRESHOLD` — read from config
|
|
- Read config at start of each scan cycle (hot reload)
|
|
- Add config reading utility (same `trader_config.json` file)
|
|
|
|
**API route (`/api/trader/config`):**
|
|
- Already exists — reuse for all settings reads/writes
|
|
- Add `scan_interval_seconds` and `coin_watchlist` to validation
|
|
|
|
**Home page (`app/page.tsx`):**
|
|
- Remove hardcoded `LONG_THRESHOLD` / `SHORT_THRESHOLD` constants
|
|
- Read thresholds from config via WebSocket data (scanner sends them)
|
|
- Or fetch from `/api/trader/config` on mount
|
|
|
|
**Trader page (`app/trader/page.tsx`):**
|
|
- Remove the "Configuration" tab entirely — it lives in Settings now
|
|
- Keep: Overview, Positions, Activity Logs tabs
|
|
- Overview still shows a summary of current settings (read-only)
|
|
|
|
**Settings Modal (`components/SettingsModal.tsx`):**
|
|
- Remove or deprecate — functionality moves to Settings page
|
|
|
|
## Page Changes Summary
|
|
|
|
| Page | Add | Remove |
|
|
|------|-----|--------|
|
|
| All pages | `<NavBar />` component | Ad-hoc headers, back arrows |
|
|
| Home (`/`) | — | Inline nav links, hardcoded thresholds |
|
|
| Trader (`/trader`) | — | Configuration tab (moves to Settings) |
|
|
| Settings (`/settings`) | NEW: all config UI | — |
|
|
| Logs (`/logs`) | — | Back arrow |
|
|
| Status (`/status`) | — | Back arrow |
|
|
|
|
## Files to Modify
|
|
- `components/NavBar.tsx` — NEW shared nav
|
|
- `app/page.tsx` — replace header, read thresholds from config
|
|
- `app/trader/page.tsx` — remove config tab, replace header
|
|
- `app/settings/page.tsx` — NEW settings page
|
|
- `app/logs/page.tsx` — replace header
|
|
- `app/status/page.tsx` — replace header
|
|
- `app/layout.tsx` — possibly add NavBar here instead of per-page
|
|
- `lib/server/scanner.ts` — read config instead of hardcoded values
|
|
- `app/api/trader/config/route.ts` — extend validation for new fields
|
|
- `lib/types.ts` — extend TraderConfig type
|
|
|
|
## Constraints
|
|
- All existing scoring logic in `lib/indicators.ts` PRESERVED EXACTLY
|
|
- Dark theme, monospace aesthetic
|
|
- Zero client-side CoinEx API calls
|
|
- Use `api.binance.us` not `api.binance.com`
|
|
- Standard stack: Next.js 16 + Tailwind v4 + Framer Motion + ShadCN + Lucide + TS
|
|
- Context7 mandatory for library docs
|
|
- Include unit tests for new components
|
|
- Must pass build (`npm run build`) before submitting
|
|
|
|
## QA Pipeline
|
|
1. **Glitch builds** — implements all changes
|
|
2. **Hawk reviews** — code review + verifies tests pass
|
|
3. **Jinx E2E** — functional testing: nav works on all pages, settings save/load, scanner reads config, trader reads config
|
|
4. **Pixel visual** — consistent nav styling, responsive, dark theme, no layout breaks
|
|
|
|
## Definition of Done
|
|
- [ ] NavBar component renders on all 5 pages with correct active state
|
|
- [ ] Settings page has all 4 sections with working save/load
|
|
- [ ] Scanner reads thresholds + coin list from config (no hardcoded values)
|
|
- [ ] Trader page config tab removed (settings are in /settings)
|
|
- [ ] All pages use consistent header via NavBar
|
|
- [ ] Changing thresholds in Settings affects scanner behavior on next cycle
|
|
- [ ] Build passes
|
|
- [ ] Unit tests for NavBar and Settings page
|
|
- [ ] Hawk PASS
|
|
- [ ] Jinx PASS
|
|
- [ ] Pixel PASS
|