Usage With Wagmi
If you're using Wagmi (opens in a new tab), this is how you can connect to the embedded wallet:
import { useConnect } from 'wagmi';
const ConnectButton = () => {
const { connectors, connect } = useConnect();
const handleClick = async () => {
const passkeyConnector = connectors.find(
(connector) => connector.id === 'network.passkeys',
);
connect({ connector: passkeyConnector });
};
return <button onClick={handleClick}>Connect Wallet</button>;
};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 { useConnect } from 'wagmi';
const ConnectButton = () => {
const { connectors, connect } = useConnect();
// TODO: Define based on your own criteria.
// Check out the "Detecting Other Wallets" recipe for an example.
const isNormieVisitor = true;
const handleClick = async () => {
if (isNormieVisitor) {
const passkeyConnector = connectors.find(
(connector) => connector.id === 'network.passkeys',
);
connect({ connector: passkeyConnector });
} else {
// Your existing connect logic.
}
};
return <button onClick={handleClick}>Connect Wallet</button>;
};See Detecting Other Wallets to learn how to tell normie visitors from crypto natives.
Server-Side Rendering (SSR)
If you're using a framework that does server-side rendering (like Next.js), remember to pass the ssr property (opens in a new tab) to Wagmi's config:
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
const config = createConfig({
chains: [mainnet],
ssr: true,
transports: {
[mainnet.id]: http(),
},
});