Skip to main content

​
Getting Started

This guide walks through integrating the Privacy Boost React SDK into your application.

​
Step 1: Set Up Provider

Wrap your application with PrivacyBoostProvider: 
// App.tsx
import { PrivacyBoostProvider } from '@testinprod-io/privacy-boost-react';

const 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"
};

function App() {
  return (
    <PrivacyBoostProvider
      config={config}
      loadingComponent={<LoadingSpinner />}
      errorComponent={(error) => <ErrorDisplay error={error} />}
    >
      <MainApp />
    </PrivacyBoostProvider>
  );
}

​
Step 2: Connect Wallet

Use useAuth for authentication: 
import { useAuth } from '@testinprod-io/privacy-boost-react';

function ConnectButton() {
  const {
    isConnected,
    isAuthenticated,
    authenticateInjected,
    privacyAddress,
    logout,
  } = useAuth();

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

  return (
    <div>
      <p>Connected: {privacyAddress?.slice(0, 20)}...</p>
      <button onClick={logout}>Disconnect</button>
    </div>
  );
}

​
Step 3: Display Balances

Use useBalances for reactive balance data: 
import { useBalances } from '@testinprod-io/privacy-boost-react';

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

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

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

​
Step 4: Perform Operations

Use useVault for deposit, withdraw, and transfer: 
import { useState } from 'react';
import { useVault } from '@testinprod-io/privacy-boost-react';

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

  const handleDeposit = async () => {
    setLoading(true);
    try {
      await deposit({
        tokenAddress: '0x...',
        amount, // String or bigint
      });
      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={handleDeposit} disabled={loading}>
        {loading ? 'Processing...' : 'Deposit'}
      </button>
    </div>
  );
}

​
Step 5: Manage Contacts

Use useContacts for contact management: 
import { useContacts } from '@testinprod-io/privacy-boost-react';

function ContactList() {
  const { contacts, addContact, removeContact } = useContacts();

  return (
    <div>
      <ul>
        {contacts.map((contact) => (
          <li key={contact.id}>
            {contact.name}
            <button onClick={() => removeContact(contact.privacyAddress)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

​
Step 6: View Transaction History

Use useTransactions for history: 
import { useTransactions } from '@testinprod-io/privacy-boost-react';

function TransactionHistory() {
  const { transactions, loading, fetchHistory } = useTransactions();

  useEffect(() => {
    fetchHistory({ limit: 20 });
  }, []);

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

  return (
    <ul>
      {transactions.map((tx) => (
        <li key={tx.txHash}>
          {tx.type}: {tx.amount.toString()} ({tx.status})
        </li>
      ))}
    </ul>
  );
}

​
Complete Example

import {
  PrivacyBoostProvider,
  useAuth,
  useVault,
  useBalances,
} from '@testinprod-io/privacy-boost-react';

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

function Wallet() {
  const { isAuthenticated, authenticateInjected, logout } = useAuth();
  const { balances } = useBalances();
  const { deposit, withdraw, send } = useVault();

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

  return (
    <div>
      <h2>Balances</h2>
      {balances.map((b) => (
        <p key={b.tokenAddress}>
          {b.symbol}: {b.formattedShielded}
        </p>
      ))}

      <button onClick={() => deposit({ tokenAddress: '0x...', amount: '1' })}>
        Deposit
      </button>

      <button onClick={() => send({ to: '0x04...', tokenAddress: '0x...', amount: '0.5' })}>
        Send
      </button>

      <button onClick={logout}>Logout</button>
    </div>
  );
}

​
Next Steps