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. Versions below reflect the current 3.1.x line.

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 20+ installed (enforced in package.json engines)
• 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. @orderly.network/wallet-connector needs @web3-onboard/ packages for EVM wallets and @solana/wallet-adapter- packages for Solana wallets. <WalletConnectorProvider> takes configured evmInitial / solanaInitial props — they are not optional in a real DEX (see orderly-sdk-wallet-connection).

Note: @orderly.network/hooks is a transitive dependency of @orderly.network/react-app — you do not need to install it separately unless you are on the hooks-only integration path.

# 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

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. Exports below are the real names imported by the reference template — note Dashboard.DashboardPage, GeneralLeaderboardWidget, and PointSystemPage specifically.

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

There is no @orderly.network/trading-rewards package. The points/rewards page is @orderly.network/trading-points exporting PointSystemPage. Likewise @orderly.network/affiliate does not export AffiliatePage — use Dashboard.DashboardPage inside <ReferralProvider>.

Wallet Connectors

Choose one wallet connection strategy.

Option A: Standard Wallet Connector (Recommended)

Supports EVM (MetaMask, WalletConnect, Binance, etc.) and Solana (Phantom, Solflare, Ledger, mobile).

The connector requires the underlying wallet packages — you build evmInitial (injected + WalletConnect connectors) and solanaInitial (network + wallet list) and pass both as props. See orderly-sdk-wallet-connection for the full walletConfig.ts.

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

Option B: Privy Connector

For social login (Google, X, email, passkey) and embedded wallets.

The Privy package depends on @privy-io/cross-app-connect (NOT the older @privy-io/react-auth).

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

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. In the reference template, these are consumed via @orderly.network/ui and @orderly.network/ui-scaffold re-exports rather than imported directly.

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

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

Mirrors the reference template's dependencies:

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

The reference template also pulls in woofi-swap-widget-kit (for the swap page), wagmi, react-helmet-async (SEO), react-router-dom (v7, routing), firebase, zod, ip-range-check, and @plausible-analytics/tracker. Add these only if your build uses those features.

Privy (Social Login) Setup

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

Peer Dependencies

All packages require:

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

Tailwind CSS Setup

The UI packages require Tailwind CSS. There is no Orderly preset — point the content glob at app/ (the source root) and the @orderly.network packages.

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 entry file:

Only @orderly.network/ui ships a CSS file. trading, portfolio, markets, etc. reuse these base styles — do not look for per-package CSS.

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

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

Vite Plugins (Required)

The wallet connector / Solana packages use Node.js built-ins (Buffer, crypto, stream) and some ship CommonJS. Polyfill only buffer, crypto, stream — do not add util or globals (they break the build). Interop CommonJS deps with vite-plugin-cjs-interop. Path aliases come from tsconfig.json via vite-tsconfig-paths.

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

Version Compatibility

All @orderly.network/* packages must share the same version. The exception is @orderly.network/trading-points, which follows its own version line. Current reference versions:

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

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