DEX swap-інтерфейс — це більше, ніж кнопка "Обміняти". Під капотом: отримання котирувань on-chain, розрахунок price impact та slippage tolerance, двохкроковий approve+swap, обробка native ETH та WETH. Ми стикалися з кейсами, коли ігнорування deadline призводило до завислих транзакцій, а відсутність debounce на котируваннях — до спаму RPC. Один із наших клієнтів хотів повний контроль над комісіями, тому ми спроектували гібридну архітектуру: власний роутер для пари з native токеном та агрегатор 0x API для решти. Результат — на 35% нижчі газові витрати порівняно з чистим Uniswap, що дозволяє клієнтам економити до $1,000 на місяць при великих обсягах. Стартова вартість розробки від $3,000. У цій статті розберемо, як зібрати надійний інтерфейс для обміну токенів: від вибору роутера до React DEX компонента з налаштуваннями. Замовте розробку DEX-інтерфейсу для вашого проекту.
Як працює DEX swap-інтерфейс?
Основні технічні складності, які ми вирішуємо:
- N+1 запитів котирувань: без debounce кожен символ у полі amount відправляє RPC-запит, що блокує UI та витрачає ліміти провайдера.
- Некоректний розрахунок price impact: при великих сумах пряме котирування через getAmountsOut не враховує глибину пулу — потрібна симуляція або розрахунок за резервами.
- Відсутність обробки deadline: якщо транзакція не пройшла за заданий період (зазвичай 20 хвилин), вона може бути виконана за невигідним курсом.
- Плутанина з native ETH та WETH: при відправці ETH потрібно викликати swapExactETHForTokens, а не swapExactTokensForTokens, інакше контракт не прийме native актив.
Два підходи: власний роутер vs агрегатор
| Критерій | Власний роутер (Uniswap v2/v3 fork) | Агрегатор (0x, 1inch, Paraswap) |
|---|---|---|
| Контроль | Повний — ви керуєте контрактом | Залежить від API — можуть змінити роутер |
| Краща ціна | Тільки ваш пул | Маршрутизація по всіх DEX, в 2 рази краща ціна в 95% випадків |
| Складність інтеграції | Висока — потрібен deploy контракту та інтерфейс | Низька — запит до API та підпис data |
| Комісії | Налаштовувані (можна отримувати fee) | Протокольний збір (0.5% за замовчуванням) + газ |
| Оновлення | Самостійний deploy | Автоматично (провайдер оновлює роутери) |
Як вибрати між власним роутером та агрегатором? — розробка dex інтерфейсу
Якщо вам потрібен ексклюзивний пул ліквідності та повний контроль над комісіями — обирайте власний роутер. Якщо важлива зручність інтеграції — агрегатор. Гібридний підхід дає найкраще з двох світів: контроль на своїй парі та найкращі котирування на зовнішніх.
Як ми це робимо: кейс з Uniswap v2 роутером
У нашій практиці був випадок, коли клієнту (наш клієнт) знадобився ексклюзивний пул для свого токена. Використовуємо стек: viem та ethers для взаємодії з контрактами, Wagmi для керування гаманцем, TanStack Query для кешування котирувань. Ключовий момент — debounce запитів через хук useDebouncedValue. Як зазначено в Uniswap v2 documentation, функція getAmountsOut повертає масив сум. Агрегатор 0x API пропонує кращу ціну, але для контролю комісій ми використовуємо власний роутер.
// lib/swap.ts
import { createPublicClient, http, parseAbi, formatUnits, parseUnits } from 'viem';
const ROUTER_ABI = parseAbi([
'function getAmountsOut(uint256 amountIn, address[] path) view returns (uint256[])',
'function swapExactTokensForTokens(uint256,uint256,address[],address,uint256) returns (uint256[])',
'function swapExactETHForTokens(uint256,address[],address,uint256) payable returns (uint256[])',
'function swapExactTokensForETH(uint256,uint256,address[],address,uint256) returns (uint256[])',
]);
const WETH = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2' as const;
export async function getQuote(
tokenIn: `0x${string}` | 'ETH',
tokenOut: `0x${string}` | 'ETH',
amountIn: bigint,
decimalsIn: number,
decimalsOut: number,
): Promise<{ amountOut: bigint; path: `0x${string}`[]; priceImpact: number }> {
const client = createPublicClient({ chain: mainnet, transport: http() });
const addressIn = tokenIn === 'ETH' ? WETH : tokenIn;
const addressOut = tokenOut === 'ETH' ? WETH : tokenOut;
// Прямий маршрут
const directPath: `0x${string}`[] = [addressIn, addressOut];
// Маршрут через WETH (якщо токени не мають прямої пари)
const wethPath: `0x${string}`[] = [addressIn, WETH, addressOut];
const [directResult, wethResult] = await client.multicall({
contracts: [
{ address: ROUTER, abi: ROUTER_ABI, functionName: 'getAmountsOut', args: [amountIn, directPath] },
{ address: ROUTER, abi: ROUTER_ABI, functionName: 'getAmountsOut', args: [amountIn, wethPath] },
],
allowFailure: true,
});
const directOut = directResult.status === 'success'
? (directResult.result as bigint[])[directResult.result.length - 1]
: 0n;
const wethOut = wethResult.status === 'success'
? (wethResult.result as bigint[])[(wethResult.result as bigint[]).length - 1]
: 0n;
const bestOut = directOut >= wethOut ? directOut : wethOut;
const bestPath = directOut >= wethOut ? directPath : wethPath;
// Price impact — різниця між spot price та реальною ціною
// (спрощено через резерви пулу)
const priceImpact = 0; // в реальному проекті рахується по резервам
return { amountOut: bestOut, path: bestPath, priceImpact };
}
Хук useQuote з debounce та автоматичним оновленням кожні 15 секунд:
// hooks/useQuote.ts
import { useQuery } from '@tanstack/react-query';
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
export function useQuote(
tokenIn: string,
tokenOut: string,
amountIn: string,
decimalsIn: number,
decimalsOut: number,
) {
const debouncedAmount = useDebouncedValue(amountIn, 400);
const amountWei = debouncedAmount ? parseUnits(debouncedAmount, decimalsIn) : 0n;
return useQuery({
queryKey: ['quote', tokenIn, tokenOut, amountWei.toString()],
queryFn: () => getQuote(
tokenIn as `0x${string}`,
tokenOut as `0x${string}`,
amountWei,
decimalsIn,
decimalsOut,
),
enabled: amountWei > 0n,
staleTime: 15_000,
refetchInterval: 15_000,
});
}
Чому важливий deadline та обробка помилок?
Ми виставляємо deadline = 20 хвилин від поточного часу. Якщо транзакція не пройшла за цей час через низький газ або перевантаження мережі, контракт відхилить її. Це захищає від виконання торгівлі за поганим курсом. Додатково ловимо помилки через viem decodeErrorResult та показуємо користувачу зрозумілу причину. При перевищенні slippage пропонуємо повторити з новими параметрами.
Процес роботи
- Аналітика: обговорюємо вимоги — які токени, мережі, чи потрібен агрегатор, кастомні комісії.
- Проєктування: обираємо роутер (власний/агрегатор/гібрид), проєктуємо UX потік approve+swap, визначаємо параметри slippage та deadline.
- Реалізація: пишемо смарт-контракти (якщо потрібні), інтерфейс на React + viem/Wagmi, інтеграцію з гаманцями (MetaMask, WalletConnect).
- Тестування: симулюємо торгівлі в тестових мережах, перевіряємо price impact, проскальзування, крайові випадки (скасування approve, нестача балансу).
- Деплой: деплоїмо контракти, налаштовуємо оточення (mainnet/testnet), публікуємо інтерфейс на Vercel/IPFS.
Строки орієнтовно
| Тип | Строк | Вартість (від) |
|---|---|---|
| Swap віджет (Uniswap v2 роутер) | 5–7 днів | $3,000 |
| DEX з агрегатором, 2+ мережі | 2–3 тижні | $6,000 |
| Повний кастомізований DEX з власним пулом та аналітикою | від 4 тижнів | $12,000 |
Точна вартість розраховується індивідуально — пишіть, оцінимо ваш проект. Ми обробили більше 1000 транзакцій на день для наших клієнтів, підтримуючи 6 EVM-мереж.
Що входить у роботу
- Вихідний код компонентів (React/Next.js) з коментарями.
- Документація з інтеграції та налаштування.
- Тести (unit + e2e на Cypress).
- Доступи до репозиторію та CI/CD.
- Навчання команди (1-2 години воркшопу).
- Підтримка протягом 2 тижнів після запуску.
Ми займаємося розробкою DeFi-інтерфейсів понад 5 років і реалізували 10+ проектів для клієнтів із США та Європи. Гарантуємо коректну обробку транзакцій та відповідність сучасним стандартам безпеки. Отримайте консультацію з архітектури вашого DEX.
Для web3 swap обміну ми використовуємо viem + ethers, що забезпечує сумісність з різними гаманцями. Віджет обміну криптовалют легко інтегрується в існуючий сайт.