SPCX — SpaceX Pre-IPO Perp, live on GoldRush

A cinematic, single-market trading dashboard for xyz:SPCX — the SpaceX pre-IPO perpetual deployed on the xyz HIP-3 builder DEX on Hyperliquid. Every live surface (price, order book, candles, funding, open interest, trades) is served by the GoldRush Hyperliquid API, with public-Hyperliquid fallbacks so the scene never goes dark.

Built as a full-viewport, no-scroll 16:9 scene — designed to look good on a screen recording.

---

What it shows

Panel	Data
Hero	Live mark price (flash on tick + count-up), 24h change, basis vs oracle
Stat rail	Oracle/index price · funding rate (1h) with next-funding countdown · open interest with cap-utilization gauge · 24h volume · spread (bps) · max leverage
Chart	Candlestick + volume (lightweight-charts), timeframe pills 1s / 5m / 1h / D
Order book	Live L2 ladder with cumulative-depth bars, mid price, spread
Trade tape	Recent fills streaming in, buy/sell coloured, size-scaled
Status pill	Whether data is flowing from GoldRush (GoldRush · live) or the public-HL fallback

---

How the GoldRush data is wired

The featured market is configurable (VITE_SPCX_*) but defaults to xyz:SPCX (quote USDC, GoldRush pair address xyz:SPCX-USDC).

Datum	Source	Hook
Mark / oracle / funding / OI / 24h / spread	GoldRush Info API POST https://hypercore.goldrushdata.com/info { type: "metaAndAssetCtxs", dex: "xyz" } (Bearer key), polled every 5s. OI cap from public-HL perpDexs.	src/hooks/useSpcxMeta.ts
OHLCV candles	GoldRush streaming ohlcvCandlesForPair(["xyz:SPCX-USDC"]) over wss://streaming.goldrushdata.com/graphql — backfills the window on subscribe, then streams the live bucket	src/hooks/useSpcxCandles.ts
L2 order book	GoldRush L2 WebSocket wss://hypercore.goldrushdata.com/ws?key=…, { type: "l2Book", coin: "xyz:SPCX" } (full snapshots, no per-IP cap)	src/hooks/useSpcxBook.ts, src/stream/l2BookSocket.ts
Trades	Public-HL recentTrades (the per-coin fill feed), polled every 3s	src/hooks/useSpcxTrades.ts

Graceful degradation. Each live source has a public-Hyperliquid fallback (candleSnapshot, l2Book, recentTrades). Fallback pollers are time-gated — they only fire when GoldRush has gone quiet — so a healthy GoldRush connection produces zero public-HL traffic beyond the trade feed. The status pill reflects the active source.

---

Quick start

Requires Node 18+ and pnpm. Get a GoldRush API key (enabled for the Hyperliquid product) at https://goldrush.dev/platform/apikey.

pnpm install
cp .env.example .env        # then paste your VITE_GOLDRUSH_API_KEY
pnpm dev                    # http://localhost:5175

Without a key the app still renders against public Hyperliquid (the status pill shows Live · HL public).

Environment variables

Variable	Required	Default
VITE_GOLDRUSH_API_KEY	yes (for GoldRush sources)	—
VITE_GOLDRUSH_INFO_URL	no	https://hypercore.goldrushdata.com/info
VITE_GOLDRUSH_STREAM_URL	no	wss://streaming.goldrushdata.com/graphql
VITE_GOLDRUSH_CHAIN_NAME	no	HYPERCORE_MAINNET
VITE_SPCX_DEX / VITE_SPCX_COIN / VITE_SPCX_QUOTE	no	xyz / SPCX / USDC

---

Deploy to Vercel

The repo ships a vercel.json (Vite preset, SPA rewrite, immutable asset caching).

1. Import the repo in Vercel — it auto-detects the Vite framework.
2. Add the environment variable VITE_GOLDRUSH_API_KEY in Project → Settings → Environment Variables (do not commit it).
3. Deploy. Build command pnpm build, output dist/.

# or from the CLI
vercel --prod

---

Tech stack

• React 19 + TypeScript + Vite 7
• lightweight-charts 4 for the candlestick chart
• framer-motion for entrance, count-up, and trade-tape motion
• graphql-ws for the GoldRush streaming subscription
• Plain CSS with design tokens (JetBrains Mono, tabular numerals, GoldRush teal #00d084 + SpaceX launch-orange #ff7a18)

---

Project layout

src/
  App.tsx                 # composes the full scene
  constants.ts            # GoldRush endpoints + SPCX_* market config
  types.ts                # shared types incl. OHLCVCandle
  lib/infoClient.ts       # GoldRush-or-public /info router
  lib/wsClient.ts         # hardened graphql-ws factory
  queries.ts              # ohlcvCandlesForPair query builder
  context/GoldRushContext.tsx  # streaming client provider
  stream/l2BookSocket.ts  # GoldRush L2 WebSocket singleton
  hooks/                  # useSpcxMeta / useSpcxCandles / useSpcxBook / useSpcxTrades
  components/             # Hero, PriceChart, OrderBook, StatRail, TradeTape, Starfield, …

---

Not affiliated with SpaceX. Market data is from Hyperliquid via GoldRush; this is a demo, not financial advice.