​
Introduction

This guide demonstrates how to integrate Capsule, a secure and user-friendly wallet solution, with RainbowKit, a popular React library for managing wallet connections. We’ll focus on implementing the Capsule Modal, which provides a seamless and customizable authentication experience for your users.

​
Prerequisites

Before starting, ensure you have:

  • A Capsule API key. You can get one from the Developer Portal
  • RainbowKit set up in your project

​
Setup and Implementation

​
Step 1: Install Dependencies

First, install the necessary packages:

​
Step 2: Configure Capsule and RainbowKit

Create a new file (e.g., capsuleConfig.ts) to set up Capsule and RainbowKit:

import { Environment, OAuthMethod } from "@usecapsule/react-sdk";
import { getCapsuleWallet } from "@usecapsule/rainbowkit-wallet";
import { connectorsForWallets } from "@rainbow-me/rainbowkit";
import { createConfig } from "wagmi";
import { sepolia } from "wagmi/chains";
import { createClient, http } from "viem";

// Capsule configuration
const CAPSULE_API_KEY = "your-api-key-here";
const CAPSULE_ENVIRONMENT = Environment.DEVELOPMENT; // Use Environment.PRODUCTION for live apps

const capsuleWalletOptions = {
  capsule: {
    apiKey: CAPSULE_API_KEY,
    environment: CAPSULE_ENVIRONMENT,
  },
  appName: "My Awesome dApp",
  oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD],
};

// Create Capsule wallet connector
const capsuleWallet = getCapsuleWallet(capsuleWalletOptions);

// Configure RainbowKit connectors
const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [capsuleWallet],
  },
]);

// Wagmi client configuration
const config = createConfig({
  connectors,
  chains: [sepolia],
  client: ({ chain }) => createClient({ chain, transport: http() }),
});

export { connectors, config };

​
Step 3: Implement in Your React Application

In your main application file (e.g., App.tsx), use the Capsule configuration:

import React from "react";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, ConnectButton } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { connectors, config } from "./capsuleConfig";

import "@rainbow-me/rainbowkit/styles.css";

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <div>
            <h1>Welcome to My dApp</h1>
            <ConnectButton />
            {/* Your app content */}
          </div>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

​
Customization Options

Capsule offers various customization options to match your app’s design:

const capsuleWalletOptions = {
  capsule: {
    apiKey: CAPSULE_API_KEY,
    environment: CAPSULE_ENVIRONMENT,
  },
  appName: "My Awesome dApp",
  theme: {
    backgroundColor: "#ffffff",
    foregroundColor: "#ff6700",
  },
  oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD],
  logo: "path/to/your/logo.png", // Optional: Your app's logo
};

For more detailed information on customizations, check out the following guide:

Customization Guide

Learn how to customize Capsule for your needs

​
Conclusion

You’ve successfully integrated the Capsule Modal with RainbowKit in your React application. This setup provides your users with a secure and user-friendly wallet option, enhancing their experience in your decentralized application.

For more advanced features and detailed API references, please refer to the

RainbowKit documentation

.

Was this page helpful?

Blocknative Web3-OnboardOverview