Skip to main content

Installation

Package Installation

Install the Privacy Boost TypeScript SDK using your preferred package manager:
# npm
npm install @testinprod-io/privacy-boost

# yarn
yarn add @testinprod-io/privacy-boost

# pnpm
pnpm add @testinprod-io/privacy-boost

Bundler Configuration

The SDK includes WebAssembly (WASM) modules that require specific bundler configuration.

Vite

Vite works out of the box. No additional configuration needed.

Webpack 5

Add the following to your webpack.config.js:
module.exports = {
  experiments: {
    asyncWebAssembly: true,
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'webassembly/async',
      },
    ],
  },
};

Next.js

Add to your next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
    };
    return config;
  },
};

module.exports = nextConfig;
For App Router, also add to your layout:
// app/layout.tsx
export const dynamic = 'force-dynamic';

Create React App

CRA requires react-app-rewired to modify webpack:
npm install react-app-rewired
Create config-overrides.js:
module.exports = function override(config) {
  config.experiments = {
    ...config.experiments,
    asyncWebAssembly: true,
  };
  return config;
};
Update package.json scripts:
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
}

Rollup

import { wasm } from '@rollup/plugin-wasm';

export default {
  plugins: [
    wasm({
      sync: ['*.wasm'],
    }),
  ],
};

esbuild

import { build } from 'esbuild';
import { wasmLoader } from 'esbuild-plugin-wasm';

build({
  plugins: [wasmLoader()],
});

Content Security Policy

If your application uses CSP, add the following directives:
<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' 'wasm-unsafe-eval';
           connect-src https://indexer.example.com https://prover.example.com;">

TypeScript Configuration

Recommended tsconfig.json settings:
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Node.js Usage

For Node.js applications:
npm install @testinprod-io/privacy-boost
Ensure you’re using Node.js 18+ which includes native fetch support. For Node.js < 18, add a fetch polyfill:
npm install node-fetch
import fetch from 'node-fetch';
globalThis.fetch = fetch as unknown as typeof globalThis.fetch;

import { PrivacyBoost } from '@testinprod-io/privacy-boost';
// ...

Verifying Installation

Test your installation:
import { PrivacyBoost } from '@testinprod-io/privacy-boost';

async function test() {
  try {
    const sdk = await PrivacyBoost.create({
      indexerUrl: 'https://indexer.example.com',
      proverUrl: 'https://prover.example.com',
      chainId: 1,
      shieldContract: '0x0000000000000000000000000000000000000000',
    });
    console.log('SDK initialized successfully');
  } catch (error) {
    console.error('SDK initialization failed:', error);
  }
}

test();

Troubleshooting

”WebAssembly is not defined”

Ensure your bundler supports WebAssembly and you’re running in a browser or Node.js environment that supports WASM.

”Failed to load WASM module”

Check that:
  1. Your bundler is configured correctly
  2. The WASM file is being served with the correct MIME type (application/wasm)
  3. Your CSP allows wasm-unsafe-eval

TypeScript errors

Ensure you have TypeScript 4.7+ and the correct moduleResolution setting in tsconfig.json.

Next Steps