技能名称: orderly-sdk-react-hooks
详细描述:

Orderly Network: SDK React Hooks 参考文档

@orderly.network/hooks 提供的所有钩子的完整参考。

何时使用

• - 使用 Orderly 构建 React 应用程序
• 快速查阅钩子签名
• 理解钩子的返回值和参数

前提条件

• - React 18+
• 已安装 @orderly.network/hooks
• 使用 OrderlyConfigProvider 包裹你的应用

安装

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

或者使用 yarn

设置

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

const queryClient = new QueryClient();

function App() {
return (

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



);
}

账户钩子

useAccount

访问账户状态和操作。

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

const { account, state } = useAccount();

// 状态
state.status: notConnected | connecting | connected | disconnecting
state.address: string | null

// 账户
account.accountId: string
account.address: string
account.connect(): Promise
account.disconnect(): Promise
account.setAddress(address, options): void

// 示例
function AccountInfo() {
const { account, state } = useAccount();

if (state.status !== connected) {
return account.connect()}>连接;
}

return (

useWalletConnector

管理钱包连接。

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

const wallet = useWalletConnector();

// 状态
wallet.connected: boolean
wallet.connecting: boolean
wallet.connectedChain: { id: string } | null
wallet.address: string | null

// 操作
wallet.connect(): Promise
wallet.disconnect(): Promise
wallet.setChain(options): Promise

// 示例
function WalletButton() {
const wallet = useWalletConnector();

if (wallet.connecting) {
return 连接中...;
}

if (wallet.connected) {
return (

return wallet.connect()}>连接钱包;
}

交易钩子

useOrderEntry

创建和提交订单。

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

const {
submit,
setValue,
getValue,
helper,
reset,
isSubmitting,
errors,
} = useOrderEntry(symbol, options);

// 选项
interface OrderEntryOptions {
initialOrder?: {
side?: OrderSide;
order_type?: OrderType;
price?: string;
order_quantity?: string;
};
onSuccess?: (result) => void;
onError?: (error) => void;
}

// 方法
setValue(field: string, value: any): void
getValue(field: string): any
helper.validate(): Promise
submit(): Promise
reset(): void

// 示例
function OrderForm({ symbol }: { symbol: string }) {
const { submit, setValue, getValue, helper, isSubmitting } = useOrderEntry(symbol, {
initialOrder: {
side: OrderSide.BUY,
order_type: OrderType.LIMIT,
},
});

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const valid = await helper.validate();
if (valid) {
await submit();
}
};

return (

useOrderStream

实时流式传输订单。

typescript
import { useOrderStream, OrderStatus } from @orderly.network/hooks;

const [orders, actions] = useOrderStream(options);

// 选项
interface OrderStreamOptions {
status?: OrderStatus | OrderStatus[];
symbol?: string;
side?: OrderSide;
}

// 订单
orders: Order[]

// 订单类型
interface Order {
order_id: number;
symbol: string;
side: BUY | SELL;
order_type: string;
price: string;
order_qty: string;
filled_qty: string;
status: string;
created_at: number;
updated_at: number;
}

// 操作
actions.cancelOrder(orderId: number | string): Promise
actions.cancelAllOrders(options?): Promise
actions.editOrder(orderId, updates): Promise

// 示例
function OpenOrders() {
const [orders, { cancelOrder, cancelAllOrders }] = useOrderStream({
status: OrderStatus.INCOMPLETE,
});

return (

持仓钩子

usePositionStream

实时流式传输持仓及盈亏。

typescript
import { usePositionStream } from @orderly.network/hooks;

const { rows, aggregated, totalUnrealizedROI, isLoading } = usePositionStream();

// 返回值
rows: Position[]
aggregated: {
totalUnrealizedPnl: number;
totalNotional: number;
totalCollateral: number;
}
totalUnrealizedROI: number
isLoading: boolean

// 持仓类型
interface Position {
symbol: string;
position_qty: number;
averageopenprice: number;
mark_price: number;
unrealized_pnl: number;
unrealizedpnlroi: number;
leverage: number;
liq_price: number;
mmr: number;
imr: number;
notional: number;
}

// 示例
function PositionsSummary() {
const { rows, aggregated, totalUnrealizedROI } = usePositionStream();

return (

useTPSLOrder

管理止盈止损订单。

typescript
import { useTPSLOrder } from @orderly.network/hooks;

const [computed, actions] = useTPSLOrder(position);

// 包含 positionqty 和 averageopen_price 的持仓
interface PositionForTPSL {
symbol: string;
position_qty: number;
averageopenprice: number;
}

// 计算值
computed: {
tpTriggerPrice?: string;
slTriggerPrice?: string;
tpOffsetPercentage?: number;
slOffsetPercentage?: number;
}

// 操作
actions.setValue(field: