> ## Documentation Index
> Fetch the complete documentation index at: https://docs.privacyboost.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Integrate the Privacy Boost React SDK into your application

# Getting Started

This guide walks through the core integration: set up the provider, authenticate, display balances, and perform transactions.

<Info>
  For a minimal copy-paste example, see the [React Quickstart](/sdk/quickstart/react). This guide explains each step in detail.
</Info>

## Prerequisites

* Both packages [installed](/sdk/react/installation) in your project
* An [App ID](/sdk/concepts/app-setup) and server URL (see [Configuration](/sdk/concepts/configuration))
* A wallet (MetaMask, WalletConnect, etc.)
* Familiarity with [authentication options](/sdk/concepts/authentication) (optional for development, required for production)

## 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`.

```tsx theme={null}
// App.tsx
import { PrivacyBoostProvider } from '@sunnyside-io/privacy-boost-react';

const config = {
  appId: 'your-app-id',
  serverUrl: 'https://optimism.sepolia.privacyboost.io',
  wethContractAddress: "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.

```tsx theme={null}
import { useAuth } from '@sunnyside-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.

```tsx theme={null}
import { useBalances } from '@sunnyside-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.

```tsx theme={null}
import { useState } from 'react';
import { useVault } from '@sunnyside-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:

```tsx theme={null}
import { useChain } from '@sunnyside-io/privacy-boost-react';

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

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

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

  return <button onClick={handleShield}>Deposit on Ethereum</button>;
}
```

See the [React Multi-Chain guide](/sdk/react/guides/multi-chain) 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:

<CardGroup cols={2}>
  <Card title="Deposits" href="/sdk/react/guides/deposits">
    Deposit tokens into the shielded pool
  </Card>

  <Card title="Withdrawals" href="/sdk/react/guides/withdrawals">
    Withdraw tokens from the shielded pool
  </Card>

  <Card title="Private Transfers" href="/sdk/react/guides/transfers">
    Send tokens privately between users
  </Card>

  <Card title="Wallet Integration" href="/sdk/react/guides/wallet-integration">
    Connect wallets and authenticate
  </Card>

  <Card title="Error Handling" href="/sdk/react/guides/error-handling">
    Error codes and recovery patterns
  </Card>

  <Card title="Multi-Chain" href="/sdk/react/guides/multi-chain">
    Multi-chain hooks and patterns
  </Card>

  <Card title="API Reference" href="/sdk/react/api-reference">
    All hooks, types, and component documentation
  </Card>
</CardGroup>

For cross-platform concepts (key management, auth methods, error codes), see the [Setup section](/sdk/concepts/app-setup).