# 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**](https://docs.seismic.systems/clients/typescript/react/installation)                       | Package setup, peer dependencies, and configuration |
| [**ShieldedWalletProvider**](https://docs.seismic.systems/clients/typescript/react/shielded-wallet-provider) | React context provider for shielded clients         |

### Hooks Reference

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

### Wallet Guides

| Section                                                                                           | Description                           |
| ------------------------------------------------------------------------------------------------- | ------------------------------------- |
| [**Wallet Guides Overview**](https://docs.seismic.systems/clients/typescript/react/wallet-guides) | Connecting different wallet providers |
| [**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      |

## Quick Links

### By Task

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

### By Component

* **Provider** -> [ShieldedWalletProvider](https://docs.seismic.systems/clients/typescript/react/shielded-wallet-provider)
* **Hooks** -> [useShieldedWallet](https://docs.seismic.systems/clients/typescript/react/hooks/useshieldedwallet), [useShieldedContract](https://docs.seismic.systems/clients/typescript/react/hooks/useshieldedcontract), [useShieldedWriteContract](https://docs.seismic.systems/clients/typescript/react/hooks/useshieldedwrite), [useSignedReadContract](https://docs.seismic.systems/clients/typescript/react/hooks/useshieldedread)
* **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**](https://docs.seismic.systems/clients/typescript/react/installation) -- Add the package and peer dependencies
2. [**Set up ShieldedWalletProvider**](https://docs.seismic.systems/clients/typescript/react/shielded-wallet-provider) -- Wrap your app with the provider
3. [**Connect a wallet**](https://docs.seismic.systems/clients/typescript/react/wallet-guides/rainbowkit) -- Choose a wallet integration
4. [**Use hooks**](https://docs.seismic.systems/clients/typescript/react/hooks) -- Read and write shielded contract state