Orderly Network: SDK 交易工作流

在Orderly Network DEX应用中实现完整交易工作流的全面指南，涵盖从钱包连接到订单执行和仓位管理的全过程。

适用场景

• - 构建完整的交易界面
• 实现充值→交易→提现流程
• 理解端到端交易生命周期
• 创建自动化交易机器人

前置条件

• - 已安装Orderly SDK包
• 已配置钱包连接
• 已完成账户认证

概述

本技能涵盖端到端交易工作流：

1. 1. 连接 → 钱包连接与认证
2. 充值 → 为Orderly账户充值
3. 交易 → 下单与管理订单
4. 监控 → 追踪仓位与盈亏
5. 提现 → 将资金转回钱包

完整交易流程

┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 连接钱包 │────▶│ 充值资金 │────▶│ 执行交易 │
│ │ │ │ │ (订单) │
└──────────────┘ └──────────────┘ └──────────────┘
│
▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 提现资金 │◀────│ 平仓操作 │◀────│ 监控仓位 │
│ │ │ │ │ │
└──────────────┘ └──────────────┘ └──────────────┘

1. 连接与认证

检查账户状态

tsx
import { useAccount, AccountStatusEnum } from @orderly.network/hooks;

function TradingGuard({ children }) {
const { state, createAccount, createOrderlyKey } = useAccount();

switch (state.status) {
case AccountStatusEnum.NotConnected:
return ;

case AccountStatusEnum.Connected:
return (

case AccountStatusEnum.NotSignedIn:
return (

case AccountStatusEnum.SignedIn:
return children;
}
}

使用AuthGuard（更简洁）

tsx
import { AuthGuard } from @orderly.network/ui-connector;

function TradingPage() {
return (



);
}

2. 充值资金

使用useDeposit Hook

tsx
import { useDeposit } from @orderly.network/hooks;

function DepositForm() {
const { deposit, balance, allowance, approve, isNativeToken, quantity, setQuantity, depositFee } =
useDeposit({
address: 0xUSDC_ADDRESS,
decimals: 6,
srcChainId: 42161,
srcToken: USDC,
});

const handleDeposit = async () => {
try {
// 检查并在需要时授权
if (!isNativeToken && allowance < quantity) {
await approve();
}

// 执行充值
const result = await deposit();
toast.success(充值成功！);
} catch (error) {
toast.error(error.message);
}
};

return (

使用DepositForm组件

tsx
import { DepositForm } from @orderly.network/ui-transfer;

function DepositPage() {
return (
onDeposit={(result) => {
toast.success(充值成功！);
}}
/>
);
}

3. 检查账户余额

使用useCollateral

tsx
import { useCollateral } from @orderly.network/hooks;

function AccountBalance() {
const { totalCollateral, freeCollateral, totalValue, availableBalance, unsettledPnL } =
useCollateral({ dp: 2 });

return (

总价值：${totalValue}
可用保证金：${freeCollateral}
未结算盈亏：${unsettledPnL}

);
}

4. 下单

市价单

tsx
import { useMutation } from @orderly.network/hooks;
import { OrderType, OrderSide } from @orderly.network/types;

function MarketOrderButton({ symbol, side, quantity }) {
const [submitOrder] = useMutation(/v1/order);

const placeMarketOrder = async () => {
const order = {
symbol,
side,
order_type: OrderType.MARKET,
order_quantity: quantity,
};

try {
const result = await submitOrder(order);
if (result.success) {
toast.success(订单已提交：${result.data.order_id});
}
} catch (error) {
toast.error(error.message);
}
};

return (

{side === OrderSide.BUY ? 买入 : 卖出}市价

);
}

限价单

tsx
function LimitOrderForm({ symbol }) {
const [submitOrder] = useMutation(/v1/order);
const [price, setPrice] = useState();
const [quantity, setQuantity] = useState();
const [side, setSide] = useState(OrderSide.BUY);

const placeLimitOrder = async () => {
const order = {
symbol,
side,
order_type: OrderType.LIMIT,
order_price: parseFloat(price),
order_quantity: parseFloat(quantity),
};

const result = await submitOrder(order);
if (result.success) {
toast.success(限价单已提交！);
}
};

return (

使用useOrderEntry（推荐）

tsx
import { useOrderEntry } from @orderly.network/hooks;
import { OrderSide, OrderType } from @orderly.network/types;

function OrderEntryForm({ symbol }) {
const { formattedOrder, submit, maxQty, freeCollateral, errors, setValues } =
useOrderEntry(symbol);

useEffect(() => {
setValues({
side: OrderSide.BUY,
order_type: OrderType.LIMIT,
});
}, []);

const handleSubmit = async () => {
if (Object.keys(errors).length > 0) {
toast.error(请修正验证错误);
return;
}

try {
await submit();
toast.success(订单已提交！);
} catch (error) {
toast.error(error.message);
}
};

return (

5. 监控订单

活跃订单

tsx
import { useOrderStream } from @orderly.network/hooks;

function ActiveOrders({ symbol }) {
const [orders, { refresh }] = useOrderStream({
symbol,
status: OPEN,