Orderly Page Components

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
    overrides?: Record<string, any>;
    studiesOverrides?: Record<string, any>;
    locale?: string;
    enabled_features?: string[];
    disabled_features?: string[];
    colorConfig?: {
      chartBG?: string;
      upColor?: string;
      downColor?: string;
      pnlUpColor?: string;
      pnlDownColor?: string;
    };
  };
  
  // PnL sharing configuration
  sharePnLConfig?: {
    backgroundImages?: string[];  // Background images for share cards
    color?: string;               // Text color
    profitColor?: string;         // Profit text color
    lossColor?: string;           // Loss text color
    brandColor?: string;          // Brand accent color
  };
  
  // Referral integration
  referral?: {
    saveRefCode?: boolean;
    onClickReferral?: () => void;
    onBoundRefCode?: (success: boolean, error: any) => void;
  };
  
  // Trading rewards integration
  tradingRewards?: {
    onClickTradingRewards?: () => void;
  };
  
  // Disable specific features
  disableFeatures?: TradingFeatures[];
  
  // Override specific sections with custom components
  overrideFeatures?: Record<TradingFeatures, ReactNode>;
  
  // Custom content for mobile bottom sheet
  bottomSheetLeading?: ReactNode | string;
}

enum TradingFeatures {
  Sider = "sider",
  TopNavBar = "topNavBar",
  Footer = "footer",
  Header = "header",
  Kline = "kline",
  OrderBook = "orderBook",
  TradeHistory = "tradeHistory",
  Positions = "positions",
  Orders = "orders",
  AssetAndMarginInfo = "asset_margin_info",
  SlippageSetting = "slippageSetting",
  FeesInfo = "feesInfo",
}

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

tradingViewConfig={{
  scriptSRC: "/tradingview/charting_library/charting_library.js",
  library_path: "/tradingview/charting_library/",
  customCssUrl: "/tradingview/custom.css",  // Optional
  colorConfig: {
    chartBG: "#1a1a1a",
    upColor: "#00c853",
    downColor: "#ff5252",
  },
}}

2. Portfolio Pages

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

Import

import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
  FeeTierModule,
  APIManagerModule,
  SettingModule,
} 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
}

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
• Distribution history
• Deposit/withdrawal history

SettingModule.SettingPage

User settings and preferences page.

import { SettingModule } from "@orderly.network/portfolio";

function SettingsRoute() {
  return <SettingModule.SettingPage />;
}

Features:

• Account settings
• Preference settings
• Mobile-optimized responsive design

Complete Portfolio Layout (with PortfolioLayoutWidget)

IMPORTANT: Use PortfolioLayoutWidget from @orderly.network/portfolio instead of creating custom navigation.

// src/components/layout/portfolioLayout.tsx
import { useMemo } from "react";
import { Outlet, useLocation } from "react-router";
import {
  PortfolioLayoutWidget,
  PortfolioLeftSidebarPath,
} from "@orderly.network/portfolio";
import { useOrderlyConfig } from "../../hooks/useOrderlyConfig";
import { useNav } from "../../hooks/useNav";

export const PortfolioLayout = () => {
  const location = useLocation();
  const config = useOrderlyConfig();
  const { onRouteChange } = useNav();

  // Map your paths to SDK sidebar paths
  const currentPath = useMemo(() => {
    if (location.pathname.endsWith("/fee")) return PortfolioLeftSidebarPath.FeeTier;
    if (location.pathname.endsWith("/api-key")) return PortfolioLeftSidebarPath.ApiKey;
    return location.pathname;
  }, [location.pathname]);

  return (
    <PortfolioLayoutWidget
      footerProps={config.scaffold.footerProps}
      mainNavProps={{
        ...config.scaffold.mainNavProps,
        initialMenu: "/portfolio",
      }}
      routerAdapter={{ onRouteChange }}
      leftSideProps={{ current: currentPath }}
    >
      <Outlet />
    </PortfolioLayoutWidget>
  );
};

Router Configuration

import {
  OverviewModule,
  PositionManagerModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
  SettingModule,
  FeeTierModule,
  ApiKeyModule,
} from "@orderly.network/portfolio";
import { PortfolioLayout } from "./components/layout/portfolioLayout";

// Router configuration
const portfolioRoutes = [
  {
    path: "portfolio",
    element: <PortfolioLayout />,
    children: [
      { index: true, element: <OverviewModule.OverviewPage /> },
      { path: "positions", element: <PositionManagerModule.PositionsPage /> },
      { path: "orders", element: <OrdersModule.OrdersPage /> },
      { path: "assets", element: <AssetsModule.AssetsPage /> },
      { path: "fee", element: <FeeTierModule.FeeTierPage /> },
      { path: "api-key", element: <ApiKeyModule.ApiKeyPage /> },
      { path: "setting", element: <SettingModule.SettingPage /> },
      { 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;
  
  // Navigation configuration
  navProps?: {
    logo?: { src: string; alt: string };
    routerAdapter?: RouterAdapter;
    leftNav?: LeftNavProps;
  };
  
  // 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";

Props

interface LeaderboardPageProps {
  // Campaign configuration
  hideCampaignsBanner?: boolean;
  
  // Styling
  style?: React.CSSProperties;
  className?: string;
}

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

Affiliate/referral program dashboard.

Import

import * as Dashboard from "@orderly.network/affiliate";

Usage

import { Dashboard as AffiliateDashboard } from "@orderly.network/affiliate";

function AffiliateRoute() {
  return <AffiliateDashboard.DashboardPage />;
}

6. 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 PositionsPage = lazy(() => 
  import("@orderly.network/portfolio").then(m => ({ 
    default: m.PositionsModule.PositionsPage 
  }))
);
const OrdersPage = lazy(() => 
  import("@orderly.network/portfolio").then(m => ({ 
    default: m.OrdersModule.OrdersPage 
  }))
);
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: "positions", element: <PositionsPage /> },
          { path: "orders", element: <OrdersPage /> },
        ],
      },
      { path: "markets", element: <MarketsPage /> },
      { path: "leaderboard", element: <LeaderboardPage /> },
    ],
  },
]);

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

8. 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();
  
  // Components automatically adapt, but you can also customize:
  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