> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trails.build/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={{ token: "USDC", chain: "base" }}
/>
```

## Props

### Required

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

### Source (optional)

Withdraw mode sources funds from crypto only — there is no fiat arm.

| Prop | Type | Description |
| - | - | - |
| `from.token` | `string` | Pre-select source ERC-20 token — symbol or contract 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) |
| `from.supportedChains` | `ChainIdentifier[]` | Restrict origin chains the user can withdraw from |
| `from.supportedTokensByChain` | `SupportedTokensByChainConfig[]` | Per-chain origin token allowlist |

### Destination (optional)

| Prop | Type | Description |
| - | - | - |
| `to.recipient` | `string` | Recipient address (defaults to connected wallet) |
| `to.token` | `string` | Controlled destination token — locks selection (symbol or contract address) |
| `to.chain` | `ChainIdentifier` | Controlled destination chain — locks selection |
| `to.defaultToken` | `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={{ token: "USDC", chain: "base" }}
  to={{
    recipient: "0xRecipientAddress",
    defaultToken: "ETH",
    defaultChain: "ethereum",
  }}
  onWithdrawSuccess={({ sessionId }) => console.log("withdrawn", sessionId)}
/>
```

### Locked destination

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

## See also

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