Skip to main content

​
Provider Setup

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

​
Basic Setup

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

function App() {
  return (
    <PrivacyBoostProvider
      config={{
        indexerUrl: 'https://test-api.privacy-boost.sunnyside.io/indexer',
        proverUrl: 'https://test-api.privacy-boost.sunnyside.io/prover',
        chainId: 11155420,
        shieldContract: "0xB22fD661b322F10d4B7cd0cFcb9578C485423119",
        wethContract: "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 '@testinprod-io/privacy-boost';
import { PrivacyBoostProvider } from '@testinprod-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 '@testinprod-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 '@testinprod-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: { chainId: 1, /* ... */ },
    testnet: { chainId: 11155111, /* ... */ },
  };

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

​
Environment-Based Configuration

const config = {
  indexerUrl: process.env.REACT_APP_INDEXER_URL!,
  proverUrl: process.env.REACT_APP_PROVER_URL!,
  chainId: Number(process.env.REACT_APP_CHAIN_ID),
  shieldContract: process.env.REACT_APP_SHIELD_CONTRACT! as `0x${string}`,
};

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

​
Next Steps