首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > Skill > 开发编程

Orderly Sdk React Hooks

Polar Sponsor
爱发电 赞助
.NET 9.0
立即下载

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

顺序网络: SDK React Hooks Reference. 完成由 @ orderly.network/ hooks. 提供的所有钩的引用. 何时使用.

功能概述

顺序网络: SDK React Hooks Reference. 完成由 @ orderly.network/ hooks. 提供的所有钩的引用. 何时使用. 是一项面向实际任务的技能。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。

核心要点

  • 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
  • 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
  • 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

使用与执行

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。

结果检查与注意事项

执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

Orderly Network：SDK React Hooks 参考文档

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

适用场景

  • 使用 Orderly 构建 React 应用程序
  • 快速查阅 Hook 的函数签名
  • 理解 Hook 的返回值与参数含义

前置条件

  • React 18+
  • 已安装 @orderly.network/hooks
  • 应用需被 OrderlyConfigProvider 包裹（注：原文为 OrderlyAppProvider，此处按实际组件名统一为 OrderlyConfigProvider；但根据后续 Setup 示例中实际使用的是 OrderlyAppProvider，此处应保留原文一致性，故修正为：OrderlyAppProvider 包裹您的应用）

安装

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

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

初始化配置

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

const queryClient = new QueryClient();

function App() {
  return (
    
      
        
      
    
  );
}

账户相关 Hook

useAccount

访问账户状态及操作方法。

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 ;
  }

  return (
    

      
Account: {account.accountId}

      
Address: {account.address}

      
    

  );
}

useWalletConnector

管理钱包连接状态。

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 Connecting...;
  }

  if (wallet.connected) {
    return (
      

        {wallet.address?.slice(0, 6)}...{wallet.address?.slice(-4)}
        
      

    );
  }

  return ;
}

交易相关 Hook

useOrderEntry

创建并提交订单。

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

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

// 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 (
    

      

       setValue('price', e.target.value)}
      />

       setValue('order_quantity', e.target.value)}
      />

      
    

  );
}

useOrderStream

实时流式获取订单列表。

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

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

// Options 类型定义
interface OrderStreamOptions {
  status?: OrderStatus | OrderStatus[];
  symbol?: string;
  side?: OrderSide;
}

// 订单数组
orders: Order[]

// 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 (
    

      
      {orders.map((order) => (
        

          {order.symbol} {order.side} {order.order_qty} @ {order.price}
          
        

      ))}
    

  );
}

持仓相关 Hook

usePositionStream

实时流式获取持仓数据及未实现盈亏（PnL）。

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

// Position 类型定义
interface Position {
  symbol: string;
  position_qty: number;
  average_open_price: number;
  mark_price: number;
  unrealized_pnl: number;
  unrealized_pnl_roi: number;
  leverage: number;
  liq_price: number;
  mmr: number;
  imr: number;
  notional: number;
}

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

  return (
    

      
Total PnL: ${aggregated?.totalUnrealizedPnl?.toFixed(2)}

      
ROI: {(totalUnrealizedROI * 100).toFixed(2)}%

      
        {rows.map((pos) => (
          
        ))}
      

            {pos.symbol}
            {pos.position_qty}
            ${pos.unrealized_pnl.toFixed(2)}
          

    

  );
}

useTPSLOrder

管理止盈（Take-Profit）与止损（Stop-Loss）订单。

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

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

// PositionForTPSL 类型定义（用于 TP/SL 计算的持仓结构）
interface PositionForTPSL {
  symbol: string;
  position_qty: number;
  average_open_price: number;
}

// 计算所得字段
computed: {
  tpTriggerPrice?: string;
  slTriggerPrice?: string;
  tpOffsetPercentage?: number;
  slOffsetPercentage?: number;
}

// 操作方法
actions.setValue(field: string, value: any): void
actions.validate(): Promise
actions.submit(): Promise
actions.reset(): void

// 示例
function TPSSForm({ position }: { position: Position }) {
  const [_, { setValue, validate, submit }] = useTPSLOrder(position);

  const handleSetTPSL = async () => {
    setValue('tp_trigger_price', '3500');
    setValue('sl_trigger_price', '2800');

    if (await validate()) {
      await submit();
    }
  };

  return ;
}

行情数据 Hook

useOrderbookStream

实时订单簿数据。

import { useOrderbookStream } from '@orderly.network/hooks';

