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

# Browser setup

# Browser Setup

This guide covers browser-specific considerations for the Privacy Boost WASM SDK.

## WASM Initialization

WASM modules must be initialized before use. This is an async operation:

```typescript theme={null}
import init, { PrivacyBoost } from '@sunnyside-io/privacy-boost-wasm';

// Option 1: Top-level await (ES modules)
await init();
const sdk = new PrivacyBoost(config);

// Option 2: IIFE
(async () => {
  await init();
  // SDK ready
})();

// Option 3: Initialization check
let initialized = false;

async function getSDK() {
  if (!initialized) {
    await init();
    initialized = true;
  }
  return new PrivacyBoost(config);
}
```

## Lazy Loading

For better initial page load, lazy-load the WASM module:

```typescript theme={null}
// Create a lazy loader
let sdkPromise: Promise<typeof import('@sunnyside-io/privacy-boost-wasm')> | null = null;

async function loadSDK() {
  if (!sdkPromise) {
    sdkPromise = import('@sunnyside-io/privacy-boost-wasm').then(async (module) => {
      await module.default(); // init()
      return module;
    });
  }
  return sdkPromise;
}

// Usage - only loads when needed
async function onConnectClick() {
  const { PrivacyBoost } = await loadSDK();
  const sdk = new PrivacyBoost(config);
  // ...
}
```

## React Integration

### Basic Hook

```typescript theme={null}
import { useState, useEffect, useCallback } from 'react';
import type { PrivacyBoost as SDKType } from '@sunnyside-io/privacy-boost-wasm';

export function usePrivacyBoost(config: WasmConfig) {
  const [sdk, setSDK] = useState<SDKType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let mounted = true;

    async function initialize() {
      try {
        const module = await import('@sunnyside-io/privacy-boost-wasm');
        await module.default();

        if (mounted) {
          const instance = new module.PrivacyBoost(config);
          setSDK(instance);
          setLoading(false);
        }
      } catch (err) {
        if (mounted) {
          setError(err as Error);
          setLoading(false);
        }
      }
    }

    initialize();

    return () => {
      mounted = false;
    };
  }, []);

  return { sdk, loading, error };
}
```

### Context Provider

```typescript theme={null}
import { createContext, useContext, ReactNode } from 'react';
import type { PrivacyBoost } from '@sunnyside-io/privacy-boost-wasm';

interface SDKContextValue {
  sdk: PrivacyBoost | null;
  loading: boolean;
  error: Error | null;
}

const SDKContext = createContext<SDKContextValue>({
  sdk: null,
  loading: true,
  error: null,
});

export function PrivacyBoostProvider({
  config,
  children,
}: {
  config: WasmConfig;
  children: ReactNode;
}) {
  const { sdk, loading, error } = usePrivacyBoost(config);

  return (
    <SDKContext.Provider value={{ sdk, loading, error }}>
      {children}
    </SDKContext.Provider>
  );
}

export function useSDK() {
  const context = useContext(SDKContext);
  if (!context.sdk && !context.loading) {
    throw new Error('SDK not initialized');
  }
  return context;
}
```

## Vue Integration

```typescript theme={null}
// composables/usePrivacyBoost.ts
import { ref, onMounted, onUnmounted } from 'vue';
import type { PrivacyBoost as SDKType } from '@sunnyside-io/privacy-boost-wasm';

export function usePrivacyBoost(config: WasmConfig) {
  const sdk = ref<SDKType | null>(null);
  const loading = ref(true);
  const error = ref<Error | null>(null);

  onMounted(async () => {
    try {
      const module = await import('@sunnyside-io/privacy-boost-wasm');
      await module.default();
      sdk.value = new module.PrivacyBoost(config);
    } catch (err) {
      error.value = err as Error;
    } finally {
      loading.value = false;
    }
  });

  onUnmounted(() => {
    if (sdk.value) {
      sdk.value.logout();
    }
  });

  return { sdk, loading, error };
}
```

## Svelte Integration

```svelte theme={null}
<!-- PrivacyBoostProvider.svelte -->
<script lang="ts">
  import { onMount, setContext } from 'svelte';
  import { writable } from 'svelte/store';
  import type { PrivacyBoost } from '@sunnyside-io/privacy-boost-wasm';

  export let config: WasmConfig;

  const sdk = writable<PrivacyBoost | null>(null);
  const loading = writable(true);
  const error = writable<Error | null>(null);

  setContext('privacy-boost', { sdk, loading, error });

  onMount(async () => {
    try {
      const module = await import('@sunnyside-io/privacy-boost-wasm');
      await module.default();
      sdk.set(new module.PrivacyBoost(config));
    } catch (err) {
      error.set(err as Error);
    } finally {
      loading.set(false);
    }
  });
</script>

<slot />
```

## Web Workers

For heavy operations, run the SDK in a Web Worker:

### worker.ts

```typescript theme={null}
import init, { PrivacyBoost } from '@sunnyside-io/privacy-boost-wasm';

let sdk: PrivacyBoost | null = null;

self.onmessage = async (e) => {
  const { type, payload, id } = e.data;

  try {
    if (type === 'init') {
      await init();
      sdk = new PrivacyBoost(payload.config);
      self.postMessage({ id, result: true });
    } else if (type === 'deposit') {
      if (!sdk) throw new Error('SDK not initialized');
      const result = await sdk.shield({
        tokenAddress: payload.token,
        amount: payload.amount,
      });
      self.postMessage({ id, result });
    }
    // ... other methods
  } catch (error) {
    self.postMessage({ id, error: (error as Error).message });
  }
};
```

### main.ts

```typescript theme={null}
const worker = new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module'
});

function callWorker<T>(type: string, payload?: any): Promise<T> {
  return new Promise((resolve, reject) => {
    const id = Math.random().toString(36);

    const handler = (e: MessageEvent) => {
      if (e.data.id === id) {
        worker.removeEventListener('message', handler);
        if (e.data.error) reject(new Error(e.data.error));
        else resolve(e.data.result);
      }
    };

    worker.addEventListener('message', handler);
    worker.postMessage({ type, payload, id });
  });
}

// Usage
await callWorker('init', { config });
const result = await callWorker('deposit', { token, amount });
```

## Content Security Policy

If using CSP, allow WASM execution:

```html theme={null}
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'wasm-unsafe-eval';">
```

Or in server headers:

```
Content-Security-Policy: script-src 'self' 'wasm-unsafe-eval';
```

## Cross-Origin Isolation

For SharedArrayBuffer support (improves performance):

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

## Browser Compatibility

| Browser | Version | Notes |
| - | - | - |
| Chrome | 57+ | Full support |
| Firefox | 52+ | Full support |
| Safari | 11+ | Full support |
| Edge | 16+ | Full support |

## Performance Tips

1. **Initialize once** - Call `init()` only once per page load
2. **Reuse SDK instance** - Don't recreate the SDK unnecessarily
3. **Use Web Workers** - For proof generation (heavy computation)
4. **Enable compression** - Serve WASM with gzip/brotli

## Next Steps

* [Node.js Setup](./node-setup) - Server-side usage
* [Wallet Integration](./wallet-integration) - Wallet integration
* [API Reference](../api-reference) - Complete API documentation


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.