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 { ReactNode } from "react";
import { createWalletSource } from "@usebutr/core";
import { WalletManagerProvider, useDiscoveredWallets } from "@usebutr/react";
import { discoverEvmAdapters } from "@usebutr/evm";

// EVM-only: @usebutr/react + @usebutr/evm. No @usebutr/svm / @usebutr/wallets in the
// bundle — discovery is a WalletSource built from the EVM discoverer.
const evmDiscovery = createWalletSource(discoverEvmAdapters);

const WalletProvider = ({ children }: { children: ReactNode }) => (
  <WalletManagerProvider discovery={evmDiscovery} storageKeyPrefix="butr-demo">
    {children}
  </WalletManagerProvider>
);

export { WalletProvider, useDiscoveredWallets };

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 provider state is empty during SSR and hydrates on the client — gate UI on useIsHydrated() so server and first client render agree.

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