> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.
# RainbowKit Integration
> Integrate Para with RainbowKit to provide seamless wallet connection and authentication for your dApp users.
export const Card = ({imgUrl, iconUrl, fontAwesomeIcon, title, description, href, horizontal = false}) => {
return
;
};
export const Link = ({href, label}) => {
e.currentTarget.querySelector("#underline").style.height = "2px";
}} onMouseLeave={e => {
e.currentTarget.querySelector("#underline").style.height = "1px";
}}>
{label}
;
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:
1. **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.
2. **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:
```bash npm theme={null}
npm install @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query
```
```bash yarn theme={null}
yarn add @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query
```
```bash pnpm theme={null}
pnpm add @getpara/rainbowkit-wallet @getpara/rainbowkit wagmi viem @tanstack/react-query
```
## Setup
Create a configuration file to initialize your Para wallet configuration. Choose between the two integration methods:
```typescript [expandable] theme={null}
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();
```
```typescript [expandable] theme={null}
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();
```
Wrap your application with the necessary providers:
```tsx [expandable] theme={null}
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 (
{/* Rest of your application */}
);
}
export default App;
```
Add the `ConnectButton` component to your application to allow users to connect their wallets:
```tsx theme={null}
import { ConnectButton } from "@getpara/rainbowkit";
function App() {
return (
// The rest of your application
);
}
```
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:
The `getParaWallet` method supports all `ParaModal` props:
```typescript [expandable] theme={null}
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:
```typescript [expandable] theme={null}
// 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:
```typescript [expandable] theme={null}
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.
```tsx [expandable] theme={null}
import { useAccount, useBalance } from "wagmi";
function WalletInfo() {
const { address, isConnected } = useAccount();
const { data: balance } = useBalance({ address });
if (!isConnected){
return
Connect your wallet to view balance
;
}
return (
Connected address: {address}
Balance: {balance?.formatted} {balance?.symbol}
);
}
```
## 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:
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
If the Para modal doesn't appear when clicking the connect button:
* Ensure you're using the correct imports from `@getpara/rainbowkit`
* Check for any CSS conflicts that might hide the modal
* Verify your RainbowKit providers are properly configured
## 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.
}
{(iconUrl || fontAwesomeIcon) &&
}