Usage with RainbowKit
If you’re using RainbowKit , you can connect to the embedded wallet following the Wagmi recipe.
If you want to keep your existing connect logic for your crypto-savvy users but take your normie visitors straight to the frictionless Passkey flow:
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useConnect } from 'wagmi';
function CustomConnectButton() {
const { connectors, connect } = useConnect();
const handleClick = async () => {
const passkeyConnector = connectors.find((connector) => connector.id === 'network.passkeys');
connect({ connector: passkeyConnector });
};
return (
<ConnectButton.Custom>
{({ account, chain, mounted }) => {
const ready = mounted;
const connected = ready && account && chain;
// TODO: Define based on your own criteria.
// Check out the "Detecting Other Wallets" recipe for an example.
const isNormieVisitor = true;
return (
<div>
{(() => {
if (!connected && isNormieVisitor) {
return (
<button onClick={handleClick} type="button">
Connect Wallet
</button>
);
}
// Default <ConnectButton> fallback.
return <ConnectButton />;
})()}
</div>
);
}}
</ConnectButton.Custom>
);
}This is based on the “Custom ConnectButton” recipe by RainbowKit.
See Detecting Wallets to learn how to tell normie visitors from crypto natives.
