> ## Documentation Index
> Fetch the complete documentation index at: https://anypay-docs-sdk-0-15-0-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Withdraw

> Guided token withdrawals with the focused Withdraw component

## Overview

Withdraw mode provides a guided flow for moving assets out of a wallet. Fee options and routing are handled automatically — users choose the amount and destination, or you can pre-configure those.

**Trade types**: `EXACT_INPUT` and `EXACT_OUTPUT`.

## Quick start

```tsx theme={null}
import { Withdraw } from '0xtrails/widget'

<Withdraw
  apiKey="YOUR_API_KEY"
  from={{ currency: "USDC", chain: "base" }}
/>
```

## Props

### Required

| Prop     | Type     | Description    |
| -------- | -------- | -------------- |
| `apiKey` | `string` | Trails API key |

### Source (optional)

| Prop                 | Type               | Description                                          |
| -------------------- | ------------------ | ---------------------------------------------------- |
| `from.currency`      | `string`           | Pre-select source token symbol or address            |
| `from.chain`         | `ChainIdentifier`  | Pre-select source chain — name, ID, or viem Chain    |
| `from.amount`        | `string \| number` | Pre-fill withdrawal amount                           |
| `from.walletAddress` | `string`           | Source wallet address (defaults to connected wallet) |

### Destination (optional)

| Prop                 | Type               | Description                                        |
| -------------------- | ------------------ | -------------------------------------------------- |
| `to.recipient`       | `string`           | Recipient address (defaults to connected wallet)   |
| `to.currency`        | `string`           | Controlled destination token — locks selection     |
| `to.chain`           | `ChainIdentifier`  | Controlled destination chain — locks selection     |
| `to.defaultCurrency` | `string`           | Default destination token — user can change        |
| `to.defaultChain`    | `ChainIdentifier`  | Default destination chain — user can change        |
| `to.amount`          | `string \| number` | Exact output amount                                |
| `to.calldata`        | `string`           | ABI-encoded calldata to execute at the destination |

<Note>
  Recipient inputs accept `.eth` ENS names and resolve them automatically.
</Note>

### Lifecycle callbacks

| Callback            | Signature                        | When it fires                     |
| ------------------- | -------------------------------- | --------------------------------- |
| `onWithdrawStart`   | `({ sessionId }) => void`        | User begins the withdrawal flow   |
| `onWithdrawSuccess` | `({ sessionId }) => void`        | Withdrawal completes successfully |
| `onWithdrawError`   | `({ sessionId, error }) => void` | Withdrawal encounters an error    |

## Examples

### Basic withdraw — user selects everything

```tsx theme={null}
import { Withdraw } from '0xtrails/widget'

<Withdraw
  apiKey="YOUR_API_KEY"
  onWithdrawSuccess={({ sessionId }) => console.log("withdrawn", sessionId)}
>
  <button>Withdraw</button>
</Withdraw>
```

### Pre-configured withdrawal

```tsx theme={null}
<Withdraw
  apiKey="YOUR_API_KEY"
  from={{ currency: "USDC", chain: "base" }}
  to={{
    recipient: "0xRecipientAddress",
    defaultCurrency: "ETH",
    defaultChain: "ethereum",
  }}
  onWithdrawSuccess={({ sessionId }) => console.log("withdrawn", sessionId)}
/>
```

### Locked destination

```tsx theme={null}
<Withdraw
  apiKey="YOUR_API_KEY"
  from={{ currency: "USDC", chain: "base" }}
  to={{
    currency: "USDC",
    chain: "polygon",
  }}
/>
```

## See also

* [Earn mode](/sdk/modes/earn) — includes both deposit and withdrawal tabs
* [Configuration reference](/sdk/configuration) — full prop list