Orderly Network：SDK 页面组件

开箱即用、功能完备的页面级组件，用于快速构建完整的 DEX。这些组件默认支持响应式设计（桌面端/移动端）、状态管理及 UI 渲染。

适用场景

• 需要快速搭建完整的 DEX
• 希望直接使用已通过生产环境验证的预构建页面
• 需实现标准 DEX 页面（交易页、资产组合页、行情页等）
• 要求页面具备开箱即用的响应式布局能力

前置条件

• 已安装 Orderly SDK 相关包（@orderly.network/trading、@orderly.network/portfolio、@orderly.network/markets）
• 已配置必要的 Provider（参见 orderly-sdk-dex-architecture）
• 已设置路由系统（React Router）

概览

1. TradingPage

主交易界面，集成 TradingView 图表、订单簿、下单面板、持仓与订单模块。

导入方式

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

Props

interface TradingPageProps {
  // 必填：交易标的符号（例如 "PERP_ETH_USDC"）
  symbol: string;

  // 用户切换交易标的时的回调函数
  onSymbolChange?: (symbol: API.Symbol) => void;

  // TradingView 图表配置
  tradingViewConfig: {
    scriptSRC?: string; // TradingView 库 JS 文件路径
    library_path: string; // charting_library 文件夹路径
    customCssUrl?: string; // 图表自定义 CSS 路径
    colorConfig?: {
      chartBG?: string;
      upColor?: string;
      downColor?: string;
      pnlUpColor?: string;
      pnlDownColor?: string;
    };
  };

  // PnL 分享功能配置
  sharePnLConfig?: {
    backgroundImages?: string[]; // 分享卡片背景图列表
    color?: string;
    profitColor?: string;
    lossColor?: string;
    brandColor?: string;
  };

  // 禁用特定功能模块
  disableFeatures?: TradingFeatures[];

  // 替换特定模块为自定义组件
  overrideFeatures?: Record;
}

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

使用示例

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 集成步骤

1. 从 TradingView 官网下载 charting_library 前端库
2. 解压后放入项目 public/tradingview/charting_library/ 目录
3. 在 tradingViewConfig 中正确配置 scriptSRC 和 library_path

2. 资产组合页面（Portfolio Pages）

资产组合功能按模块组织，每个模块均提供一个完整的页面级组件。

导入方式

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

OverviewModule.OverviewPage

资产组合总览页，包含资产汇总、收益图表与近期活动。

interface OverviewPageProps {
  hideAffiliateCard?: boolean; // 是否隐藏推广卡片
  hideTraderCard?: boolean; // 是否隐藏交易者统计卡片
}

// 使用示例
import { OverviewModule } from '@orderly.network/portfolio';

function PortfolioOverview() {
  return ;
}

包含模块：

• 资产汇总小部件
• 资产分布饼图
• 关键收益指标（如 ROI、盈亏比）
• 资金费历史
• 分润历史

PositionsModule.PositionsPage

当前及历史持仓列表，含强平事件记录。

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

function PositionsRoute() {
  return ;
}

标签页：

• 持仓（当前未平仓头寸）
• 持仓历史
• 强平历史

OrdersModule.OrdersPage

订单管理页，支持查看未成交、挂单（TP/SL）及已成交订单。

interface OrdersPageProps {
  sharePnLConfig?: SharePnLConfig; // 支持分享已平仓 PnL
}

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

function OrdersRoute() {
  return (
    
  );
}

功能特性：

• 未成交订单（支持一键撤单）
• 挂单（止盈止损单）
• 订单历史（支持导出 CSV）

AssetsModule.AssetsPage

资产余额管理页，支持充提币与跨链转账。

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

function AssetsRoute() {
  return ;
}

功能特性：

• USDC 余额显示
• 充币/提币按钮
• 跨链资产转移（Cross-chain transfers）
• 链上交易历史

HistoryModule.HistoryPage

完整交易与资金流水历史页。

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

function HistoryRoute() {
  return ;
}

标签页：

• 成交历史
• 资金费支付记录
• 结算记录

完整的资产组合布局示例

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

// 带导航栏的资产组合布局
function PortfolioLayout() {
  return (
    

      
      

        
      
    
  );
}

// 路由配置
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: ,
    children: [
      { index: true, element:  },
      { path: 'positions', element:  },
      { path: 'orders', element:  },
      { path: 'assets', element:  },
      { path: 'history', element:  },
    ],
  },
];

3. MarketsHomePage

行情总览页，展示全部交易对、24 小时统计数据及资金费率。

导入方式

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

Props

interface MarketsHomePageProps {
  // 当前选中交易对（用于高亮显示）
  symbol?: string;

  // 用户点击交易对时的回调
  onSymbolChange?: (symbol: API.Symbol) => void;

  // 资金费率对比配置
  comparisonProps?: {
    exchanges?: string[]; // 指定参与对比的交易所（如 'binance'、'okx'）
  };

  // 自定义样式类名
  className?: string;
}

使用示例

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'],
      }}
    />
  );
}

标签页：

• 行情（全部交易对及其 24 小时涨跌幅、成交量等）
• 资金（多交易所资金费率横向对比）

4. LeaderboardPage

交易竞赛排行榜页面，支持活动展示与排名查询。

导入方式

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

使用示例

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

function LeaderboardRoute() {
  return ;
}

包含模块：

• 正在进行的活动横幅
• 奖励概览
• 综合排行榜
• 活动专属排行榜
• 交易规则说明

5. 路由配置（Router Setup）

完整路由配置示例

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from './App';

// 按需懒加载以优化首屏性能
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...