orderly-sdk-page-components

Orderly Network：SDK ページコンポーネント

DEX 全体を構築するための、事前構築済みの充実したページコンポーネントです。各ページはレスポンシブデザイン（デスクトップ／モバイル）、状態、UI を処理します。リファレンステンプレートでは、すべてのページが app/pages/... から遅延読み込みされ、共通の Scaffold レイアウトでラップされます。

使用する場面

• DEX 全体をすばやく構築する場合
• 事前構築済みの本番対応ページを使用する場合
• 標準的な DEX ページ（取引、ポートフォリオ、マーケット、リーダーボード）を実装する場合

前提条件

• Orderly SDK パッケージがインストールされていること（orderly-sdk-install-dependency を参照）
• プロバイダーが設定されていること（orderly-sdk-dex-architecture を参照）
• React Router v7（react-router-dom）

概要

コンポーネント	パッケージ	説明
TradingPage	@orderly.network/trading	取引インターフェース全体（チャート、オーダーブック、注文入力）
OverviewModule.OverviewPage	@orderly.network/portfolio	ポートフォリオダッシュボード
PositionsModule.PositionsPage	@orderly.network/portfolio	ポジションと履歴
OrdersModule.OrdersPage	@orderly.network/portfolio	注文（オープン、保留中、約定済み）
AssetsModule.AssetsPage	@orderly.network/portfolio	残高、入金／出金
HistoryModule.HistoryPage	@orderly.network/portfolio	取引／資金調達／決済履歴
APIManagerModule.APIManagerPage	@orderly.network/portfolio	API キー管理
FeeTierModule.FeeTierPage	@orderly.network/portfolio	手数料ティアの概要
SettingModule.SettingPage	@orderly.network/portfolio	アカウント設定
MarketsHomePage	@orderly.network/markets	マーケット一覧と資金調達率の比較
GeneralLeaderboardWidget	@orderly.network/trading-leaderboard	取引コンペティションのリーダーボード
PointSystemPage	@orderly.network/trading-points	ポイント／特典プログラム
VaultsPage	@orderly.network/vaults	Vault／Earn 商品
Dashboard.DashboardPage	@orderly.network/affiliate	アフィリエイト／紹介ダッシュボード（ReferralProvider 内）

名前は重要です。 GeneralLeaderboardWidget（LeaderboardPage ではありません）、PointSystemPage（TradingRewardsPage ではありません。trading-rewards パッケージはありません）、および VaultsPage を使用してください。アフィリエイトページは Dashboard 単体ではなく、Dashboard.DashboardPage です。

Scaffold ラッパーパターン

リファレンステンプレートの各ルートレイアウトでは、@orderly.network/ui-scaffold の <Scaffold> で <Outlet/> をラップし、ナビゲーション／フッター設定（useOrderlyConfig() で一度だけ作成）と routerAdapter を渡します。

// app/pages/perp/Layout.tsx
import { Outlet } from 'react-router-dom';
import { Scaffold } from '@orderly.network/ui-scaffold';
import { useOrderlyConfig } from '@/utils/config';
import { useNav } from '@/hooks/useNav';

export default function PerpLayout() {
  const config = useOrderlyConfig();
  const { onRouteChange } = useNav();
  return (
    <Scaffold
      mainNavProps={config.scaffold.mainNavProps}
      footerProps={config.scaffold.footerProps}
      bottomNavProps={config.scaffold.bottomNavProps}
      routerAdapter={{ onRouteChange, currentPath: '/' }}
    >
      <Outlet />
    </Scaffold>
  );
}

各セクション（perp、portfolio、markets、leaderboard、rewards、vaults、swap、points）には、このパターンを使った独自の Layout.tsx があります。

1. TradingPage

app/pages/perp/Symbol.tsx（ルート /perp/:symbol）でレンダリングされます。tradingViewConfig と sharePnLConfig は useOrderlyConfig() から取得します（アクティブなテーマと .env 設定から作成されます）。

