ממשק החלפת טוקנים מותאם אישית: רכיב Web, iframe, אינטגרציית API

לאחר שילוב ווידג'ט Uniswap מבוסס iframe באתר שוק, משתמשים דיווחו על שגיאות החלפה תכופות עקב חסימת סקריפטים על ידי CSP והפניות שאיפסו את ההתקדמות. רכיב מסחר מותאם אישית המשתמש ב-Web Component עם Shadow DOM פותר בעיות אלה על ידי בידוד סגנונות ללא צורך בדף נפרד. אנו מפתחים ווידג'טים להטמעה מאפס: מבחירת ארכיטקטורה (Web Component, iframe, npm) ועד אינטגרציה עם 1inch/0x/Paraswap והגדרת עמלת הפניה. החל מ-$800, הפתרון שלנו כולל תיעוד מלא. צרו קשר לייעוץ—נעריך את העומס ונעזור לבחור את הארכיטקטורה.

באיזו גישה ארכיטקטונית לבחור להטמעה?

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 הוא האפשרות המבודדת ביותר. הווידג'ט הוא דף נפרד המוטמע באמצעות <swap-widget tokens="ETH,USDC,USDT" default-input="ETH" default-output="USDC" fee-bps="30" theme="dark" ></swap-widget> . הדף המארח אינו יכול לגשת ל-DOM של הווידג'ט, ו-XSS של המארח אינו יכול להגיע לווידג'ט. חסרון: תקשורת רק דרך <iframe src="https://swap.yourprotocol.com">, התאמת סגנונות מוגבלת למשתני CSS דרך פרמטרי URL.

חבילת npm מציעה גמישות מרבית למפתחים שמשלבים. היא מייצאת רכיב React (או לוגיקה ללא ממשק) להטמעה בפרויקטי React קיימים.

גישה מומלצת: Web Component כצורת ההטמעה העיקרית + חבילת npm לפרויקטי React. iframe רק אם דרישות אבטחה מחייבות בידוד מלא.

למה אגרגציה דרך 1inch/0x עדיפה על DEX מותאם אישית?

ווידג'ט לפרוטוקול יחיד (למשל, רק Uniswap v3) פשוט יותר: קריאות חוזה ישירות, ניתוב מוכר. אבל משתמשים רואים רק מחירים של AMM אחד. אגרגציה דרך 1inch API, Paraswap API, או 0x API מניבה מחירים טובים יותר—בממוצע 5-15% יעילות גבוהה יותר על ידי פיצול ההזמנה על פני מספר מאגרי נזילות. ה-API מחזיר את המסלול האופטימלי + 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),
});

איך להגדיר עמלות הפניה?

רוב ממשקי ה-API של אגרגטורים תומכים בעמלות הפניה: אתם מציינים את הכתובת שלכם ו-bps, וחלק מהעמלה נצבר לכם בכל החלפה. 1inch: פרמטר postMessage ב-API. 0x: 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), }); + fee. זה לא משפיע על החוזה החכם של הווידג'ט—רק על calldata של הניתוב.

רכיבי UX מרכזיים

בורר טוקנים – רשימת טוקנים עם חיפוש לפי שם/סימבול/כתובת. רשימות טוקנים: רשימת ברירת המחדל של Uniswap, רשימת 1inch, או מותאמת אישית. טעינת יתרות לכל טוקן דרך Multicall3 – בקשה אחת במקום N. אימות טוקנים (מאומת/לא מאומת) – הגנה מפני טוקני הונאה. אזהרה לטוקנים שאינם ברשימה מהימנה. תומך ביותר מ-200 טוקנים.

הצגת מחיר וסליפג' – מחיר החלפה, השפעת מחיר (חשובה במיוחד לסכומים גדולים), סובלנות סליפג' (בדרך כלל 0.1-1%, גבוהה יותר לזוגות תנודתיים). הצגת מינימום שיתקבל לאחר סליפג' – הערובה מהחוזה. עדכון אוטומטי של הצעות מחיר כל 15-30 שניות. אינדיקטור "המחיר עודכן" כאשר השינוי עולה על X%.

תהליך Approve – לפני החלפת ERC-20 ראשונה, נדרש approve. Permit (EIP-2612) מאפשר לשלב approve + החלפה בעסקה אחת (דרך חתימה מחוץ לשרשרת). בדקו אם הטוקן תומך ב-Permit דרך affiliateAddress או ERC-165. לפי מפרט EIP-2612, Permit משלב approve והחלפה לעסקה אחת (ראו EIP-2612). שימוש ב-Permit חוסך 30-40% גז בהשוואה ל-approve + החלפה נפרדים, ומפחית עלויות עסקה.

מה כלול בעבודה

• הגדרת ווידג'ט למותג שלכם: צבעים, לוגו, גבולות.
• אינטגרציה עם האגרגטור הנבחר (1inch, 0x, Paraswap) והגדרת עמלת הפניה.
• תמיכה ב-Permit ל-approve ללא גז.
• מימוש Web Component + חבילת npm אופציונלית.
• תיעוד למשלבים: פרמטרים, CSP, אירועים.
• בדיקות וסימולציית עסקאות ב-Tenderly.

תהליך עבודה

1. ניתוח דרישות ובדיקת ארכיטקטורה קיימת.
2. עיצוב: בחירת גישה (Web Component/iframe/npm), אגרגטור ומנגנון עמלות.
3. פיתוח ווידג'ט: רכיב, אינטגרציית API, הגדרת Permit.
4. בדיקות ברשת testnet עם סימולציית עסקאות דרך Tenderly.
5. פריסה לייצור והכנת תיעוד.

הערכות זמנים

ווידג'ט עם API אגרגטור קבוע (1inch/0x), אריזת Web Component, התאמה בסיסית: מ-3 ימים (החל מ-$800). עם ניתוב מותאם אישית, תמיכה ב-Permit, גרסאות iframe + npm, תיעוד מלא למשלבים: עד 5 ימים (החל מ-$2,000). לוחות זמנים נקבעים סופית לאחר בדיקת המפרט.

השלמנו 15+ פרויקטים של בניית ווידג'טים להחלפה. הזמינו ווידג'ט החלפה מותאם אישית לפרויקט שלכם—צרו קשר לייעוץ והצעת מחיר. פיתוח ווידג'ט החלפה במפתח מלא כולל הגדרת אגרגטור, הגדרת עמלות והתאמה לטוקנים שלכם.

מחפשים להטמיע החלפה באתר שלכם? הווידג'ט שלנו עושה זאת בקלות. פתרון ווידג'ט הטמעה זה לקריפטו מספק אינטגרציה חלקה עם אגרגטורים פופולריים.