orderly-sdk-install-dependency

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orderly Network: SDK Install Dependency

Orderly Network：SDK依赖安装

Use this skill to add Orderly SDK packages to your project. The SDK is modular—install only what you need.

使用本指南将Orderly SDK包添加到你的项目中。该SDK采用模块化设计——仅安装你需要的部分即可。

When to Use

适用场景

Starting a new DEX project
Adding Orderly SDK to an existing project
Installing specific packages for custom integrations
Setting up wallet connectors

启动新的DEX项目
为现有项目集成Orderly SDK
安装特定包以实现自定义集成
配置钱包连接器

Prerequisites

前置要求

Node.js 18+ installed
npm, yarn, or pnpm package manager
React 18+ project (for UI packages)

已安装Node.js 18+
已安装npm、yarn或pnpm包管理器
React 18+项目（针对UI包）

Quick Start (Full DEX)

快速上手（完整DEX）

IMPORTANT: A functional DEX requires BOTH the Orderly packages AND the wallet connector dependencies. The
@orderly.network/wallet-connector
package needs
@web3-onboard/*
packages for EVM wallets and
@solana/wallet-adapter-*
packages for Solana wallets.
Note:
@orderly.network/hooks
is included as a transitive dependency via
@orderly.network/react-app
— you do not need to install it separately for most DEX projects. Only install it directly if you are using the hooks-only integration path without
react-app
.

bash

undefined

重要提示：一个可用的DEX同时需要Orderly包和钱包连接器依赖。
@orderly.network/wallet-connector
包需要
@web3-onboard/*
包以支持EVM钱包，需要
@solana/wallet-adapter-*
包以支持Solana钱包。
注意：
@orderly.network/hooks
是
@orderly.network/react-app
的传递依赖——对于大多数DEX项目，你无需单独安装它。仅当你使用不依赖
react-app
的纯hooks集成方案时，才需要直接安装它。

bash

undefined

Orderly SDK packages

Orderly SDK包

npm install @orderly.network/react-app
@orderly.network/trading
@orderly.network/portfolio
@orderly.network/markets
@orderly.network/wallet-connector
@orderly.network/i18n

REQUIRED: EVM wallet support (MetaMask, WalletConnect, etc.)

必需：EVM钱包支持（MetaMask、WalletConnect等）

npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect

REQUIRED: Solana wallet support (Phantom, Solflare, etc.)

必需：Solana钱包支持（Phantom、Solflare等）

npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets

undefined

npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets

undefined

Package Reference

包参考

Core Packages

核心包

Package	Description	Key Exports
`@orderly.network/react-app`	Main app provider, config context, error boundary	`OrderlyAppProvider` , `useAppContext` , `useAppConfig` , `ErrorBoundary`
`@orderly.network/hooks`	React hooks for trading, account, orders, positions	`useAccount` , `useOrderEntry` , `usePositionStream` , `useOrderStream` , `useDeposit` , `useWithdraw` , `useLeverage` , `useMarkets`
`@orderly.network/types`	TypeScript type definitions and constants	`API` , `OrderType` , `OrderSide` , `OrderStatus` , `NetworkId` , `ChainConfig`
`@orderly.network/ui`	Base UI components (buttons, inputs, dialogs, tables)	`Button` , `Input` , `Dialog` , `Table` , `Tabs` , `Select` , `Tooltip` , `Modal` , `Spinner` , `toast` , `OrderlyThemeProvider`
`@orderly.network/i18n`	Internationalization (i18n) support	`LocaleProvider` , `useTranslation` , `i18n` , `defaultLanguages`
`@orderly.network/utils`	Utility functions (formatting, math, dates)	`formatNumber` , `Decimal` , `dayjs`

bash

npm install @orderly.network/react-app @orderly.network/hooks @orderly.network/types @orderly.network/ui @orderly.network/i18n

包名	描述	主要导出项
`@orderly.network/react-app`	主应用提供者、配置上下文、错误边界	`OrderlyAppProvider` , `useAppContext` , `useAppConfig` , `ErrorBoundary`
`@orderly.network/hooks`	用于交易、账户、订单、仓位的React hooks	`useAccount` , `useOrderEntry` , `usePositionStream` , `useOrderStream` , `useDeposit` , `useWithdraw` , `useLeverage` , `useMarkets`
`@orderly.network/types`	TypeScript类型定义和常量	`API` , `OrderType` , `OrderSide` , `OrderStatus` , `NetworkId` , `ChainConfig`
`@orderly.network/ui`	基础UI组件（按钮、输入框、对话框、表格）	`Button` , `Input` , `Dialog` , `Table` , `Tabs` , `Select` , `Tooltip` , `Modal` , `Spinner` , `toast` , `OrderlyThemeProvider`
`@orderly.network/i18n`	国际化（i18n）支持	`LocaleProvider` , `useTranslation` , `i18n` , `defaultLanguages`
`@orderly.network/utils`	工具函数（格式化、数学计算、日期处理）	`formatNumber` , `Decimal` , `dayjs`

bash

npm install @orderly.network/react-app @orderly.network/hooks @orderly.network/types @orderly.network/ui @orderly.network/i18n

Feature Widgets (High-Level Pages)

功能组件（高阶页面）

Complete, pre-built page components with full functionality.

Package	Description	Key Exports
`@orderly.network/trading`	Full trading page (chart, orderbook, order entry, positions)	`TradingPage` , `OrderBook` , `LastTrades` , `AssetView` , `RiskRate` , `SplitLayout`
`@orderly.network/portfolio`	Portfolio dashboard (positions, orders, assets, history)	`OverviewModule` , `PositionsModule` , `OrdersModule` , `AssetsModule` , `HistoryModule` , `FeeTierModule` , `APIManagerModule`
`@orderly.network/markets`	Markets listing page with prices and stats	`MarketsHomePage` , `MarketsProvider` , `MarketsList` , `SymbolInfoBar` , `FundingOverview`
`@orderly.network/vaults`	Vault/Earn products page	`VaultsPage`
`@orderly.network/affiliate`	Referral/affiliate program page	`AffiliatePage`
`@orderly.network/trading-leaderboard`	Trading competition leaderboard	`LeaderboardPage`
`@orderly.network/trading-rewards`	Trading rewards program page	`TradingRewardsPage`
`@orderly.network/trading-points`	Trading points/merits program page	`TradingPointsPage`

bash

npm install @orderly.network/trading @orderly.network/portfolio @orderly.network/markets

功能完整的预构建页面组件。

包名	描述	主要导出项
`@orderly.network/trading`	完整交易页面（图表、订单簿、下单界面、仓位管理）	`TradingPage` , `OrderBook` , `LastTrades` , `AssetView` , `RiskRate` , `SplitLayout`
`@orderly.network/portfolio`	投资组合仪表盘（仓位、订单、资产、历史记录）	`OverviewModule` , `PositionsModule` , `OrdersModule` , `AssetsModule` , `HistoryModule` , `FeeTierModule` , `APIManagerModule`
`@orderly.network/markets`	市场列表页面（含价格和统计数据）	`MarketsHomePage` , `MarketsProvider` , `MarketsList` , `SymbolInfoBar` , `FundingOverview`
`@orderly.network/vaults`	金库/理财产品页面	`VaultsPage`
`@orderly.network/affiliate`	推荐/联盟计划页面	`AffiliatePage`
`@orderly.network/trading-leaderboard`	交易竞赛排行榜	`LeaderboardPage`
`@orderly.network/trading-rewards`	交易奖励计划页面	`TradingRewardsPage`
`@orderly.network/trading-points`	交易积分/荣誉计划页面	`TradingPointsPage`

bash

npm install @orderly.network/trading @orderly.network/portfolio @orderly.network/markets

Wallet Connectors

钱包连接器

Choose one wallet connection strategy.

Package	Description	Key Exports
`@orderly.network/wallet-connector`	Standard connector (Web3-Onboard + Solana adapters)	`WalletConnectorProvider`
`@orderly.network/wallet-connector-privy`	Privy connector (social login, embedded wallets)	`PrivyConnectorProvider`

Option A: Standard Wallet Connector (Recommended)

Supports EVM (MetaMask, WalletConnect, Binance, etc.) and Solana (Phantom, Solflare).

Note: The
@orderly.network/wallet-connector
works with sensible defaults. Installing the underlying wallet packages (
@web3-onboard/*
,
@solana/wallet-adapter-*
) is optional and only needed for custom wallet configuration (e.g., adding WalletConnect with a project ID). The official templates use
<WalletConnectorProvider>
with no props and no extra wallet packages.

bash

undefined

选择一种钱包连接方案。

包名	描述	主要导出项
`@orderly.network/wallet-connector`	标准连接器（Web3-Onboard + Solana适配器）	`WalletConnectorProvider`
`@orderly.network/wallet-connector-privy`	Privy连接器（社交登录、嵌入式钱包）	`PrivyConnectorProvider`

方案A：标准钱包连接器（推荐）

支持EVM（MetaMask、WalletConnect、Binance等）和Solana（Phantom、Solflare）钱包。

注意：
@orderly.network/wallet-connector
具备合理的默认配置。安装底层钱包包（
@web3-onboard/*
、
@solana/wallet-adapter-*
）是可选操作，仅在需要自定义钱包配置时才需安装（例如，添加带项目ID的WalletConnect）。官方模板使用不带任何属性的
<WalletConnectorProvider>
，无需额外安装钱包包。

bash

undefined

Main connector package

主连接器包

npm install @orderly.network/wallet-connector

Optional: EVM wallet packages (for custom WalletConnect, etc.)

可选：EVM钱包包（用于自定义WalletConnect等）

npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect

Optional: Solana wallet packages (for custom Solana wallet config)

可选：Solana钱包包（用于自定义Solana钱包配置）

npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets


**Option B: Privy Connector**

For social login (Google, email, etc.) and embedded wallets.

```bash
npm install @orderly.network/wallet-connector-privy @privy-io/react-auth

npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets


**方案B：Privy连接器**

适用于社交登录（谷歌、邮箱等）和嵌入式钱包。

```bash
npm install @orderly.network/wallet-connector-privy @privy-io/react-auth

UI Sub-Packages (Granular Components)

UI子包（细粒度组件）

Individual UI modules for custom integrations. These are dependencies of

@orderly.network/trading

and

@orderly.network/portfolio

, but can be installed separately.

Package	Description	Key Exports
`@orderly.network/ui-scaffold`	App layout scaffold, navigation, account menu	`Scaffold` , `MainNavWidget` , `BottomNavWidget` , `AccountMenuWidget` , `ChainMenuWidget` , `SideNavbarWidget`
`@orderly.network/ui-order-entry`	Order entry form component	`OrderEntry`
`@orderly.network/ui-positions`	Positions table component	`PositionsView`
`@orderly.network/ui-orders`	Orders table component	`OrdersView`
`@orderly.network/ui-transfer`	Deposit/withdraw/transfer dialogs	`DepositWidget` , `WithdrawWidget`
`@orderly.network/ui-leverage`	Leverage selector component	`LeverageWidget`
`@orderly.network/ui-tpsl`	Take profit / stop loss form	`TPSLWidget`
`@orderly.network/ui-share`	PnL sharing card generator	`SharePnL`
`@orderly.network/ui-chain-selector`	Chain/network selector dropdown	`ChainSelector`
`@orderly.network/ui-connector`	Wallet connect button & modal	`ConnectWalletButton`
`@orderly.network/ui-tradingview`	TradingView chart wrapper	`TradingViewChart`
`@orderly.network/ui-notification`	Notification center	`NotificationWidget`

bash

npm install @orderly.network/ui-scaffold @orderly.network/ui-order-entry

用于自定义集成的独立UI模块。这些包是

@orderly.network/trading

和

@orderly.network/portfolio

的依赖，但也可以单独安装。

包名	描述	主要导出项
`@orderly.network/ui-scaffold`	应用布局框架、导航栏、账户菜单	`Scaffold` , `MainNavWidget` , `BottomNavWidget` , `AccountMenuWidget` , `ChainMenuWidget` , `SideNavbarWidget`
`@orderly.network/ui-order-entry`	下单表单组件	`OrderEntry`
`@orderly.network/ui-positions`	仓位表格组件	`PositionsView`
`@orderly.network/ui-orders`	订单表格组件	`OrdersView`
`@orderly.network/ui-transfer`	存入/提取/转账对话框	`DepositWidget` , `WithdrawWidget`
`@orderly.network/ui-leverage`	杠杆选择器组件	`LeverageWidget`
`@orderly.network/ui-tpsl`	止盈/止损表单	`TPSLWidget`
`@orderly.network/ui-share`	PnL分享卡片生成器	`SharePnL`
`@orderly.network/ui-chain-selector`	链/网络选择下拉框	`ChainSelector`
`@orderly.network/ui-connector`	钱包连接按钮及弹窗	`ConnectWalletButton`
`@orderly.network/ui-tradingview`	TradingView图表包装器	`TradingViewChart`
`@orderly.network/ui-notification`	通知中心	`NotificationWidget`

bash

npm install @orderly.network/ui-scaffold @orderly.network/ui-order-entry

Low-Level Packages

底层包

For advanced customization or non-React environments.

Package	Description	Key Exports
`@orderly.network/core`	Low-level API client, signing, key management	`Account` , `ConfigStore` , `WalletAdapter` , `signMessage`
`@orderly.network/perp`	Perpetual trading calculations (margin, liquidation)	`calcMargin` , `calcLiqPrice` , `calcPnL` , `calcIMR` , `calcMMR`
`@orderly.network/net`	Network/WebSocket layer	`WebSocketClient` , `EventEmitter`
`@orderly.network/default-evm-adapter`	Default EVM wallet adapter	`EVMAdapter`
`@orderly.network/default-solana-adapter`	Default Solana wallet adapter	`SolanaAdapter`

bash

npm install @orderly.network/core @orderly.network/perp

用于高级自定义或非React环境。

包名	描述	主要导出项
`@orderly.network/core`	底层API客户端、签名、密钥管理	`Account` , `ConfigStore` , `WalletAdapter` , `signMessage`
`@orderly.network/perp`	永续合约交易计算（保证金、清算）	`calcMargin` , `calcLiqPrice` , `calcPnL` , `calcIMR` , `calcMMR`
`@orderly.network/net`	网络/WebSocket层	`WebSocketClient` , `EventEmitter`
`@orderly.network/default-evm-adapter`	默认EVM钱包适配器	`EVMAdapter`
`@orderly.network/default-solana-adapter`	默认Solana钱包适配器	`SolanaAdapter`

bash

npm install @orderly.network/core @orderly.network/perp

Installation by Use Case

按使用场景安装

Minimal Setup (Hooks Only)

最小配置（仅Hooks）

For building fully custom UI with hooks.

bash

npm install @orderly.network/react-app \
            @orderly.network/hooks \
            @orderly.network/types \
            @orderly.network/wallet-connector

用于构建完全自定义的UI界面。

bash

npm install @orderly.network/react-app \
            @orderly.network/hooks \
            @orderly.network/types \
            @orderly.network/wallet-connector

Full DEX with All Features

包含全部功能的完整DEX

bash

npm install @orderly.network/react-app \
            @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/vaults \
            @orderly.network/affiliate \
            @orderly.network/trading-leaderboard \
            @orderly.network/wallet-connector \
            @orderly.network/i18n \
            @orderly.network/ui

bash

npm install @orderly.network/react-app \
            @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/vaults \
            @orderly.network/affiliate \
            @orderly.network/trading-leaderboard \
            @orderly.network/wallet-connector \
            @orderly.network/i18n \
            @orderly.network/ui

Custom UI with Scaffold Layout

带框架布局的自定义UI

bash

npm install @orderly.network/react-app \
            @orderly.network/hooks \
            @orderly.network/ui \
            @orderly.network/ui-scaffold \
            @orderly.network/ui-order-entry \
            @orderly.network/ui-positions \
            @orderly.network/wallet-connector

bash

npm install @orderly.network/react-app \
            @orderly.network/hooks \
            @orderly.network/ui \
            @orderly.network/ui-scaffold \
            @orderly.network/ui-order-entry \
            @orderly.network/ui-positions \
            @orderly.network/wallet-connector

Privy (Social Login) Setup

Privy（社交登录）配置

bash

npm install @orderly.network/react-app \
            @orderly.network/trading \
            @orderly.network/wallet-connector-privy \
            @privy-io/react-auth

bash

npm install @orderly.network/react-app \
            @orderly.network/trading \
            @orderly.network/wallet-connector-privy \
            @privy-io/react-auth

Peer Dependencies

对等依赖

All packages require:

json

{
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18"
  }
}

所有包均要求：

json

{
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18"
  }
}

Tailwind CSS Setup

Tailwind CSS配置

The UI packages require Tailwind CSS with the Orderly preset:

bash

npm install -D tailwindcss postcss autoprefixer

tailwind.config.ts:

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

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@orderly.network/**/*.{js,mjs}'],
  presets: [OUITailwind.preset],
};

