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

# Swap component

> Cross-chain token swaps with automatic routing across bridges and DEXs.

The `Swap` component handles cross-chain token exchanges. It supports exact-input (user specifies how much to spend) and exact-output (user specifies how much to receive) modes, and automatically routes across bridges and DEXs for the best price.

## Basic usage

```tsx theme={null}
import { Swap } from "0xtrails";

<Swap
  apiKey="YOUR_API_KEY"
  from={{
    token: "ETH",
    chain: "ethereum",
  }}
  to={{
    token: "USDC",
    chain: "polygon",
  }}
  onSwapSuccess={(result) => console.log("Swapped:", result)}
/>
```

## Exact input vs. exact output

```tsx theme={null}
// Exact input: user spends a fixed amount, output varies
<Swap
  apiKey="YOUR_API_KEY"
  from={{ token: "ETH", chain: "ethereum", amount: "0.1" }}
  to={{ token: "USDC", chain: "polygon" }}
/>

// Exact output: user receives a fixed amount, input varies
<Swap
  apiKey="YOUR_API_KEY"
  from={{ token: "ETH", chain: "ethereum" }}
  to={{ token: "USDC", chain: "polygon", amount: "200" }}
/>
```

## Headless with useQuote

To build your own UI and manage quote refresh yourself:

```tsx theme={null}
import { useQuote } from "0xtrails";

const { quote, loading, refetch } = useQuote({
  from: {
    chainId: 1,
    tokenAddress: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2", // WETH
    amount: "0.1",
  },
  to: {
    chainId: 137,
    tokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359", // USDC on Polygon
    recipient: "0xUSER_WALLET",
  },
  onStatusUpdate: (status) => console.log("Status:", status),
});

// Refresh quote every 30 seconds
useEffect(() => {
  const interval = setInterval(refetch, 30_000);
  return () => clearInterval(interval);
}, [refetch]);
```

## Props reference

| Prop                | Type             | Required | Description                                      |
| ------------------- | ---------------- | -------- | ------------------------------------------------ |
| `apiKey`            | string           | Yes      | Your API key                                     |
| `from.token`        | string           | No       | Source ERC20 symbol or address                   |
| `from.chain`        | string \| number | No       | Source chain                                     |
| `from.amount`       | string           | No       | Amount to spend (exact input)                    |
| `to.token`          | string           | No       | Destination ERC20 symbol or address              |
| `to.chain`          | string \| number | No       | Destination chain                                |
| `to.amount`         | string           | No       | Amount to receive (exact output)                 |
| `slippageTolerance` | string \| number | No       | Slippage tolerance; default from provider config |
| `swapProvider`      | string           | No       | Preferred DEX provider                           |
| `bridgeProvider`    | string           | No       | Preferred bridge provider                        |
| `paymentMethod`     | string           | No       | Pre-select funding method                        |
| `onSwapStart`       | function         | No       | Called when the user begins                      |
| `onSwapSuccess`     | function         | No       | Called on completion                             |
| `onSwapError`       | function         | No       | Called on failure                                |

For appearance and wallet options, see [SDK configuration](/cross-chain/sdk/configuration).