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

// 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={<div>Loading SDK...</div>}
    >
      <Wallet />
    </PrivacyBoostProvider>
  );
}

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

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

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

  return (
    <div>
      <p>Privacy Address: {privacyAddress}</p>
      <button onClick={logout}>Disconnect</button>
      <BalanceDisplay />
      <DepositForm />
    </div>
  );
}

// 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>
  );
}

// DepositForm.tsx
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...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={handleDeposit} disabled={loading}>
        {loading ? 'Depositing...' : 'Deposit'}
      </button>
    </div>
  );
}

// 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,
      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>
  );
}