RainbowKit Integration
Learn how to integrate Capsule with RainbowKit wallet adapters for a seamless onboarding experience.
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?