TanStack Start (Vite SSR)

Mount the provider at the router root; EVM-only discovery, no "use client" needed.

TanStack Start is Vite-based SSR. The provider wiring is identical to the Next.js pattern; no "use client" directive needed (TanStack Start doesn't use RSC). Mount the provider at the router root.

src/wallet-provider.tsx

import type { WalletManagerConfig } from "@usebutr/core";
import { discoverEvmAdapters } from "@usebutr/evm";
import { WalletManagerProvider } from "@usebutr/react";
import type { ReactNode } from "react";

// EVM-only: no @usebutr/svm or @usebutr/wallets in the bundle.
const config: WalletManagerConfig = {
  sources: [discoverEvmAdapters],
  storageKeyPrefix: "butr-demo",
};

const WalletProvider = ({ children }: { children: ReactNode }) => (
  <WalletManagerProvider config={config}>{children}</WalletManagerProvider>
);

export { WalletProvider };

Wrap the router root:

src/routes/__root.tsx

import { WalletProvider } from "../wallet-provider";

// inside the root component's render:
<WalletProvider>{children}</WalletProvider>;

Wallet discovery and localStorage are browser-only. The manager is empty during SSR and hydrates on the client; gate UI on useIsHydrated() so server and first client render agree. To render the connected wallet on the server instead, pass initialState; see SSR without the hydration flash.

Source: apps/demo-tanstack-start/src/wallet-provider.tsx in the butr repository. Run pnpm dev --filter=demo-tanstack-start → https://usebutr.demo-tanstack-start.localhost.