Skip to main content

​
Deposits

This guide covers depositing tokens into the privacy pool using the Privacy Boost React SDK.

​
Basic Deposit

import { useVault } from '@testinprod-io/privacy-boost-react';

function ShieldButton() {
  const { shield } = useVault();

  const handleShield = async () => {
    const result = await shield({
      tokenAddress: '0x...token-address',
      amount: '1.0',
    });

    console.log('Deposit tx:', result.txHash);
  };

  return <button onClick={handleShield}>Deposit</button>;
}

​
Deposit Parameters

ParameterTypeRequiredDescription
tokenAddressHexYesToken contract address
amountstring | bigintYesAmount (human-readable string or wei)
onProgressOnProgressNoProgress callback

​
Progress Tracking

Track shield steps with the onProgress callback: 
function DepositWithProgress() {
  const { shield } = useVault();
  const [step, setStep] = useState<string | null>(null);

  const handleShield = async () => {
    await shield({
      tokenAddress: '0x...token-address',
      amount: '1.0',
      onProgress: ({ step, message }) => {
        setStep(message);
      },
    });
    setStep(null);
  };

  return (
    <div>
      <button onClick={handleShield}>Deposit</button>
      {step && <p>{step}</p>}
    </div>
  );
}

​
Deposit Steps

StepDescription
APPROVALApproving token spend
ENCRYPTIONEncrypting shield data
TRANSACTIONSubmitting on-chain transaction
CONFIRMATIONWaiting for block confirmation

​
Depositing ETH

Native ETH is automatically wrapped to WETH during shield: 
const ETH_ADDRESS = '0x0000000000000000000000000000000000000000';

const result = await shield({
  tokenAddress: ETH_ADDRESS,
  amount: '0.1',
});

​
Complete Example

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

function ShieldForm({ tokenAddress }: { tokenAddress: string }) {
  const { shield } = useVault();
  const { refresh } = useBalances();
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);
  const [step, setStep] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleShield = async () => {
    setLoading(true);
    setError(null);

    try {
      await shield({
        tokenAddress,
        amount,
        onProgress: ({ message }) => setStep(message),
      });
      setAmount('');
      await refresh();
    } catch (err: any) {
      if (err.code !== 'TRANSACTION_REJECTED') {
        setError(err.message);
      }
    } finally {
      setLoading(false);
      setStep(null);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount"
        disabled={loading}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {step && <p>{step}</p>}
      <button onClick={handleShield} disabled={loading || !amount}>
        {loading ? 'Depositing...' : 'Deposit'}
      </button>
    </div>
  );
}

​
Error Handling

try {
  await shield({ tokenAddress, amount });
} catch (error: any) {
  switch (error.code) {
    case 'TRANSACTION_REJECTED':
      return;
    case 'INSUFFICIENT_BALANCE':
      setError('Not enough balance in wallet');
      break;
    case 'INVALID_AMOUNT':
      setError('Invalid amount');
      break;
    default:
      setError(error.message);
  }
}

​
Best Practices

​
1. Refresh Balances After Deposit

const { shield } = useVault();
const { refresh } = useBalances();

await shield({ tokenAddress, amount });
await refresh();

​
2. Handle Wallet Rejection Silently

When users cancel the wallet popup, don’t show an error: 
try {
  await shield({ tokenAddress, amount });
} catch (err: any) {
  if (err.code === 'TRANSACTION_REJECTED') return;
  setError(err.message);
}

​
3. Show Progress to Users

Deposits involve multiple on-chain steps. Always show progress so users know the operation is working.

​
Next Steps