Orderly Network: SDK DEX 架构

使用 Orderly Network Components SDK 构建和搭建完整 DEX 应用的全面指南。

使用场景

• - 搭建新的 DEX 项目
• 理解 Provider 层级结构
• 配置网络设置
• 设置 TradingView 图表
• 理解运行时配置

前置条件

• - 已安装 Node.js 18+
• 已安装 Orderly SDK 包（参见 orderly-sdk-install-dependency）
• 使用 TypeScript 的 React 18+ 项目
• Vite 或类似构建工具

概述

本技能涵盖构建生产级 DEX 的完整架构：

• - 项目结构与搭建
• Provider 层级结构与配置
• 网络配置（必需） - 主网/测试网及支持的链
• TradingView 图表设置（图表功能必需） - 图表库文件
• 路由与页面组件
• 运行时配置
• 构建与部署

关键配置：每个 DEX 必须包含：

1. 1. brokerId - 您的 Orderly 经纪商 ID
2. networkId - mainnet 或 testnet
3. 匹配网络的正确钱包连接器设置
4. public/tradingview/ 目录下的 TradingView 图表库（用于图表功能）

项目结构

my-dex/
├── public/
│ ├── config.js # 运行时配置
│ ├── favicon.webp
│ ├── locales/ # i18n 翻译
│ │ ├── en.json
│ │ └── extend/ # 自定义翻译
│ ├── pnl/ # PnL 分享海报背景
│ │ ├── posterbg1.png
│ │ └── posterbg2.png
│ └── tradingview/ # TradingView 库（图表功能必需）
│ ├── chart.css # 自定义图表样式
│ └── charting_library/ # TradingView 图表库文件
├── src/
│ ├── main.tsx # 入口文件
│ ├── App.tsx # 包含路由的根组件
│ ├── components/
│ │ ├── orderlyProvider/ # SDK Provider 设置
│ │ │ ├── index.tsx # 主 Provider 包装器
│ │ │ └── walletConnector.tsx
│ │ ├── ErrorBoundary.tsx
│ │ └── LoadingSpinner.tsx
│ ├── pages/
│ │ ├── perp/ # 交易页面
│ │ ├── portfolio/ # 投资组合页面
│ │ ├── markets/ # 市场页面
│ │ └── leaderboard/ # 排行榜页面
│ ├── utils/
│ │ ├── config.tsx # 应用配置
│ │ ├── walletConfig.ts # 钱包设置
│ │ ├── runtime-config.ts # 运行时配置加载器
│ │ └── storage.ts # 本地存储工具
│ └── styles/
│ └── index.css # 全局样式 + Tailwind
├── .env # 构建时环境变量
├── index.html
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

Provider 层级结构

SDK 需要特定的 Provider 嵌套顺序：

LocaleProvider (i18n)
└── WalletConnectorProvider (或 Privy)
└── OrderlyAppProvider
├── (内部) AppConfigProvider
├── (内部) OrderlyThemeProvider
├── (内部) OrderlyConfigProvider (来自 hooks)
├── (内部) AppStateProvider
├── (内部) UILocaleProvider
├── (内部) TooltipProvider
├── (内部) ModalProvider
└── 您的应用

注意：TooltipProvider 和 ModalProvider 由 OrderlyAppProvider 内部管理。您无需自行添加。

主 Provider 组件

tsx
// src/components/orderlyProvider/index.tsx
import { ReactNode, useCallback, Suspense, lazy } from react;
import { OrderlyAppProvider } from @orderly.network/react-app;
import { LocaleProvider, LocaleCode, defaultLanguages } from @orderly.network/i18n;
import type { NetworkId } from @orderly.network/types;
import { useOrderlyConfig } from @/utils/config;
import { getRuntimeConfig, getRuntimeConfigBoolean } from @/utils/runtime-config;

const NETWORKIDKEY = orderlynetworkid;

const getNetworkId = (): NetworkId => {
if (typeof window === undefined) return mainnet;

const disableMainnet = getRuntimeConfigBoolean(VITEDISABLEMAINNET);
const disableTestnet = getRuntimeConfigBoolean(VITEDISABLETESTNET);

if (disableMainnet && !disableTestnet) return testnet;
if (disableTestnet && !disableMainnet) return mainnet;

return (localStorage.getItem(NETWORKIDKEY) as NetworkId) || mainnet;
};

const WalletConnector = lazy(() => import(./walletConnector));

const OrderlyProvider = ({ children }: { children: ReactNode }) => {
const config = useOrderlyConfig();
const networkId = getNetworkId();

const onChainChanged = useCallback((_chainId: number, { isTestnet }: { isTestnet: boolean }) => {
const currentNetworkId = getNetworkId();
if (
(isTestnet && currentNetworkId === mainnet) ||
(!isTestnet && currentNetworkId === testnet)
) {
const newNetworkId: NetworkId = isTestnet ? testnet : mainnet;
localStorage.setItem(NETWORKIDKEY, newNetworkId);
window.location.reload();
}
}, []);

const onLanguageChanged = (lang: LocaleCode) => {
const url = new URL(window.location.href);
if (lang === en) {
url.searchParams.delete(lang);
} else {
url.searchParams.set(lang, lang);
}
window.history.replaceState({}, , url.toString());
};

return (

}>

brokerId={getRuntimeConfig(VITEORDERLYBROKER_ID)}
brokerName={getRuntimeConfig(VITEORDERLYBROKER_NAME)}
networkId={networkId}
onChainChanged={onChainChanged}
appIcons={config.appIcons}
>
{children}




);
};

export default OrderlyProvider;

钱包连接器设置

注意：WalletConnectorProvider 上的 solanaInitial 和 evmInitial 属性都是可选的。Provider 具有合理的默认值，官方模板使用时不带任何属性。仅当您需要自定义钱包配置时才传递这些属性。

最小设置（推荐 - 使用默认值）：

tsx
// src/components/orderlyProvider/walletConnector.tsx
import { ReactNode } from react;
import { WalletConnectorProvider } from @orderly.network/wallet-connector;
import type { NetworkId } from @orderly.network/types;

interface Props {
children: ReactNode;
networkId: NetworkId;
}

const WalletConnector = ({ children, networkId }: Props) => {
return {children};
};

export default WalletConnector;

网络配置（必需）

重要：每个 Orderly DEX 都必须正确配置网络。

支持的网络

主网链（生产环境）

测试网链（开发环境）