Install Orderly SDK packages and related dependencies (hooks, UI, features, wallet connectors) using the preferred package manager.
Use this skill to add Orderly SDK packages to your project. The SDK is modular—install only what you need.
IMPORTANT: A functional DEX requires BOTH the Orderly packages AND the wallet connector dependencies. The
@orderly.network/wallet-connectorpackage needs@web3-onboard/*packages for EVM wallets and@solana/wallet-adapter-*packages for Solana wallets.
# Orderly SDK packages
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.)
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect
# REQUIRED: Solana wallet support (Phantom, Solflare, etc.)
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets
| 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 |
npm install @orderly.network/react-app @orderly.network/hooks @orderly.network/types @orderly.network/ui @orderly.network/i18n
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 |
npm install @orderly.network/trading @orderly.network/portfolio @orderly.network/markets
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).
CRITICAL: You MUST install the underlying wallet libraries. The
@orderly.network/wallet-connectorpackage is just a wrapper—it requires the actual wallet packages to function.
# Main connector package
npm install @orderly.network/wallet-connector
# REQUIRED: EVM wallet packages (for MetaMask, Coinbase, WalletConnect, etc.)
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect
# REQUIRED: Solana wallet packages (for Phantom, Solflare, etc.)
npm install @solana/wallet-adapter-base @solana/wallet-adapter-wallets
Option B: Privy Connector
For social login (Google, email, etc.) and embedded wallets.
npm install @orderly.network/wallet-connector-privy @privy-io/react-auth
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 |
npm install @orderly.network/ui-scaffold @orderly.network/ui-order-entry
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 |
npm install @orderly.network/core @orderly.network/perp
For building fully custom UI with hooks.
npm install @orderly.network/react-app \
@orderly.network/hooks \
@orderly.network/types \
@orderly.network/wallet-connector
npm install @orderly.network/react-app \
@orderly.network/trading \
@orderly.network/portfolio \
@orderly.network/markets \
@orderly.network/affiliate \
@orderly.network/trading-leaderboard \
@orderly.network/trading-rewards \
@orderly.network/wallet-connector \
@orderly.network/i18n \
@orderly.network/ui \
@orderly.network/ui-scaffold \
@orderly.network/types \
react-router \
vite-plugin-node-polyfills
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
npm install @orderly.network/react-app \
@orderly.network/trading \
@orderly.network/wallet-connector-privy \
@privy-io/react-auth
All packages require:
{
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
}
The UI packages require Tailwind CSS with the Orderly preset:
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/uihas a CSS file. Other packages (trading,portfolio,markets) do NOT have separate CSS files—they use the base UI styles.
/* 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;
The wallet connector packages use Node.js built-ins like Buffer. You must add polyfills for browser compatibility:
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,
},
}),
],
});
All @orderly.network/* packages should use the same version to ensure compatibility.
{
"dependencies": {
"@orderly.network/react-app": "^2.9.1",
"@orderly.network/trading": "^2.9.1",
"@orderly.network/hooks": "^2.9.1",
"@orderly.network/ui": "^2.9.1"
}
}
npm:
npm install <package-name>
yarn:
yarn add <package-name>
pnpm:
pnpm add <package-name>