Use pre-built page components from Orderly SDK to quickly assemble complete DEX pages (Trading, Portfolio, Markets, Leaderboard, etc.)
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.
| 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 |
SettingModule.SettingPage | @orderly.network/portfolio | User settings and preferences |
MarketsHomePage | @orderly.network/markets | Markets listing with stats |
LeaderboardWidget | @orderly.network/trading-leaderboard | Trading competition leaderboard |
TradingRewardsLayoutWidget | @orderly.network/trading-rewards | Rewards program layout |
AffiliatePage | @orderly.network/affiliate | Affiliate/referral dashboard |
The main trading interface with TradingView chart, orderbook, order entry, positions, and orders.
import { TradingPage } from "@orderly.network/trading";
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",
}
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"],
}}
/>
);
}
public/tradingview/charting_library/tradingViewConfigtradingViewConfig={{
scriptSRC: "/tradingview/charting_library/charting_library.js",
library_path: "/tradingview/charting_library/",
customCssUrl: "/tradingview/custom.css", // Optional
colorConfig: {
chartBG: "#1a1a1a",
upColor: "#00c853",
downColor: "#ff5252",
},
}}
Portfolio is organized into modules, each containing a complete page component.
import {
OverviewModule,
PositionsModule,
OrdersModule,
AssetsModule,
HistoryModule,
FeeTierModule,
APIManagerModule,
SettingModule,
} from "@orderly.network/portfolio";
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:
Current and historical positions with liquidation history.
import { PositionsModule } from "@orderly.network/portfolio";
function PositionsRoute() {
return <PositionsModule.PositionsPage />;
}
Tabs included:
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:
Asset management with deposit/withdraw functionality.
import { AssetsModule } from "@orderly.network/portfolio";
function AssetsRoute() {
return <AssetsModule.AssetsPage />;
}
Features:
Complete trade and transaction history.
import { HistoryModule } from "@orderly.network/portfolio";
function HistoryRoute() {
return <HistoryModule.HistoryPage />;
}
Tabs included:
User settings and preferences page.
import { SettingModule } from "@orderly.network/portfolio";
function SettingsRoute() {
return <SettingModule.SettingPage />;
}
Features:
IMPORTANT: Use
PortfolioLayoutWidgetfrom@orderly.network/portfolioinstead 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>
);
};
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 /> },
],
},
];
Markets overview with all trading pairs, stats, and funding rates.
import { MarketsHomePage } from "@orderly.network/markets";
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;
}
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:
Trading competition leaderboard with campaigns and rankings.
import { LeaderboardPage } from "@orderly.network/trading-leaderboard";
interface LeaderboardPageProps {
// Campaign configuration
hideCampaignsBanner?: boolean;
// Styling
style?: React.CSSProperties;
className?: string;
}
import { LeaderboardPage } from "@orderly.network/trading-leaderboard";
function LeaderboardRoute() {
return (
<LeaderboardPage
hideCampaignsBanner={false}
/>
);
}
Sections included:
Affiliate/referral program dashboard.
import * as Dashboard from "@orderly.network/affiliate";
import { Dashboard as AffiliateDashboard } from "@orderly.network/affiliate";
function AffiliateRoute() {
return <AffiliateDashboard.DashboardPage />;
}
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 /> },
],
},
]);
import { TradingPage, TradingFeatures } from "@orderly.network/trading";
<TradingPage
symbol="PERP_ETH_USDC"
tradingViewConfig={config}
disableFeatures={[
TradingFeatures.Footer,
TradingFeatures.SlippageSetting,
]}
/>
import { TradingPage, TradingFeatures } from "@orderly.network/trading";
<TradingPage
symbol="PERP_ETH_USDC"
tradingViewConfig={config}
overrideFeatures={{
[TradingFeatures.Header]: <CustomHeader />,
[TradingFeatures.Footer]: <CustomFooter />,
}}
/>
All components accept className prop and use Tailwind classes with oui- prefix:
<MarketsHomePage className="custom-markets-page" />
.custom-markets-page {
--oui-color-primary: #7b61ff;
}
All page components automatically handle desktop and mobile layouts:
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 />;
}
npm install @orderly.network/trading \
@orderly.network/portfolio \
@orderly.network/markets \
@orderly.network/trading-leaderboard \
@orderly.network/affiliate