TokenOps
Recipe · Integration · Vite

Vite SPA integration

Same SDK surface, no Next App Router. Providers at the root + lazy-factory encryptor at each call site. import.meta.env replaces process.env for the RPC URL.

1. Wagmi config#

Vite's environment variables use import.meta.env (with VITE_ prefix to expose them to the browser). WalletConnect needs a project ID; Sepolia RPC needs a transport URL.

src/wagmi.ts
ts
// src/wagmi.ts
import { createConfig, http } from "wagmi";
import { sepolia } from "viem/chains";
import { injected, walletConnect } from "wagmi/connectors";

export const wagmiConfig = createConfig({
  chains: [sepolia],
  connectors: [
    injected(),
    walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
  ],
  transports: {
    [sepolia.id]: http(import.meta.env.VITE_SEPOLIA_RPC_URL),
  },
});

2. Provider tree at the root#

Same shape as Next App Router, WagmiProvider over QueryClientProvider over ZamaSDKProvider. The SDK hooks inside App find everything they need by context.

src/main.tsx
tsx
// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ZamaSDKProvider } from "@zama-fhe/react-sdk";
import { wagmiConfig } from "./wagmi";
import { App } from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ZamaSDKProvider>
          <App />
        </ZamaSDKProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
);

3. Use any hook#

From here, every SDK hook works identically, see the useCreateVesting client-component example in the Next App Router recipe. Lazy-factory encryptor is mandatory in all React hosts.

See also