orderly-sdk-install-dependency

Name: orderly-sdk-install-dependency
Author: orderlynetwork

github.com/orderlynetwork开发249 次安装4 天前更新

代码仓库

关于 orderly-sdk-install-dependency

面向 React 开发者的 Orderly SDK 安装指南，介绍按需选择模块化包，并根据 DEX、钱包连接或自定义界面等用途组织依赖。

主要功能

01模块化 Orderly 包目录
02交易与投资组合页面组件
03EVM、Solana 与 Privy 钱包连接
04UI 子包及底层包选择
05按集成场景安装依赖
06版本与 Vite 配置说明

适用场景

01为新 DEX 项目安装 SDK
02向现有 React 项目添加 Orderly
03为自定义界面选择 hooks 与 UI 包
04配置标准钱包或 Privy 登录

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/orderlynetwork/skills --skill orderly-sdk-install-dependency

安装后在 Claude Code 中输入/orderly-sdk-install-dependency确认已加载。

详细介绍

Orderly Network：SDK 安装依赖

使用此技能将 Orderly SDK 软件包添加到项目中。SDK 采用模块化设计，只安装所需的软件包即可。以下版本对应当前的 3.1.x 系列。

适用场景

开始开发新的 DEX 项目
将 Orderly SDK 添加到现有项目
安装特定软件包以进行自定义集成
设置钱包连接器

前提条件

已安装 Node.js 20+（由 package.json 中的 engines 强制要求）
npm、yarn 或 pnpm 包管理器
React 18+ 项目（用于 UI 软件包）

快速开始（完整 DEX）

IMPORTANT：一个功能完整的 DEX 需要同时具备 Orderly 软件包和钱包连接器依赖项。@orderly.network/wallet-connector 需要用于 EVM 钱包的 @web3-onboard/* 软件包，以及用于 Solana 钱包的 @solana/wallet-adapter-* 软件包。<WalletConnectorProvider> 需要传入已配置的 evmInitial / solanaInitial 属性——在实际的 DEX 中，这些属性不是可选的（参见 orderly-sdk-wallet-connection）。

Note：@orderly.network/hooks 是 @orderly.network/react-app 的传递依赖——除非采用仅使用 hooks 的集成方式，否则无需单独安装。

# Orderly SDK packages (all pinned to the same 3.1.x release)
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, Binance, etc.)
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect \
            @binance/w3w-blocknative-connector wagmi

# REQUIRED: Solana wallet support (Phantom, Solflare, mobile, etc.)
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets \
            @solana-mobile/wallet-adapter-mobile

软件包参考

核心软件包

软件包	描述	主要导出
`@orderly.network/react-app`	主应用程序提供方、配置上下文	`OrderlyAppProvider`、`useAppContext`、`useAppConfig`
`@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`、`useScreen`、`Flex`、`cn`
`@orderly.network/i18n`	国际化（i18n）支持	`LocaleProvider`、`useTranslation`、`i18n`、`defaultLanguages`
`@orderly.network/utils`	实用函数（格式化、数学运算、日期）	`formatNumber`、`Decimal`、`dayjs`

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

功能组件（高级页面）

功能完整、预构建的页面组件。以下导出项是参考模板实际导入的名称——请特别留意 Dashboard.DashboardPage、GeneralLeaderboardWidget 和 PointSystemPage。

Package	描述	关键导出项（已验证）
`@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`	Vault/Earn 产品页面	`VaultsPage`
`@orderly.network/affiliate`	推荐/联盟计划	`Dashboard`（使用 `Dashboard.DashboardPage`）、`ReferralProvider`
`@orderly.network/trading-leaderboard`	交易竞赛排行榜	`GeneralLeaderboardWidget`
`@orderly.network/trading-points`	积分/奖励计划页面	`PointSystemPage`

npm install @orderly.network/trading @orderly.network/portfolio @orderly.network/markets @orderly.network/trading-leaderboard @orderly.network/trading-points @orderly.network/affiliate @orderly.network/vaults

不存在 @orderly.network/trading-rewards 这个包。积分/奖励页面位于 @orderly.network/trading-points，导出项为 PointSystemPage。同样，@orderly.network/affiliate 不导出 AffiliatePage——请在 <ReferralProvider> 内使用 Dashboard.DashboardPage。

钱包连接器

选择一种钱包连接策略。

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

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

支持 EVM（MetaMask、WalletConnect、Binance 等）和 Solana（Phantom、Solflare、Ledger、移动端）。

该连接器需要底层钱包包——你需要构建 evmInitial（注入式 + WalletConnect 连接器）和 solanaInitial（网络 + 钱包列表），并将两者作为 props 传入。完整的 walletConfig.ts 请参阅 orderly-sdk-wallet-connection。

npm install @orderly.network/wallet-connector

# EVM wallets
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect \
            @binance/w3w-blocknative-connector wagmi

# Solana wallets
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets \
            @solana-mobile/wallet-adapter-mobile

选项 B：Privy 连接器

适用于社交登录（Google、X、电子邮件、通行密钥）和嵌入式钱包。

Privy 包依赖 @privy-io/cross-app-connect（而不是较旧的 @privy-io/react-auth）。

npm install @orderly.network/wallet-connector-privy @privy-io/cross-app-connect

UI 子包（细粒度组件）

用于自定义集成的独立 UI 模块。这些模块是 @orderly.network/trading 和 @orderly.network/portfolio 的依赖项，但也可以单独安装。在参考模板中，这些模块通过 @orderly.network/ui 和 @orderly.network/ui-scaffold 重新导出后使用，而非直接导入。

Package	Description	Key Exports
`@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`	盈亏分享卡片生成器	`SharePnL`
`@orderly.network/ui-chain-selector`	链/网络选择下拉菜单	`ChainSelector`
`@orderly.network/ui-connector`	钱包连接按钮和弹窗	`ConnectWalletButton`
`@orderly.network/ui-tradingview`	TradingView 图表封装	`TradingViewChart`
`@orderly.network/ui-notification`	通知中心	`NotificationWidget`

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

底层软件包

适用于高级自定义或非 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`

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

按使用场景安装

最小配置（仅 Hooks）

使用 Hooks 构建完全自定义的 UI。

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/trading-points \
            @orderly.network/wallet-connector \
            @orderly.network/wallet-connector-privy \
            @orderly.network/i18n \
            @orderly.network/types \
            @orderly.network/ui \
            @orderly.network/ui-scaffold

参考模板还引入了 woofi-swap-widget-kit（用于兑换页面）、wagmi、react-helmet-async（SEO）、react-router-dom（v7，路由）、firebase、zod、ip-range-check 和 @plausible-analytics/tracker。仅当构建中使用这些功能时才添加它们。

Privy（社交登录）配置

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

对等依赖

所有软件包都需要：

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

Tailwind CSS 配置

UI 软件包需要 Tailwind CSS。没有 Orderly 预设——将 content glob 指向 app/（源代码根目录）和 @orderly.network 软件包。

npm install -D tailwindcss postcss autoprefixer

tailwind.config.ts：

import type { Config } from 'tailwindcss';

export default {
  content: ['./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}'],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

CSS 入口文件：

只有 @orderly.network/ui 附带 CSS 文件。trading、portfolio、markets 等会复用这些基础样式——请勿查找每个软件包各自的 CSS。

/* app/styles/index.css */
@import '@orderly.network/ui/dist/styles.css';

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

