Разработка торгового терминала для криптовалют

Разработка торгового терминала для криптовалют

Криптовалютный торговый терминал — это интерфейс, через который трейдер взаимодействует с рынком: видит графики, стакан, ленту сделок, управляет ордерами и позициями. Разработка серьёзного терминала — многомесячный проект, требующий глубокого понимания как UX требований трейдеров, так и технических особенностей работы с биржевыми данными в реальном времени.

Ключевые компоненты терминала

Charting System — сердце терминала. Отображение OHLCV свечей, технических индикаторов, объёмов. TradingView Lightweight Charts — стандартный выбор для кастомных решений. Для полноценных терминалов — TradingView Advanced Charts через Data Feed API или полностью кастомная реализация на Canvas/WebGL.

Order Book — стакан заявок в реальном времени. Визуализация bid/ask уровней, depth chart (кумулятивный объём), группировка по тику. Критично: обновление должно происходить без перерисовки всего компонента — только изменённые строки.

Order Form — форма выставления ордеров. Поддержка типов: market, limit, stop-limit, trailing stop. Расчёт размера в % от депозита, в базовой/котируемой валюте, по количеству лотов.

Positions/Orders Panel — управление открытыми позициями и активными ордерами. Быстрое закрытие, изменение параметров ордеров.

Trade Feed — лента последних сделок с подсветкой крупных сделок.

Portfolio/Balance — сводная информация по счёту: балансы, margin ratio, P&L.

Архитектура frontend

// Структура React-приложения терминала
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 через react-grid-layout или react-mosaic — трейдеры хотят настраивать расположение панелей.

WebSocket State Management

Терминал получает данные из нескольких WebSocket-потоков одновременно. Управление этим состоянием — нетривиальная задача:

// Zustand store для рыночных данных
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), // последние 1000 трейдов
    currentPrice: trade.price,
  })),
}));

Производительность: виртуализация и WebWorkers

Order book с 200+ уровнями, обновляющийся 10 раз в секунду — серьёзная нагрузка на DOM. Решения:

Виртуализация списка (react-virtual, tanstack/virtual) — рендерим только видимые строки. 500 строк в DOM → 20 видимых строк.

Web Workers для расчётов — тяжёлые вычисления (агрегация стакана, расчёт индикаторов) выносятся в Worker, чтобы не блокировать 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 — обновляем DOM не чаще 60 раз в секунду, буферизируя входящие обновления.

Backend: Gateway сервис

Терминал не подключается напрямую к биржам — это архитектурная ошибка для production-систем. Промежуточный Gateway сервис:

• Мультиплексирует одно биржевое WebSocket-соединение для множества клиентов
• Кэширует текущее состояние стакана
• Аутентифицирует клиентские соединения
• Ограничивает 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)
        
        # Отправляем текущий снапшот новому подписчику
        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 интеграция

TradingView Advanced Charts (платная лицензия) — стандарт для профессиональных терминалов. Кастомный DataFeed адаптер:

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);
  },
};

Мобильная версия

Полноценный терминал на мобильном — другая UX-задача. Основные паттерны:

• Swipe между секциями (chart/orderbook/orders) вместо multi-panel layout
• Bottom sheet для формы ордера
• Упрощённый стакан (только 10-20 уровней)
• Push-уведомления для алертов по цене и исполнению ордеров

React Native с WebView для TradingView чарта или нативная реализация через react-native-canvas для простых графиков.

Производительность и SLA

Требования к производительности:

Мониторинг client-side latency через performance.now() и отправка метрик в аналитику — необходимая часть production-мониторинга.