# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.