Orderly Network：SDK 安装依赖

使用此技能将 Orderly SDK 包添加至您的项目中。SDK 采用模块化设计——仅安装您实际需要的部分。

适用场景

• 启动全新的 DEX 项目
• 向现有项目中集成 Orderly SDK
• 为定制化集成安装特定包
• 配置钱包连接器（wallet connectors）

前置条件

• 已安装 Node.js 18+
• 已安装 npm、yarn 或 pnpm 包管理器
• React 18+ 项目（如需使用 UI 相关包）

快速开始（完整 DEX）

重要提示：一个可正常运行的 DEX 必须同时安装 Orderly 的核心 SDK 包 以及 钱包连接器依赖。其中 @orderly.network/wallet-connector 包依赖于：@web3-onboard/*（用于 EVM 钱包，如 MetaMask、WalletConnect 等）和 @solana/wallet-adapter-*（用于 Solana 钱包，如 Phantom、Solflare 等）。

注意：@orderly.network/hooks 已作为 @orderly.network/react-app 的传递依赖被自动引入——在绝大多数 DEX 项目中无需单独安装。仅当您采用“仅 hooks”的集成路径（即不使用 react-app）时，才需显式安装该包。

# Orderly SDK 核心包
npm install @orderly.network/react-app 
            @orderly.network/trading 
            @orderly.network/portfolio 
            @orderly.network/markets 
            @orderly.network/wallet-connector 
            @orderly.network/i18n

# 必需：EVM 钱包支持（MetaMask、WalletConnect 等）
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect

# 必需：Solana 钱包支持（Phantom、Solflare 等）
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets

包参考说明

核心包

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

功能组件（高级页面级组件）

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

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

钱包连接器

请选择 一种 钱包连接策略。

选项 A：标准钱包连接器（推荐）

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

注意：@orderly.network/wallet-connector 提供开箱即用的合理默认配置。底层钱包包（@web3-onboard/*、@solana/wallet-adapter-*）为可选安装项，仅在需自定义钱包配置时（例如为 WalletConnect 指定 project ID）才需额外安装。官方模板均直接使用 ，不传任何 props，且不引入额外钱包包。

# 主连接器包
npm install @orderly.network/wallet-connector

# 可选：EVM 钱包包（用于自定义 WalletConnect 等场景）
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect

# 可选：Solana 钱包包（用于自定义 Solana 钱包配置）
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets

选项 B：Privy 连接器

适用于社交登录（Google、邮箱等）及嵌入式钱包场景。

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

UI 子包（细粒度组件）

面向定制化集成的独立 UI 模块。这些包是 @orderly.network/trading 和 @orderly.network/portfolio 的依赖项，但也可单独安装。

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

低层级包

适用于深度定制或非 React 环境。

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

按使用场景安装

最小化配置（仅 Hooks）

适用于完全自定义 UI 并基于 Hooks 构建的场景。

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

全功能 DEX（含全部特性）

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

带脚手架布局的自定义 UI

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（社交登录）配置

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

对等依赖（Peer Dependencies）

所有包均要求以下对等依赖：

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

Tailwind CSS 配置

UI 包依赖 Tailwind CSS，并需加载 Orderly 预设：

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 文件，它们复用 @orderly.network/ui 提供的基础样式。

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

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

Vite Polyfills（必需）

钱包连接器包使用了 Node.js 内置模块（如 Buffer）。为确保浏览器兼容性，必须添加 polyfill：

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,
      },
    }),
  ],
});

版本兼容性

所有 @orderly.network/* 包应使用相同版本，以确保兼容性。

{
  "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"
  }
}

包管理器命令

npm：

npm install 

yarn：

yarn add 

pnpm：

pnpm add 

相关技能

• orderly-sdk-dex-architecture — 项目结构与 Provider 初始化
• orderly-sdk-wallet-connection — 钱包集成细节
• orderly-sdk-page-components — 使用预构建页面组件
• orderly-sdk-trading-workflows — 端到端交易流程实现
• orderly-sdk-theming — 自定义 UI 外观