Provider Setup
ThePrivacyBoostProvider 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://optimism.sepolia.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;
}
| 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
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://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
const config = {
appId: process.env.REACT_APP_APP_ID!,
serverUrl: process.env.REACT_APP_SERVER_URL!,
};
function App() {
return (
<PrivacyBoostProvider config={config}>
<MainApp />
</PrivacyBoostProvider>
);
}