Trading Interface

Lagrange Trading Interface

Status: Archived | Era: 2021-2023 | Repository: Lagrange-UI-master

The Lagrange Trading UI was a full-featured trading interface built on top of Solana's Serum DEX, providing institutional-grade charting and trading capabilities for decentralized markets.

Overview

Purpose

Create a professional trading experience for Solana-based decentralized exchanges that rivaled centralized exchange interfaces.

Key Features

Feature	Description
TradingView Charts	Professional charting with 100+ indicators
Real-time Order Book	Live bid/ask visualization with depth charts
Price Action	OHLCV candles with multiple timeframes
Order Management	Market, limit, and stop orders
Portfolio View	Token balances and P&L tracking

Technology Stack

Frontend Layer:
├── React 17
├── TypeScript
├── TradingView Charting Library (licensed)
└── Tailwind CSS

Blockchain Integration:
├── Solana Web3.js
├── Serum DEX SDK
├── Anchor Framework
└── Wallet Adapters (Phantom, Solflare)

Data Layer:
├── WebSocket price feeds
├── Order book aggregation
└── Historical data caching

Architecture

Component Structure

// Main trading layout
interface TradingLayout {
  chart: TradingViewWidget;
  orderBook: OrderBookComponent;
  orderForm: OrderFormComponent;
  positions: PositionsTable;
  tradeHistory: TradeHistoryTable;
}

// Order book data structure
interface OrderBookEntry {
  price: number;
  size: number;
  total: number;
  side: 'bid' | 'ask';
}

// Market data feed
interface MarketData {
  symbol: string;
  lastPrice: number;
  volume24h: number;
  change24h: number;
  high24h: number;
  low24h: number;
}

TradingView Integration

// TradingView widget configuration
const chartConfig = {
  container_id: 'tv_chart_container',
  datafeed: new SerumDatafeed(),
  library_path: '/charting_library/',
  locale: 'en',
  disabled_features: ['use_localstorage_for_settings'],
  enabled_features: ['study_templates'],
  charts_storage_url: 'https://saveload.tradingview.com',
  charts_storage_api_version: '1.1',
  client_id: 'lagrange.trading',
  user_id: 'public_user',
  fullscreen: false,
  autosize: true,
  theme: 'Dark',
};

Serum DEX Integration

Order Execution

// Place limit order on Serum
async function placeLimitOrder(
  market: Market,
  side: 'buy' | 'sell',
  price: number,
  size: number,
  wallet: WalletAdapter
) {
  const payer = side === 'buy'
    ? market.quoteCurrencyAccount
    : market.baseCurrencyAccount;

  return market.placeOrder({
    owner: wallet.publicKey,
    payer,
    side,
    price,
    size,
    orderType: 'limit',
  });
}

Order Book Subscription

// Real-time order book updates
const subscribeToOrderBook = (market: Market) => {
  const connection = new Connection(RPC_ENDPOINT);

  market.subscribeToOrderbookChange(
    connection,
    (bids, asks) => {
      updateOrderBook({ bids, asks });
    }
  );
};

What Evolved

Current Implementation

The Lagrange Trading UI concepts evolved into the current fXYZ Network trading infrastructure:

Lagrange Component	Current fXYZ Component
TradingView charts	ECN Trading UI at `/markets/trade`
Serum order book	Custom order book engine
Price feeds	Multi-source price aggregation
Wallet integration	Privy embedded wallets

Code Migration

Key patterns that were preserved:

Order book depth visualization
Price-time priority matching
WebSocket real-time updates
Mobile-responsive trading layouts

Screenshots

The original interface featured:

Dark theme optimized for trading
Split-pane layout (chart/order book/form)
Customizable workspace
Multi-market tabs

Lessons Learned

What Worked

TradingView Integration: Professional charting increased user confidence
Real-time Updates: WebSocket feeds essential for trading UX
Wallet Abstraction: Supporting multiple wallets reduced friction

What Changed

Serum Shutdown: Moved from Serum to custom matching engine
Charting License: TradingView licensing led to custom chart development
Multi-chain: Expanded beyond Solana-only architecture

Archive Location

archive/fxyz-knowledge-project/old-projects/lagrange-repos/Lagrange-UI-master/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   └── utils/
├── charting_library/
├── public/
└── package.json

On this page