Orderly Sdk Page Components

---

name: orderly-sdk-page-components description: Use pre-built page components from Orderly SDK to quickly assemble complete DEX pages (TradingPage, Portfolio, Markets, Leaderboard, etc.)

---

Orderly Network: SDK Page Components

Pre-built, full-featured page components for building a complete DEX. These components handle responsive design (desktop/mobile), state management, and UI out of the box.

When to Use

Building a complete DEX quickly

Using pre-built, production-ready pages

Implementing standard DEX pages (trading, portfolio, markets)

Need responsive layouts out of the box

Prerequisites

Orderly SDK packages installed (@orderly.network/trading, @orderly.network/portfolio, @orderly.network/markets)

Providers configured (see orderly-sdk-dex-architecture)

Router set up (React Router)

Overview

| Component | Package | Description | | ------------------------------- | -------------------------------------- | ------------------------------------------------------- | | TradingPage | @orderly.network/trading | Full trading interface with chart, orderbook, positions | | OverviewModule.OverviewPage | @orderly.network/portfolio | Portfolio dashboard with assets, performance | | PositionsModule.PositionsPage | @orderly.network/portfolio | Positions list with history, liquidations | | OrdersModule.OrdersPage | @orderly.network/portfolio | Orders list (open, pending, filled) | | AssetsModule.AssetsPage | @orderly.network/portfolio | Asset balances, deposit/withdraw | | HistoryModule.HistoryPage | @orderly.network/portfolio | Trade history, funding, settlements | | MarketsHomePage | @orderly.network/markets | Markets listing with stats | | LeaderboardPage | @orderly.network/trading-leaderboard | Trading competition leaderboard | | TradingRewardsPage | @orderly.network/trading-rewards | Rewards program page | | Dashboard | @orderly.network/affiliate | Affiliate/referral dashboard |

1. TradingPage

The main trading interface with TradingView chart, orderbook, order entry, positions, and orders.

Import

import { TradingPage } from '@orderly.network/trading';

Props

interface TradingPageProps {
  // Required: Trading symbol (e.g., "PERP_ETH_USDC")
  symbol: string;
  // Callback when user changes symbol
  onSymbolChange?: (symbol: API.Symbol) => void;
  // TradingView chart configuration
  tradingViewConfig: {
    scriptSRC?: string; // Path to TradingView library
    library_path: string; // Path to charting_library folder
    customCssUrl?: string; // Custom CSS for chart
    colorConfig?: {
      chartBG?: string;
      upColor?: string;
      downColor?: string;
      pnlUpColor?: string;
      pnlDownColor?: string;
    };
  };
  // PnL sharing configuration
  sharePnLConfig?: {
    backgroundImages?: string[]; // Background images for share cards
    color?: string;
    profitColor?: string;
    lossColor?: string;
    brandColor?: string;
  };
  // Disable specific features
  disableFeatures?: TradingFeatures[];
  // Override specific sections with custom components
  overrideFeatures?: Record;
}
enum TradingFeatures {
  Sider = 'sider',
  TopNavBar = 'topNavBar',
  Footer = 'footer',
  Header = 'header',
  Kline = 'kline',
  OrderBook = 'orderBook',
  TradeHistory = 'tradeHistory',
  Positions = 'positions',
  Orders = 'orders',
}

Usage Example

import { useCallback, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { TradingPage } from '@orderly.network/trading';
import { API } from '@orderly.network/types';
export default function TradingRoute() {
  const { symbol: paramSymbol } = useParams();
  const [symbol, setSymbol] = useState(paramSymbol || 'PERP_ETH_USDC');
  const navigate = useNavigate();
  const onSymbolChange = useCallback(
    (data: API.Symbol) => {
      setSymbol(data.symbol);
      navigate(/perp/${data.symbol});
    },
    [navigate]
  );
  return (
    
  );
}

TradingView Setup

1. Download TradingView charting library from TradingView 2. Place in public/tradingview/charting_library/ 3. Configure paths in tradingViewConfig

2. Portfolio Pages

Portfolio is organized into modules, each containing a complete page component.

Import

import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
} from '@orderly.network/portfolio';

OverviewModule.OverviewPage

Portfolio overview with assets summary, performance chart, and recent activity.

interface OverviewPageProps {
  hideAffiliateCard?: boolean; // Hide affiliate promotion card
  hideTraderCard?: boolean; // Hide trader stats card
}
// Usage
import { OverviewModule } from '@orderly.network/portfolio';
function PortfolioOverview() {
  return ;
}

