Using Passkeys with Wagmi

import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { createWallet } from '@passkeys/core';
import { createPasskeysConnector } from '@passkeys/wagmi';
 
// Create a Passkeys wallet instance
const wallet = createWallet({
  appId: '<YOUR_APP_ID>',
  providers: {
    ethereum: {
      chains: [1], // Ethereum mainnet
      defaultChain: 1,
    },
  },
});
 
// Create a Passkeys Wagmi connector
const passkeysConnector = createPasskeysConnector({ wallet });
 
// Create a Wagmi config
export const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors: [
    passkeysConnector,
    // ...add other connectors if needed
  ],
});

import { WagmiProvider } from 'wagmi';
import { WalletProvider, WalletWidget } from '@passkeys/react';
import { config } from './config'; // Import from the setup above
import { wallet } from './config'; // Import from the setup above
 
function App() {
  return (
    <WagmiProvider config={config}>
      <WalletProvider wallet={wallet}>
        <WalletWidget />
        {/* Your application components */}
      </WalletProvider>
    </WagmiProvider>
  );
}

import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi';
 
function Profile() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
  const { data: balance } = useBalance({
    address,
  });
 
  if (isConnected) {
    return (
      <div>
        <div>Connected to {address}</div>
        <div>
          Balance: {balance?.formatted} {balance?.symbol}
        </div>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.uid} onClick={() => connect({ connector })}>
          Connect to {connector.name}
        </button>
      ))}
    </div>
  );
}