Vite 插件（必需）

钱包连接器/Solana 软件包使用 Node.js 内置模块（Buffer、crypto、stream），部分软件包还包含 CommonJS。仅对 buffer、crypto、stream 添加 Polyfill——不要添加 util 或 globals（它们会导致构建失败）。使用 vite-plugin-cjs-interop 处理 CommonJS 依赖的互操作。路径别名通过 vite-tsconfig-paths 从 tsconfig.json 加载。

npm install -D vite-plugin-node-polyfills vite-plugin-cjs-interop vite-tsconfig-paths

vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { cjsInterop } from 'vite-plugin-cjs-interop';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
    cjsInterop({ dependencies: ['bs58', '@coral-xyz/anchor', 'lodash'] }),
    nodePolyfills({ include: ['buffer', 'crypto', 'stream'] }), // NO util, NO globals
  ],
});

版本兼容性

所有 @orderly.network/* 软件包必须使用相同版本。例外是 @orderly.network/trading-points，它遵循自己的版本序列。当前参考版本：

{
  "dependencies": {
    "@orderly.network/react-app": "3.1.6",
    "@orderly.network/trading": "3.1.6",
    "@orderly.network/portfolio": "3.1.6",
    "@orderly.network/hooks": "3.1.6",
    "@orderly.network/ui": "3.1.6",
    "@orderly.network/trading-points": "2.0.2"
  }
}

软件包管理器命令

npm：

npm install <package-name>

yarn：

yarn add <package-name>

pnpm：

pnpm add <package-name>

基本信息

作者: orderlynetwork
仓库: orderlynetwork/skills
分类: 开发
安装次数: 49
GitHub Stars: 2

报告问题

orderly-sdk-install-dependency

关于 orderly-sdk-install-dependency

主要功能

适用场景

安装

详细介绍

Orderly Network：SDK 安装依赖

适用场景

前提条件

快速开始（完整 DEX）

软件包参考

核心软件包

功能组件（高级页面）

钱包连接器

UI 子包（细粒度组件）

底层软件包

按使用场景安装

最小配置（仅 Hooks）

包含所有功能的完整 DEX

Privy（社交登录）配置

对等依赖

Tailwind CSS 配置

Vite 插件（必需）

版本兼容性

软件包管理器命令

相关技能

评论