Provider Setup (Web)

Web applications use two React context providers shipped by the SDK:

Provider	Purpose
OneProvider	Core SDK context -- config, engine client, auth state, hooks. Always required.
OneThirdwebProvider	Wraps the Thirdweb SDK for smart-wallet connect, on-chain reads, and contract interactions. Required only if you use wallet or payment widgets.

Minimal Setup (No Wallet)

If you only need hooks like useAIStrategies or services like OneEngineClient and do not need wallet connectivity, OneProvider alone is enough.

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

Inside any component you can now call provider-based 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>;
}

Full Setup (Wallet + Payments)

To enable smart-wallet connect, on-chain transactions, and the built-in payment widgets, add OneThirdwebProvider inside 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 Options

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)

Because the providers use React context they must run on the client. Create a wrapper component with "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>
  );
}

Accessing the Engine Client Directly

If you need the OneEngineClient instance outside of React (e.g. in a utility file), you can pull it from the SDK object returned by initOneSDK:

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

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

Inside React, prefer the hook:

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

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

Next Steps

• React Native Setup -- if you also target mobile.
• Authentication -- sign users in.