Vite + React (SPA)

Batteries-included setup with WalletManagerProvider and autoDiscovery() in a Vite SPA.

Vite is the simplest case: a client-only SPA, so no server/hydration concerns. This is the demo-vite reference (multi-chain, localStorage).

src/wallet-provider.tsx

import type { WalletManagerConfig } from "@usebutr/core";
import { WalletManagerProvider } from "@usebutr/react";
import { autoDiscovery } from "@usebutr/wallets";
import type { ReactNode } from "react";

const config: WalletManagerConfig = {
  sources: [autoDiscovery()],
  storageKeyPrefix: "butr-demo",
};

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

export { WalletProvider };

src/main.tsx

import ReactDOM from "react-dom/client";
import { App } from "./app";
import { WalletProvider } from "./wallet-provider";

ReactDOM.createRoot(document.querySelector("#root")!).render(
  <WalletProvider>
    <App />
  </WalletProvider>,
);

The demo also offers WalletConnect and Ledger. Those adapters are built, not discovered, so it adds them as a second source with fromAdapters; see Provider setup.

Then use the hooks anywhere under the provider; see Connect & disconnect. Gate the first render on useIsHydrated() so a reload doesn't flash a logged-out UI.

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