Swap

Token exchange interface with automatic quote calculation, slippage protection, and balance checking.

Overview

The Swap component provides a complete token swapping interface. It automatically calculates exchange rates, checks token balances, handles approvals, and executes swaps with slippage protection.

Props

Name	Type	Default	Description
`onSuccess`	`(txHash: string) => void`	-	Callback fired when swap succeeds
`onError`	`(error: string) => void`	-	Callback fired when swap fails
`supportedTokens`	`TokenSymbol[]`	`['USDT', 'USDC', 'WETH', 'DAI']`	List of supported tokens for swapping
`defaultFromToken`	`TokenSymbol`	`'USDT'`	Default token to swap from
`defaultToToken`	`TokenSymbol`	`'USDC'`	Default token to swap to

Basic Usage

SwapExample.tsx

import { Swap } from 'hyperkit';

function App() {
  return (
    <Swap />
  );
}

Token Selection

Configure supported tokens and default selections:

CustomTokens.tsx

import { Swap } from 'hyperkit';

function App() {
  return (
    <Swap
      supportedTokens={['USDT', 'USDC', 'WETH']}
      defaultFromToken="USDT"
      defaultToToken="USDC"
    />
  );
}

Slippage Protection

The Swap component includes built-in slippage protection. Users can adjust slippage tolerance, and the component will ensure the minimum output amount is met before executing the swap.

ConnectWallet

Bridge