orderly-sdk-install-dependency

Orderly Network：SDK のインストールと依存関係

このスキルを使用して、Orderly SDK パッケージをプロジェクトに追加します。SDK はモジュール式のため、必要なものだけをインストールしてください。以下のバージョンは、現在の 3.1.x 系のものです。

使用する場面

• 新しい DEX プロジェクトを開始するとき
• 既存のプロジェクトに Orderly SDK を追加するとき
• カスタム統合用に特定のパッケージをインストールするとき
• ウォレットコネクターをセットアップするとき

前提条件

• Node.js 20+ がインストールされていること（package.json の engines で必須）
• npm、yarn、または pnpm パッケージマネージャー
• React 18+ プロジェクト（UI パッケージ用）

クイックスタート（DEX 全体）

IMPORTANT：機能する DEX には、Orderly パッケージとウォレットコネクターの依存関係の両方が必要です。@orderly.network/wallet-connector では、EVM ウォレットに @web3-onboard/* パッケージ、Solana ウォレットに @solana/wallet-adapter-* パッケージが必要です。実際の DEX では、<WalletConnectorProvider> に設定済みの evmInitial / solanaInitial プロパティを渡す必要があります。これらは省略できません（orderly-sdk-wallet-connection を参照）。

注：@orderly.network/hooks は @orderly.network/react-app の推移的依存関係です。hooks のみを使用する統合パスの場合を除き、個別にインストールする必要はありません。

# 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

パッケージリファレンス

コアパッケージ

パッケージ	説明	主なエクスポート
@orderly.network/react-app	メインアプリプロバイダー、設定コンテキスト	OrderlyAppProvider、useAppContext、useAppConfig
@orderly.network/hooks	取引、アカウント、注文、ポジション用の React フック	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、useScreen、Flex、cn
@orderly.network/i18n	国際化（i18n）サポート	LocaleProvider、useTranslation、i18n、defaultLanguages
@orderly.network/utils	ユーティリティ関数（書式設定、数学、日付）	formatNumber、Decimal、dayjs

npm install @orderly.network/react-app @orderly.network/hooks @orderly.network/types @orderly.network/ui @orderly.network/i18n

機能ウィジェット（高レベルページ）

完全な機能を備えた、すぐに使えるページコンポーネントです。以下のエクスポートは、リファレンステンプレートで実際にインポートされる名前です。特に Dashboard.DashboardPage、GeneralLeaderboardWidget、PointSystemPage にご注意ください。

パッケージ	説明	主なエクスポート（検証済み）
@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	Vault／Earn 商品ページ	VaultsPage
@orderly.network/affiliate	紹介／アフィリエイトプログラム	Dashboard（Dashboard.DashboardPage を使用）、ReferralProvider
@orderly.network/trading-leaderboard	取引コンペティションのランキング	GeneralLeaderboardWidget
@orderly.network/trading-points	ポイント／特典プログラムページ	PointSystemPage

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

@orderly.network/trading-rewards パッケージはありません。ポイント／報酬ページは PointSystemPage をエクスポートする @orderly.network/trading-points です。同様に、@orderly.network/affiliate は AffiliatePage をエクスポートしません。<ReferralProvider> 内で Dashboard.DashboardPage を使用してください。

ウォレットコネクター

ウォレット接続方式を1つ選択してください。

パッケージ	説明	主なエクスポート
@orderly.network/wallet-connector	標準コネクター（Web3-Onboard + Solana アダプター）	WalletConnectorProvider
@orderly.network/wallet-connector-privy	Privy コネクター（ソーシャルログイン、埋め込みウォレット）	WalletConnectorPrivyProvider

オプション A：標準ウォレットコネクター（推奨）

EVM（MetaMask、WalletConnect、Binance など）と Solana（Phantom、Solflare、Ledger、モバイル）に対応しています。

このコネクターには、基盤となるウォレットパッケージが必要です。evmInitial（インジェクション + WalletConnect コネクター）と solanaInitial（ネットワーク + ウォレットリスト）を作成し、両方をプロパティとして渡してください。walletConfig.ts の全体については orderly-sdk-wallet-connection を参照してください。

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

オプション B：Privy コネクター

ソーシャルログイン（Google、X、メール、パスキー）と埋め込みウォレットに対応しています。

Privy パッケージは @privy-io/cross-app-connect に依存しています（以前の @privy-io/react-auth ではありません）。

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

UI サブパッケージ（細分化されたコンポーネント）

カスタム統合向けの個別 UI モジュールです。これらは @orderly.network/trading と @orderly.network/portfolio の依存関係ですが、個別にインストールできます。リファレンステンプレートでは、直接インポートするのではなく、@orderly.network/ui と @orderly.network/ui-scaffold の再エクスポートを通じて利用します。

パッケージ	説明	主なエクスポート
@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	チェーン／ネットワーク選択ドロップダウン	ChainSelector
@orderly.network/ui-connector	ウォレット接続ボタンとモーダル	ConnectWalletButton
@orderly.network/ui-tradingview	TradingView チャートラッパー	TradingViewChart
@orderly.network/ui-notification	通知センター	NotificationWidget

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

低レベルパッケージ

高度なカスタマイズや React 以外の環境向けです。

パッケージ	説明	主なエクスポート
@orderly.network/core	低レベル API クライアント、署名、キー管理	Account、ConfigStore、WalletAdapter、signMessage
@orderly.network/perp	無期限取引の計算（証拠金、清算）	calcMargin、calcLiqPrice、calcPnL、calcIMR、calcMMR
@orderly.network/net	ネットワーク／WebSocket レイヤー	WebSocketClient、EventEmitter
@orderly.network/default-evm-adapter	デフォルトの EVM ウォレットアダプター	EVMAdapter
@orderly.network/default-solana-adapter	デフォルトの Solana ウォレットアダプター	SolanaAdapter

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

ユースケース別のインストール

最小構成（フックのみ）

フックを使って、完全にカスタムの UI を構築する場合に使用します。

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

すべての機能を備えたフル DEX

リファレンステンプレートの依存関係を再現します。

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

リファレンステンプレートには、woofi-swap-widget-kit（スワップページ用）、wagmi、react-helmet-async（SEO）、react-router-dom（v7、ルーティング）、firebase、zod、ip-range-check、@plausible-analytics/tracker も含まれています。これらの機能をビルドで使用する場合にのみ追加してください。

Privy（ソーシャルログイン）のセットアップ

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

ピア依存関係

すべてのパッケージで必要です。

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

Tailwind CSS のセットアップ

UI パッケージには Tailwind CSS が必要です。Orderly プリセットはありません。コンテンツの glob を app/（ソースルート）と @orderly.network パッケージに指定してください。

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 エントリーファイル：

CSS ファイルを同梱しているのは @orderly.network/ui だけです。trading、portfolio、markets などはこれらの基本スタイルを再利用するため、パッケージごとの CSS を探す必要はありません。

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

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

Vite プラグイン（必須）

ウォレットコネクター／Solana パッケージでは Node.js の組み込み機能（Buffer、crypto、stream）を使用しており、一部は CommonJS を同梱しています。ポリフィルは buffer、crypto、stream のみにしてください。util や globals は追加しないでください（ビルドが失敗します）。CommonJS の依存関係には vite-plugin-cjs-interop を使用してください。パスエイリアスは vite-tsconfig-paths を介して tsconfig.json から取得します。

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

バージョンの互換性

すべての @orderly.network/* パッケージは同じバージョンにする必要があります。例外は @orderly.network/trading-points で、独自のバージョン系列に従います。現在のリファレンスバージョン：

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

パッケージマネージャーのコマンド

npm：

npm install <package-name>

yarn：

yarn add <package-name>

pnpm：

pnpm add <package-name>

関連スキル

• orderly-sdk-dex-architecture - プロジェクト構成とプロバイダーのセットアップ
• orderly-sdk-wallet-connection - ウォレット統合の詳細
• orderly-sdk-page-components - 事前構築済みページコンポーネントの使用方法
• orderly-sdk-trading-workflows - エンドツーエンドの取引実装
• orderly-sdk-theming - UI の外観のカスタマイズ