Skip to main content

​
Getting Started

This guide walks through the core integration: set up the provider, authenticate, display balances, and perform transactions.
For a minimal copy-paste example, see the React Quickstart. This guide explains each step in detail.

​
Prerequisites

​
Step 1: Set Up Provider

Wrap your application with PrivacyBoostProvider. The provider initializes the SDK and makes it available to all child components via hooks. While loading, it renders your loadingComponent; if initialization fails, it renders errorComponent. 
// App.tsx
import { PrivacyBoostProvider } from '@testinprod-io/privacy-boost-react';

const config = {
  appId: 'your-app-id',
  indexerUrl: 'https://test-api.privacy-boost.sunnyside.io/indexer',
  wethContract: "0x4200000000000000000000000000000000000006"
};

function App() {
  return (
    <PrivacyBoostProvider
      config={config}
      loadingComponent={<LoadingSpinner />}
      errorComponent={(error) => <ErrorDisplay error={error} />}
    >
      <MainApp />
    </PrivacyBoostProvider>
  );
}

​
Step 2: Connect Wallet

Use useAuth for authentication. authenticateWithWalletAdapter() connects the browser wallet (MetaMask, etc.), derives privacy keys, and authenticates — all in one call. 
import { useAuth } from '@testinprod-io/privacy-boost-react';

function ConnectButton() {
  const {
    isAuthenticated,
    authenticateWithWalletAdapter,
    privacyAddress,
    clearSession,
  } = useAuth();

  if (!isAuthenticated) {
    return (
      <button onClick={() => authenticateWithWalletAdapter()}>
        Connect Wallet
      </button>
    );
  }

  return (
    <div>
      <p>Connected: {privacyAddress?.slice(0, 20)}...</p>
      <button onClick={clearSession}>Clear Session</button>
    </div>
  );
}

​
Step 3: Display Balances

Use useBalances for reactive balance data. Balances update automatically when deposits, transfers, or withdrawals complete. 
import { useBalances } from '@testinprod-io/privacy-boost-react';

function BalanceList() {
  const { balances, loading } = useBalances();

  if (loading) return <div>Loading balances...</div>;

  return (
    <ul>
      {balances.map((balance) => (
        <li key={balance.tokenAddress}>
          {balance.symbol}: {balance.formattedShielded}
        </li>
      ))}
    </ul>
  );
}

​
Step 4: Perform Operations

Use useVault for deposit, unshield, and transfer operations. Amounts can be passed as human-readable strings (like "1.5") or as bigint values in wei. 
import { useState } from 'react';
import { useVault } from '@testinprod-io/privacy-boost-react';

function ShieldForm() {
  const { shield } = useVault();
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);

  const handleShield = async () => {
    setLoading(true);
    try {
      await shield({
        tokenAddress: '0x...',
        amount, // String or bigint
      });
      alert('Deposit successful!');
    } catch (error) {
      alert('Deposit failed');
    } finally {
      setLoading(false);
    }
  };

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

​
Step 5: Multi-Chain (Optional)

Use the useChain hook to operate on additional blockchains beyond the primary chain in your provider: 
import { useChain } from '@testinprod-io/privacy-boost-react';

function ArbitrumPanel() {
  const arbitrum = useChain({ indexerUrl: 'https://arb.example.com' });

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

  const handleShield = async () => {
    await arbitrum.vault.shield({
      tokenAddress: '0x...',
      amount: 1000000000000000000n,
    });
  };

  return <button onClick={handleShield}>Deposit on Arbitrum</button>;
}
See the React Multi-Chain guide for dashboard patterns, chain switching, and reusable components.

​
What’s Next

You’ve completed the core React flow: provider → auth → balances → shield/send. Here’s where to go from here:

Deposits

Deposit tokens into the shielded pool

Withdrawals

Withdraw tokens from the shielded pool

Private Transfers

Send tokens privately between users

Wallet Integration

Connect wallets and authenticate

Error Handling

Error codes and recovery patterns

Multi-Chain

Multi-chain hooks and patterns

API Reference

All hooks, types, and component documentation
For cross-platform concepts (key management, auth methods, error codes), see the Setup section.