​
Introduction

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

​
Prerequisites

Before starting, ensure you have:

  • A Para 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 Para and RainbowKit

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

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

// Para configuration
const PARA_API_KEY = "your-api-key-here";
const PARA_ENVIRONMENT = Environment.DEVELOPMENT; // Use Environment.PRODUCTION for live apps

const paraWalletOptions = {
  para: {
    apiKey: PARA_API_KEY,
    environment: PARA_ENVIRONMENT,
  },
  appName: "My Awesome dApp",
  oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD],
};

// Create Para wallet connector
const paraWallet = getParaWallet(paraWalletOptions);

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

// 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 Para 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 "./paraConfig";

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

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

const paraWalletOptions = {
  para: {
    apiKey: PARA_API_KEY,
    environment: PARA_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 Para for your needs

​
Conclusion

You’ve successfully integrated the Para 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

.

Blocknative Web3-OnboardOverview