// app/pages/perp/Symbol.tsx
import { useCallback, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { API } from '@orderly.network/types';
import { TradingPage } from '@orderly.network/trading';
import { useOrderlyConfig } from '@/utils/config';

export default function PerpSymbol() {
  const params = useParams();
  const [symbol, setSymbol] = useState(params.symbol!);
  const config = useOrderlyConfig();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const onSymbolChange = useCallback(
    (data: API.Symbol) => {
      setSymbol(data.symbol);
      const qs = searchParams.toString();
      navigate(`/perp/${data.symbol}${qs ? `?${qs}` : ''}`);
    },
    [navigate, searchParams]
  );

  return (
    <div className="h-full">
      <TradingPage
        symbol={symbol}
        onSymbolChange={onSymbolChange}
        tradingViewConfig={config.tradingPage.tradingViewConfig}
        sharePnLConfig={config.tradingPage.sharePnLConfig}
      />
    </div>
  );
}

tradingViewConfig

tradingViewConfig: {
  scriptSRC: string;      // /tradingview/charting_library/charting_library.js
  library_path: string;   // /tradingview/charting_library/
  customCssUrl?: string;  // /tradingview/chart.css
  colorConfig?: Partial<TradingViewColorConfig>; // only in legacy mode
}

createTradingViewConfig(themeSource) で構築します（orderly-sdk-theming を参照）。TradingView ライブラリのファイルは public/tradingview/charting_library/ に配置する必要があります。

ルートは /trade ではなく /perp/:symbol です。インデックスルートの /perp はデフォルトの銘柄にリダイレクトします。

2. ポートフォリオページ

ポートフォリオはモジュールで構成され、各モジュールは …Page エクスポートを持ちます。テンプレートのルートは、portfolio（インデックス）、positions、orders、assets、api-key、fee、history、setting です。

import {
  OverviewModule, PositionsModule, OrdersModule, AssetsModule,
  HistoryModule, APIManagerModule, FeeTierModule, SettingModule,
} from '@orderly.network/portfolio';

<OverviewModule.OverviewPage />
<PositionsModule.PositionsPage />
<OrdersModule.OrdersPage sharePnLConfig={config.tradingPage.sharePnLConfig} />
<AssetsModule.AssetsPage />
<HistoryModule.HistoryPage />
<APIManagerModule.APIManagerPage />
<FeeTierModule.FeeTierPage />
<SettingModule.SettingPage />

ポートフォリオのルート（遅延読み込みされるページコンポーネント。Scaffold を使用する共通の PortfolioLayout でラップされています）：

{
  path: 'portfolio',
  element: <PortfolioLayout />,
  children: [
    { index: true, element: <PortfolioIndex /> },        // OverviewModule.OverviewPage
    { path: 'positions', element: <PortfolioPositions /> },
    { path: 'orders', element: <PortfolioOrders /> },
    { path: 'assets', element: <PortfolioAssets /> },
    { path: 'api-key', element: <PortfolioApiKey /> },   // APIManagerModule.APIManagerPage
    { path: 'fee', element: <PortfolioFee /> },          // FeeTierModule.FeeTierPage
    { path: 'history', element: <PortfolioHistory /> },
    { path: 'setting', element: <PortfolioSetting /> },  // SettingModule.SettingPage
  ],
}

3. MarketsHomePage

import { MarketsHomePage } from '@orderly.network/markets';

<MarketsHomePage
  comparisonProps={{
    // name + icon shown in the funding-comparison list (NOT an exchanges array)
    exchangesName: import.meta.env.VITE_ORDERLY_BROKER_NAME,
    exchangesIconSrc: '/logo-secondary.webp', // optional
  }}
  onSymbolChange={(symbol) => navigate(`/perp/${symbol.symbol}`)}
/>;

comparisonProps が受け取るのは exchangesName と exchangesIconSrc（どちらも省略可能）であり、exchanges: string[] 配列ではありません。

4. リーダーボード

import { GeneralLeaderboardWidget } from '@orderly.network/trading-leaderboard';

export default function LeaderboardIndex() {
  return (
    <div className="oui-py-6 oui-px-4 lg:oui-px-6">
      <GeneralLeaderboardWidget />
    </div>
  );
}

5. ポイント／報酬

import { PointSystemPage } from '@orderly.network/trading-points';
import { RouteOption } from '@orderly.network/types';

export default function PointsIndex() {
  const navigate = useNavigate();
  const onRouteChange = (p: RouteOption) => {
    if (p.href === '/perp') navigate(`/perp/${getSymbol()}`);
  };
  return <PointSystemPage onRouteChange={onRouteChange} />;
}

6. Vault

import { VaultsPage as VaultsPageComponent } from '@orderly.network/vaults';
<VaultsPageComponent />;

7. アフィリエイト／紹介

<ReferralProvider> 内で Dashboard.DashboardPage をレンダリングします。

import { Dashboard, ReferralProvider } from '@orderly.network/affiliate';

export default function AffiliateIndex() {
  return (
    <ReferralProvider>
      <Dashboard.DashboardPage />
    </ReferralProvider>
  );
}

ルーティング

ルートは app/main.tsx で createBrowserRouter と import.meta.env.BASE_URL の basename を使って定義します。すべてのページは遅延読み込みされます。

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <App />,
      errorElement: <ErrorBoundary />,
      children: [
        { index: true, element: <IndexPage /> },
        {
          path: 'perp',
          element: <PerpLayout />,
          children: [
            { index: true, element: <PerpIndex /> },
            { path: ':symbol', element: <PerpSymbol /> },
          ],
        },
        {
          path: 'portfolio',
          element: <PortfolioLayout />,
          children: [
            /* …see above… */
          ],
        },
        {
          path: 'markets',
          element: <MarketsLayout />,
          children: [{ index: true, element: <MarketsIndex /> }],
        },
        {
          path: 'leaderboard',
          element: <LeaderboardLayout />,
          children: [{ index: true, element: <LeaderboardIndex /> }],
        },
        {
          path: 'rewards',
          element: <RewardsLayout />,
          children: [
            { index: true, element: <RewardsIndex /> },
            { path: 'affiliate', element: <RewardsAffiliate /> },
          ],
        },
        {
          path: 'vaults',
          element: <VaultsLayout />,
          children: [{ index: true, element: <VaultsIndex /> }],
        },
        {
          path: 'swap',
          element: <SwapLayout />,
          children: [{ index: true, element: <SwapIndex /> }],
        },
        {
          path: 'points',
          element: <PointsLayout />,
          children: [{ index: true, element: <PointsIndex /> }],
        },
      ],
    },
  ],
  { basename: basePath }
);

