Crypto trading terminal development

Development of Cryptocurrency Trading Terminal

A cryptocurrency trading terminal is an interface through which a trader interacts with the market: views charts, order book, trade feed, manages orders and positions. Developing a serious terminal is a multi-month project requiring deep understanding of both UX requirements of traders and technical aspects of real-time exchange data processing.

Key Terminal Components

Charting System — the heart of the terminal. Display of OHLCV candles, technical indicators, volumes. TradingView Lightweight Charts — the standard choice for custom solutions. For full-featured terminals — TradingView Advanced Charts via Data Feed API or completely custom implementation using Canvas/WebGL.

Order Book — real-time order book. Visualization of bid/ask levels, depth chart (cumulative volume), grouping by tick. Critical: updates should occur without redrawing the entire component — only changed rows.

Order Form — order entry form. Support for types: market, limit, stop-limit, trailing stop. Size calculation as % of deposit, in base/quote currency, by lot quantity.

Positions/Orders Panel — management of open positions and active orders. Quick close, order parameter modification.

Trade Feed — feed of recent trades with highlighting of large trades.

Portfolio/Balance — summary account information: balances, margin ratio, P&L.

Frontend Architecture

// React application structure for terminal
interface TerminalLayout {
  left: {
    symbolSearch: SymbolSearchPanel;
    watchlist: WatchlistPanel;
  };
  center: {
    chart: ChartPanel;
    orderBook: OrderBookPanel;
    tradeFeed: TradeFeedPanel;
  };
  right: {
    orderForm: OrderFormPanel;
    positions: PositionsPanel;
    orders: OrdersPanel;
    balance: BalancePanel;
  };
  bottom: {
    orderHistory: OrderHistoryPanel;
    alerts: AlertsPanel;
  };
}

Resizable layout via react-grid-layout or react-mosaic — traders want to customize panel positioning.

WebSocket State Management

The terminal receives data from multiple WebSocket streams simultaneously. Managing this state is a non-trivial task:

// Zustand store for market data
import { create } from 'zustand';

interface MarketDataStore {
  orderBook: OrderBook | null;
  trades: Trade[];
  currentPrice: number | null;
  
  updateOrderBook: (diff: OrderBookDiff) => void;
  addTrade: (trade: Trade) => void;
}

export const useMarketDataStore = create<MarketDataStore>((set, get) => ({
  orderBook: null,
  trades: [],
  currentPrice: null,

  updateOrderBook: (diff) => set((state) => {
    if (!state.orderBook) return state;
    
    const newBids = new Map(state.orderBook.bids);
    const newAsks = new Map(state.orderBook.asks);
    
    for (const [price, qty] of diff.bids) {
      if (qty === 0) newBids.delete(price);
      else newBids.set(price, qty);
    }
    for (const [price, qty] of diff.asks) {
      if (qty === 0) newAsks.delete(price);
      else newAsks.set(price, qty);
    }
    
    return {
      orderBook: { bids: newBids, asks: newAsks, timestamp: diff.timestamp }
    };
  }),

  addTrade: (trade) => set((state) => ({
    trades: [trade, ...state.trades].slice(0, 1000), // last 1000 trades
    currentPrice: trade.price,
  })),
}));

Performance: Virtualization and WebWorkers

Order book with 200+ levels updating 10 times per second — significant DOM load. Solutions:

List virtualization (react-virtual, tanstack/virtual) — render only visible rows. 500 rows in DOM → 20 visible rows.

Web Workers for computation — heavy calculations (order book aggregation, indicator calculation) are moved to Worker to avoid blocking UI thread:

// orderbook.worker.ts
self.onmessage = (e: MessageEvent) => {
  const { type, data } = e.data;
  
  if (type === 'PROCESS_DIFF') {
    const processed = applyDiff(data.currentBook, data.diff);
    const aggregated = aggregateByTick(processed, data.tickSize);
    self.postMessage({ type: 'BOOK_UPDATED', data: aggregated });
  }
};

requestAnimationFrame throttling — update DOM no more than 60 times per second, buffering incoming updates.

Backend: Gateway Service

The terminal does not connect directly to exchanges — this is an architectural error for production systems. Intermediate Gateway service:

• Multiplexes a single exchange WebSocket connection for multiple clients
• Caches current order book state
• Authenticates client connections
• Enforces rate limits

from fastapi import FastAPI, WebSocket
from starlette.websockets import WebSocketDisconnect
import asyncio

app = FastAPI()

class MarketDataGateway:
    def __init__(self):
        self.subscribers: dict[str, list[WebSocket]] = {}
        self.book_cache: dict[str, OrderBook] = {}

    async def subscribe(self, symbol: str, ws: WebSocket):
        if symbol not in self.subscribers:
            self.subscribers[symbol] = []
            asyncio.create_task(self.connect_to_exchange(symbol))
        
        self.subscribers[symbol].append(ws)
        
        # Send current snapshot to new subscriber
        if symbol in self.book_cache:
            await ws.send_json(self.book_cache[symbol].to_dict())

    async def broadcast(self, symbol: str, data: dict):
        dead_connections = []
        for ws in self.subscribers.get(symbol, []):
            try:
                await ws.send_json(data)
            except Exception:
                dead_connections.append(ws)
        
        for ws in dead_connections:
            self.subscribers[symbol].remove(ws)

TradingView Integration

TradingView Advanced Charts (paid license) — the standard for professional terminals. Custom DataFeed adapter:

const dataFeed: IDatafeedChartApi = {
  onReady: (callback) => {
    callback({
      supported_resolutions: ['1', '5', '15', '60', '240', 'D', 'W'],
      supports_marks: true,
      supports_time: true,
    });
  },

  getBars: async (symbolInfo, resolution, periodParams, onHistoryCallback) => {
    const candles = await api.getCandles(
      symbolInfo.name,
      resolution,
      periodParams.from,
      periodParams.to
    );
    onHistoryCallback(candles.map(toTradingViewBar), { noData: candles.length === 0 });
  },

  subscribeBars: (symbolInfo, resolution, onRealtimeCallback) => {
    wsGateway.on(`candle:${symbolInfo.name}:${resolution}`, onRealtimeCallback);
  },
};

Mobile Version

A full-featured terminal on mobile is a different UX challenge. Main patterns:

• Swipe between sections (chart/orderbook/orders) instead of multi-panel layout
• Bottom sheet for order form
• Simplified order book (only 10-20 levels)
• Push notifications for price alerts and order execution

React Native with WebView for TradingView chart or native implementation via react-native-canvas for simple charts.

Performance and SLA

Performance requirements:

Monitoring client-side latency via performance.now() and sending metrics to analytics — a necessary part of production monitoring.