Provider setup
One WalletManagerProvider with flat props — auto-discovery, platform-only, manual, or composed.
There is one provider: WalletManagerProvider from @usebutr/react. You control
discovery by passing a discovery prop (a WalletSource) or a createConnector
prop, or both. Pick the setup that fits your bundle constraints.
Auto (batteries-included)
Use autoDiscovery() from @usebutr/wallets. It discovers EVM (EIP-6963) and SVM
(Wallet Standard) wallets and persists state to localStorage. Hoist the source
to module scope so it is created once.
import type { ReactNode } from "react";
import { WalletManagerProvider } from "@usebutr/react";
import { autoDiscovery } from "@usebutr/wallets";
const discovery = autoDiscovery();
const WalletProvider = ({ children }: { children: ReactNode }) => (
<WalletManagerProvider discovery={discovery} storageKeyPrefix="butr-demo">
{children}
</WalletManagerProvider>
);
export { WalletProvider };Source: apps/demo-vite/src/wallet-provider.tsx (auto, EVM + SVM) in the butr
repository.
Platform-only bundles
For an EVM-only build (@usebutr/react + @usebutr/evm, no @usebutr/svm /
@usebutr/wallets) or an SVM-only build, the only thing that changes is the
discovery value — the provider API is identical. Each has a complete path,
including install, chains, and platform caveats:
Manual / custom
Skip discovery and pass createConnector instead. butr calls
createConnector(id) whenever it needs an adapter; return the adapter or
null. This is the right pattern for a static list of pre-built connectors
(WalletConnect, Ledger, etc.) with no ambient discovery.
import type { ReactNode } from "react";
import { WalletManagerProvider } from "@usebutr/react";
import { myWalletConnectConnector } from "./connectors";
const WalletProvider = ({ children }: { children: ReactNode }) => (
<WalletManagerProvider
createConnector={(id) => (id === "walletconnect" ? myWalletConnectConnector : null)}
storageKeyPrefix="my-app"
>
{children}
</WalletManagerProvider>
);
export { WalletProvider };See Connectors for pre-built connector packages.
Composed (discovery + manual connectors)
Pass both discovery and createConnector. butr resolves the discovered
adapter first; createConnector handles any id not found in the discovery
source. This lets you mix injected wallets (EIP-6963) with static connectors
(WalletConnect) in one pool.
import type { ReactNode } from "react";
import { WalletManagerProvider } from "@usebutr/react";
import { autoDiscovery } from "@usebutr/wallets";
import { myWalletConnectConnector } from "./connectors";
const discovery = autoDiscovery();
const WalletProvider = ({ children }: { children: ReactNode }) => (
<WalletManagerProvider
discovery={discovery}
createConnector={(id) => (id === "walletconnect" ? myWalletConnectConnector : null)}
storageKeyPrefix="my-app"
>
{children}
</WalletManagerProvider>
);
export { WalletProvider };See Connectors for the WalletConnect connector package.