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

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

const config = {
  serverUrl: 'https://optimism.sepolia.privacyboost.io',
  wethContractAddress: "0x4200000000000000000000000000000000000006",
  appId: 'app_abc123xyz',
};

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

// Wallet.tsx
import { useAuth } from '@sunnyside-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>
  );
}

// BalanceDisplay.tsx
import { useBalances } from '@sunnyside-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>
  );
}

// ShieldForm.tsx
import { useState } from 'react';
import { useVault } from '@sunnyside-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>
  );
}

// TransferForm.tsx
import { useState } from 'react';
import { useVault } from '@sunnyside-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>
  );
}