Wagmi
Learn how to integrate Capsule with Wagmi for both v1 and v2
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?