orderly-ui-components

Orderly Network：UI コンポーネント

Orderly のビルド済み React コンポーネントを使って、取引インターフェースを構築できます。SDK には、基本コンポーネントライブラリ（@orderly.network/ui）、細分化された取引ウィジェット（ui-order-entry、ui-positions、…）、高機能なページ（trading、portfolio、markets）、アプリのスキャフォールド（ui-scaffold）が含まれています。

インポート先が重要です。 コンポーネントは特定のパッケージにあります。すべてを @orderly.network/react からインポートしないでください（このパッケージは存在しません）。プロバイダーには @orderly.network/react-app、基本コンポーネントには @orderly.network/ui、ページレベルのウィジェットには機能別パッケージを使用してください。以下のパッケージ表を参照してください。

使用する場面

• 取引 UI をすばやく構築する
• スタイル設定済みのビルド済みコンポーネントを使用する
• 標準的な取引インターフェースのパターンを実装する

前提条件

• React 18 以降
• @orderly.network/react-app、@orderly.network/ui がインストールされていること
• アプリが OrderlyAppProvider でラップされていること
• Tailwind CSS が設定されていること（app/ に content glob を設定）

コンポーネントの配置場所

コンポーネント	パッケージ	備考
OrderlyAppProvider	@orderly.network/react-app	アプリプロバイダー（ここから必要なエクスポートはこれだけ）
TradingPage	@orderly.network/trading	取引ページ全体（チャート＋オーダーブック＋注文入力）
OrderBook, LastTrades	@orderly.network/trading	オーダーブック＋最近の取引
OrderEntryWidget	@orderly.network/ui-order-entry	注文入力フォーム（OrderEntry はヘッドレス版）
PositionsWidget	@orderly.network/ui-positions	ポジションテーブル
TradingView	@orderly.network/ui	チャートラッパー
Table, Modal, Sheet	@orderly.network/ui	基本プリミティブ
Scaffold	@orderly.network/ui-scaffold	アプリレイアウト（ナビゲーション、フッター、アカウントメニュー）
AuthGuard	@orderly.network/ui-connector	認証／取引の背後にコンテンツを表示

@orderly.network/ui-orderbook と @orderly.network/ui-chart は存在しません。オーダーブックは @orderly.network/trading にあり、チャートは @orderly.network/ui の TradingView です。

プロバイダーの階層

WalletConnectorProvider（または Privy）で OrderlyAppProvider をラップします。逆ではありません。追加する TradingPageProvider や SymbolProvider はありません。TradingPage が内部で独自のシンボルコンテキストを管理します。

import { OrderlyAppProvider } from '@orderly.network/react-app';
import { WalletConnectorProvider } from '@orderly.network/wallet-connector';

function App() {
  return (
    <WalletConnectorProvider evmInitial={…} solanaInitial={…}>
      <OrderlyAppProvider brokerId="your_broker_id" networkId="mainnet">
        <YourApp />
      </OrderlyAppProvider>
    </WalletConnectorProvider>
  );
}

QueryClientProvider、ModalProvider、TooltipProvider を自分で追加しないでください。これらは OrderlyAppProvider が内部で設定します。

取引ページ（推奨）

取引インターフェース全体を実装するには、チャート、オーダーブック、注文入力、ポジションをまとめて構成する TradingPage を使用してください。これはリファレンステンプレートで使用されています。以下のウィジェットを手作業で組み合わせるのは、カスタムレイアウトの場合に限ります。

import { TradingPage } from '@orderly.network/trading';

function PerpSymbol({ symbol }: { symbol: string }) {
  return <TradingPage symbol={symbol} />;
}

TradingPage は tradingViewConfig（チャート）、sharePnLConfig、レイアウトオプションを受け取ります。orderly-sdk-page-components を参照してください。

注文入力

OrderEntryWidget は単体で使用できるウィジェットです（symbol を渡します）。OrderEntry はスクリプトの戻り値を受け取るプレゼンテーション用コンポーネントです（高度なヘッドレス接続でのみ使用してください）。

import { OrderEntryWidget } from '@orderly.network/ui-order-entry';

function OrderEntryPanel({ symbol }: { symbol: string }) {
  return (
    <div className="rounded-lg p-4">
      <OrderEntryWidget symbol={symbol} />
    </div>
  );
}

OrderEntryProvider はありません。symbol プロパティを直接渡してください。

ポジション

import { PositionsWidget } from '@orderly.network/ui-positions';

function PositionsPanel({ symbol, onSymbolChange }: {
  symbol?: string;
  onSymbolChange?: (s: API.Symbol) => void;
}) {
  return (
    <PositionsWidget
      symbol={symbol}            // optional — filter to one symbol
      onSymbolChange={onSymbolChange}
      pnlNotionalDecimalPrecision={2}
      sharePnLConfig={…}         // optional PnL-share config
    />
  );
}

ポートフォリオ全体（ポジション＋履歴＋注文＋資産）には、@orderly.network/portfolio の OverviewModule／PositionsModule を推奨します（orderly-sdk-page-components を参照）。

オーダーブックと取引

import { OrderBook, LastTrades } from '@orderly.network/trading';

