Розробка Telegram Mini App для крипто-проєкту

Розробка Telegram Mini App для крипто-проєкту

Крипто-проєкти втрачають до 90% потенційних користувачів на етапі реєстрації — головний бар'єр: onboarding через seed phrase. Telegram Mini App (Telegram Web Apps) знімає цю проблему: авторизація в один клік через Telegram, а транзакції підписуються через TON Connect або custodial гаманець. Користувач втрачає контекст при переході в браузер — відтік на кожному кроці. Mini App утримує: 70% юзерів завершують транзакцію в Telegram. За 6 років ми реалізували 15+ таких проєктів — від простих faucet-ботів до DeFi-платформ із TVL $50M+. Користувач навіть не помічає, що взаємодіє з блокчейном: інтерфейс звичний, швидкість реакції — під 60 FPS.

Telegram Web Apps — офіційна платформа для створення міні-додатків всередині месенджера (джерело: core.telegram.org/bots/webapps)

Як ми інтегруємо гаманці?

Вибір методу визначає поріг входу. TON Connect дає в 3 рази вищу конверсію серед масової аудиторії, ніж WalletConnect, який розрахований на crypto-native користувачів. Custodial гаманець — компроміс: onboarding за 10 секунд, але ключі зберігаються на сервері.

Для TON використовуємо @tonconnect/sdk. Для EVM — WalletConnect v2. Якщо аудиторія не готова до самостійного керування ключами, реалізуємо custodial: бекенд генерує ключі, користувач підтверджує дії через Telegram identity. Наш кейс: для NFT-маркетплейсу на TON обрали зв'язку TON Connect + custodial для неактивних юзерів — конверсія зросла на 40%.

Чому важлива верифікація initData?

Без серверної перевірки initData зловмисник підміняє initDataUnsafe і видає себе за іншого. Telegram підписує дані HMAC-SHA256 із секретом бота. Перевірка обов'язкова — порівняння з обчисленим хешем:

// Frontend: отримуємо initData import WebApp from "@twa-dev/sdk"; const initData = WebApp.initData; const user = WebApp.initDataUnsafe.user; const response = await fetch("/api/auth/telegram", { method: "POST", body: JSON.stringify({ initData }), }); 

// Backend: верифікація initData import crypto from "crypto"; function verifyTelegramInitData(initData: string, botToken: string): boolean { const params = new URLSearchParams(initData); const hash = params.get("hash"); params.delete("hash"); const checkString = [...params.entries()] .sort(([a], [b]) => a.localeCompare(b)) .map(([k, v]) => `${k}=${v}`) .join("\n"); const secretKey = crypto .createHmac("sha256", "WebAppData") .update(botToken) .digest(); const expectedHash = crypto .createHmac("sha256", secretKey) .update(checkString) .digest("hex"); return hash === expectedHash; } 

Ніколи не довіряємо initDataUnsafe на фронті без серверної перевірки. Якщо хеш не збігається — сервер повертає 401. На фронті редиректимо на екран помилки з кнопкою «Повторити». Важливо: не використовуємо initData з window — лише той, що прийшов від Telegram WebApp.

Як TON Connect прискорює залучення користувачів?

TON Connect підходить для масової аудиторії, не знайомої з криптогаманцями. Достатньо натиснути кнопку «Увійти через Telegram» — гаманець створюється автоматично. Час до першої транзакції: 40 секунд проти 3-5 хвилин через WalletConnect. Для TON використовуємо @tonconnect/sdk.

import TonConnect from "@tonconnect/sdk"; const connector = new TonConnect({ manifestUrl: "https://yourapp.com/tonconnect-manifest.json", }); const walletsList = await connector.getWallets(); await connector.connect({ universalLink: walletsList[0].universalLink }); await connector.sendTransaction({ validUntil: Math.floor(Date.now() / 1000) + 600, messages: [{ address: recipientAddress, amount: "1000000000", }], }); 

UI/UX: адаптація під Telegram

Telegram надає CSS-змінні для теми. Використовуємо var(--tg-theme-bg-color), var(--tg-theme-text-color), var(--tg-theme-button-color). MainButton — нативний елемент для підтвердження:

WebApp.MainButton.text = "Підтвердити транзакцію"; WebApp.MainButton.color = "#6366f1"; WebApp.MainButton.show(); WebApp.MainButton.onClick(async () => { WebApp.MainButton.showProgress(true); await sendTransaction(); WebApp.MainButton.hideProgress(); WebApp.close(); }); 

Haptic feedback — impactOccurred для кнопок, notificationOccurred для успіху. Порівняйте з браузерним dApp: час до першої дії скорочується в 2-3 рази. Deep links для транзакцій: бот надсилає кнопки з startapp=tx_0x1234, бекенд читає startParam і відновлює контекст.

Крипто-специфічні патерни

Transaction confirmation flow. На відміну від MetaMask, у користувача немає деталей. Явно показуємо: не «Підтвердити», а «Купити 100 USDT за 0.05 ETH», поточні газ-ліміти, час до підтвердження.

Balance display. Використовуємо WebApp.expand() для повноекранного режиму. Малий екран — картки замість таблиць. Замовте розробку Mini App — ми підберемо оптимальну схему інтеграції.

Що входить у роботу

• Аналітика: вибір варіанту інтеграції гаманця, проектування UX
• Розробка фронтенду (React + TypeScript + @twa-dev/sdk)
• Інтеграція TON Connect або WalletConnect v2
• Бекенд: верифікація initData, обробка транзакцій, зберігання стану
• Деплой на HTTPS (Cloudflare Pages або Vercel)
• Документація з використання та підтримка після запуску

Процес роботи

1. Аналітика — обговорюємо вимоги, обираємо стек і схему гаманця.
2. Проектування — створюємо прототип UI та архітектуру.
3. Реалізація — пишемо код фронтенду, смарт-контрактів (якщо потрібно) та бекенду.
4. Тестування — unit-тести, fuzzing для контрактів, перевірка в Mini App.
5. Деплой — розміщуємо на production, налаштовуємо домен і бота.

Терміни орієнтовно: від 3 тижнів для MVP до 4 місяців для повноцінного продукту. Вартість базової версії стартує від $5,000, що значно нижче за середню ринкову ціну $10,000+. Економія на рекрутингу — до 30% завдяки оптимізації процесів. Отримайте консультацію щодо вашого завдання — ми допоможемо визначити оптимальне рішення.

Обмеження платформи

• Немає window.ethereum — класичний MetaMask не працює в WebView Telegram.
• Обмежений localStorage — використовуємо sessionStorage або бекенд.
• Camera/NFC API недоступні — не можна сканувати QR в iframe.
• Content Security Policy строгіша за браузерну — перевіряємо inline scripts.

Архітектура типового Mini App: фронтенд (React) спілкується з бекендом через REST API. Бекенд обробляє транзакції, зберігає сесії та перевіряє initData. Смарт-контракти (Solidity або FunC) розгорнуті в мережі. Взаємодія через TON Connect або WalletConnect — це перевірена схема, яку ми гарантуємо без помилок.

Ми маємо 6 років досвіду в блокчейн-розробці та понад 15 успішних проєктів. Наші клієнти отримують сертифіковане рішення з гарантією якості. Зв'яжіться з нами для оцінки вашого проєкту.