Initial Setup

Installing the SDK & Incorporating it into Your Project

NOTE: Capsule is currently in beta. To gain access to these packages and obtain an API Key, please fill out this form.
Add the SDK to your project using the following command:
Web
React Native
npm install @usecapsule/web-sdk
OR
pnpm install @usecapsule/web-sdk
OR
yarn add @usecapsule/web-sdk
npm install @usecapsule/react-native-wallet
OR
pnpm install @usecapsule/react-native-wallet
OR
yarn add @usecapsule/react-native-wallet
Then, install pods 
co ios && pod install && cd ..
With the SDK now incorporated, the Capsule wallet should serve as a near seamless replacement for your existing wallet.
The key replacement you'll want to make is substituting all current Remote Wallet imports with the import from the Capsule library.
For web integrations, you must decide whether to use the CapsuleModal component. While we highly recommend its use for the smoothest possible integration, you also have the option to manually use the SDK for a more custom integration.
NOTE: Capsule also provides as part of the SDK another component called CapsuleButton which wraps around CapsuleModaland handles a lot of event logic like modal open state, what happens when the modal is closed, etc.
Instantiating the Capsule Class
Web Modal
If you're using the CapsuleModal component, the changes would look like this:
Web
import Capsule, { Environment } from '@usecapsule/web-sdk';
import { 
    CapsuleButton,
    CapsuleModal
} from '@usecapsule/web-sdk';
​
const capsule = new Capsule(
  Environment.BETA,
  YOUR_API_KEY
);
​
<CapsuleModal capsule={capsule} />
​
// Or, if you want to use the CapsuleButton...
<CapsuleButton capsule={capsule} appName="Example"/>
Core SDKs
If you are using the Web and Mobile SDKs directly, here’s how you can import them. Follow the instructions in the Integration Guide for user setup
Web
React Native
import { Capsule, Environment } from '@usecapsule/web-sdk';
const capsule = new Capsule(
  Environment.BETA,
  YOUR_API_KEY
);
import { CapsuleMobile, Environment } from '@usecapsule/react-native-wallet';
const capsule = new CapsuleMobile(
    Environment.BETA,
    YOUR_API_KEY,
    { offloadMPCComputationURL: 'https://partner-mpc-computation.beta.usecapsule.com' } // add your offload URL and opts here
);
Using Capsule With Popular Libraries
Wagmi Connector
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: CapsuleConnector is not yet supported for mobile. If this is needed for your use case, please get in touch!
Web
import { CapsuleConnector } from '@usecapsule/web-sdk';
import {
  configureChains,
  createConfig,
  WagmiConfig,
} from 'wagmi';
​
const {chains, publicClient, webSocketPublicClient} = configureChains(
    [SOME_CHAIN],
    [SOME_PROVIDER],
);
​
const config = createConfig({
  autoConnect: true,
  connectors: [
    // ... other connectors
    new CapsuleConnector({
      capsule,
      chains,
      options: {},
      appName: 'Mobile Example',
      disableModal: true,
    }),
  ],
  publicClient,
  webSocketPublicClient,
});
​
return (
  <WagmiConfig config={config}>...</WagmiConfig>
);
NOTE: Capsule is also compatible with major libraries for signing like ethers.js and viem. For more on this, check out the Signing Transactions section

Welcome to Capsule!

Next - Getting Started

Examples Hub

Last modified 13d ago