Orderly Sdk Page Components

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

Mario Reder@tarnadas

Install

openclaw skills install @tarnadas/orderly-sdk-page-components

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

tsx

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

Props

tsx

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<TradingFeatures, ReactNode>;
}

enum TradingFeatures {
  Sider = 'sider',
  TopNavBar = 'topNavBar',
  Footer = 'footer',
  Header = 'header',
  Kline = 'kline',
  OrderBook = 'orderBook',
  TradeHistory = 'tradeHistory',
  Positions = 'positions',
  Orders = 'orders',
}

Usage Example

tsx

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 (
    <TradingPage
      symbol={symbol}
      onSymbolChange={onSymbolChange}
      tradingViewConfig={{
        scriptSRC: '/tradingview/charting_library/charting_library.js',
        library_path: '/tradingview/charting_library/',
      }}
      sharePnLConfig={{
        backgroundImages: ['/pnl-bg-1.png', '/pnl-bg-2.png'],
      }}
    />
  );
}

TradingView Setup

Download TradingView charting library from TradingView
Place in public/tradingview/charting_library/
Configure paths in tradingViewConfig

2. Portfolio Pages

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

Import

tsx

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

OverviewModule.OverviewPage

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

tsx

interface OverviewPageProps {
  hideAffiliateCard?: boolean; // Hide affiliate promotion card
  hideTraderCard?: boolean; // Hide trader stats card
}

// Usage
import { OverviewModule } from '@orderly.network/portfolio';

function PortfolioOverview() {
  return <OverviewModule.OverviewPage hideAffiliateCard={false} hideTraderCard={false} />;
}

Sections included:

Asset summary widget
Asset allocation chart
Performance metrics
Funding history
Distribution history

PositionsModule.PositionsPage

Current and historical positions with liquidation history.

tsx

import { PositionsModule } from '@orderly.network/portfolio';

function PositionsRoute() {
  return <PositionsModule.PositionsPage />;
}

Tabs included:

Positions (current open positions)
Position History
Liquidation History

OrdersModule.OrdersPage

Order management with open, pending, and filled orders.

tsx

interface OrdersPageProps {
  sharePnLConfig?: SharePnLConfig; // For sharing closed PnL
}

import { OrdersModule } from '@orderly.network/portfolio';

function OrdersRoute() {
  return (
    <OrdersModule.OrdersPage
      sharePnLConfig={{
        backgroundImages: ['/pnl-bg-1.png'],
      }}
    />
  );
}

Features:

Open orders with cancel functionality
Pending orders (TP/SL)
Order history with download

AssetsModule.AssetsPage

Asset management with deposit/withdraw functionality.

tsx

import { AssetsModule } from '@orderly.network/portfolio';

function AssetsRoute() {
  return <AssetsModule.AssetsPage />;
}

Features:

USDC balance display
Deposit/withdraw buttons
Cross-chain transfers
Transaction history

HistoryModule.HistoryPage

Complete trade and transaction history.

tsx

import { HistoryModule } from '@orderly.network/portfolio';

function HistoryRoute() {
  return <HistoryModule.HistoryPage />;
}

Tabs included:

Trade history
Funding payments
Settlements

Complete Portfolio Layout

tsx

import { Outlet, NavLink } from 'react-router-dom';
import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
} from '@orderly.network/portfolio';

// Portfolio layout with navigation
function PortfolioLayout() {
  return (
    <div className="portfolio-container">
      <nav className="portfolio-nav">
        <NavLink to="/portfolio">Overview</NavLink>
        <NavLink to="/portfolio/positions">Positions</NavLink>
        <NavLink to="/portfolio/orders">Orders</NavLink>
        <NavLink to="/portfolio/assets">Assets</NavLink>
        <NavLink to="/portfolio/history">History</NavLink>
      </nav>
      <main className="portfolio-content">
        <Outlet />
      </main>
    </div>
  );
}

// Router configuration
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: <PortfolioLayout />,
    children: [
      { index: true, element: <OverviewModule.OverviewPage /> },
      { path: 'positions', element: <PositionsModule.PositionsPage /> },
      { path: 'orders', element: <OrdersModule.OrdersPage /> },
      { path: 'assets', element: <AssetsModule.AssetsPage /> },
      { path: 'history', element: <HistoryModule.HistoryPage /> },
    ],
  },
];

3. MarketsHomePage

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

Import

tsx

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

Props

tsx

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

tsx

import { useNavigate } from 'react-router-dom';
import { MarketsHomePage } from '@orderly.network/markets';

function MarketsRoute() {
  const navigate = useNavigate();

  return (
    <MarketsHomePage
      onSymbolChange={(symbol) => 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

tsx

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

Usage

tsx

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

function LeaderboardRoute() {
  return <LeaderboardPage hideCampaignsBanner={false} />;
}

Sections included:

Active campaigns banner
Rewards summary
General leaderboard rankings
Campaign-specific leaderboards
Trading rules

5. Router Setup

Complete Router Example

tsx

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: <App />,
    children: [
      { index: true, element: <Navigate to="/perp/PERP_ETH_USDC" /> },
      {
        path: 'perp/:symbol',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <TradingPage />
          </Suspense>
        ),
      },
      {
        path: 'portfolio',
        children: [{ index: true, element: <PortfolioOverview /> }],
      },
      { path: 'markets', element: <MarketsPage /> },
      { path: 'leaderboard', element: <LeaderboardPage /> },
    ],
  },
]);

6. Customizing Pages

Disable Features

tsx

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

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  disableFeatures={[TradingFeatures.Footer, TradingFeatures.SlippageSetting]}
/>;

Override Sections

tsx

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

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  overrideFeatures={{
    [TradingFeatures.Header]: <CustomHeader />,
    [TradingFeatures.Footer]: <CustomFooter />,
  }}
/>;

Custom Styling

All components accept className prop and use Tailwind classes with oui- prefix:

tsx

<MarketsHomePage className="custom-markets-page" />

css

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

7. Responsive Design

All page components automatically handle desktop and mobile layouts:

Desktop: Full multi-panel layouts
Mobile: Stacked layouts with bottom navigation, sheets for detail views

tsx

import { useScreen } from '@orderly.network/ui';

function MyPage() {
  const { isMobile, isTablet, isDesktop } = useScreen();

  return isMobile ? <MobileView /> : <DesktopView />;
}

Installation

bash

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

Best Practices

Lazy load pages for better initial bundle size
Persist symbol in localStorage for user convenience
Handle symbol changes with URL updates for bookmarkable pages
Configure TradingView with custom colors matching your theme
Provide share backgrounds for PnL sharing feature
Use Suspense boundaries for smooth loading states

Related Skills

orderly-sdk-dex-architecture - Project structure and providers
orderly-sdk-install-dependency - Installing packages
orderly-sdk-trading-workflows - Trading functionality
orderly-sdk-theming - Customizing appearance

Orderly Sdk Page Components

Install

Orderly Network: SDK Page Components

When to Use

Prerequisites

Overview

1. TradingPage

Import

Props

Usage Example

TradingView Setup

2. Portfolio Pages

Import

OverviewModule.OverviewPage

PositionsModule.PositionsPage

OrdersModule.OrdersPage

AssetsModule.AssetsPage

HistoryModule.HistoryPage

Complete Portfolio Layout

3. MarketsHomePage

Import

Props

Usage

4. LeaderboardPage

Import

Usage

5. Router Setup

Complete Router Example

6. Customizing Pages

Disable Features

Override Sections

Custom Styling

7. Responsive Design

Installation

Best Practices

Related Skills

Related skills