Orderly Sdk Install Dependency

Install Orderly SDK packages and related dependencies (hooks, UI, features, wallet connectors) using the preferred package manager.

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.

# 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 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

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

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.

# Main connector package
npm install @orderly.network/wallet-connector

# Optional: EVM wallet packages (for custom WalletConnect, etc.)
npm install @web3-onboard/injected-wallets @web3-onboard/walletconnect

# Optional: Solana wallet packages (for custom Solana wallet config)
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

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
@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

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

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

Installation by Use Case

Minimal Setup (Hooks Only)

For building fully custom UI with hooks.

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

Full DEX with All Features

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

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

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

Peer Dependencies

All packages require:

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

Tailwind CSS Setup

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/ui has 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;

Vite Polyfills (Required)

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

Version Compatibility

All @orderly.network/* packages should use the same version to ensure compatibility.

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

npm install <package-name>

yarn:

yarn add <package-name>

pnpm:

pnpm add <package-name>

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