Account Kit

Appearance

Capsule Integration Guide ​

Capsule is a signing solution that you can use to create secure, embedded MPC wallets with just an email or a social login. Capsule-enabled wallets are portable across applications, recoverable, and programmable, so your users do not need to create different signers or contract accounts for every application they use.

Combining Capsule with Account Kit allows you to get the best of both on and off-chain programmability. You can use Capsule as a Signer to create a wallet that works across apps, and then connect it to Account Kit to create expressive smart accounts for your users!

Integration ​

Follow these steps to begin integrating Capsule:

  1. Obtain access to the Capsule SDK and an API key by completing this form.
  2. For further assistance or if you wish to add more permissions or automation, consult the complete Capsule developer documentation or contact [email protected].

Install the SDK ​

Using CapsuleSigner in the aa-signers package requires installation of the @usecapsule/web-sdk SDK. aa-signers lists it as optional dependency.

Web

bash
npm i -s @usecapsule/web-sdk
bash
yarn add @usecapsule/web-sdk

React Native

bash
npm i -s @usecapsule/react-native-sdk
bash
yarn add @usecapsule/react-native-sdk

Note

To use CapsuleSigner in your app's client, you must ensure the window object is defined.

Create a SmartAccountSigner ​

Next, setup the Capsule SDK and create an authenticated CapsuleSigner using the aa-signers package:

ts
import { sepolia } from "@alchemy/aa-core";
import { CapsuleSigner } from "@alchemy/aa-signers/capsule";
import { Environment } from "@usecapsule/web-sdk";
import { http } from "viem";

export const createCapsuleSigner = async () => {
  // get an API Key by filling out this form: https://form.typeform.com/to/hLaJeYJW
  const capsuleSigner = new CapsuleSigner({
    env: Environment.DEVELOPMENT,
    apiKey: "CAPSULE_API_KEY",
    walletConfig: {
      chain: sepolia,
      // get your own Alchemy API key at: https://dashboard.alchemy.com/
      transport: http(`${sepolia.rpcUrls.alchemy.http[0]}/ALCHEMY_API_KEY`),
    },
  });

  await capsuleSigner.authenticate();

  return capsuleSigner;
};

Use it with Modular Account ​

Let's see it in action with aa-alchemy:

ts
import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { createCapsuleSigner } from "./capsule";

const chain = sepolia;

const provider = await createModularAccountAlchemyClient({
  apiKey: "ALCHEMY_API_KEY",
  chain,
  signer: await createCapsuleSigner(),
});
ts
import { sepolia } from "@alchemy/aa-core";
import { CapsuleSigner } from "@alchemy/aa-signers/capsule";
import { Environment } from "@usecapsule/web-sdk";
import { http } from "viem";

export const createCapsuleSigner = async () => {
  // get an API Key by filling out this form: https://form.typeform.com/to/hLaJeYJW
  const capsuleSigner = new CapsuleSigner({
    env: Environment.DEVELOPMENT,
    apiKey: "CAPSULE_API_KEY",
    walletConfig: {
      chain: sepolia,
      // get your own Alchemy API key at: https://dashboard.alchemy.com/
      transport: http(`${sepolia.rpcUrls.alchemy.http[0]}/ALCHEMY_API_KEY`),
    },
  });

  await capsuleSigner.authenticate();

  return capsuleSigner;
};