SwapTab
Same-chain stablecoin swap. Drops inside WhiskSend or stands alone.
<SwapTab> is the Swap surface. It runs same-chain trades through
App Kit's Swap capability: USDC ↔ EURC, stablecoin ↔ native token,
that kind of thing. By default it ships as the second tab inside
<WhiskSend> whenever you pass a kitKey. Mount it on its own
when swap is the whole feature.
import { SwapTab } from "@usewhisk/react";Standalone
<SwapTab
kitKey={process.env.NEXT_PUBLIC_CIRCLE_KIT_KEY!}
defaultChain="Base"
defaultTokenIn="USDC"
defaultTokenOut="EURC"
/>Chains and tokens
The chain picker shows the intersection of three things: the
chains you registered in createWhiskConfig({ chains }), the
chains App Kit actually swaps on, and the active mode. The mode
filter is a belt — if you accidentally list a mainnet chain in a
testnet config, swap quietly drops it instead of showing a chain
the user can't transact on.
Testnet Arc Testnet only. USDC and EURC.
App Kit also lists cirBTC as a testnet swap token, but Circle hasn't published a testnet faucet or contract address for it. The picker omits cirBTC until that lands so users don't hit a 404 quote.
Mainnet Arbitrum, Avalanche, Base, Ethereum, HyperEVM, Ink, Linea, Monad, Optimism, Plume, Polygon, Sei, Solana, Sonic, Unichain, World Chain, XDC. Token aliases: USDC, EURC, USDT, USDe, DAI, PYUSD, and each chain's NATIVE token.
Any other token works if you pass its contract address, but the
visible picker is alias-only. For custom-token UI, drop to the
useWhiskSwap hook and build your
own input.
If nothing in your config qualifies, the tab renders a one-line notice instead of an empty picker.
Props
| Prop | Type | Notes |
|---|---|---|
kitKey | string | Optional. See "Kit key" below. |
defaultChain | Chain | First chain selected. Snaps to a valid one if not swap-capable. |
defaultTokenIn | Token | Source token. Defaults to USDC. |
defaultTokenOut | Token | Destination token. Defaults to EURC. |
onStateChange | (state: SwapState) => void | Fires on every swap state transition. Good for analytics. |
onSuccess | (result) => void | { txHash?, explorerUrl?, amountOut? } when the swap lands. |
onError | (error: Error) => void | Fires on terminal failure. |
Kit key
kitKey is what authenticates quote requests against Circle's
pricing service. Three ways to wire it:
- Pass it as a prop. The user never sees the key. Best for production.
- Leave it off.
<SwapTab>renders an inline "Kit key" field for the user to paste their own. Useful in playgrounds and internal tools where the operator can supply a key. - Hide the tab entirely. Inside
<WhiskSend>, nokitKeymeans the Swap tab is hidden by default. Passtabs={["transfer", "swap"]}explicitly to force it visible (the inline key field appears).
Grab a kit key at console.circle.com. Free.
When to use which
| Surface | Use this when |
|---|---|
<WhiskSend kitKey={...} /> | Combined transfer + swap UI; users pick via tabs. |
<SwapTab /> standalone | The page is about swapping, not transferring. |
useWhiskSwap() | You want your own UI on the same state machine. |