const { asks, bids, isLoading } = useOrderbookStream(symbol);

// 返回值说明
asks: [string, string][]  // [price, quantity]，按价格升序排列
bids: [string, string][]  // [price, quantity]，按价格降序排列
isLoading: boolean

// 示例
function Orderbook({ symbol }: { symbol: string }) {
  const { asks, bids } = useOrderbookStream(symbol);

  return (
    

      

        {asks.slice(0, 10).map(([price, qty], i) => (
          

            {price}
            {qty}
          

        ))}
      

      

        {bids.slice(0, 10).map(([price, qty], i) => (
          

            {price}
            {qty}
          

        ))}
      

    

  );
}

useMarkPrice

获取指定交易对当前标记价格（Mark Price）。

import { useMarkPrice } from '@orderly.network/hooks';

const markPrice = useMarkPrice(symbol);
// 返回值类型：number

// 示例
function PriceDisplay({ symbol }: { symbol: string }) {
  const markPrice = useMarkPrice(symbol);
  return ${markPrice?.toFixed(2)};
}

useTickerStream

获取 24 小时行情统计信息（Ticker）。

import { useTickerStream } from '@orderly.network/hooks';

const ticker = useTickerStream(symbol);

// Ticker 类型定义
interface Ticker {
  symbol: string;
  last_price: string;
  high_24h: string;
  low_24h: string;
  volume_24h: string;
  quote_volume_24h: string;
  open: string;
  price_change_24h: string;
  price_change_percent_24h: string;
}

useSymbolInfo

获取指定交易对的交易规则信息。

import { useSymbolInfo } from '@orderly.network/hooks';

const symbolInfo = useSymbolInfo(symbol);

// SymbolInfo 类型定义
interface SymbolInfo {
  symbol: string;
  base_currency: string;
  quote_currency: string;
  base_min: number;
  base_max: number;
  base_tick: number;
  quote_min: number;
  quote_max: number;
  quote_tick: number;
  min_notional: number;
  price_range: number;
  leverage_max: number;
}

余额相关 Hook

useCollateral

获取账户抵押品（Collateral）信息。

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

const { totalCollateral, freeCollateral, availableBalance } = useCollateral({ dp: 2 });

// 返回值说明
totalCollateral: number     // 账户总资产价值
freeCollateral: number      // 可用于新开仓的资金
availableBalance: number    // 可用余额（自由余额）

// 示例
function AccountSummary() {
  const { totalCollateral, freeCollateral } = useCollateral({ dp: 2 });

  return (
    

      
Total: ${totalCollateral}

      
Available: ${freeCollateral}

    

  );
}

useBalance

获取用户在 Orderly 上各代币的余额。

import { useBalance } from '@orderly.network/hooks';

const balance = useBalance();
// 返回值类型：{ USDC: string, USDT: string, ... }

// 示例
function BalanceDisplay() {
  const balance = useBalance();
  return USDC: {balance?.USDC || '0'};
}

链相关 Hook

useChains

获取 Orderly 支持的区块链列表。

import { useChains } from '@orderly.network/hooks';

const [chains, { findByChainId }] = useChains();

// Chain 类型定义
interface Chain {
  id: number;
  name: string;
  network: string;
  chain_id: string;
  explorer: string;
}

// 示例
function ChainSelector() {
  const [chains] = useChains();

  return (
    
  );
}

充提相关 Hook

useDeposit

处理充值流程。

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

const {
  balance,
  allowance,
  approve,
  deposit,
  depositFee,
  setQuantity,
  fetchBalance,
} = useDeposit(options);

// Options 类型定义
interface DepositOptions {
  address: string;      // 代币合约地址
  decimals: number;     // 代币精度（小数位数）
  srcToken: string;     // 代币符号（如 USDC）
  srcChainId: number;   // 源链 ID
}

// 示例
function DepositUSDC() {
  const { balance, allowance, approve, deposit, isApproving, isDepositing } = useDeposit({
    address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
    decimals: 6,
    srcToken: 'USDC',
    srcChainId: 42161,
  });

  const amount = '100';

  const handleDeposit = async () => {
    if (parseFloat(allowance) < 100) {
      await approve();
    }
    await deposit(amount);
  };

  return (
    
  );
}

useWithdraw

处理提现流程。

import { useWithdraw } from '@orderly.network/hooks';

const { withdraw, isLoading, withdrawFee } = useWithdraw();

