Blocknative Web3-Onboard

Capsule works as an easy add-on to Blocknative's Web3-Onboard Library. If you're already using Web3-Onboard, you can add Capsule as an option in just a few lines of code.

The key integration differences to be aware of are the following:

• CapsuleInitOptions is the type passed into the capsuleModule. Here is the type definition:

  type CapsuleInitOptions = {
    environment: Environment;
    apiKey: string;
    constructorOpts?: Partial<ConstructorOpts>;
    modalProps?: Partial<CapsuleModalPropsForInit>;
    walletIcon: () => Promise<string>;
    walletLabel?: string;
  };

• modalProps takes in properties that would otherwise be passed to the CapsuleModal, such as theme and oAuthMethods

• constructorOpts takes in properties that would otherwise be passed as the third argument to instantiate the Capsule() object. See the list

For more information on getting set up with Web3-Onboard, check out the docs

Here's an example:

import Onboard from "@web3-onboard/core";
import capsuleModule, { Environment, OAuthMethod, Theme } from "@web3-onboard/capsule";

import Onboard from "@web3-onboard/core";
import capsuleModule, { Environment, OAuthMethod, Theme } from "@web3-onboard/capsule";

// Initialize the Capsule module with CapsuleInitOptions
const capsule = capsuleModule({
  environment: Environment.BETA,
  apiKey: "YOUR_API_KEY",
  modalProps: {
    theme: Theme.dark,
    branding: {
      colors: {
        primaryButton: {
          // Brand the Capsule modal with your brand color
          surface: {
            default: "#ff6700",
          },
        },
      },
    },
    oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER],

    // Your logo can be image types .png, .jpg, .svg
    logoUrl: "/my_logo.png",
  },
  constructorOpts: {
    // Email props to customize the custom email
    emailTheme: "light",
    emailPrimaryColor: "pink",

    // Portal props to customize branding on the passkey auth portal
    portalBackgroundColor: "#5e5656",
    portalPrimaryButtonColor: "#ff6700",
    portalTextColor: "#ffffff",
  },
  // Optional: Brand the web3-onboard modal with your own Icon and Label
  walletIcon: async () => (await import("./my-app-icon.js")).default,
  walletLabel: "Sign In with Email",
});

const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    capsule,
    //... other wallets
  ],
});