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

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

Recipient inputs accept .eth ENS names and resolve them automatically.

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

import { Withdraw } from '0xtrails/widget'

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

Pre-configured withdrawal

<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

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

See also

• Earn mode — includes both deposit and withdrawal tabs
• Configuration reference — full prop list