Wagmi, Viem, and Ethers Quickstart

To maximize flexibility, Wagmi, Ethers, and Viem packages are decoupled from the core SDKs. Therefore, to add support you'll need to install the relevant packages. These packages follow the naming convention @usecapsule/{NAME}-{VERSION}-integration (eg @usecapsule/wagmi-v2-integration)

Add the SDK to your project using the following command:

Typescript

# Example illustrates ethers v6
npm install @usecapsule/ethers-v6-integration
OR
pnpm install @usecapsule/ethers-v6-integration
OR
yarn add @usecapsule/ethers-v6-integration

Wagmi

If you’re looking to get started with Capsule as quickly as possible and you already use wagmi within your web application, we have built a wagmi connector, called the CapsuleConnector

NOTE: Capsule has support for Wagmi v1 and v2. The example below indicates v2 integration instructions. To use v1, replace the wagmi package name with @usecapsule/wagmi-v1-integration

NOTE: CapsuleConnector is not yet supported for mobile. If this is needed for your use case, please get in touch!

Web

import { capsuleConnector } from "@usecapsule/wagmi-v2-integration";
import { configureChains, createConfig, WagmiConfig } from "wagmi";

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [SOME_CHAIN],
  [SOME_PROVIDER]
);

const config = createConfig({
  autoConnect: true,
  connectors: [
    // ... other connectors
    capsuleConnector({
      capsule,
      chains,
      options: {},
      appName: "Your App",
      disableModal: true,
    }),
  ],
  publicClient,
  webSocketPublicClient,
});

return <WagmiConfig config={config}>...</WagmiConfig>;

Ethers

NOTE: Capsule has support for Ethers v5 and v6. The example below indicates v6 integration instructions. To use v5, replace the ethers package name with @usecapsule/ethers-v5-integration

Web

import { CapsuleEthersSigner } from '@usecapsule/ethers-v6-integration';
import { ethers } from 'ethers';

const provider = new ethers.JsonRpcProvider(
  CHAIN_PROVIDER,
  CHAIN,
);
const ethersSigner = new CapsuleEthersSigner(capsule, provider);

await ethersSigner.signMessage("Hello Capsule!")

React Native

import { CapsuleEthersSigner } from '@usecapsule/ethers-v6-integration';
import { ethers } from 'ethers';

const provider = new ethers.JsonRpcProvider(
  CHAIN__PROVIDER,
  CHAIN,
);    
await capsule.init();  // Mobile only
const example_tx = {
  from: CURRENT_WALLET_ADDRESS,
  to: DEFAULT_TO_ADDRESS,
  value: 10101010000000,
  gasLimit: 21000,
  maxPriorityFeePerGas: 1000000000,
  maxFeePerGas: 3000000000,
  nonce: await provider.getTransactionCount(currentWallet.address),
  chainId: '11155111',
  type: 2,
};

const ethersSigner = new CapsuleEthersSigner(capsule, provider);
const res = await ethersSigner.sendTransaction(example_tx)

Server

// in frontend - once a user is created/signed in, you can export the session
const serializedSession = capsule.exportSession();
// then transfer `serializedSession` to your backend over some secure method

// in backend - import `serializedSession` to enable signing functionality
import { CapsuleEthersSigner } from '@usecapsule/ethers-v6-integration';
import Capsule, { Environment } from '@usecapsule/server-sdk';
import { ethers } from 'ethers';

const capsule = new Capsule(Environment.DEVELOPMENT, YOUR_API_KEY);
// read in `serializedSession` from your secure transfer method
await capsule.importSession(serializedSession);

const ethersSigner = new CapsuleEthersSigner(capsule, undefined);
const signature = await ethersSigner.signMessage('hello-world');

Viem

NOTE: Capsule has support for Viem v1 and v2. The example below indicates v2 integration instructions. To use v1, replace the viem package name with @usecapsule/viem-v1-integration

Web

import { createCapsuleViemClient } from '@usecapsule/viem-v2-integration';
import { http } from 'viem';

const viemClient = createCapsuleViemClient(capsule, {
  chain: CHAIN,
  transport: http(CHAIN_PROVIDER),
});

await viemClient.signMessage("Hello Capsule!");