CSS entry file:

Important: Only
@orderly.network/ui
has a CSS file. Other packages (
trading
,
portfolio
,
markets
) do NOT have separate CSS files—they use the base UI styles.

css

/* Only import from @orderly.network/ui - other packages don't have CSS files */
@import '@orderly.network/ui/dist/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

UI包需要搭配Tailwind CSS及Orderly预设使用：

bash

npm install -D tailwindcss postcss autoprefixer

tailwind.config.ts：

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

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@orderly.network/**/*.{js,mjs}'],
  presets: [OUITailwind.preset],
};

CSS入口文件：

重要提示：仅
@orderly.network/ui
包含CSS文件。其他包（
trading
、
portfolio
、
markets
）没有独立的CSS文件——它们依赖基础UI样式。

css

/* 仅从@orderly.network/ui导入样式——其他包无CSS文件 */
@import '@orderly.network/ui/dist/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Vite Polyfills (Required)

Vite Polyfills（必需）

The wallet connector packages use Node.js built-ins like

Buffer

. You must add polyfills for browser compatibility:

bash

npm install -D vite-plugin-node-polyfills

vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream', 'util'],
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
    }),
  ],
});

钱包连接器包使用了

Buffer

等Node.js内置模块。你必须添加polyfills以保证浏览器兼容性：

