Skip to main content

​
React Quickstart

Add private payments to your React application with hooks and a provider component.
This quickstart gets you running in 5 minutes with minimal explanation. For detailed walkthroughs of each step, see the React Getting Started guide. For background on configuration and auth options, see Setup.

​
Installation

npm install @testinprod-io/privacy-boost @testinprod-io/privacy-boost-react
# or
yarn add @testinprod-io/privacy-boost @testinprod-io/privacy-boost-react
# or
pnpm add @testinprod-io/privacy-boost @testinprod-io/privacy-boost-react

​
Quick Example

​
1. Setup Provider

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

const config = {
  indexerUrl: 'https://test-api.privacy-boost.sunnyside.io/indexer',
  wethContract: "0x4200000000000000000000000000000000000006",
  appId: 'app_abc123xyz',
};

function App() {
  return (
    <PrivacyBoostProvider
      config={config}
      loadingComponent={<div>Loading SDK...</div>}
    >
      <Wallet />
    </PrivacyBoostProvider>
  );
}

​
2. Authentication Component

// Wallet.tsx
import { useAuth } from '@testinprod-io/privacy-boost-react';

function Wallet() {
  const {
    isAuthenticated,
    privacyAddress,
    authenticateWithWalletAdapter,
    clearSession
  } = useAuth();

  if (!isAuthenticated) {
    return (
      <button onClick={() => authenticateWithWalletAdapter()}>
        Connect Wallet
      </button>
    );
  }

  return (
    <div>
      <p>Privacy Address: {privacyAddress}</p>
      <button onClick={clearSession}>Clear Session</button>
      <BalanceDisplay />
      <ShieldForm />
    </div>
  );
}

​
3. Display Balances

// BalanceDisplay.tsx
import { useBalances } from '@testinprod-io/privacy-boost-react';

function BalanceDisplay() {
  const { balances, loading } = useBalances();

  if (loading) return <div>Loading balances...</div>;

  return (
    <ul>
      {balances.map((b) => (
        <li key={b.tokenAddress}>
          {b.symbol}: {b.formattedShielded} (shielded)
        </li>
      ))}
    </ul>
  );
}

​
4. Deposit Form

// ShieldForm.tsx
import { useState } from 'react';
import { useVault } from '@testinprod-io/privacy-boost-react';

function ShieldForm() {
  const { shield } = useVault();
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);

  const handleShield = async () => {
    setLoading(true);
    try {
      await shield({
        tokenAddress: '0x...token-address',
        amount, // Can be string like "1.5"
      });
      alert('Deposit successful!');
    } catch (error) {
      alert('Deposit failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount"
      />
      <button onClick={handleShield} disabled={loading}>
        {loading ? 'Depositing...' : 'Deposit'}
      </button>
    </div>
  );
}

​
5. Transfer Component

// TransferForm.tsx
import { useState } from 'react';
import { useVault } from '@testinprod-io/privacy-boost-react';

function TransferForm() {
  const { send } = useVault();
  const [to, setTo] = useState('');
  const [amount, setAmount] = useState('');

  const handleSend = async () => {
    await send({
      to: to as `0x${string}`,
      tokenAddress: '0x...token-address',
      amount,
    });
  };

  return (
    <div>
      <input
        value={to}
        onChange={(e) => setTo(e.target.value)}
        placeholder="Recipient privacy address"
      />
      <input
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount"
      />
      <button onClick={handleSend}>Send Privately</button>
    </div>
  );
}

​
Multi-Chain

Use the useChain hook to operate on additional blockchains: 
import { useChain } from '@testinprod-io/privacy-boost-react';

function ArbitrumDeposit() {
  const arbitrum = useChain({ indexerUrl: 'https://arb.example.com' });

  if (!arbitrum) return <div>Loading...</div>;

  return (
    <button onClick={() => arbitrum.vault.shield({ tokenAddress: '0x...', amount: 1000n })}>
      Deposit on Arbitrum
    </button>
  );
}
See the Multi-Chain guide for details.

​
Available Hooks

HookPurpose
useAuth()Wallet connection and authentication
useVault()Deposit, unshield, transfer operations
useBalances()Reactive balance data
useTransactions()Transaction history
useChain(config)Chain client for multi-chain operations
usePrivacyBoost()Direct SDK access

​
Next Steps

React Getting Started

Detailed walkthrough of each integration step

Setup Guide

App ID, configuration, and auth method selection

Provider Setup

Provider config and initialization

API Reference

All hooks, types, and component documentation