# Wallet Guides

`seismic-react` integrates with any wallet library that provides wagmi configuration. This section covers setup for the most popular options.

## Supported Libraries

| Library                                                                                          | Best For                         | Key Feature                                      |
| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------ |
| [**RainbowKit**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/rainbowkit) | dApps wanting polished wallet UI | Built-in modal, chain switching, account display |
| [**Privy**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/privy)           | Apps needing email/social login  | Embedded wallets, onboarding flow                |
| [**AppKit**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/appkit)         | WalletConnect ecosystem apps     | WalletConnect modal, broad wallet support        |

## Common Integration Pattern

Regardless of which wallet library you choose, the integration follows the same steps:

1. **Install** the wallet library alongside `seismic-react`
2. **Configure wagmi** with Seismic chain definitions
3. **Nest providers** in the correct order
4. **Use hooks** from `seismic-react` in your components

### Provider Nesting Order

All wallet integrations require the same provider hierarchy:

```
WagmiProvider
  └─ QueryClientProvider
       └─ [Wallet Provider] (RainbowKit / Privy / AppKit)
            └─ ShieldedWalletProvider
                 └─ Your App
```

{% hint style="warning" %}
`ShieldedWalletProvider` must be nested inside both `WagmiProvider` and your wallet provider. It reads the connected wallet from wagmi's context, so placing it outside will cause a runtime error.
{% endhint %}

### Chain Configuration

All wallet libraries use the same chain imports from `seismic-react/rainbowkit`:

```typescript
import { seismicTestnet } from "seismic-react/rainbowkit";
```

## Choosing a Library

* **Want the easiest setup with a beautiful wallet modal?** Use [RainbowKit](https://docs.seismic.systems/clients/typescript/react/wallet-guides/rainbowkit)
* **Need email/social login or embedded wallets?** Use [Privy](https://docs.seismic.systems/clients/typescript/react/wallet-guides/privy)
* **Want WalletConnect with maximum wallet compatibility?** Use [AppKit](https://docs.seismic.systems/clients/typescript/react/wallet-guides/appkit)

## Pages

| Page                                                                                             | Description                      |
| ------------------------------------------------------------------------------------------------ | -------------------------------- |
| [**RainbowKit**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/rainbowkit) | Setup with RainbowKit wallet UI  |
| [**Privy**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/privy)           | Embedded wallets with Privy      |
| [**AppKit**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/appkit)         | WalletConnect AppKit integration |

## See Also

* [Installation](https://docs.seismic.systems/clients/typescript/react/installation) -- Package setup and peer dependencies
* [ShieldedWalletProvider](https://docs.seismic.systems/clients/typescript/react/shielded-wallet-provider) -- Provider reference and configuration
* [Hooks Overview](https://docs.seismic.systems/clients/typescript/react/hooks) -- All available hooks