Orderly Sdk Page Components

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

Security Scan

This is an instruction-only skill that documents how to use Orderly SDK React page components; it does not request extra credentials or install anything itself, though the skill metadata lacks a source URL so you should verify package origins before use.

Purpose & Capability

The name/description match the SKILL.md content: it documents using Orderly SDK page components and lists the specific @orderly.network packages required. One note: the skill metadata has no source/homepage listed (source: unknown), which reduces external traceability even though the instructions themselves are coherent.

Instruction Scope

SKILL.md contains usage examples, prop interfaces, and setup steps (React Router, providers, and downloading the TradingView charting library). It does not instruct the agent to read unrelated files, access secrets, or transmit data to unexpected endpoints.

Install Mechanism

There is no install spec and no code files — this is instruction-only, so nothing is written to disk by the skill itself.

Credentials

The skill does not request environment variables, credentials, or config paths. The documented dependencies (@orderly.network/* packages and external TradingView library) are proportional to the described purpose.

Persistence & Privilege

The skill is not always-enabled and is user-invocable; it does not request elevated platform persistence or modify other skills' configs.

Assessment

This skill appears to be a documentation/integration guide rather than executable code — it is internally consistent with its stated purpose. However, before using it: 1) verify the @orderly.network packages you install are the official packages on the npm registry (or your organization’s approved registry) and check their publishers and versions; 2) download the TradingView charting library only from TradingView's official site and host it in your app as documented; 3) inspect your project’s package.json and any installed packages for unexpected dependencies or postinstall scripts; 4) because the skill metadata has no source/homepage, prefer installing packages from known sources or mirror them through your org’s vetted registries; and 5) run usual supply-chain checks (license, maintainers, recent activity) before deploying to production.

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

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 (
    <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

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 <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.

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.

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.

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.

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

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

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 (
    <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

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 (
    <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

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

Usage

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

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

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

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

Override Sections

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:

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

.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

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

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

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

Installation

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

Best Practices

1. Lazy load pages for better initial bundle size
2. Persist symbol in localStorage for user convenience
3. Handle symbol changes with URL updates for bookmarkable pages
4. Configure TradingView with custom colors matching your theme
5. Provide share backgrounds for PnL sharing feature
6. 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