Orderly Network: SDK Install Dependency
Use this skill to add Orderly SDK packages to your project. The SDK is modular—install only what you need.
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
Prerequisites
- - Node.js 18+ installed
- npm, yarn, or pnpm package manager
- React 18+ project (for UI packages)
Quick Start (Full 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.
CODEBLOCK0
Package Reference
Core Packages
| Package | Description | Key Exports |
|---|
| INLINECODE6 | Main app provider, config context, error boundary | INLINECODE7 , useAppContext, useAppConfig, INLINECODE10 |
| INLINECODE11 |
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 |
CODEBLOCK1
Feature Widgets (High-Level Pages)
Complete, pre-built page components with full functionality.
| Package | Description | Key Exports |
|---|
| INLINECODE48 | Full trading page (chart, orderbook, order entry, positions) | INLINECODE49 , OrderBook, LastTrades, AssetView, RiskRate, INLINECODE54 |
| INLINECODE55 |
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 |
CODEBLOCK2
Wallet Connectors
Choose one wallet connection strategy.
| Package | Description | Key Exports |
|---|
| INLINECODE79 | Standard connector (Web3-Onboard + Solana adapters) | INLINECODE80 |
| INLINECODE81 |
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.
CODEBLOCK3
Option B: Privy Connector
For social login (Google, email, etc.) and embedded wallets.
CODEBLOCK4
UI Sub-Packages (Granular Components)
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 |
|---|
| INLINECODE89 | App layout scaffold, navigation, account menu | INLINECODE90 , MainNavWidget, BottomNavWidget, AccountMenuWidget, ChainMenuWidget, INLINECODE95 |
| INLINECODE96 |
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 |
CODEBLOCK5
Low-Level Packages
For advanced customization or non-React environments.
| Package | Description | Key Exports |
|---|
| INLINECODE119 | Low-level API client, signing, key management | INLINECODE120 , ConfigStore, WalletAdapter, INLINECODE123 |
| INLINECODE124 |
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 |
CODEBLOCK6
Installation by Use Case
Minimal Setup (Hooks Only)
For building fully custom UI with hooks.
CODEBLOCK7
Full DEX with All Features
CODEBLOCK8
Custom UI with Scaffold Layout
CODEBLOCK9
Privy (Social Login) Setup
CODEBLOCK10
Peer Dependencies
All packages require:
CODEBLOCK11
Tailwind CSS Setup
The UI packages require Tailwind CSS with the Orderly preset:
CODEBLOCK12
tailwind.config.ts:
CODEBLOCK13
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.
CODEBLOCK14
Vite Polyfills (Required)
The wallet connector packages use Node.js built-ins like Buffer. You must add polyfills for browser compatibility:
CODEBLOCK15
vite.config.ts:
CODEBLOCK16
Version Compatibility
All @orderly.network/* packages should use the same version to ensure compatibility.
CODEBLOCK17
Package Manager Commands
npm:
CODEBLOCK18
yarn:
CODEBLOCK19
pnpm:
CODEBLOCK20
Related Skills
- - orderly-sdk-dex-architecture - Project structure and provider setup
- orderly-sdk-wallet-connection - Wallet integration details
- orderly-sdk-page-components - Using pre-built page components
- orderly-sdk-trading-workflows - End-to-end trading implementation
- orderly-sdk-theming - Customizing the UI appearance
Orderly Network: SDK 安装依赖
使用此技能将 Orderly SDK 包添加到您的项目中。SDK 是模块化的——只安装您需要的部分。
何时使用
- - 启动新的 DEX 项目
- 向现有项目添加 Orderly SDK
- 为自定义集成安装特定包
- 设置钱包连接器
前提条件
- - 已安装 Node.js 18+
- npm、yarn 或 pnpm 包管理器
- React 18+ 项目（用于 UI 包）
快速开始（完整 DEX）
重要提示：一个功能完整的 DEX 需要同时安装 Orderly 包和钱包连接器依赖。@orderly.network/wallet-connector 包需要 @web3-onboard/ 包用于 EVM 钱包，以及 @solana/wallet-adapter- 包用于 Solana 钱包。
注意：@orderly.network/hooks 作为 @orderly.network/react-app 的传递依赖包含在内——对于大多数 DEX 项目，您无需单独安装。仅当您使用仅 hooks 集成路径而不使用 react-app 时才需要直接安装。
bash
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
包参考
核心包
| 包 | 描述 | 关键导出 |
|---|
| @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
功能组件（高级页面）
完整、预构建的页面组件，具有完整功能。
| 包 | 描述 | 关键导出 |
|---|
| @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
钱包连接器
选择 一种 钱包连接策略。
| 包 | 描述 | 关键导出 |
|---|
| @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）。官方模板使用不带 props 和额外钱包包的 。
bash
主连接器包
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、电子邮件等）和嵌入式钱包。
bash
npm install @orderly.network/wallet-connector-privy @privy-io/react-auth
UI 子包（细粒度组件）
用于自定义集成的独立 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 | 盈亏分享卡片生成器 | SharePnL |
| @orderly.network/ui-chain-selector | 链/网络选择器下拉菜单 |
