שילוב TON Connect ב-dApps וב-Telegram Mini Apps

שילוב TON Connect ב-dApps וב-Telegram Mini Apps

אנו משלבים את TON Connect ב-dApp או ב-Telegram Mini App שלך — לא רק "ארנק ל-TON", אלא פרוטוקול תקשורת מלא בין האפליקציה לארנק דרך שרת גישור (bridge). בניגוד ל-EVM, שבו window.ethereum מוזרק לדף, ארנקי TON (Tonkeeper, MyTonWallet, Telegram Wallet) פועלים כיישומים נפרדים ומתקשרים עם ה-dApp דרך ערוץ מוצפן. הבדל ארכיטקטוני זה הוא קריטי לשילוב נכון. לפי TON (The Open Network), TON Connect נמצא בשימוש ביותר מ-200 dApps, וזמן חיבור הארנק מופחת ב-40% בהשוואה ל-RPC ישיר.

במה TON Connect שונה מארנקי EVM

ההבדל העיקרי הוא החיבור האסינכרוני. ב-EVM, הארנק מובנה בדפדפן, בעוד שב-TON החיבור מתבצע באמצעות קוד QR או deeplink (בטלגרם — ישירות). הפרוטוקול משתמש בשרת גישור להחלפת הודעות, מה שמשפר את האבטחה: ה-dApp אף פעם לא מקבל את המפתח הפרטי. TON תומך גם במספר הודעות בעסקה אחת — מה שמאפשר קריאות חוזה חכם מורכבות בשלב אחד.

כיצד להגדיר TON Connect ב-React dApp תוך 15 דקות

התקן את הספרייה ואתחל:

npm install @tonconnect/ui-react 

Manifest — קובץ JSON שהארנק מציג למשתמש בעת החיבור. חייב להיות זמין דרך HTTPS:

// public/tonconnect-manifest.json { "url": "https://yourapp.com", "name": "Your dApp", "iconUrl": "https://yourapp.com/icon.png" } 

עטיפת האפליקציה וכפתור מוכן:

// main.tsx import { TonConnectUIProvider } from '@tonconnect/ui-react' root.render( <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json"> <App /> </TonConnectUIProvider> ) // Компонент с кнопкой и кастомным UI import { TonConnectButton, useTonConnectUI, useTonAddress, useTonWallet } from '@tonconnect/ui-react' function WalletInfo() { const address = useTonAddress() const rawAddress = useTonAddress(false) const wallet = useTonWallet() const [tonConnectUI] = useTonConnectUI() return ( <div> <TonConnectButton /> <p>Адрес: {address}</p> <p>Кошелёк: {wallet?.device.appName}</p> <button onClick={() => tonConnectUI.disconnect()}>Disconnect</button> </div> ) } 

