trade.xyz Equity Perps — Market Quality Dashboard

Real-time market quality analytics for trade.xyz equity perpetuals on Hyperliquid, powered by Quicknode SQL Explorer.

Dashboard Cards

#	Card	Data Source
1	Price Discovery Quality — mark vs oracle deviation per ticker	perpetual_market_contexts JOIN perpetual_markets
2	24h Volume by Ticker — ranked equity perp volume	market_volume_hourly
3	Unique Traders (14 days) — daily unique traders sparklines	metrics_dex_overview
4	Funding Rate Comparison — equity vs BTC/ETH funding	perpetual_market_contexts
5	Liquidation Heatmap (7 days) — liquidation volume + count	liquidations_hourly
6	Off-Hours vs Market-Hours Volume — NYSE session split	market_volume_hourly

Setup

# 1. Clone and install
cd tradexyz-market-dashboard
npm install

# 2. Create .env.local with your Quicknode API key
cp .env.example .env.local
# Edit .env.local and set QUICKNODE_API_KEY

# 3. Run development server
npm run dev

Open http://localhost:3000.

Environment Variables

Variable	Required	Default
QUICKNODE_API_KEY	Yes	—
QUICKNODE_SQL_URL	No	https://api.quicknode.com/sql/rest/v1/query
HL_CLUSTER	No	hyperliquid-core-mainnet

Architecture

• Next.js 16 with App Router
• API Proxy (/api/query) — server-side only, keeps API key secure with 30s in-memory cache
• SWR — client-side data fetching with 60s auto-refresh
• Recharts — bar charts, sparklines
• Tailwind CSS v4 — dark-only theme with glass card system
• Equity perps filtered by coin LIKE 'cash:%' prefix

Tech Stack

• Next.js 16, React 19, TypeScript
• Tailwind CSS v4 (PostCSS plugin)
• Recharts 2.15
• SWR 2.3
• clsx

Scripts

npm run dev        # Start dev server
npm run build      # Production build
npm run start      # Start production server
npm run typecheck  # TypeScript check