bash

npm install -D vite-plugin-node-polyfills

vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream', 'util'],
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
    }),
  ],
});

Version Compatibility

版本兼容性

All

@orderly.network/*

packages should use the same version to ensure compatibility.

json

{
  "dependencies": {
    "@orderly.network/react-app": "^2.8.0",
    "@orderly.network/trading": "^2.8.0",
    "@orderly.network/hooks": "^2.8.0",
    "@orderly.network/ui": "^2.8.0"
  }
}

所有

@orderly.network/*

包应使用相同版本以确保兼容性。

json

{
  "dependencies": {
    "@orderly.network/react-app": "^2.8.0",
    "@orderly.network/trading": "^2.8.0",
    "@orderly.network/hooks": "^2.8.0",
    "@orderly.network/ui": "^2.8.0"
  }
}

Package Manager Commands

包管理器命令

npm:

bash

npm install <package-name>

yarn:

bash

yarn add <package-name>

pnpm:

bash

pnpm add <package-name>

npm：

bash

npm install <package-name>

yarn：

bash

yarn add <package-name>

pnpm：

bash

pnpm add <package-name>

orderly-sdk-install-dependency

Original

Translation

Orderly Network: SDK Install Dependency

Orderly Network：SDK依赖安装

When to Use

适用场景

Prerequisites

前置要求

Quick Start (Full DEX)

快速上手（完整DEX）

Orderly SDK packages

Orderly SDK包

REQUIRED: EVM wallet support (MetaMask, WalletConnect, etc.)

必需：EVM钱包支持（MetaMask、WalletConnect等）

REQUIRED: Solana wallet support (Phantom, Solflare, etc.)

必需：Solana钱包支持（Phantom、Solflare等）

Package Reference

包参考

Core Packages

核心包

Feature Widgets (High-Level Pages)

功能组件（高阶页面）

Wallet Connectors

钱包连接器

Main connector package

主连接器包

Optional: EVM wallet packages (for custom WalletConnect, etc.)

可选：EVM钱包包（用于自定义WalletConnect等）

Optional: Solana wallet packages (for custom Solana wallet config)

可选：Solana钱包包（用于自定义Solana钱包配置）

UI Sub-Packages (Granular Components)

UI子包（细粒度组件）

Low-Level Packages

底层包

Installation by Use Case

按使用场景安装

Minimal Setup (Hooks Only)

最小配置（仅Hooks）

Full DEX with All Features

包含全部功能的完整DEX

Custom UI with Scaffold Layout

带框架布局的自定义UI

Privy (Social Login) Setup

Privy（社交登录）配置

Peer Dependencies

对等依赖

Tailwind CSS Setup

Tailwind CSS配置

Vite Polyfills (Required)

Vite Polyfills（必需）

Version Compatibility

版本兼容性

Package Manager Commands

包管理器命令

Related Skills

相关指南