Orderly Network：UI 组件

本技能涵盖使用 Orderly 提供的预构建 React 组件（来自 @orderly.network/react）构建交易界面。

适用场景

• 快速构建交易 UI
• 使用已预构建且已样式化的组件
• 实现标准交易界面模式

前置条件

• React 18+
• 已安装 @orderly.network/react
• Tailwind CSS（推荐用于样式定制）

安装

npm install @orderly.network/react @orderly.network/hooks @orderly.network/types

# 或使用 yarn
yarn add @orderly.network/react @orderly.network/hooks @orderly.network/types

核心 Provider

使用必需的 Provider 包裹你的应用：

import {
  OrderlyAppProvider,
  TradingPageProvider,
  SymbolProvider,
  WalletConnector
} from '@orderly.network/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    
      
        
          
            
              
              
            
          
        
      
    
  );
}

订单录入组件（Order Entry Component）

基础订单录入

import { OrderEntry, OrderEntryProvider } from '@orderly.network/ui-order-entry';
import { useOrderEntry } from '@orderly.network/hooks';

function OrderEntryContainer() {
  const { onSubmit } = useOrderEntry();

  const handleSubmit = async (params: any) => {
    try {
      await onSubmit(params);
      console.log('Order submitted');
    } catch (e) {
      console.error('Order failed', e);
    }
  };

  return (
    

      
    
  );
}

export function OrderEntryWidget() {
  return (
    
      
    
  );
}

OrderEntry 组件属性（Props）

interface OrderEntryProps {
  onSubmit?: (params: OrderParams) => Promise;
  defaultTab?: 'limit' | 'market';
  hideMarket?: boolean;
  hideLimit?: boolean;
  showLeverage?: boolean;
  className?: string;
}

持仓组件（Positions Component）

基础持仓表格

import { Positions } from '@orderly.network/ui-positions';

export function PositionsWidget() {
  const handleSymbolClick = (symbol: string) => {
    console.log('Navigate to:', symbol);
  };

  return (
    

      
    
  );
}

Positions 组件属性（Props）

interface PositionsProps {
  filter?: {
    symbol?: string;
    side?: 'BUY' | 'SELL';
  };
  onSymbolClick?: (symbol: string) => void;
  showPagination?: boolean;
  pageSize?: number;
  className?: string;
}

盘口组件（Orderbook Component）

import { Orderbook, OrderbookProvider } from '@orderly.network/ui-orderbook';

export function OrderbookWidget({ symbol }: { symbol: string }) {
  return (
    
       {
          console.log('Price clicked:', price, side);
        }}
      />
    
  );
}

钱包连接组件（Wallet Connect Component）

基础钱包连接

import { WalletConnect } from '@orderly.network/react';

export function Header() {
  return (
    

      
My DEX
      
    
  );
}

自定义钱包按钮

import { useAccount, useWalletConnector } from '@orderly.network/hooks';

export function CustomWalletButton() {
  const { account, state } = useAccount();
  const wallet = useWalletConnector();

  if (state.status !== 'connected') {
    return (
       wallet.connect()}
        className="btn-primary"
      >
        Connect Wallet
      
    );
  }

  return (
    

      {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
       wallet.disconnect()}>
        Disconnect
      
    
  );
}

图表组件（Chart Components）

TradingView 小部件

import { TradingView } from '@orderly.network/ui-chart';

export function ChartWidget({ symbol }: { symbol: string }) {
  return (
    

      
    
  );
}

Lightweight Charts

import { LightweightChart } from '@orderly.network/ui-chart';

export function SimpleChart({ symbol }: { symbol: string }) {
  return (
    

      
    
  );
}

数据表格组件（Data Table Component）

通用表格

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

type TradeRow = {
  id: string;
  price: number;
  size: number;
  time: string;
  side: 'BUY' | 'SELL';
};

