Cross-chain swaps, embedded or headless
Wallet rebalancing, pre-funding a payment asset, treasury moves, or a swap tab in your product. Take the whole component, or take the quote and build the rest yourself.
One payment, four hops, one quote shown to the user.
Two ways in, same router underneath
The routing, provider chaining, and quote ranking are identical whichever surface you choose.
A whole swap surface, dropped in
SwapKit ships wallet connection, token selection, quoting, slippage configuration, execution, and status tracking as one embeddable React component.
Or none of the interface at all
swapQuote() and swapExecute() give you the quote, the route, and the payment instructions. What the user sees is entirely yours to design.
Routes are chained, not single-hop
A swap can pass through several providers when that produces a better rate: an AMM leg, a CCTP transfer, then a destination-chain swap, priced as one quote.
Independent of your payment flow
SwapKit is separate from PayKit. Payments route swaps internally when needed; use these APIs when the swap itself is what the user came to do.
The embedded version
Wrap Swap in the re-exported providers, pass an API key, and pick your default pair.
"use client";
import { Swap, SwapKitProvider, WalletProvider } from "@coin-voyage/swapkit";
export function SwapWidget() {
return (
<WalletProvider>
<SwapKitProvider
apiKey={process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY!}
environment="production"
mode="dark"
>
<Swap defaultSourceCurrency={{ chain_id: 1 }} />
</SwapKitProvider>
</WalletProvider>
);
}The headless version
Four calls, and every pixel is yours.
01
Collect the swap intent
Source asset, destination asset, amount, sender address, and the slippage the user will accept.
02
Quote it
Call swapQuote() so the user can review expected output and route. Treat quotes as time-sensitive and refresh them if the user hesitates or changes wallets.
03
Get execution data
Call swapExecute() to create the payment instructions needed to fund and execute the swap.
04
Sign and submit
The source wallet signs and submits the returned transaction data. Track the resulting on-chain transaction in your own UI or ledger.
The specifics
Package
@coin-voyage/swapkit
Peer dependencies
@tanstack/react-query, react, react-dom, styled-components
Styling
styled-components, no Tailwind CSS required
Modes
Embedded Swap component, or headless via swapQuote() and swapExecute()
Order type
A standalone swap creates an internal SWAP order and returns funding instructions
Credential
Public API key
Pricing
Depends on the products you use, your volume, and how you settle. Contact us.
Try the swap widget before you install it
The same component, running against production, at swap.coinvoyage.io.