RainbowKit Integration

This guide shows how to add Para to RainbowKit, allowing users to connect via social logins, email, and phone verification. You have two integration options:

RainbowKit Wallet (getParaWallet) - Adds Para as a wallet option in RainbowKit. When selected, opens the Para modal on top of the RainbowKit modal for social login.
Para Integrated (getParaWalletIntegrated) - Embeds Para directly within RainbowKit’s right-hand panel for a seamless, integrated experience without additional modal layers.

Learn more about and in their documentation.

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration. Before integrating Para with your application, ensure you have:

Completed Para authentication setup in your application (see one of our Setup Guides)
A valid Para API key
An RPC endpoint for your desired network

Need an API key? Visit the to create API keys, manage billing, teams, and more.

Installation

Install the required packages for the integration:

npm install @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query

yarn add @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query

pnpm add @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query

Setup

Configure Wagmi and Para client

Create a configuration file to initialize your Para wallet configuration. Choose between the two integration methods:

RainbowKit Wallet (Modal Overlay)
Para Integrated (Embedded Panel)

import { QueryClient } from "@tanstack/react-query";
import { connectorsForWallets } from "@getpara/rainbowkit";
import { getParaWallet, OAuthMethod, AuthLayout } from "@getpara/rainbowkit-wallet";
import { Environment } from "@getpara/web-sdk";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";

const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY || "";

const paraWalletOpts = {
  para: {
    environment: Environment.BETA,
    apiKey: API_KEY,
  },
  appName: "My dApp",
};

const paraWallet = getParaWallet(paraWalletOpts);

const connectors = connectorsForWallets([
  {
    groupName: "Social Login",
    wallets: [paraWallet],
  },
]
// The rest of your connectors
);

export const wagmiConfig = createConfig({
  connectors,
  chains: [sepolia],
  transports: {
    [sepolia.id]: http(),
  },
});

export const queryClient = new QueryClient();

import { QueryClient } from "@tanstack/react-query";
import { connectorsForWallets } from "@getpara/rainbowkit";
import { getParaWalletIntegrated, OAuthMethod, ParaWeb, Environment } from "@getpara/rainbowkit-wallet";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";

const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY || "";

// Initialize Para client
const paraClient = new ParaWeb(Environment.BETA, API_KEY);

// Configure Para integrated wallet
const paraWalletIntegratedOpts = {
  para: paraClient,
  nameOverride: "Sign in with Para", // Optional: customize the button text
  transports: {
    [sepolia.id]: http(),
  },
};

const paraWallet = getParaWalletIntegrated(paraWalletIntegratedOpts);

const connectors = connectorsForWallets([
  {
    groupName: "Sign up or log in",
    wallets: [paraWallet],
  },
],
{
  appName: "My dApp",
  projectId: "YOUR_WALLET_CONNECT_PROJECT_ID", // Required for WalletConnect
});

export const wagmiConfig = createConfig({
  connectors,
  chains: [sepolia],
  transports: {
    [sepolia.id]: http(),
  },
});

export const queryClient = new QueryClient();

Set Up Providers

Wrap your application with the necessary providers:

import React from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { RainbowKitProvider, lightTheme } from "@getpara/rainbowkit";
import { WagmiProvider } from "wagmi";
import { queryClient, wagmiConfig } from "./wagmi"; // Path to your config file
import { ConnectButton } from "@getpara/rainbowkit";


function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Rest of your application */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

Add Connect Button

Add the ConnectButton component to your application to allow users to connect their wallets:

import { ConnectButton } from "@getpara/rainbowkit";

function App() {
  return (
    // The rest of your application
    <div>
      <ConnectButton />
    </div>
  );
}

If using Next.js, its recommended to setup providers in a dedicated Providers component and using either the ‘use client’ directive or the next/dynamic import to ensure the providers are rendered on the client side.

Advanced Configuration

Both integration methods support advanced configuration, but with slightly different approaches:

