useDeposit

import { useDeposit } from '@keystoneos/react';

function DepositAction({ settlementId, legIndex }) {
  const { status, depositInfo, txHash, error, fetchInfo, deposit } = useDeposit(
    settlementId,
    legIndex,
  );

  return (
    <div>
      <p>Status: {status}</p>

      {status === 'idle' && (
        <button onClick={deposit}>Deposit</button>
      )}

      {(status === 'fetching_info' || status === 'approving' || status === 'depositing') && (
        <p>Processing: {status.replace('_', ' ')}...</p>
      )}

      {status === 'deposit_confirmed' && txHash && (
        <p>Deposit confirmed. TX: {txHash}</p>
      )}

      {status === 'error' && (
        <p>Error: {error}</p>
      )}
    </div>
  );
}

interface UseDepositResult {
  status: DepositStatus;
  depositInfo: DepositInfo | null;
  txHash: string | null;
  error: string | null;
  fetchInfo: () => Promise<DepositInfo>;
  deposit: () => Promise<void>;
}

const { fetchInfo, depositInfo } = useDeposit(settlementId, 0);

useEffect(() => {
  fetchInfo(); // Fetch on mount
}, []);

if (depositInfo) {
  return (
    <div>
      <p>Escrow: {depositInfo.escrowAddress}</p>
      <p>Amount: {depositInfo.depositAmount}</p>
      <p>Chain: {depositInfo.chainId}</p>
      <button onClick={() => yourCustomDepositLogic(depositInfo)}>
        Custom Deposit
      </button>
    </div>
  );
}