Developer Docs
Recipes
Wagmi

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(),
  },
});

Passkeys Developer Kit

©2024 Exodus Movement, Inc. All rights reserved.

Start building

Sign up to ship the simplest web3 onboarding solution.