> ## Documentation Index
> Fetch the complete documentation index at: https://docs.0xmonaco.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useVault

> Deposit and withdraw tokens

```tsx theme={null}
import { useVault } from "@0xmonaco/react";

const { 
  approve,
  deposit,
  withdraw,
  retryWithdrawal,
  listPendingWithdrawals,
  getAllowance,
  needsApproval
} = useVault();
```

## Vault Operations

<ResponseField name="deposit" type="(assetId, amount, autoWait?) => Promise<TransactionResult>">
  Deposit tokens into vault. Use asset UUID from `sdk.profile.getUserBalances()`.
</ResponseField>

<ResponseField name="withdraw" type="(assetId, amount, autoWait?, source?) => Promise<WithdrawResult>">
  Withdraw tokens from vault. Use asset UUID from `sdk.profile.getUserBalances()`. `source` is `"spot"` or `"margin"`; see [`sdk.vault.withdraw`](/sdk/typescript/vault).
</ResponseField>

<ResponseField name="retryWithdrawal" type="(withdrawalIndex, autoWait?) => Promise<WithdrawResult>">
  Retry the on-chain submission of a withdrawal that never landed. It does **not** create a new withdrawal; see [`sdk.vault.retryWithdrawal`](/sdk/typescript/vault).
</ResponseField>

<ResponseField name="listPendingWithdrawals" type="(params?) => Promise<ListPendingWithdrawalsResponse>">
  List the caller's withdrawals still awaiting on-chain confirmation, newest first, cursor-paginated with `pageSize` and `pageToken`. Wraps [`sdk.withdrawals.listPendingWithdrawals`](/sdk/typescript/vault).
</ResponseField>

## Token Approvals

<ResponseField name="approve" type="(assetId, amount, autoWait?) => Promise<TransactionResult>">
  Approve vault to spend tokens. Use asset UUID from trading pairs.
</ResponseField>

<ResponseField name="getAllowance" type="(assetId) => Promise<bigint>">
  Check current token allowance by asset UUID
</ResponseField>

<ResponseField name="needsApproval" type="(assetId, amount) => Promise<boolean>">
  Check if approval is needed for an asset UUID
</ResponseField>

## Validation Requirements

All vault operations include built-in validation to prevent common errors:

<Warning>
  **Required Parameters:** Asset ID must be a non-empty string, and amount must be greater than 0.
</Warning>

**Validation Checks:**

| Operation | Validation | Error Message |
| - | - | - |
| `deposit()` | SDK available | "SDK not available" |
| | Asset ID non-empty | "Asset ID is required and cannot be empty" |
| | Amount > 0n | "Amount must be greater than 0" |
| `withdraw()` | SDK available | "SDK not available" |
| | Asset ID non-empty | "Asset ID is required and cannot be empty" |
| | Amount > 0n | "Amount must be greater than 0" |
| `retryWithdrawal()` | SDK available | "SDK not available" |
| | Index is a non-negative integer | "withdrawalIndex must be a non-negative integer" |
| `listPendingWithdrawals()` | SDK available | "SDK not available" |
| `approve()` | SDK available | "SDK not available" |
| | Asset ID non-empty | "Asset ID is required and cannot be empty" |
| | Amount > 0n | "Amount must be greater than 0" |
| `getAllowance()` | SDK available | "SDK not available" |
| | Asset ID non-empty | "Asset ID is required and cannot be empty" |
| `needsApproval()` | SDK available | "SDK not available" |
| | Asset ID non-empty | "Asset ID is required and cannot be empty" |
| | Amount > 0n | "Amount must be greater than 0" |

**Example with error handling:**

```typescript theme={null}
import { useVault } from "@0xmonaco/react";

function DepositButton({ assetId, amount }: { assetId: string; amount: bigint }) {
  const { deposit } = useVault();

  const handleDeposit = async () => {
    try {
      // Validation happens automatically
      const result = await deposit(assetId, amount);
      console.log('Deposit successful:', result.transactionHash);
    } catch (error) {
      // Handle validation errors
      if (error.message.includes('Asset ID is required')) {
        alert('Please select an asset');
      } else if (error.message.includes('Amount must be greater')) {
        alert('Please enter a valid amount');
      } else if (error.message.includes('SDK not available')) {
        alert('SDK is still loading, please wait');
      } else {
        console.error('Deposit failed:', error);
      }
    }
  };

  return <button onClick={handleDeposit}>Deposit</button>;
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.