Skip to main content

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

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

​
Basic Setup

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

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

​
Provider Props

​
With Configuration

interface PrivacyBoostProviderPropsWithConfig {
  config: PrivacyBoostConfig;
  loadingComponent?: React.ReactNode;
  errorComponent?: (error: Error) => React.ReactNode;
  children: React.ReactNode;
}
PropTypeRequiredDescription
configPrivacyBoostConfigYesSDK configuration
loadingComponentReactNodeNoLoading UI during initialization
errorComponent(error) => ReactNodeNoError UI on init failure
childrenReactNodeYesChild components

​
With Pre-initialized SDK

interface PrivacyBoostProviderPropsWithSDK {
  sdk: PrivacyBoost;
  children: React.ReactNode;
}

​
Loading States

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

​
Error Handling

<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: 
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

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

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: 
function MultiNetworkApp() {
  const [network, setNetwork] = useState<'mainnet' | 'testnet'>('mainnet');

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

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

​
Environment-Based Configuration

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