# RainbowKit
RainbowKit is the recommended wallet connection library for Seismic React apps. It provides a polished connect modal, chain switching, and account management out of the box.
## Prerequisites
```bash
npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query seismic-react seismic-viem
```
## Step 1: Configure wagmi
Create a wagmi config using RainbowKit's `getDefaultConfig` with Seismic chains:
```typescript
import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { seismicTestnet } from "seismic-react/rainbowkit";
const config = getDefaultConfig({
appName: "My Seismic App",
projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
chains: [seismicTestnet],
});
```
{% hint style="warning" %}
Replace `YOUR_WALLETCONNECT_PROJECT_ID` with a project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/).
{% endhint %}
## Step 2: Set Up Providers
Wrap your app with the provider stack. The nesting order matters:
```typescript
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ShieldedWalletProvider } from 'seismic-react'
import '@rainbow-me/rainbowkit/styles.css'
const queryClient = new QueryClient()
function App({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
{% hint style="info" %}
`ShieldedWalletProvider` must be inside `RainbowKitProvider` so it can access the connected wallet from wagmi's context.
{% endhint %}
## Step 3: Add the Connect Button
RainbowKit provides a pre-built connect button component:
```typescript
import { ConnectButton } from '@rainbow-me/rainbowkit'
function Header() {
return (
)
}
```
## Step 4: Use Shielded Hooks
Once the providers are in place, use `seismic-react` hooks to interact with shielded contracts:
```typescript
import { useShieldedWallet } from 'seismic-react'
function MyComponent() {
const { walletClient, loaded, error } = useShieldedWallet()
if (!loaded) return Initializing shielded wallet...
if (error) return Error: {error}
return Connected!
}
```
## Next.js Setup
Next.js App Router requires client components for providers. Create a separate providers file:
```typescript
// app/providers.tsx
'use client'
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ShieldedWalletProvider } from 'seismic-react'
import { seismicTestnet } from 'seismic-react/rainbowkit'
import '@rainbow-me/rainbowkit/styles.css'
const config = getDefaultConfig({
appName: 'My Seismic App',
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
chains: [seismicTestnet],
})
const queryClient = new QueryClient()
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
Then wrap your root layout:
```typescript
// app/layout.tsx
import { Providers } from './providers'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
{% hint style="info" %}
The `'use client'` directive is required because providers use React context, which is only available in client components.
{% endhint %}
## Local Development with Sanvil
For local development, use the `sanvil` chain (Seismic's local development node) instead of `seismicTestnet`:
```typescript
import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { seismicTestnet, sanvil } from "seismic-react/rainbowkit";
const config = getDefaultConfig({
appName: "My Seismic App",
projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
chains: [
...(process.env.NODE_ENV === "development" ? [sanvil] : []),
seismicTestnet,
],
});
```
## Complete Example
A full working setup in a single file:
```typescript
'use client'
import { RainbowKitProvider, ConnectButton, getDefaultConfig } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ShieldedWalletProvider, useShieldedWallet } from 'seismic-react'
import { seismicTestnet } from 'seismic-react/rainbowkit'
import '@rainbow-me/rainbowkit/styles.css'
const config = getDefaultConfig({
appName: 'My Seismic App',
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
chains: [seismicTestnet],
})
const queryClient = new QueryClient()
function WalletStatus() {
const { walletClient, publicClient, loaded, error } = useShieldedWallet()
if (!loaded) return Initializing shielded wallet...
if (error) return Error: {error}
if (!walletClient) return Connect your wallet to get started.
return (
Shielded wallet ready
Public client: {publicClient ? 'Available' : 'Loading...'}
)
}
export default function App() {
return (
)
}
```
## See Also
* [Wallet Guides Overview](https://docs.seismic.systems/clients/typescript/react/wallet-guides) -- Comparison of wallet libraries
* [ShieldedWalletProvider](https://docs.seismic.systems/clients/typescript/react/shielded-wallet-provider) -- Provider reference and options
* [useShieldedWallet](https://docs.seismic.systems/clients/typescript/react/hooks/useshieldedwallet) -- Access shielded wallet context
* [Privy Guide](https://docs.seismic.systems/clients/typescript/react/wallet-guides/privy) -- Email/social login alternative
* [AppKit Guide](https://docs.seismic.systems/clients/typescript/react/wallet-guides/appkit) -- WalletConnect modal alternative