Разработка DEX-интерфейса (обмен токенов) на сайте

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 агрегатор

Как выбрать между собственным роутером и агрегатором? — разработка 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 предлагаем повторить с новыми параметрами.

Процесс работы

1. Аналитика: обсуждаем требования — какие токены, сети, нужен ли агрегатор, кастомные комиссии.
2. Проектирование: выбираем роутер (собственный/агрегатор/гибрид), проектируем UX поток approve+swap, определяем параметры slippage и deadline.
3. Реализация: пишем смарт-контракты (если нужны), интерфейс на React + viem/Wagmi, интеграцию с кошельками (MetaMask, WalletConnect).
4. Тестирование: симулируем торговли в тестовых сетях, проверяем price impact, проскальзывание, краевые случаи (отмена approve, нехватка баланса).
5. Деплой: деплоим контракты, настраиваем окружение (mainnet/testnet), публикуем интерфейс на Vercel/IPFS.

Сроки ориентировочно

Точная стоимость рассчитывается индивидуально — пишите, оценим ваш проект.

Что входит в работу

• Исходный код компонентов (React/Next.js) с комментариями.
• Документация по интеграции и настройке.
• Тесты (unit + e2e на Cypress).
• Доступы к репозиторию и CI/CD.
• Обучение команды (1-2 часа воркшопа).
• Поддержка в течение 2 недель после запуска.

Мы занимаемся разработкой DeFi-интерфейсов более 5 лет и реализовали 10+ проектов для клиентов из США и Европы. Гарантируем корректную обработку транзакций и соответствие современным стандартам безопасности. Получите консультацию по архитектуре вашего DEX.