RainbowKit Integration

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

​

Installation

Install the required packages for the integration:

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

​

Setup

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

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

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

​

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:

​

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:

​

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.