This guide will walk you through the process of setting up Capsule with Wagmi, a popular React Hooks library for Ethereum. We’ll cover both v1 and v2 of Wagmi, as Capsule provides integration packages for both versions.

​
Installation

First, you’ll need to install the necessary packages. Choose the appropriate package based on your Wagmi version:

​
Setting Up Capsule with Wagmi v2

Here’s how to set up Capsule with Wagmi v2:

import { capsuleConnector } from '@usecapsule/wagmi-v2-integration';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import Capsule from '@usecapsule/web-sdk';

// Initialize Capsule
const capsule = new Capsule(Environment.BETA, YOUR_API_KEY);

// Configure chains and providers
const { chains, publicClient } = configureChains([mainnet, sepolia], [publicProvider()]);

// Create Wagmi config with Capsule connector
const config = createConfig({
  autoConnect: true,
  connectors: [
    capsuleConnector({
      capsule,
      chains,
      options: {},
      appName: 'Your App Name',
    }),
  ],
  publicClient,
});

// Wrap your app with WagmiConfig
function App() {
  return <WagmiConfig config={config}>{/* Your app components */}</WagmiConfig>;
}

​
Setting Up Capsule with Wagmi v1

For Wagmi v1, the setup is similar but uses different imports:

import { capsuleConnector } from '@usecapsule/wagmi-v1-integration';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import Capsule from '@usecapsule/web-sdk';

// Initialize Capsule
const capsule = new Capsule(Environment.BETA, YOUR_API_KEY);

// Configure chains and providers
const { chains, provider, webSocketProvider } = configureChains(
  [mainnet, sepolia],
  [publicProvider()]
);

// Create Wagmi client with Capsule connector
const client = createClient({
  autoConnect: true,
  connectors: [
    capsuleConnector({
      capsule,
      chains,
      options: {},
      appName: 'Your App Name',
    }),
  ],
  provider,
  webSocketProvider,
});

// Wrap your app with WagmiConfig
function App() {
  return <WagmiConfig client={client}>{/* Your app components */}</WagmiConfig>;
}

​
Usage

Once you’ve set up Wagmi with the Capsule connector, you can use Wagmi hooks in your components. Here’s a basic example:

import { useAccount, useConnect, useDisconnect } from 'wagmi';

function Profile() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  return <button onClick={() => connect({ connector: connectors[0] })}>Connect Wallet</button>;
}

​
Server-Side Usage

Wagmi is primarily designed for client-side usage. For server-side signing with Capsule, please refer to our Server-Side Signing Guide.

Remember to always handle errors appropriately and ensure your user is authenticated with Capsule before attempting to use Wagmi hooks for transactions or signing.

For more advanced usage and a complete API reference, please refer to the Wagmi documentation.

Was this page helpful?

ViemBlocknative Web3-Onboard