This guide shows how to add Para to RainbowKit, allowing users to connect via social logins, email, and phone verification. Integration is simple—just add Para as a wallet connector to your wagmi configuration. Learn more about RainbowKit and wagmi 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 Developer Portal 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

​
Setup

1

Configure Wagmi and Para client

Create a configuration file to initialize your Para wallet configuration:

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();
2

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;
3

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

Para’s RainbowKit integration supports all of the ParaModal props for advanced configuration. Here’s an example of how to set up the GetParaOpts object with various options:

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
};

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

Customization Guide

Learn how to customize Para's appearance to match your brand

​
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 Using Wagmi Hooks and Using RainbowKit Hooks 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:

Rainbowkit Wallet Connector Example

A simple example of using Para's RainbowKit wallet connector as a wallet option in Rainbowkit ConnectModal

​
Troubleshooting

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

​
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.

Para + Wagmi Guide

Learn how to use the Para wagmi wallet connector directly