RainbowKit Wallet Configuration
Para Integrated Configuration

The getParaWallet method supports all ParaModal props:

const paraWalletOpts: GetParaOpts = {
  para: {
    environment: Environment.DEVELOPMENT,
    apiKey: API_KEY,
  },
  appName: "My dApp",
  logo: "/path/to/logo.svg", // Your app logo
  oAuthMethods: [
    OAuthMethod.APPLE,
    OAuthMethod.DISCORD,
    // Add other OAuth methods as needed
  ],
  theme: {
    backgroundColor: "#FFFFFF",
    font: "Inter", // Font family to use
  },
  onRampTestMode: true,
  disableEmailLogin: false,
  disablePhoneLogin: false,
  authLayout: [AuthLayout.AUTH_FULL], // Layout options for the auth modal
  recoverySecretStepEnabled: true, // Enable recovery secrets
};

The getParaWalletIntegrated method requires initializing a ParaWeb client with constructor options:

// Constructor options for ParaWeb client
const paraConstructorOpts = {
  // Portal branding
  portalBackgroundColor: '#FFFFFF',
  portalPrimaryButtonColor: '#5298FF',
  portalTextColor: '#000000',
  portalPrimaryButtonTextColor: '#FFFFFF',

  // Email branding
  emailTheme: 'light',
  emailPrimaryColor: '#5298FF',
  githubUrl: 'https://github.com/yourorg',
  xUrl: 'https://x.com/yourorg',
  homepageUrl: 'https://yourapp.com',
  supportUrl: 'support@yourapp.com',
};

const paraClient = new ParaWeb(Environment.BETA, API_KEY, paraConstructorOpts);

// Para integrated wallet options
const paraWalletIntegratedOpts = {
  para: paraClient,
  nameOverride: 'Sign in with Para',
  iconOverride: '/path/to/custom-icon.svg', // Optional custom icon
  iconBackgroundOverride: '#ffffff',
  transports: {
    [sepolia.id]: http(),
  },
};

const paraWallet = getParaWalletIntegrated(paraWalletIntegratedOpts);

You can also configure modal-specific props when using Para integrated:

export const paraModalProps = {
  appName: 'My dApp',
  oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.DISCORD, OAuthMethod.APPLE],
  recoverySecretStepEnabled: true,
};

You can learn more about customizing the ParaModal in the customization guide:

Interacting with the Connected Wallet

Rainbowkit is powered by wagmi, so you can use hooks like useAccount to interact with the connected wallet. To learn more about using wagmi hooks or the Rainbowkit hooks check out their docs and guides.

import { useAccount, useBalance } from "wagmi";

function WalletInfo() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });

  if (!isConnected){
    return <p>Connect your wallet to view balance</p>;
  } 

  return (
    <div>
      <p>Connected address: {address}</p>
      <p>Balance: {balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}

Examples

If you’d like to learn more about how to use Rainbowkit with Para, check out our examples on GitHub:

Troubleshooting

If you run into any issues, check out the following common problems and solutions:

Connection issues

If you encounter connection issues, check the following:

Verify your Para API key is correct
Ensure you’ve configured the correct environment (DEVELOPMENT vs PRODUCTION)
Check browser console for error messages
Verify you’ve selected supported networks in your configuration

Next Steps

You can also use Para directly without RainbowKit while still taking advantage of wagmi’s hooks. Check out our wagmi guide for more information on how to do that.

Getting Started

Choose a Path

Project Setup

Go Live

How Para Works

Shared Guides

Migrations

RainbowKit Integration

Prerequisites

Installation

Setup

Advanced Configuration

Interacting with the Connected Wallet

Examples

Troubleshooting

Next Steps

​Prerequisites

​Installation

​Setup

​Advanced Configuration

​Interacting with the Connected Wallet

​Examples

​Troubleshooting

​Next Steps

Prerequisites

Installation

Setup

Advanced Configuration

Interacting with the Connected Wallet

Examples

Troubleshooting

Next Steps