function MarketData({ symbol }: { symbol: string }) {
  return (
    <>
      <OrderBook symbol={symbol} level={15} />
      <LastTrades symbol={symbol} />
    </>
  );
}

チャート

import { TradingView } from '@orderly.network/ui';

function ChartPanel({ symbol }: { symbol: string }) {
  return (
    <div className="h-[500px]">
      <TradingView symbol={symbol} />
    </div>
  );
}

TradingView は、TradingPage／プロバイダーの tradingViewConfig からチャートライブラリのパスを読み込みます。TradingView ライブラリは public/tradingview/ に配置する必要があります（orderly-sdk-dex-architecture を参照）。

アプリのスキャフォールド

@orderly.network/ui-scaffold の Scaffold は、レスポンシブなレイアウトを描画します。トップナビゲーション、左サイドバー（デスクトップ）、下部ナビゲーション（モバイル）、アカウントメニュー、フッターが含まれます。ナビゲーション用のプロパティと、ナビゲーションに使う routerAdapter を渡してください。

import { Scaffold } from '@orderly.network/ui-scaffold';

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Scaffold
      mainNavProps={navConfig} // top navigation items
      bottomNavProps={bottomNavConfig} // mobile bottom nav
      footerProps={footerConfig}
      routerAdapter={{ to: (path) => navigate(path) }} // your router
    >
      {children}
    </Scaffold>
  );
}

ウォレット接続（UI）

単体の WalletConnect コンポーネントはエクスポートされていません。SDK の接続モーダルを命令的に呼び出すか、AuthGuard でコンテンツへのアクセスを制御してください。

import { modal } from '@orderly.network/ui';
import { WalletConnectorModalId, AuthGuard } from '@orderly.network/ui-connector';

function Header() {
  return <button onClick={() => modal.show(WalletConnectorModalId)}>Connect</button>;
}

function ProtectedOrders() {
  return (
    <AuthGuard>
      <PositionsWidget />
    </AuthGuard>
  );
}

基本コンポーネント（@orderly.network/ui）

データテーブル

Table は、列定義 API（dataIndex、render、title）を使用します。

import { Table, type Column } from '@orderly.network/ui';

type TradeRow = { id: string; price: number; size: number; side: 'BUY' | 'SELL' };

function TradesTable({ data }: { data: TradeRow[] }) {
  const columns: Column<TradeRow>[] = [
    {
      title: 'Price',
      dataIndex: 'price',
      render: (value, record) => (
        <span className={record.side === 'BUY' ? 'text-green-500' : 'text-red-500'}>
          {value.toFixed(2)}
        </span>
      ),
    },
    { title: 'Size', dataIndex: 'size', formatter: (v) => v.toFixed(4) },
    { title: 'Time', dataIndex: 'time' },
  ];

  return <Table columns={columns} dataSource={data} getKey={(r) => r.id} />;
}

Column<RecordType> のフィールドには、title、dataIndex、render、formatter、width、align、fixed、onSort、className、getKey、hint があります。

モーダル／シート／トースト

import { Modal, Sheet, toast } from '@orderly.network/ui';

// Imperative toast (no provider needed — OrderlyAppProvider hosts it)
toast.success('Order placed');
toast.error('Order failed');

// Declarative modal & sheet use trigger/content composition
<Modal>
  <Modal.Trigger asChild>
    <button>Open</button>
  </Modal.Trigger>
  …
</Modal>;
<Sheet>
  <Sheet.Trigger asChild>
    <button>Open</button>
  </Sheet.Trigger>
  …
</Sheet>;

コンポジション用のサブコンポーネント（例：ModalTrigger）の正確な名前は Radix 形式に準じています。宣言的な方法で構築する場合は、インストール済みの @orderly.network/ui の型定義で正確な名前を確認してください。トーストには、命令的に呼び出す toast ヘルパーを使用することをおすすめします。

その他のプリミティブ

Button、Input、Select、Tabs、Spinner、Tooltip、NoData、Flex、cn、useScreen は、すべて @orderly.network/ui から提供されます。

スタイリング

コンポーネントでは Tailwind のユーティリティクラスと CSS 変数を使用します（themes プロパティでテーマを設定できます。orderly-sdk-theming を参照）。ベースのスタイルシートは一度だけインポートしてください。

/* app/styles/index.css */
@import '@orderly.network/ui/dist/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

よくある問題

• 「Module not found: @orderly.network/react」 — @orderly.network/react-app を使用してください。react はパッケージではありません。
• コンポーネントが描画されない — アプリが OrderlyAppProvider（およびウォレットコネクター）でラップされていることを確認してください。シンボルに依存するウィジェットには、有効な symbol が必要です。
• スタイルが適用されない — @orderly.network/ui/dist/styles.css をインポートし、Tailwind の content で app/ を指定してください。
• 「TradingPageProvider/SymbolProvider is not exported」 — これらは存在しません。TradingPage が独自のコンテキストを処理します。

関連スキル

• orderly-sdk-react-hooks - これらのコンポーネントの背後にあるデータを扱うフックのリファレンス
• orderly-sdk-page-components - 高レベルなページ構成
• orderly-sdk-dex-architecture - プロバイダーの設定とプロジェクト構成
• orderly-sdk-theming - CSS 変数を使ったテーマ設定