Multi-wallet and chain switching
Hold several wallets at once, choose the active one, and switch an EVM wallet's chain.
Several wallets at once
The pool holds every connected wallet. A user can connect MetaMask and Phantom
together; useConnectedWallets() returns both. Mark one the active wallet with
useSetActiveConnector():
import { useActiveWallet, useSetActiveConnector } from "@usebutr/react";
const active = useActiveWallet();
const setActive = useSetActiveConnector();
const isActive = active?.connector.id === wallet.connector.id;
{
isActive ? null : <button onClick={() => setActive(wallet.connector.id)}>Make active</button>;
}See pool, selection, active for why these are separate.
Switch an EVM wallet's chain
wallet.connector.switchChain(chain) takes a ChainBase. Get the right chain
list for the wallet's platform from CHAINS_BY_PLATFORM:
import { CHAINS_BY_PLATFORM } from "@usebutr/wallets";
const ChainPicker = ({ wallet }) => {
const chains = CHAINS_BY_PLATFORM[wallet.connector.chainPlatform];
return (
<select
value={wallet.account.chain.id}
onChange={(e) => {
const target = chains.find((c) => c.id === e.target.value);
if (target) void wallet.connector.switchChain(target);
}}
>
{chains.map((chain) => (
<option key={chain.id} value={chain.id}>
{chain.name}
</option>
))}
</select>
);
};Gate the picker on the capability — not every wallet can switch:
{
wallet.connector.capabilities.switchChain ? <ChainPicker wallet={wallet} /> : null;
}EVM wallets switch for real via wallet_switchEthereumChain. SVM "switching"
is local state plus a per-call chain input. The new chain shows up on the
next accountChanged event, bridged automatically into
wallet.account.chain.
EVM-only manual setups don't bundle @usebutr/wallets. Use EVM_CHAINS_LIST from @usebutr/evm
instead — demo-next does exactly this.
Source: ChainPicker in apps/demo-vite/src/app.tsx (uses CHAINS_BY_PLATFORM) and
apps/demo-next/src/app/page.tsx (uses EVM_CHAINS_LIST).