Skip to main content

React Hooks

All hooks require a VaultProvider ancestor and return React Query-based state.

Data hooks​

useVaultMetadata​

Fetch vault metadata (asset, share token, decimals, type, TVL).

const { data, isLoading, error } = useVaultMetadata(vaultAddress);

Returns: VaultMetadata | undefined

interface VaultMetadata {
  asset: Address;
  share: Address;
  assetDecimals: number;
  shareDecimals: number;
  assetSymbol: string;
  shareSymbol: string;
  poolId: bigint;
  vaultKind: number;
  vaultType: 'ASYNC' | 'SYNC_DEPOSIT_ASYNC_REDEEM';
  totalAssets: bigint;
}

useVaultUserState​

Fetch the connected user's position, pending operations, and claimable balances. Auto-refreshes every 10 seconds.

const userState = useVaultUserState(vaultAddress, shareToken, assetDecimals, vaultType);

Returns: VaultUserState

interface VaultUserState {
  shareBalance: bigint;
  positionValueFormatted: string;

  // Redeem flow
  pendingShares: bigint;
  pendingAssetsFormatted: string;
  hasPending: boolean;
  claimableShares: bigint;
  claimableAssetsFormatted: string;
  hasClaimable: boolean;

  // Cancel redeem
  pendingCancelRedeem: boolean;
  claimableCancelRedeemShares: bigint;
  hasClaimableCancelRedeem: boolean;

  // Async deposit (ASYNC vaults only)
  pendingDepositAssets: bigint;
  pendingDepositFormatted: string;
  claimableDepositAssets: bigint;
  claimableDepositFormatted: string;
  hasPendingDeposit: boolean;
  hasClaimableDeposit: boolean;

  isLoading: boolean;
}

useUserAddress​

Get the connected wallet address.

const address = useUserAddress(); // Address | null

Transaction hooks​

All transaction hooks return:

{
  txState: 'idle' | 'approving' | 'pending' | 'confirming' | 'success' | 'error';
  txHash: Hash | undefined;
  error: string | null;
  reset: () => void;
}

useDeposit​

Handles ERC-20 approval (if needed) and deposit in one call.

const { deposit, txState, txHash, error, reset } = useDeposit(vault, asset, decimals, vaultType);

// Deposit 1000 USDC
await deposit('1000');

useClaimDeposit​

Claim shares after an async deposit completes (ASYNC vaults only).

const { claimDeposit, txState } = useClaimDeposit(vault);
await claimDeposit();

useRequestRedeem​

Request an async redemption.

const { requestRedeem, txState } = useRequestRedeem(vault);
await requestRedeem('500'); // shares as string

useClaimRedeem​

Claim assets after a redeem request completes.

const { claimRedeem, txState } = useClaimRedeem(vault);
await claimRedeem(claimableShares); // bigint

useCancelRedeem​

Cancel a pending redeem request.

const { cancelRedeem, txState } = useCancelRedeem(vault);
await cancelRedeem();

useClaimCancelRedeem​

Claim shares back after cancelling a redeem.

const { claimCancelRedeem, txState } = useClaimCancelRedeem(vault);
await claimCancelRedeem();