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

# Provider setup

# Provider Setup

The `PrivacyBoostProvider` initializes the SDK and provides context to all child components.

## Basic Setup

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

function App() {
  return (
    <PrivacyBoostProvider
      config={{
        appId: 'your-app-id',
        serverUrl: 'https://optimism.sepolia.privacyboost.io',
        wethContractAddress: "0x4200000000000000000000000000000000000006"
      }}
    >
      <YourApp />
    </PrivacyBoostProvider>
  );
}
```

## Provider Props

### With Configuration

```tsx theme={null}
interface PrivacyBoostProviderPropsWithConfig {
  config: PrivacyBoostConfig;
  loadingComponent?: React.ReactNode;
  errorComponent?: (error: Error) => React.ReactNode;
  children: React.ReactNode;
}
```

| Prop               | Type                   | Required | Description                      |
| ------------------ | ---------------------- | -------- | -------------------------------- |
| `config`           | `PrivacyBoostConfig`   | Yes      | SDK configuration                |
| `loadingComponent` | `ReactNode`            | No       | Loading UI during initialization |
| `errorComponent`   | `(error) => ReactNode` | No       | Error UI on init failure         |
| `children`         | `ReactNode`            | Yes      | Child components                 |

### With Pre-initialized SDK

```tsx theme={null}
interface PrivacyBoostProviderPropsWithSDK {
  sdk: PrivacyBoost;
  children: React.ReactNode;
}
```

## Loading States

```tsx theme={null}
<PrivacyBoostProvider
  config={config}
  loadingComponent={
    <div className="loading">
      <Spinner />
      <p>Initializing Privacy Boost...</p>
    </div>
  }
>
  <App />
</PrivacyBoostProvider>
```

## Error Handling

```tsx theme={null}
<PrivacyBoostProvider
  config={config}
  errorComponent={(error) => (
    <div className="error">
      <h2>Failed to Initialize</h2>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        Retry
      </button>
    </div>
  )}
>
  <App />
</PrivacyBoostProvider>
```

## Using Pre-initialized SDK

For advanced control, initialize the SDK yourself:

```tsx theme={null}
import { PrivacyBoost } from '@sunnyside-io/privacy-boost';
import { PrivacyBoostProvider } from '@sunnyside-io/privacy-boost-react';
import { useEffect, useState } from 'react';

function App() {
  const [sdk, setSdk] = useState<PrivacyBoost | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    PrivacyBoost.create(config)
      .then(setSdk)
      .catch(setError);
  }, []);

  if (error) return <ErrorDisplay error={error} />;
  if (!sdk) return <Loading />;

  return (
    <PrivacyBoostProvider sdk={sdk}>
      <MainApp />
    </PrivacyBoostProvider>
  );
}
```

## Accessing Provider State

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

function StatusBar() {
  const { loading, error, initialized } = usePrivacyBoostState();

  if (loading) return <span>Loading...</span>;
  if (error) return <span>Error: {error.message}</span>;
  if (!initialized) return <span>Not ready</span>;

  return <span>Ready</span>;
}
```

## Accessing SDK Directly

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

function AdvancedComponent() {
  const sdk = usePrivacyBoost();

  // Access any SDK method directly
  const handleCustomOperation = async () => {
    if (!sdk) return;

    const balance = await sdk.vault.getBalance('0x...');
    console.log('Balance:', balance);
  };

  return <button onClick={handleCustomOperation}>Custom Operation</button>;
}
```

## Multiple Networks

For multi-network support, use multiple providers:

```tsx theme={null}
function MultiNetworkApp() {
  const [network, setNetwork] = useState<'mainnet' | 'testnet'>('mainnet');

  const configs = {
    mainnet: { appId: 'your-app-id', serverUrl: 'https://optimism.privacyboost.io', /* ... */ },
    testnet: { appId: 'your-app-id', serverUrl: 'https://optimism.sepolia.privacyboost.io', /* ... */ },
  };

  return (
    <PrivacyBoostProvider key={network} config={configs[network]}>
      <NetworkSelector value={network} onChange={setNetwork} />
      <App />
    </PrivacyBoostProvider>
  );
}
```

## Environment-Based Configuration

```tsx theme={null}
const config = {
  appId: process.env.REACT_APP_APP_ID!,
  serverUrl: process.env.REACT_APP_SERVER_URL!,
};

function App() {
  return (
    <PrivacyBoostProvider config={config}>
      <MainApp />
    </PrivacyBoostProvider>
  );
}
```

## Next Steps

* [Wallet Integration](./wallet-integration)
* [Deposits Guide](./deposits)
* [Advanced](./advanced)