seismic-react

React hooks and providers for Seismic, composing with wagmi to add shielded wallet management, encrypted transactions, and signed reads to React apps.

React SDK (v1.1.1) for Seismic, built on wagmi 2.0+ and viem 2.x. Provides ShieldedWalletProvider context and hooks for encrypted transactions and signed reads in React applications.

npm install seismic-react

Quick Start

Minimal setup with RainbowKit:

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	Package setup, peer dependencies, and configuration
ShieldedWalletProvider	React context provider for shielded clients

Hooks Reference

Section	Description
Hooks Overview	Summary of all available hooks
useShieldedWallet	Access shielded wallet and public clients
useShieldedContract	Create a contract instance with ABI binding
useShieldedWriteContract	Send encrypted write transactions
useSignedReadContract	Perform signed, encrypted read calls

Wallet Guides

Section	Description
Wallet Guides Overview	Connecting different wallet providers
RainbowKit	Setup with RainbowKit wallet UI
Privy	Embedded wallets with Privy
AppKit	WalletConnect AppKit integration

Quick Links

By Task

• Connect a shielded wallet -> ShieldedWalletProvider

• Read shielded state -> useSignedReadContract

• Send an encrypted transaction -> useShieldedWriteContract

• Get a contract instance -> useShieldedContract

• Install the package -> Installation

• Set up RainbowKit -> RainbowKit Guide

By Component

• Provider -> ShieldedWalletProvider

• Hooks -> useShieldedWallet, useShieldedContract, useShieldedWriteContract, useSignedReadContract

• 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 -- Add the package and peer dependencies

2. Set up ShieldedWalletProvider -- Wrap your app with the provider

3. Connect a wallet -- Choose a wallet integration

4. Use hooks -- Read and write shielded contract state