Sections included:

Asset summary widget

Asset allocation chart

Performance metrics

Funding history

Distribution history

PositionsModule.PositionsPage

Current and historical positions with liquidation history.

import { PositionsModule } from '@orderly.network/portfolio';
function PositionsRoute() {
  return ;
}

Tabs included:

Positions (current open positions)

Position History

Liquidation History

OrdersModule.OrdersPage

Order management with open, pending, and filled orders.

interface OrdersPageProps {
  sharePnLConfig?: SharePnLConfig; // For sharing closed PnL
}
import { OrdersModule } from '@orderly.network/portfolio';
function OrdersRoute() {
  return (
    
  );
}

Features:

Open orders with cancel functionality

Pending orders (TP/SL)

Order history with download

AssetsModule.AssetsPage

Asset management with deposit/withdraw functionality.

import { AssetsModule } from '@orderly.network/portfolio';
function AssetsRoute() {
  return ;
}

Features:

USDC balance display

Deposit/withdraw buttons

Cross-chain transfers

Transaction history

HistoryModule.HistoryPage

Complete trade and transaction history.

import { HistoryModule } from '@orderly.network/portfolio';
function HistoryRoute() {
  return ;
}

Tabs included:

Trade history

Funding payments

Settlements

Complete Portfolio Layout

import { Outlet, NavLink } from 'react-router-dom';
import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
} from '@orderly.network/portfolio';
// Portfolio layout with navigation
function PortfolioLayout() {
  return (
    

      
      

        
      
    
  );
}
// Router configuration
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: ,
    children: [
      { index: true, element:  },
      { path: 'positions', element:  },
      { path: 'orders', element:  },
      { path: 'assets', element:  },
      { path: 'history', element:  },
    ],
  },
];

3. MarketsHomePage

Markets overview with all trading pairs, stats, and funding rates.

Import

import { MarketsHomePage } from '@orderly.network/markets';

Props

interface MarketsHomePageProps {
  // Current symbol (for highlighting)
  symbol?: string;
  // Callback when user clicks a symbol
  onSymbolChange?: (symbol: API.Symbol) => void;
  // Funding comparison configuration
  comparisonProps?: {
    exchanges?: string[]; // Exchanges to compare funding rates
  };
  // Custom class name
  className?: string;
}

Usage

import { useNavigate } from 'react-router-dom';
import { MarketsHomePage } from '@orderly.network/markets';
function MarketsRoute() {
  const navigate = useNavigate();
  return (
     navigate(/perp/${symbol.symbol})}
      comparisonProps={{
        exchanges: ['binance', 'okx', 'bybit'],
      }}
    />
  );
}

Tabs included:

Markets (all trading pairs with 24h stats)

Funding (funding rate comparison across exchanges)

4. LeaderboardPage

Trading competition leaderboard with campaigns and rankings.

Import

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

Usage

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';
function LeaderboardRoute() {
  return ;
}

Sections included:

Active campaigns banner

Rewards summary

General leaderboard rankings

Campaign-specific leaderboards

Trading rules

5. Router Setup

Complete Router Example

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from './App';
// Lazy load pages for better performance
const TradingPage = lazy(() => import('./pages/Trading').then((m) => ({ default: m.default })));
const PortfolioOverview = lazy(() =>
  import('@orderly.network/portfolio').then((m) => ({
    default: m.OverviewModule.OverviewPage,
  }))
);
const MarketsPage = lazy(() =>
  import('@orderly.network/markets').then((m) => ({
    default: m.MarketsHomePage,
  }))
);
const LeaderboardPage = lazy(() =>
  import('@orderly.network/trading-leaderboard').then((m) => ({
    default: m.LeaderboardPage,
  }))
);
const router = createBrowserRouter([
  {
    path: '/',
    element: ,
    children: [
      { index: true, element:  },
      {
        path: 'perp/:symbol',
        element: (
          Loading...

import { TradingPage, TradingFeatures } from '@orderly.network/trading';
;

import { TradingPage, TradingFeatures } from '@orderly.network/trading';
,
    [TradingFeatures.Footer]: ,
  }}
/>;

.custom-markets-page {
  --oui-color-primary: #7b61ff;
}

import { useScreen } from '@orderly.network/ui';
function MyPage() {
  const { isMobile, isTablet, isDesktop } = useScreen();
  return isMobile ?  : ;
}

npm install @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/trading-leaderboard \
            @orderly.network/affiliate