חיבור ארנק TON ל-dApp: אינטגרציית Tonkeeper באמצעות TON Connect

אנחנו משלבים את Tonkeeper וארנקי TON אחרים ב-dApps כבר למעלה מ-5 שנים. רקורד העבודה שלנו כולל יותר מ-20 פרויקטים שבהם TON Connect פעל תחת עומס גבוה — משווקי NFT ועד חוות DeFi עם אלפי משתמשים. הטעות הנפוצה ביותר שאנו רואים אצל לקוחות: העברת ניסיון EVM ל-TON. באת'ריום, הארנק מתקשר ישירות עם נוד דרך JSON-RPC, אבל כאן זה לא כך. TON Connect משתמש בשרת גשר, קישורים עמוקים וקודי QR. ללא הבנה של הארכיטקטורה הזו, האינטגרציה נשברת בהשקה הראשונה לייצור — הגשר מאבד חיבור, המניפסט לא נטען, וכתובות מתבלבלות.

למה TON Connect מורכב יותר מ-EVM?

TON אינו בלוקצ'יין במובן הקלאסי, אלא רשת אסינכרונית עם מודל שחקנים. מצב החוזה משתנה לא על ידי קריאה לפונקציה, אלא על ידי שליחת הודעה. לכן, TON Connect אינו מספק שיטת RPC לשליחת עסקאות — במקום זאת, ה-dApp מעביר הודעה דרך גשר, והארנק מעבד אותה ושולח אותה לבלוקצ'יין. זה מסבך את הדיבאג אך מציע אפשרויות מעניינות: ניתן לחתום על עסקה במצב לא מקוון ולשלוח אותה מאוחר יותר. לפי התיעוד הרשמי של TON Connect, הפרדה זו מאפשרת להשיג זמן אישור עסקה של 3-5 שניות, מהיר פי 3 מ-MetaMask (12-15 שניות).

איך TON Connect 2.0 עובד?

