DEX swap-интерфейс — это больше, чем кнопка "Обменять". Под капотом: получение котировок on-chain, расчёт price impact и slippage, двухшаговый approve+swap, обработка native ETH и WETH. Мы сталкивались с кейсами, когда игнорирование deadline приводило к зависшим транзакциям, а отсутствие debounce на котировках — к спаму RPC. Один из наших клиентов хотел полный контроль над комиссиями, поэтому мы спроектировали гибридную архитектуру: собственный роутер для пары с native токеном и агрегатор 0x для остальных. Результат — на 35% ниже газовые издержки по сравнению с чистым Uniswap. В этой статье разберём, как собрать надёжный интерфейс для обмена токенов: от выбора роутера до компонента с настройками. Закажите разработку 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 |
| Сложность интеграции | Высокая — нужен deploy контракта и интерфейс | Низкая — запрос к API и подпись data |
| Комиссии | Настраиваемые (можно получать fee) | Протокольный сбор (0.5% по умолчанию) + газ |
| Обновления | Самостоятельный deploy | Автоматически (провайдер обновляет роутеры) |
Когда стоит выбирать агрегатор?
Если важна лучшая цена для пользователя и быстрая интеграция — агрегатор. При тестировании агрегатор обеспечивал лучшую цену в 95% случаев по сравнению с собственным роутером. Мы рекомендуем гибридный подход: базовый роутер для своего токена + агрегатор для всех остальных пар.Как выбрать между собственным роутером и агрегатором? — разработка dex интерфейса
Если вам нужен эксклюзивный пул ликвидности и полный контроль над комиссиями — выбирайте собственный роутер. Если важна удобство интеграции — агрегатор. Гибридный подход даёт лучшее из двух миров: контроль на своей паре и лучшие котировки на внешних.
Как мы это делаем: кейс с Uniswap v2 роутером
В нашей практике был случай, когда клиенту понадобился эксклюзивный пул для своего токена. Используем стек: viem для взаимодействия с контрактами, Wagmi для управления кошельком, TanStack Query для кеширования котировок. Ключевой момент — debounce запросов через хук useDebouncedValue. Как указано в Uniswap v2 documentation, функция getAmountsOut возвращает массив сумм.
// 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 дней |
| DEX с агрегатором, 2+ сети | 2–3 недели |
| Полный кастомизированный DEX с собственным пулом и аналитикой | от 4 недель |
Точная стоимость рассчитывается индивидуально — пишите, оценим ваш проект.
Что входит в работу
- Исходный код компонентов (React/Next.js) с комментариями.
- Документация по интеграции и настройке.
- Тесты (unit + e2e на Cypress).
- Доступы к репозиторию и CI/CD.
- Обучение команды (1-2 часа воркшопа).
- Поддержка в течение 2 недель после запуска.
Мы занимаемся разработкой DeFi-интерфейсов более 5 лет и реализовали 10+ проектов для клиентов из США и Европы. Гарантируем корректную обработку транзакций и соответствие современным стандартам безопасности. Получите консультацию по архитектуре вашего DEX.