Кастомний 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-віджетів. Замовте кастомний віджет свапа під ваш проект — зв'яжіться з нами для консультації та комерційної пропозиції. Розробка віджета свапа під ключ включає налаштування агрегатора, комісії та адаптацію під ваші токени.