Кастомный swap-виджет для сайта: Web Component, iframe, API

После интеграции iframe-виджета свапа Uniswap на сайт маркетплейса пользователи начали жаловаться на частые ошибки при обмене. Оказалось, iframe блокировал скрипты из-за CSP, а каждый редирект к агрегатору обнулял progress. Кастомный swap-виджет с Web Component и Shadow DOM решает эти проблемы: изолирует стили, но не требует отдельной страницы. Мы разрабатываем embed-виджеты с нуля: от выбора архитектуры (Web Component, iframe, npm) до интеграции 1inch/0x/Paraswap и настройки реферальных комиссий. Получите консультацию по вашему проекту — мы оценим нагрузку и поможем выбрать архитектуру.

Какой архитектурный подход выбрать для встраивания виджета?

Web Component — лучший баланс изоляции и интеграции. Shadow DOM изолирует стили, но компонент живёт в том же JavaScript-контексте. Позволяет хост-странице передавать конфиг через атрибуты и реагировать на события.

<swap-widget tokens="ETH,USDC,USDT" default-input="ETH" default-output="USDC" fee-bps="30" theme="dark" ></swap-widget> 

Подробнее о Web Components на MDN.

iframe — самый изолированный вариант. Виджет — отдельная страница, встраивается через <iframe src="https://swap.yourprotocol.com">. Хост-страница не имеет доступа к DOM виджета, XSS на хосте не достанет до виджета. Минус: коммуникация только через postMessage, кастомизация стилей ограничена CSS-переменными через параметры URL.

npm-пакет — максимальная гибкость для разработчиков-интеграторов. Экспортирует React-компонент (или headless логику) для встраивания в существующий React-проект.

Рекомендуемый подход: Web Component как основная форма встраивания + npm-пакет для React-проектов. iframe — только если security requirements требуют полной изоляции.

Почему агрегация через 1inch/0x выгоднее собственного DEX?

Виджет для одного протокола (например, только Uniswap v3) — проще: прямые вызовы контракта, знакомый routing. Но пользователь видит только цены одного AMM. Aggregation через 1inch API, Paraswap API или 0x API даёт лучшие цены — в среднем на 5-15% эффективнее за счёт распределения ордера между несколькими пулами. API запрос возвращает оптимальный route + calldata для транзакции.

const quote = await fetch( `https://api.1inch.dev/swap/v6.0/1/swap?` + `src=${inputToken}&dst=${outputToken}&amount=${amount}&from=${userAddress}&slippage=1` ).then(r => r.json()); // quote.tx содержит готовую транзакцию для отправки await writeContractAsync({ to: quote.tx.to, data: quote.tx.data, value: BigInt(quote.tx.value), }); 

Как настроить реферальную комиссию?

Большинство aggregator API поддерживают referral fees: вы указываете свой адрес и bps, при каждом swap часть комиссии идёт вам. 1inch: параметр fee в API. 0x: affiliateAddress + buyTokenPercentageFee. Это не влияет на смарт-контракт виджета — только на routing calldata.

Ключевые UX компоненты

Token selector — список токенов с поиском по названию/символу/адресу. Токенлисты: Uniswap default tokenlist, 1inch tokenlist, или кастомный. Загрузка балансов для каждого токена через Multicall3 — один запрос вместо N. Верификация токенов (verified/unverified) — защита от scam токенов. Предупреждение для токенов не из trusted списка.

Price display и slippage — цена обмена, price impact (особенно важен для больших сумм), slippage tolerance (обычно 0.1-1%, для volatile пар — выше). Показывать minimum received после slippage — это то, что гарантирует контракт. Автоматическое обновление котировки каждые 15-30 секунд. Индикатор «цена обновлена» при изменении более чем на X%.

Approve flow — до первого swap ERC-20 токена нужен approve. Permit (EIP-2612) позволяет объединить approve + swap в одну транзакцию (через off-chain подпись). Проверять, поддерживает ли токен Permit через DOMAIN_SEPARATOR() или ERC-165. Согласно спецификации EIP-2612, Permit объединяет approve и swap в одну транзакцию (см. EIP-2612). При использовании Permit экономия газа составляет 30-40% по сравнению с раздельным approve + swap, снижая затраты на транзакции.

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

• Конфигурация виджета под бренд: цвета, логотип, границы.
• Интеграция с выбранным агрегатором (1inch, 0x, Paraswap) и настройка реферальной комиссии.
• Поддержка Permit для газ-less approve.
• Реализация Web Component + опционально npm-пакет.
• Документация для интеграторов: параметры, CSP, события.
• Тестирование и симуляция транзакций в Tenderly.

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

1. Аналитика требований и аудит текущей архитектуры.
2. Проектирование: выбор подхода (Web Component/iframe/npm), агрегатора и комиссионной схемы.
3. Разработка виджета: компонент, интеграция API, настройка Permit.
4. Тестирование на тестовой сети с симуляцией транзакций через Tenderly.
5. Деплой на продакшен и подготовка документации.

Ориентиры по срокам

Виджет с фиксированным aggregator API (1inch/0x), Web Component упаковка, базовая кастомизация: от 3 дней. С кастомным routing, permit support, iframe + npm вариантами, полной документацией для интеграторов: до 5 дней. Сроки уточняются после оценки спецификации.

Мы выполнили 15+ проектов по созданию swap-виджетов. Закажите кастомный виджет свапа под ваш проект — свяжитесь с нами для консультации и коммерческого предложения. Разработка виджета свапа под ключ включает настройку агрегатора, комиссии и адаптацию под ваши токены.