レスポンシブデザイン

ページコンポーネントは、デスクトップとモバイルへの対応を内部で処理します。独自のレイアウトを決める場合は、useScreen()（@orderly.network/ui から）を使用します。

import { useScreen } from '@orderly.network/ui';
const { isMobile } = useScreen();

ベストプラクティス

1. すべてのページを遅延読み込みします（テンプレートでは main.tsx で app/pages/... を遅延読み込みします）。
2. ルートを Scaffold でラップします。ナビゲーション、フッター、アカウントメニューを統一できます。
3. 銘柄を永続化します（テンプレートでは変更時に updateSymbol(symbol) を呼び出します）。これにより、ディープリンクとインデックスルートで銘柄が復元されます。
4. tradingViewConfig／sharePnLConfig は useOrderlyConfig() から設定します。アクティブなテーマに追従させることができます。
5. onSymbolChange を使って URL を更新します。取引ページをブックマーク可能にできます。

関連するスキル

• orderly-sdk-dex-architecture - プロジェクト構成、プロバイダー、ルーティングのエントリーポイント
• orderly-sdk-theming - tradingViewConfig の基となるテーマ設定
• orderly-sdk-trading-workflows - 取引機能の詳細
• orderly-ui-components - これらの高レベルページと、個別のウィジェットとの違い