ה-dApp יוזם סשן: יוצר צמד מפתחות (x25519), מפרסם את המפתח הציבורי שלו לשרת גשר (bridge.tonapi.io או מתארח עצמאית). הארנק מקבל הזמנה דרך קישור עמוק (ton-connect://...) או QR. לאחר לחיצת יד — ערוץ מוצפן דרך הגשר. כל הבקשות (sendTransaction, signMessage) עוברות דרך הערוץ הזה, לא דרך RPC ישיר לנוד.

זה אומר: האינטגרציה עובדת גם אם נוד TON אינו זמין — הגשר מחזיק חיבור עם הארנק בנפרד מקריאת הבלוקצ'יין. הגשר מאגר עד 1000 בקשות בשנייה, מה שקריטי עבור יישומי DeFi עם תדירות עסקאות גבוהה.

יישום עם @tonconnect/ui-react

הספרייה הרשמית מכסה את רוב מקרי השימוש. בואו נעבור שלב אחר שלב.

שלב 1: הגדרת manifest.json

manifest.json הוא קובץ חובה שהארנק מציג למשתמש בעת החיבור. הוא חייב להיות זמין דרך HTTPS באותו דומיין כמו ה-dApp. דוגמה:

{
  "url": "https://yourapp.com",
  "name": "Your dApp",
  "iconUrl": "https://yourapp.com/icon-256.png"
}

שלב 2: חיבור TonConnectProvider

import { TonConnectUIProvider, TonConnectButton, useTonConnectUI, useTonAddress } from '@tonconnect/ui-react';

// В корне приложения
<TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json">
  <App />
</TonConnectUIProvider>

שלב 3: שליחת עסקה

const [tonConnectUI] = useTonConnectUI();
const userAddress = useTonAddress(); // raw или friendly format

async function sendTon(toAddress: string, amountNano: string) {
    await tonConnectUI.sendTransaction({
        validUntil: Math.floor(Date.now() / 1000) + 300, // 5 минут
        messages: [
            {
                address: toAddress,
                amount: amountNano, // в nanoTON (1 TON = 1e9 nanoTON)
            }
        ]
    });
}

איך לשלוח Jetton דרך TON Connect?

חוזי TON מקבלים הודעות עם { "url": "https://yourapp.com", "name": "Your dApp", "iconUrl": "https://yourapp.com/icon-256.png" } — תא TL-B. כדי לשלוח קריאה לחוזה Jetton (מקביל ל-ERC-20):

import { beginCell, toNano } from '@ton/core';

// Transfer Jetton: op = 0xf8a7ea5
const body = beginCell()
  .storeUint(0xf8a7ea5, 32) // op code
  .storeUint(0, 64) // query_id
  .storeCoins(toNano('10')) // amount
  .storeAddress(destinationAddress)
  .storeAddress(responseAddress)
  .storeBit(0) // no custom payload
  .storeCoins(toNano('0.05')) // forward_ton_amount
  .storeBit(0)
  .endCell();

await tonConnectUI.sendTransaction({
  validUntil: Math.floor(Date.now() / 1000) + 300,
  messages: [
    {
      address: jettonWalletAddress,
      amount: toNano('0.1').toString(), // TON для газа
      payload: body.toBoc().toString('base64'),
    },
  ],
});

קבלת כתובת ויתרה

קריאת נתונים — דרך TonAPI או toncenter.com, לא דרך TON Connect:

import { TonClient, Address } from '@ton/ton';
const client = new TonClient({
  endpoint: 'https://toncenter.com/api/v2/jsonRPC',
  apiKey: process.env.TONCENTER_API_KEY,
});
const balance = await client.getBalance(Address.parse(userAddress));

import { TonConnectUIProvider, TonConnectButton, useTonConnectUI, useTonAddress } from '@tonconnect/ui-react'; // В корне приложения <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json"> <App /> </TonConnectUIProvider> מחזיר את הכתובת בשני פורמטים: const [tonConnectUI] = useTonConnectUI(); const userAddress = useTonAddress(); // raw или friendly format async function sendTon(toAddress: string, amountNano: string) { await tonConnectUI.sendTransaction({ validUntil: Math.floor(Date.now() / 1000) + 300, // 5 минут messages: [ { address: toAddress, amount: amountNano, // в nanoTON (1 TON = 1e9 nanoTON) } ] }); } (body) ו-import { beginCell, toNano } from '@ton/core'; // Transfer Jetton: op = 0xf8a7ea5 const body = beginCell() .storeUint(0xf8a7ea5, 32) // op code .storeUint(0, 64) // query_id .storeCoins(toNano('10')) // amount .storeAddress(destinationAddress) .storeAddress(responseAddress) .storeBit(0) // no custom payload .storeCoins(toNano('0.05')) // forward_ton_amount .storeBit(0) .endCell(); await tonConnectUI.sendTransaction({ validUntil: Math.floor(Date.now() / 1000) + 300, messages: [{ address: jettonWalletAddress, amount: toNano('0.1').toString(), // TON для газа payload: body.toBoc().toString('base64'), }] }); (base64url, bounce/non-bounce). לתצוגה — friendly. להשוואה בקוד — raw או מנורמל דרך import { TonClient, Address } from '@ton/ton'; const client = new TonClient({ endpoint: 'https://toncenter.com/api/v2/jsonRPC', apiKey: process.env.TONCENTER_API_KEY, }); const balance = await client.getBalance(Address.parse(userAddress)); .

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

TON Connect מנצח במהירות ובעצמאות, אך דורש יותר תשומת לב לפורמט ההודעה. בפועל, זה חוסך עד 40% מזמן כל עסקה בשל אי-הצורך בהמתנה לאישור נוד.

מה כולל שילוב Tonkeeper?

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

הערכות זמן

אינטגרציית TON Connect בסיסית (חיבור + שליחת TON) — חצי יום. עם העברות Jetton וקריאת יתרות — 1-2 ימים. מסך ארנק מלא עם היסטוריית עסקאות דרך TonAPI — 2-3 ימים.

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