כתובות TON מגיעות בשני פורמטים: ידידותי למשתמש (npm install @tonconnect/ui-react או // public/tonconnect-manifest.json { "url": "https://yourapp.com", "name": "Your dApp", "iconUrl": "https://yourapp.com/icon.png" } ) וגולמי (// main.tsx import { TonConnectUIProvider } from '@tonconnect/ui-react' root.render( <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json"> <App /> </TonConnectUIProvider> ) // Компонент с кнопкой и кастомным UI import { TonConnectButton, useTonConnectUI, useTonAddress, useTonWallet } from '@tonconnect/ui-react' function WalletInfo() { const address = useTonAddress() const rawAddress = useTonAddress(false) const wallet = useTonWallet() const [tonConnectUI] = useTonConnectUI() return ( <div> <TonConnectButton /> <p>Адрес: {address}</p> <p>Кошелёк: {wallet?.device.appName}</p> <button onClick={() => tonConnectUI.disconnect()}>Disconnect</button> </div> ) } ). הפורמט הידידותי כולל bounceable/non-bounceable. לשליחה לחוזים חכמים, השתמש ב-bounceable (EQD...); לארנקים, השתמש ב-non-bounceable (UQD...).

כיצד לשלוח עסקה ולטפל בשגיאות

TON Connect שולח הודעות. עסקה אחת יכולה להכיל מספר הודעות:

import { useTonConnectUI } from '@tonconnect/ui-react' import { toNano } from '@ton/ton' import { beginCell } from '@ton/ton' // Отправка транзакции function SendTon() { const [tonConnectUI] = useTonConnectUI() async function sendTransaction() { const transaction = { validUntil: Math.floor(Date.now() / 1000) + 360, messages: [ { address: 'EQD...contractAddress', amount: toNano('0.05').toString(), payload: 'te6ccgEBAQEAAgAAAA==', // base64 BOC } ] } const result = await tonConnectUI.sendTransaction(transaction) // result.boc — BOC подписанной транзакции } } // Построение payload для вызова jetton transfer const body = beginCell() .storeUint(0xf8a7ea5, 32) .storeUint(0, 64) .storeCoins(toNano('10')) .storeAddress(destinationAddress) .storeAddress(responseAddress) .storeBit(false) .storeCoins(toNano('0.01')) .storeBit(false) .endCell() 

0:abc... הוא BOC (Bag of Cells), מבנה מסודר לקריאות חוזה. טעות נפוצה היא שימוש בדגל bounceable שגוי, מה שמוביל ל-EQ. תמיד ודא את פורמט הכתובת והשתמש ב-UQ להמרה.

כיצד לשחזר סשן ולעבוד עם אירועים

TON Connect משחזר אוטומטית את הסשן מ-localStorage. הירשם לשינויים בסטטוס:

import { useTonConnectUI } from '@tonconnect/ui-react' const [tonConnectUI] = useTonConnectUI() useEffect(() => { const unsubscribe = tonConnectUI.onStatusChange((wallet) => { if (wallet) { console.log('Connected:', wallet.account.address) } else { console.log('Disconnected') } }) return unsubscribe }, [tonConnectUI]) 

ב-Telegram Mini Apps, TON Connect עובד דרך Telegram Wallet ישירות — ללא קוד QR. import { useTonConnectUI } from '@tonconnect/ui-react' import { toNano } from '@ton/ton' import { beginCell } from '@ton/ton' // Отправка транзакции function SendTon() { const [tonConnectUI] = useTonConnectUI() async function sendTransaction() { const transaction = { validUntil: Math.floor(Date.now() / 1000) + 360, messages: [ { address: 'EQD...contractAddress', amount: toNano('0.05').toString(), payload: 'te6ccgEBAQEAAgAAAA==', // base64 BOC } ] } const result = await tonConnectUI.sendTransaction(transaction) // result.boc — BOC подписанной транзакции } } // Построение payload для вызова jetton transfer const body = beginCell() .storeUint(0xf8a7ea5, 32) .storeUint(0, 64) .storeCoins(toNano('10')) .storeAddress(destinationAddress) .storeAddress(responseAddress) .storeBit(false) .storeCoins(toNano('0.01')) .storeBit(false) .endCell() מזהה אוטומטית את ההקשר ומציג את ממשק המשתמש הנכון. לפני הצגת הספק, קרא ל-payload.

למה לשלב TON Connect דרכנו?

השלמנו למעלה מ-20 שילובי TON Connect מוצלחים — מ-dApps פשוטים ועד פרוטוקולי DeFi מורכבים. הניסיון שלנו מראה שהגדרה נכונה של TON Connect מגדילה את המרת החיבור ב-30-50% בזכות חוויית משתמש חלקה ותמיכה בכל הארנקים הפופולריים. אנו מבטיחים פעולה תקינה ב-Tonkeeper, MyTonWallet, Telegram Wallet, וכן במכשירים ניידים ושולחניים.

תהליך שילוב TON שלנו

ציר זמן — מ-5 עד 15 ימים בהתאם למורכבות. התמחור נקבע באופן אישי. קבל הערכה מדויקת לאחר ייעוץ.

מה כלול

ההיקף כולל: תיעוד שילוב, הגדרת קובץ manifest, פיתוח ממשק חיבור מותאם אישית, בדיקות על כל הארנקים הפופולריים (Tonkeeper, MyTonWallet, Telegram Wallet), הדרכת צוות ותמיכה לאחר השקה.

מלכודות נפוצות בשילוב TON Connect

• דגל bounceable שגוי: השתמש ב-Invalid boc לחוזים וב-toNano לארנקים. אחרת, העסקה תיכשל עם שגיאה.
• import { useTonConnectUI } from '@tonconnect/ui-react' const [tonConnectUI] = useTonConnectUI() useEffect(() => { const unsubscribe = tonConnectUI.onStatusChange((wallet) => { if (wallet) { console.log('Connected:', wallet.account.address) } else { console.log('Disconnected') } }) return unsubscribe }, [tonConnectUI]) : בדוק את סריאליזציית ה-payload באמצעות TonConnectUIProvider, במיוחד window.Telegram.WebApp.ready() עם EQ.
• UQ פג תוקף: הוסף חיץ של 5-10 דקות, אחרת הארנק דוחה את העסקה.
• חוסר HTTPS ל-manifest: הארנק לא יתחבר ל-dApp ללא HTTPS.

כיצד להזמין שילוב TON Connect

צור קשר לייעוץ — קבל תוכנית יישום ראשונית והערכת עלות מדויקת. הזמן שילוב TON Connect היום ותן למשתמשים שלך כניסה בטוחה ונוחה למערכת האקולוגית של TON.

לפי מפרט פרוטוקול TON Connect, הפרוטוקול תומך בכל ארנקי TON המודרניים וממשיך להתפתח.