Provider 设置 (Web)

Web 应用使用 SDK 提供的两个 React 上下文 provider：

Provider	用途
OneProvider	核心 SDK 上下文 -- 配置、engine 客户端、认证状态、hooks。始终需要。
OneThirdwebProvider	封装 Thirdweb SDK，用于智能钱包连接、链上读取和合约交互。仅在使用钱包或支付组件时需要。

最简设置（无钱包）

如果你只需要使用 useAIStrategies 等 hooks 或 OneEngineClient 等服务，不需要钱包连接功能，仅使用 OneProvider 即可。

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { OneProvider } from "@one_deploy/sdk/providers";
import { initOneSDK } from "@one_deploy/sdk";
import App from "./App";

const oneSDK = initOneSDK({
  clientId: import.meta.env.VITE_ONE_CLIENT_ID,
  engineUrl: import.meta.env.VITE_ONE_ENGINE_URL,
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <OneProvider sdk={oneSDK}>
      <App />
    </OneProvider>
  </React.StrictMode>,
);

在任何组件内，你现在可以调用基于 provider 的 hooks：

src/App.tsx

import { useOne } from "@one_deploy/sdk/hooks";

export default function App() {
  const { engine, isReady } = useOne();

  if (!isReady) return <p>Loading SDK...</p>;

  return <p>Connected to {engine.baseUrl}</p>;
}

完整设置（钱包 + 支付）

要启用智能钱包连接、链上交易和内置支付组件，请将 OneThirdwebProvider 添加到 OneProvider 内部。

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { OneProvider, OneThirdwebProvider } from "@one_deploy/sdk/providers";
import { initOneSDK } from "@one_deploy/sdk";
import App from "./App";

const oneSDK = initOneSDK({
  clientId: import.meta.env.VITE_ONE_CLIENT_ID,
  engineUrl: import.meta.env.VITE_ONE_ENGINE_URL,
  // Optional -- override defaults
  defaultChainId: 137,          // Polygon
  supportedChainIds: [1, 137, 42161, 8453],
});

const thirdwebConfig: OneThirdwebConfig = {
  thirdwebClientId: import.meta.env.VITE_THIRDWEB_CLIENT_ID,
  supportedWallets: ["metamask", "coinbase", "walletconnect", "embedded"],
  defaultChainId: 137,
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <OneProvider sdk={oneSDK}>
      <OneThirdwebProvider config={thirdwebConfig}>
        <App />
      </OneThirdwebProvider>
    </OneProvider>
  </React.StrictMode>,
);

initOneSDK 选项

import type { OneSDKConfig } from "@one_deploy/sdk/types";

const config: OneSDKConfig = {
  // Required
  clientId: string;
  engineUrl: string;

  // Optional
  secretKey?: string;             // Server-side only
  defaultChainId?: number;        // Default: 1 (Ethereum mainnet)
  supportedChainIds?: number[];   // Default: [1, 137, 42161, 8453]
  supabaseUrl?: string;           // For realtime features
  supabaseAnonKey?: string;
  debug?: boolean;                // Console logging (default: false)
};

OneThirdwebConfig

import type { OneThirdwebConfig } from "@one_deploy/sdk/types";

interface OneThirdwebConfig {
  // Required
  thirdwebClientId: string;

  // Optional
  supportedWallets?: Array<
    "metamask" | "coinbase" | "walletconnect" | "embedded" | "smart"
  >;
  defaultChainId?: number;
  appMetadata?: {
    name: string;
    url: string;
    logoUrl?: string;
    description?: string;
  };
  theme?: "light" | "dark";
}

OneThirdwebProviderProps

import type { OneThirdwebProviderProps } from "@one_deploy/sdk/types";

interface OneThirdwebProviderProps {
  config: OneThirdwebConfig;
  children: React.ReactNode;
}

Next.js (App Router)

因为 provider 使用了 React 上下文，所以它们必须在客户端运行。创建一个带有 "use client" 的包裹组件：

src/app/providers.tsx

"use client";

import { OneProvider, OneThirdwebProvider } from "@one_deploy/sdk/providers";
import { initOneSDK } from "@one_deploy/sdk";
import type { OneThirdwebConfig } from "@one_deploy/sdk/types";

const oneSDK = initOneSDK({
  clientId: process.env.NEXT_PUBLIC_ONE_CLIENT_ID!,
  engineUrl: process.env.NEXT_PUBLIC_ONE_ENGINE_URL!,
});

const twConfig: OneThirdwebConfig = {
  thirdwebClientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
};

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OneProvider sdk={oneSDK}>
      <OneThirdwebProvider config={twConfig}>
        {children}
      </OneThirdwebProvider>
    </OneProvider>
  );
}

src/app/layout.tsx

import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

直接访问 Engine 客户端

如果你需要在 React 外部（例如在工具文件中）使用 OneEngineClient 实例，可以从 initOneSDK 返回的 SDK 对象中获取：

const oneSDK = initOneSDK({ clientId: "...", engineUrl: "..." });

// Use in non-React code
const strategies = await oneSDK.engine.getAIStrategies();

在 React 内部，建议使用 hook：

import { useOneEngine } from "@one_deploy/sdk/hooks";

function Strategies() {
  const engine = useOneEngine();
  // engine.getAIStrategies(), engine.createAIOrder(), etc.
}

下一步

• React Native 设置 -- 如果你还需要适配移动端。
• 认证 -- 登录用户。