daxtrader

A Next.js trading terminal frontend: a resizable, drag-and-drop dashboard with a live candlestick chart, order book, recent trades, watchlist, order entry forms and positions/orders tables, with three switchable themes (Classic, Fresh, Light) and a mobile-responsive layout.

This repo is only the browser/Next.js frontend. It talks to two separately published backends, both configured at runtime:

• nxterminal-api: authentication, user/account data and the setup config (/auth/*, /config/setup).
• nxhub-liquidity-mgt: market data (klines, depth, trades, 24h ticker, symbol config) over REST and WebSocket.

Architecture

flowchart LR
  B[Browser<br/>React + Chakra UI + klinecharts] -->|pages, /api/session| N[Next.js server<br/>iron-session cookie, middleware]
  N -->|/auth/token refresh| T[Terminal API<br/>nxterminal-api]
  B -->|/auth/login, /config/setup, user data| T
  T -.->|setup config: HUB_API_BASEURL, HUB_WSS_BASEURL| B
  B -->|REST: klines, depth, trades, ticker| H[Hub API<br/>nxhub-liquidity-mgt]
  B <-->|WebSocket: live trades, depth, klines| H

Loading

Flow: the user logs in against the terminal API; the Next.js server stores the tokens in an encrypted iron-session cookie and the middleware refreshes them. After login the app fetches /config/setup, which returns the hub REST and WebSocket base URLs used for all market data.

Stack

• Next.js 14 (pages router), React 18, TypeScript
• Chakra UI + framer-motion
• klinecharts 9.x for charting
• @preact/signals-react for state, swr, axios, socket.io-client/ws
• @tanstack/react-table, @dnd-kit, react-resizable-panels, react-hook-form
• iron-session for cookie sessions, dompurify for input sanitising

Run

Requires Node.js 18+ and a running terminal API and hub.

yarn            # or: npm install
cp .env.example .env.local   # then edit the values
yarn dev        # http://localhost:3000

Production: yarn build && yarn start.

Temporary workaround for klinecharts: if the build complains about ESM, open node_modules/klinecharts/package.json and change "type": "module" to "type": "commonjs".

Environment variables

Name	Scope	Description
NEXT_PUBLIC_BASE_URL	browser + server	Base URL of the terminal API (nxterminal-api).
SESSION_PASSWORD	server only	Secret (32+ chars) that encrypts the session cookie. Never prefix with NEXT_PUBLIC_.

The hub API/WebSocket URLs are not set here; they are delivered by the terminal API's /config/setup.

Breaking change

NEXT_PUBLIC_SESSION_PWD was renamed to SESSION_PASSWORD. The NEXT_PUBLIC_ prefix inlined the secret into the client bundle. Existing deployments must set the new variable; existing session cookies become invalid.

Notes

• Reference code, not audited. Built in early 2024 as a frontend for a multi-asset trading platform.
• Run behind network-level protection and TLS; the app itself does not add rate limiting.
• Secret scanning is set up via .pre-commit-config.yaml, .gitleaks.toml and a GitHub Action.

License

MIT (see LICENSE). The NXtrader name and logo/marketing images are product branding and are not covered by the MIT grant.