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

# React Quickstart

> Get started with Privacy Boost in React in 5 minutes

# React Quickstart

Add private payments to your React application with hooks and a provider component.

<Info>
  This quickstart gets you running in 5 minutes with minimal explanation. For detailed walkthroughs of each step, see the [React Getting Started guide](/sdk/react/getting-started). For background on configuration and auth options, see [Setup](/sdk/concepts/app-setup).
</Info>

## Installation

```bash theme={null}
npm install @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react
# or
yarn add @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react
# or
pnpm add @sunnyside-io/privacy-boost @sunnyside-io/privacy-boost-react
```

## Quick Example

### 1. Setup Provider

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

const config = {
  serverUrl: 'https://optimism.sepolia.privacyboost.io',
  wethContractAddress: "0x4200000000000000000000000000000000000006",
  appId: 'app_abc123xyz',
};

function App() {
  return (
    <PrivacyBoostProvider
      config={config}
      loadingComponent={<div>Loading SDK...</div>}
    >
      <Wallet />
    </PrivacyBoostProvider>
  );
}
```

### 2. Authentication Component

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

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

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

  return (
    <div>
      <p>Privacy Address: {privacyAddress}</p>
      <button onClick={clearSession}>Clear Session</button>
      <BalanceDisplay />
      <ShieldForm />
    </div>
  );
}
```

### 3. Display Balances

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

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

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

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

### 4. Deposit Form

```tsx theme={null}
// ShieldForm.tsx
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...token-address',
        amount, // Can be string like "1.5"
      });
      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 ? 'Depositing...' : 'Deposit'}
      </button>
    </div>
  );
}
```

### 5. Transfer Component

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

function TransferForm() {
  const { send } = useVault();
  const [to, setTo] = useState('');
  const [amount, setAmount] = useState('');

  const handleSend = async () => {
    await send({
      to: to as `0x${string}`,
      tokenAddress: '0x...token-address',
      amount,
    });
  };

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

## Available Hooks

| Hook                | Purpose                                |
| ------------------- | -------------------------------------- |
| `useAuth()`         | Wallet connection and authentication   |
| `useVault()`        | Deposit, unshield, transfer operations |
| `useBalances()`     | Reactive balance data                  |
| `useTransactions()` | Transaction history                    |
| `usePrivacyBoost()` | Direct SDK access                      |

## Next Steps

<CardGroup cols={2}>
  <Card title="React Getting Started" href="/sdk/react/getting-started">
    Detailed walkthrough of each integration step
  </Card>

  <Card title="Setup Guide" href="/sdk/concepts/app-setup">
    App ID, configuration, and auth method selection
  </Card>

  <Card title="Provider Setup" href="/sdk/react/guides/provider-setup">
    Provider config and initialization
  </Card>

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