Розробка Telegram Mini App з криптофункціональністю

Розробка Telegram Mini App з крипто-функціональністю

Telegram Mini App — це WebView всередину Telegram, який відкривається через кнопку бота або посилання tg://resolve?domain=BotName&appname=appname. Для крипто-додатків цікава ніша: ~900 млн користувачів Telegram, вбудований мессенджер для комунікації, TON-екосистема з нативним гаманцем. Але WebView — це не нативний додаток, і розрив ощущається на кожному кроці інтеграції з блокчейном.

TON Connect: авторизація через гаманець

Для TON-екосистеми — TON Connect 2.0. Користувач підключає Tonkeeper, MyTonWallet або вбудований гаманець Telegram (W5). Mini App отримує адресу гаманця та може запитувати підписи транзакцій.

import TonConnect from '@tonconnect/sdk';

const connector = new TonConnect({
    manifestUrl: 'https://your-app.com/tonconnect-manifest.json'
});

// Підключення гаманця
async function connectWallet() {
    const walletsList = await connector.getWallets();
    // Для Telegram Mini App використовуємо вбудований wallet
    const telegramWallet = walletsList.find(w => w.appName === 'telegram-wallet');

    if (telegramWallet) {
        // Відкриває вбудований гаманець Telegram
        connector.connect({ jsBridgeKey: telegramWallet.jsBridgeKey });
    } else {
        // QR або deep link для зовнішніх гаманців
        const universalLink = connector.connect({ universalLink: walletsList[0].universalUrl });
        window.Telegram.WebApp.openLink(universalLink);
    }
}

connector.onStatusChange(wallet => {
    if (wallet) {
        console.log('Connected:', wallet.account.address);
    }
});

Для EVM-сетей (Ethereum, Polygon, BSC) — WalletConnect, хоча в контексті Telegram Mini App інтеграція складніша: QR-код всередину WebView, Deep Link ведет з Telegram у MetaMask та назад. Працює, але UX гірше ніж у нативному додатку.

Telegram Wallet: вбудований гаманець

З 2023 року у Telegram є вбудований гаманець (@wallet бот) з підтримкою TON та USDT (TON). У Mini App він доступний через window.Telegram.WebApp.openInvoice() для прийому крипто-платежів без зовнішніх гаманців. Це найпростіший спосіб прийняти крипто у Mini App — користувач платить прямо з Telegram без встановлення додаткових додатків.

// Створення інвойса для оплати у Stars або TON
const tg = window.Telegram.WebApp;

async function createCryptoInvoice(amount, description) {
    // На сервері створюємо інвойс через Telegram Payments API або @wallet API
    const invoiceLink = await fetch('/api/create-invoice', {
        method: 'POST',
        body: JSON.stringify({ amount, description, currency: 'XTR' }) // XTR = Telegram Stars
    }).then(r => r.json()).then(d => d.link);

    tg.openInvoice(invoiceLink, (status) => {
        if (status === 'paid') {
            // Успішна оплата
            handlePaymentSuccess();
        }
    });
}

Telegram Stars (XTR) — внутрішня валюта Telegram з серпня 2024. Приймається для цифрових товарів та послуг всередину Mini Apps. Конвертується у гроші через Telegram Fragment.

DeFi у Mini App: обмеження WebView

Головне обмеження — Mini App працює у WebView всередину Telegram, а не у браузері. window.ethereum не injected автоматично. MetaMask не інжектує провайдер у WebView Telegram.

Розв'язання:

1. TON-only функціональність через TON Connect — працює нативно
2. Серверна Web3-логіка — клієнт не працює з блокчейном напрямки, всі on-chain операції через ваш бекенд
3. Iframe з Metamask Snaps — експериментально, не для продакшена

Практично для DeFi-додатків на EVM у Telegram Mini App найкраща архітектура — кастодіальні гаманці або MPC (Multi-Party Computation) через Privy або Dynamic. Користувач авторизується через Telegram initData, отримує гаманець від сервісу, всі транзакції підписуються серверними компонентами.

Верифікація initData

Будь-який запит від Mini App до вашого бекенду має бути верифікований через Telegram initData:

import hmac
import hashlib
from urllib.parse import parse_qsl

def verify_telegram_init_data(init_data: str, bot_token: str) -> bool:
    parsed = dict(parse_qsl(init_data, keep_blank_values=True))
    hash_value = parsed.pop('hash', '')
    data_check = '\n'.join(f'{k}={v}' for k, v in sorted(parsed.items()))
    secret_key = hmac.new(b'WebAppData', bot_token.encode(), hashlib.sha256).digest()
    expected = hmac.new(secret_key, data_check.encode(), hashlib.sha256).hexdigest()
    return hmac.compare_digest(hash_value, expected)

Без цієї перевірки будь-хто може відправити POST з довільним user_id та отримати чужий крипто-баланс.

Сповіщення через бота

Одна з головних переваг Telegram Mini App — миттєві сповіщення через бота без APNs/FCM. Транзакція підтверджена — бот відправляє сообіщення. Аномальна активність — push у Telegram. Реалізується через bot.sendMessage(chatId, text) з python-telegram-bot або grammy (Node.js).

Технічний стек

Фронтенд Mini App: React або Vue + Vite, CSS через Tailwind або нативний CSS з урахуванням колірної теми Telegram (tg.themeParams). Тємна тема підтримується через tg.colorScheme. Адаптація під мобільний viewport — tg.viewportHeight, tg.viewportStableHeight.

Бекенд: будь-яка мова. Node.js з grammy або telegraf, Python з aiogram — популярні вибори для Telegram-ботів.

Сроки

3–5 тижнів для Mini App з TON Connect, крипто-оплатою, DeFi-функціональністю через серверний шар та нотифікаціями через бота. Вартість розраховується індивідуально після аналізу вимог.