​
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 React project set up
  • Node.js and npm (or yarn) installed
  • A Capsule API key (Fill out this access form)

​
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