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

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.

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

Wallet Connectors

Choose one wallet connection strategy.

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.

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

Low-Level Packages

For advanced customization or non-React environments.

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