Orderly Network: UI 组件

本技能涵盖使用 @orderly.network/react 中 Orderly 预构建的 React 组件构建交易界面。

使用场景

• - 快速构建交易 UI
• 使用预构建的、带样式的组件
• 实现标准交易界面模式

前置条件

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

安装

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

或使用 yarn

核心提供器

使用所需的提供器包裹您的应用：

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

const queryClient = new QueryClient();

function App() {
return (

brokerId=woofi_dex
chainFilter={[42161, 421614]}
>










);
}

订单输入组件

基本订单输入

typescript
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(订单已提交);
} catch (e) {
console.error(订单失败, e);
}
};

return (

export function OrderEntryWidget() {
return (
BTCUSDC>


);
}

订单输入属性

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

持仓组件

基本持仓表格

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

export function PositionsWidget() {
const handleSymbolClick = (symbol: string) => {
console.log(导航到:, symbol);
};

return (

持仓属性

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

订单簿组件

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

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

level={10} // 显示的档位数
showTotal={true} // 显示总量列
onItemClick={(price, side) => {
console.log(价格被点击:, price, side);
}}
/>

);
}

钱包连接组件

基本钱包连接

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

export function Header() {
return (

自定义钱包按钮

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

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

if (state.status !== connected) {
return (
onClick={() => wallet.connect()}
className=btn-primary
>
连接钱包

);
}

return (

图表组件

TradingView 小部件

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

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

轻量级图表

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

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

数据表格组件

通用表格

typescript
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: 价格,
dataIndex: price,
render: (value, record) => (

{value.toFixed(2)}

),
},
{
title: 数量,
dataIndex: size,
render: (value) => value.toFixed(4),
},
{
title: 时间,
dataIndex: time,
},
]}
rowKey=id
pagination={{ pageSize: 20 }}
/>
);
}

抽屉组件

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

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


查看详情

订单详情

模态框组件

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

export function ConfirmOrderModal({ order, onConfirm }: { order: Order; onConfirm: () => void }) {
return (


下单

确认订单