Skip to main content

​
Import

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

​
Usage

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

​
Parameters

ParameterTypeRequiredDescription
settlementIdstringYesThe settlement UUID.
legIndexnumberYesThe index of the leg to deposit (0-based).

​
Return Type

interface UseDepositResult {
  status: DepositStatus;
  depositInfo: DepositInfo | null;
  txHash: string | null;
  error: string | null;
  fetchInfo: () => Promise<DepositInfo>;
  deposit: () => Promise<void>;
}
PropertyTypeDescription
statusDepositStatusCurrent step in the deposit flow.
depositInfoDepositInfo | nullPre-encoded calldata and metadata (available after fetching).
txHashstring | nullTransaction hash (available after deposit confirmation).
errorstring | nullError message if any step failed.
fetchInfofunctionFetch deposit info without executing. Useful for preview.
depositfunctionExecute the full deposit flow (fetch + approve + deposit).

​
DepositStatus Values

StatusDescription
"idle"No deposit in progress.
"fetching_info"Fetching deposit calldata from the API.
"checking_balance"Checking token balance (Tier 3 only).
"approving"ERC-20 approval transaction in progress.
"approval_confirmed"Approval confirmed, proceeding to deposit.
"depositing"Deposit transaction in progress.
"deposit_confirmed"Deposit confirmed on-chain.
"error"A step failed. Check error for details.

​
DepositInfo Object

FieldTypeDescription
calldatastringEncoded depositLeg() calldata.
escrowAddressstringEscrow contract address.
chainIdnumberBlockchain network.
tokenAddressstringERC-20 token contract.
depositAmountstringAmount in smallest units.
approvalCalldatastringEncoded approve() calldata.
approvalAmountstringAmount to approve.

​
How It Routes

The deposit hook routes based on what’s available:
  1. Action delegates configured (Tier 2) - Calls onDepositRequired from the provider
  2. Wagmi context detected (Tier 3) - Uses connected wallet directly
  3. Neither - deposit() fetches info only; no on-chain execution

​
Fetch-Only Mode

Use fetchInfo to get the deposit calldata without executing. Useful for showing a preview or building custom deposit UI: 
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>
  );
}