> For the complete documentation index, see [llms.txt](https://docs.seismic.systems/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.seismic.systems/clients/typescript/react.md).

# seismic-react

React SDK (v1.1.1) for [Seismic](https://seismic.systems), built on [wagmi](https://wagmi.sh/) 2.0+ and [viem](https://viem.sh/) 2.x. Provides `ShieldedWalletProvider` context and hooks for encrypted transactions and signed reads in React applications.

```bash
npm install seismic-react
```

## Quick Start

Minimal setup with RainbowKit:

```typescript
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
import { ShieldedWalletProvider } from 'seismic-react'
import { seismicTestnet } from 'seismic-react/rainbowkit'

const config = getDefaultConfig({
  appName: 'My Seismic App',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  chains: [seismicTestnet],
})

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ShieldedWalletProvider config={config}>
            <YourApp />
          </ShieldedWalletProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

## Architecture

The SDK wraps wagmi's connector layer to inject Seismic's shielded wallet and public clients:

```
wagmi config
  └─ ShieldedWalletProvider
       ├─ ShieldedPublicClient  (encrypted reads)
       ├─ ShieldedWalletClient  (encrypted writes)
       └─ Hooks
            ├─ useShieldedWallet          Access wallet/public clients
            ├─ useShieldedContract         Contract instance with ABI binding
            ├─ useShieldedWriteContract    Encrypted write transactions
            └─ useSignedReadContract       Signed, encrypted reads
```

## Documentation Navigation

### Getting Started

| Section                                                                             | Description                                         |
| ----------------------------------------------------------------------------------- | --------------------------------------------------- |
| [**Installation**](/clients/typescript/react/installation.md)                       | Package setup, peer dependencies, and configuration |
| [**ShieldedWalletProvider**](/clients/typescript/react/shielded-wallet-provider.md) | React context provider for shielded clients         |

### Hooks Reference

| Section                                                                             | Description                                 |
| ----------------------------------------------------------------------------------- | ------------------------------------------- |
| [**Hooks Overview**](/clients/typescript/react/hooks.md)                            | Summary of all available hooks              |
| [**useShieldedWallet**](/clients/typescript/react/hooks/useshieldedwallet.md)       | Access shielded wallet and public clients   |
| [**useShieldedContract**](/clients/typescript/react/hooks/useshieldedcontract.md)   | Create a contract instance with ABI binding |
| [**useShieldedWriteContract**](/clients/typescript/react/hooks/useshieldedwrite.md) | Send encrypted write transactions           |
| [**useSignedReadContract**](/clients/typescript/react/hooks/useshieldedread.md)     | Perform signed, encrypted read calls        |

### Wallet Guides

| Section                                                                  | Description                           |
| ------------------------------------------------------------------------ | ------------------------------------- |
| [**Wallet Guides Overview**](/clients/typescript/react/wallet-guides.md) | Connecting different wallet providers |
| [**RainbowKit**](/clients/typescript/react/wallet-guides/rainbowkit.md)  | Setup with RainbowKit wallet UI       |
| [**Privy**](/clients/typescript/react/wallet-guides/privy.md)            | Embedded wallets with Privy           |
| [**AppKit**](/clients/typescript/react/wallet-guides/appkit.md)          | WalletConnect AppKit integration      |

## Quick Links

### By Task

* **Connect a shielded wallet** -> [ShieldedWalletProvider](/clients/typescript/react/shielded-wallet-provider.md)
* **Read shielded state** -> [useSignedReadContract](/clients/typescript/react/hooks/useshieldedread.md)
* **Send an encrypted transaction** -> [useShieldedWriteContract](/clients/typescript/react/hooks/useshieldedwrite.md)
* **Get a contract instance** -> [useShieldedContract](/clients/typescript/react/hooks/useshieldedcontract.md)
* **Install the package** -> [Installation](/clients/typescript/react/installation.md)
* **Set up RainbowKit** -> [RainbowKit Guide](/clients/typescript/react/wallet-guides/rainbowkit.md)

### By Component

* **Provider** -> [ShieldedWalletProvider](/clients/typescript/react/shielded-wallet-provider.md)
* **Hooks** -> [useShieldedWallet](/clients/typescript/react/hooks/useshieldedwallet.md), [useShieldedContract](/clients/typescript/react/hooks/useshieldedcontract.md), [useShieldedWriteContract](/clients/typescript/react/hooks/useshieldedwrite.md), [useSignedReadContract](/clients/typescript/react/hooks/useshieldedread.md)
* **Chain configs** -> `seismicTestnet`, `sanvil`, `localSeismicDevnet`, `createSeismicDevnet`

## Features

* **Shielded Transactions** -- Encrypt calldata before sending via `useShieldedWriteContract`
* **Signed Reads** -- Prove caller identity in `eth_call` with `useSignedReadContract`
* **Contract Abstraction** -- ABI-bound contract instances via `useShieldedContract`
* **wagmi/RainbowKit Integration** -- Drop-in provider that composes with the standard wagmi stack
* **TypeScript Support** -- Full type inference from contract ABIs

## Next Steps

1. [**Install seismic-react**](/clients/typescript/react/installation.md) -- Add the package and peer dependencies
2. [**Set up ShieldedWalletProvider**](/clients/typescript/react/shielded-wallet-provider.md) -- Wrap your app with the provider
3. [**Connect a wallet**](/clients/typescript/react/wallet-guides/rainbowkit.md) -- Choose a wallet integration
4. [**Use hooks**](/clients/typescript/react/hooks.md) -- Read and write shielded contract state


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.seismic.systems/clients/typescript/react.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.