Usage With RainbowKit
If you're using RainbowKit (opens in a new tab), 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 (opens in a new tab) by RainbowKit.
See Detecting Other Wallets to learn how to tell normie visitors from crypto natives.