> ## 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