// WithdrawOptions 类型定义
interface WithdrawOptions {
  symbol: string;
  amount: string;
  address: string; // 目标地址
  chainId: number;
  network: string;
}

// 示例
const { withdraw, isLoading } = useWithdraw();

await withdraw({
  symbol: 'USDC',
  amount: '100',
  address: '0x...',
  chainId: 42161,
  network: 'arbitrum',
});

杠杆相关 Hook

useLeverage

获取并设置指定交易对的杠杆倍数。

import { useLeverage } from '@orderly.network/hooks';

const { leverage, maxLeverage, setLeverage, isLoading } = useLeverage(symbol);

// 返回值说明
leverage: number
maxLeverage: number
setLeverage(value: number): Promise
isLoading: boolean

// 示例
function LeverageControl({ symbol }: { symbol: string }) {
  const { leverage, maxLeverage, setLeverage } = useLeverage(symbol);

  return (
     setLeverage(parseInt(e.target.value))}
    />
  );
}

常见组合模式

综合交易界面

import {
  useAccount,
  useOrderEntry,
  usePositionStream,
  useOrderbookStream,
  useCollateral,
  OrderSide,
  OrderType,
} from '@orderly.network/hooks';

function TradingInterface({ symbol }: { symbol: string }) {
  const { state } = useAccount();
  const { rows: positions } = usePositionStream();
  const { asks, bids } = useOrderbookStream(symbol);
  const { freeCollateral } = useCollateral();
  const { submit, setValue, getValue, helper } = useOrderEntry(symbol);

  if (state.status !== 'connected') {
    return ;
  }

  return (
    

      

        
      

      

        
        
      

    

  );
}

相关技能与扩展

  • orderly-ui-components —— 预构建的 UI 组件库
  • orderly-trading-orders —— 订单管理详细说明
  • orderly-positions-tpsl —— 持仓与止盈止损管理
  • orderly-websocket-streaming —— 底层 WebSocket 实现机制

作者最新文章

MySQL 连接超时问题的终极解决方案（Go 应用实战指南）

JavaFX 中实现响应式矩形布局：保持相对宽度与间距的正确方法

如何在 Flask 中安全比对表单数据与 MySQL 数据库记录是否存在重复

如何精准定位并屏蔽网页中恶意弹窗的 JavaScript 函数

如何让 contentEditable 元素在表单提交时正常传递数据

热门AI工具

更多
二狗PPT

二狗PPT

Hot UpDream

UpDream

Hot 咔片AIPPT

咔片AIPPT

Hot PixTV

PixTV

Hot PixPix

PixPix

Hot 豆包大模型

豆包大模型

 DeepSeek

DeepSeek

 墨刀AI

墨刀AI

Hot

相关专题

更多
JavaScript React组件优化与性能提升实战
JavaScript React组件优化与性能提升实战

本专题围绕 React 框架在大型前端项目中的性能优化展开，讲解组件生命周期优化、虚拟 DOM 原理、状态管理策略及懒加载技术。通过实战案例，帮助开发者构建性能优良、响应迅速的前端应用。

2026.04.13

165

18

React 18状态管理与Hooks高级实践
React 18状态管理与Hooks高级实践

本专题专注于 React 18 的高级开发技术，详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧，以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例，帮助前端开发者构建可维护、性能优良的现代 React 应用。

2026.02.10

183

17

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发，整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

0

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式，涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

0

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念，包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法，帮助新手理解LLVM编译流程中的关键层。

2026.09.30

0

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时，PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程，帮助用户稳定完成 PDF 图片化处理。

2026.09.30

0

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程，涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能，帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

0

15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发，讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

0

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制，涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

0

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何使用 Figma AI 将网站美化 10 倍
如何使用 Figma AI 将网站美化 10 倍

共0课时 | 191人学习

React 教程
React 教程

共58课时 | 12.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

最新文章

更多
纳米AI怎么在智能体指令中说明工具的使用时机
PixTV同一张图片怎么尝试不同的画风
Muse智能体使用入口-Muse智能体通用使用入口链接
PixTV能让某个视频片段循环播放吗
秘塔AI搜索API的size和page有什么区别
秘塔AI视频生成和视频搜索有什么区别
可灵AI视频提示词怎么写人物转身动作
Laper怎么处理已经不适用的旧节拍
Seko做产品短视频怎么避免展示错误
Seko生成的视频可以商用吗