Multi-Chain

This guide covers using the useChain hook and ChainClient to build React applications that operate across multiple blockchains.

For an overview of multi-chain concepts, see Multi-Chain Concepts.

The `useChain` Hook

useChain returns a ChainClient for a specific chain, memoized to prevent unnecessary re-renders:

import { useChain } from '@sunnyside-io/privacy-boost-react';

function MyComponent() {
  const ethereum = useChain({ serverUrl: 'https://eth.example.com' });

  if (!ethereum) return <div>Loading SDK...</div>;

  return <div>Chain ID: {ethereum.chainId}</div>;
}

useChain returns null if the parent SDK is not yet initialized. Chain clients are cached by serverUrl, so calling useChain with the same URL in multiple components returns the same instance.

Setup

Wrap your app with PrivacyBoostProvider as usual. The provider initializes the parent SDK, and useChain creates chain clients from it:

import { PrivacyBoostProvider } from '@sunnyside-io/privacy-boost-react';

function App() {
  return (
    <PrivacyBoostProvider config={{
      serverUrl: 'https://op.example.com',
      appId: 'my-app',
    }}>
      <MultiChainApp />
    </PrivacyBoostProvider>
  );
}

Authentication

Each chain client must be authenticated independently. Use the wallet adapter from useAuth or create one manually:

import { useChain, useAuth } from '@sunnyside-io/privacy-boost-react';
import { useState } from 'react';

function ChainConnect({ serverUrl, name }: { serverUrl: string; name: string }) {
  const chain = useChain({ serverUrl });
  const [authenticated, setAuthenticated] = useState(false);

  const connect = async () => {
    if (!chain) return;
    await chain.authenticate(walletAdapter);
    setAuthenticated(true);
  };

  if (!chain) return <div>Loading...</div>;

  if (!authenticated) {
    return <button onClick={connect}>Connect to {name}</button>;
  }

  return (
    <div>
      <p>Connected to {name} (chain {chain.chainId})</p>
      <ChainOperations chain={chain} />
    </div>
  );
}

Multi-Chain Dashboard

Here’s a pattern for building a multi-chain dashboard:

import { useChain } from '@sunnyside-io/privacy-boost-react';

const CHAINS = [
  { name: 'Ethereum', serverUrl: 'https://eth.example.com' },
  { name: 'Base', serverUrl: 'https://base.example.com' },
  { name: 'Optimism', serverUrl: 'https://op.example.com' },
];

function MultiChainDashboard() {
  return (
    <div>
      {CHAINS.map((chain) => (
        <ChainPanel key={chain.serverUrl} {...chain} />
      ))}
    </div>
  );
}

function ChainPanel({ name, serverUrl }: { name: string; serverUrl: string }) {
  const chain = useChain({ serverUrl });

  if (!chain) return <div>{name}: Loading...</div>;
  if (!chain.isAuthenticated) return <div>{name}: Not connected</div>;

  return (
    <div>
      <h3>{name}</h3>
      <ChainBalances chain={chain} />
      <ChainDeposit chain={chain} />
    </div>
  );
}

Chain-Scoped Components

Build reusable components that accept a ChainClient:

Balance Display

import type { ChainClient } from '@sunnyside-io/privacy-boost-react';
import { useState, useEffect } from 'react';

function ChainBalances({ chain }: { chain: ChainClient }) {
  const [shielded, setShielded] = useState<bigint>(0n);

  useEffect(() => {
    chain.vault.getBalance('0x...token').then((b) => setShielded(b.shielded));
  }, [chain]);

  return <p>Shielded: {shielded.toString()}</p>;
}

Deposit Form

import type { ChainClient } from '@sunnyside-io/privacy-boost-react';
import { useState } from 'react';

function ChainDeposit({ chain }: { chain: ChainClient }) {
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);

  const handleShield = async () => {
    setLoading(true);
    try {
      await chain.vault.shield({
        tokenAddress: '0x...',
        amount: BigInt(amount),
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input value={amount} onChange={(e) => setAmount(e.target.value)} />
      <button onClick={handleShield} disabled={loading}>
        {loading ? 'Depositing...' : 'Deposit'}
      </button>
    </div>
  );
}

Transfer Form

function ChainTransfer({ chain }: { chain: ChainClient }) {
  const [to, setTo] = useState('');
  const [amount, setAmount] = useState('');

  const handleSend = async () => {
    await chain.vault.send({
      to,
      tokenAddress: '0x...',
      amount: BigInt(amount),
    });
  };

  return (
    <div>
      <input value={to} onChange={(e) => setTo(e.target.value)} placeholder="Privacy address" />
      <input value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="Amount" />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

Chain Switching

Build a chain selector that lets users switch between chains:

import { useChain } from '@sunnyside-io/privacy-boost-react';
import { useState } from 'react';

const CHAINS = {
  ethereum: { name: 'Ethereum', serverUrl: 'https://eth.example.com' },
  base: { name: 'Base', serverUrl: 'https://base.example.com' },
};

function ChainSwitcher() {
  const [selected, setSelected] = useState<keyof typeof CHAINS>('ethereum');
  const chain = useChain(CHAINS[selected]);

  return (
    <div>
      <select value={selected} onChange={(e) => setSelected(e.target.value as keyof typeof CHAINS)}>
        {Object.entries(CHAINS).map(([key, { name }]) => (
          <option key={key} value={key}>{name}</option>
        ))}
      </select>

      {chain && <ChainOperations chain={chain} />}
    </div>
  );
}

Available Hooks

Hook	Purpose
`useChain(config)`	Get a `ChainClient` for a specific chain
`useAuth()`	Wallet connection and authentication (primary chain)
`useVault()`	Vault operations (primary chain)
`useBalances()`	Reactive balances (primary chain)
`useTransactions()`	Transaction history (primary chain)
`usePrivacyBoost()`	Direct SDK access

useAuth, useVault, useBalances, and useTransactions operate on the primary chain configured in the provider. For other chains, use useChain and access resources directly via the ChainClient (e.g., chain.vault, chain.transactions).

Next Steps

Provider Setup — configure the provider
Deposits Guide — shield operations
Transfers Guide — private transfers
Multi-Chain Concepts — architecture overview

Quickstart

Setup

SDKs

Multi-Chain

Multi-Chain

The `useChain` Hook

Setup

Authentication

Multi-Chain Dashboard

Chain-Scoped Components

Balance Display

Deposit Form

Transfer Form

Chain Switching

Available Hooks

Next Steps

​Multi-Chain

​The useChain Hook

​Setup

​Authentication

​Multi-Chain Dashboard

​Chain-Scoped Components

​Balance Display

​Deposit Form

​Transfer Form

​Chain Switching

​Available Hooks

​Next Steps

Multi-Chain

The `useChain` Hook

Setup

Authentication

Multi-Chain Dashboard

Chain-Scoped Components

Balance Display

Deposit Form

Transfer Form

Chain Switching

Available Hooks

Next Steps