export function TradesTable({ data }: { data: TradeRow[] }) {
  return (
    
      dataSource={data}
      columns={[
        {
          title: 'Price',
          dataIndex: 'price',
          render: (value, record) => (
            
              {value.toFixed(2)}
            
          ),
        },
        {
          title: 'Size',
          dataIndex: 'size',
          render: (value) => value.toFixed(4),
        },
        {
          title: 'Time',
          dataIndex: 'time',
        },
      ]}
      rowKey="id"
      pagination={{ pageSize: 20 }}
    />
  );
}

抽屉组件（Sheet Component）

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from '@orderly.network/ui';

export function OrderDetailsSheet({ order }: { order: Order }) {
  return (
    
      
        View Details
      
      
        
          
Order Details
        
        

          

            Symbol:
            {order.symbol}
            Side:
            {order.side}
            Price:
            {order.price}
            Quantity:
            {order.order_qty}
            Status:
            {order.status}
          
        
        
          Close Position
        
      
    
  );
}

模态框组件（Modal Component）

import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@orderly.network/ui';

export function ConfirmOrderModal({ order, onConfirm }: { order: Order; onConfirm: () => void }) {
  return (
    
      
        Place Order
      
      
        
          
Confirm Order
        
        
          
Are you sure you want to place this order?
          

            
{order.side} {order.quantity} {order.symbol} @ {order.price}
          
        
        
          Cancel
          Confirm
        
      
    
  );
}

空状态组件（Empty State Component）

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

export function EmptyOrders() {
  return (
    

      
      
No open orders
      Place Order
    
  );
}

通知/提示组件（Notification/Toast Component）

import { Toast, ToastProvider, useToast } from '@orderly.network/ui';

function TradingPage() {
  const { toast } = useToast();

  const handleOrderSubmit = async () => {
    try {
      await submitOrder();
      toast({
        title: 'Order Placed',
        description: 'Your order has been submitted successfully',
        variant: 'success',
      });
    } catch (error) {
      toast({
        title: 'Order Failed',
        description: error.message,
        variant: 'error',
      });
    }
  };

  return Place Order;
}

// 在你的应用根组件中
function App() {
  return (
    
      
    
  );
}

完整交易页面示例

import {
  OrderlyAppProvider,
  TradingPageProvider,
  SymbolProvider,
  WalletConnect,
} from '@orderly.network/react';
import { OrderEntry, OrderEntryProvider } from '@orderly.network/ui-order-entry';
import { Positions } from '@orderly.network/ui-positions';
import { Orderbook, OrderbookProvider } from '@orderly.network/ui-orderbook';
import { TradingView } from '@orderly.network/ui-chart';
import { useOrderEntry } from '@orderly.network/hooks';

function TradingPage() {
  const symbol = 'PERP_BTC_USDC';

  return (
    

      {/* Header */}
      

        
My DEX
        
      

      {/* Main Content */}
      

        {/* Left: Orderbook */}
        

          
            
          
        

        {/* Center: Chart + Order Entry */}
        

          

            
          
          
            
          
        

        {/* Right: Positions */}
        

          
        
      
    
  );
}

export function App() {
  return (
    
      
        
          
        
      
    
  );
}

样式定制

Orderly 组件基于 Tailwind CSS 类构建。可通过以下方式自定义样式：

/* 覆盖组件默认样式 */
.order-entry-root {
  /* Your styles */
}

.positions-table {
  /* Your styles */
}

/* 使用 Tailwind 暗色模式 */
.dark .order-entry-root {
  /* 暗色模式样式 */
}

常见问题

组件未渲染

• 确保所有 Provider 均已正确嵌套包裹
• 确认 SymbolProvider 位于依赖 symbol 的组件之上
• 验证 Tailwind CSS 已正确配置

样式冲突

• 组件使用 Tailwind 工具类（utility classes）
• 可通过更高优先级的 CSS 规则覆盖样式
• 在支持时优先使用 className 属性进行定制

数据未更新

• 检查 WebSocket 连接状态
• 确认钱包账户已成功连接
• 确保相关 Hook 在 Provider 组件内部调用

关联技能

• orderly-sdk-react-hooks — Hook 使用参考文档
• orderly-trading-orders — 订单管理
• orderly-websocket-streaming — 实时数据流