TON Connect в Mini App подключается через протокол TonConnect: пользователь одобряет доступ к адресу кошелька, а каждую транзакцию подтверждает вручную в интерфейсе своего TON-кошелька. Для React и Next.js есть готовый пакет @tonconnect/ui-react с пр…
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Claude Code: новый CLI-агент от Anthropic
Anthropic выпустила Claude Code — терминальный AI-агент для разработчиков. Инструмент работает прямо в командной строке и умеет писать, редактировать и запускать код.
Zcode AI: Полный гид по визуальному интерфейсу для Claude Code и AI-агентов
Узнайте, как использовать Zcode для управления Claude Code, Gemini и Codex в едином GUI. Настройка провайдеров, MCP-серверов и визуальный вайбкодинг.
YouTube-канал с монетизацией из любой точки мира: Пошаговый гайд 2026
Инструкция по созданию YouTube-канала: обход блокировок SMS, настройка расширенных функций через виртуальные номера и правила безопасности для монетизации.
Windsurf Code Maps: Как глубоко понимать архитектуру проекта перед написанием кода
Полный гайд по Windsurf Code Maps, модели Sway 1.5 и Sway Grep. Узнайте, как визуализировать архитектуру кода и ускорить разработку в 13 раз.
Vk Fast Cash Strategy
Аудитория ВКонтакте — это те же люди, что и в Instagram, но 'социальный контракт' площадки другой. Если Instagram — это 'дорогой ресторан' с демонстрацией успеха, то VK — это 'душевная шашлычная'. Здесь не работает глянцевый 'успешный успех
TON Connect в Mini App подключается через протокол TonConnect: пользователь одобряет доступ к адресу кошелька, а каждую транзакцию подтверждает вручную в интерфейсе своего TON-кошелька. Для React и Next.js есть готовый пакет @tonconnect/ui-react с провайдером, кнопкой подключения и хуками. Ниже разберем весь процесс: от handshake до отправки первой транзакции, а еще честно ответим, когда крипта в Mini App действительно нужна, а когда хватит Telegram Stars.
С начала 2025 года все Mini App с блокчейн-функциями обязаны работать через TON, размещение активов на других сетях приводит к удалению из каталога Telegram. Кейсов такой интеграции за последние полтора года набралось достаточно, чтобы разложить процесс по полочкам: от установки пакета до реальных примеров, где TON окупает сложность, а где только все усложняет.
TON Connect — стандартный протокол подключения TON-кошельков к приложениям. Он дает Mini App доступ к публичному адресу пользователя без доступа к приватным ключам.
Три пакета решают разные задачи: @tonconnect/ui-react для React-приложений, @tonconnect/ui без React-обвязки и @tonconnect/sdk для低уровневого контроля или серверных сценариев. Для 90% Mini App на Next.js подходит первый вариант.
Без TON Connect Mini App не может ни узнать адрес кошелька, ни попросить пользователя подписать транзакцию. Протокол закрывает именно эту базовую задачу подключения, а не весь платежный цикл целиком. Дальше уже логика приложения решает, что делать с адресом: показать баланс, записать в базу, привязать к NFT.
| Пакет | Для чего | Когда брать |
|---|---|---|
| @tonconnect/ui-react | Готовые React-хуки и кнопка | Next.js, React, большинство Mini App |
| @tonconnect/ui | UI без React-биндингов | Vanilla JS, HTML-сайт без фреймворка |
| @tonconnect/sdk | Headless-коннектор | Кастомный UI, серверные сценарии |
Handshake в TON Connect занимает три шага: приложение открывает запрос на подключение, пользователь подтверждает его в кошельке, приложение получает публичный адрес без доступа к приватным ключам.
Пользователь нажимает кнопку подключения. Приложение открывает модальное окно или, если Mini App запущен внутри самого кошелька Telegram, встроенный интерфейс подтверждения. TonConnect автоматически определяет, где именно открыт dApp, и подбирает подходящий сценарий, это заметно упрощает UX по сравнению с QR-кодом на десктопе.
После подтверждения приложение подписывается на onStatusChange и получает объект с адресом кошелька. Здесь есть нюанс: адрес приходит в сыром (raw) формате, который неудобно показывать пользователю и не всегда принимают сторонние API. Его нужно конвертировать в Base64 отдельной функцией, это отдельный шаг, который часто забывают на первой итерации.
Manifest URL обязателен для всего процесса. Файл содержит имя приложения, иконку 180×180 пикселей и адрес сайта. Кошелек читает эти данные, чтобы показать пользователю, к чему он подключается, а без корректного манифеста TonConnect просто отклонит запрос на подключение.
В Next.js провайдер TonConnect UI монтируется через use client, манифест кладется в public/, а кнопка подключения работает сразу после обертки приложения в провайдер.
Установка: npm i @tonconnect/ui-react. Manifest-файл tonconnect-manifest.json кладется в папку public, Next.js отдаст его по адресу https://вашдомен.ру/tonconnect-manifest.json. Провайдер обязательно рендерится на клиенте, потому что использует браузерные API.
// app/providers.tsx
'use client';
import { TonConnectUIProvider } from '@tonconnect/ui-react';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<TonConnectUIProvider manifestUrl="https://ваш-домен.ru/tonconnect-manifest.json">
{children}
</TonConnectUIProvider>
);
}Дальше оборачиваем layout.tsx в Providers, добавляем <TonConnectButton /> на нужную страницу, и кнопка подключения уже работает. Все хуки TonConnect UI и сам компонент кнопки обязаны находиться внутри провайдера, иначе получите ошибку контекста React. На этом этапе многие вайбкодеры пропускают именно оборачивание layout, а не саму установку пакета, и потом полчаса ищут, почему хук не видит подключение.
Баланс и список транзакций Mini App получает не через TonConnect, а через отдельный TON API — REST-интерфейс, доступный даже без глубокого опыта в Web3.
TonConnect отвечает только за подключение и подпись. Данные о балансе и истории операций приходят через TON API — обычный REST, с аутентификацией по токену из TON Console. Бесплатный уровень ограничен одним запросом в секунду и пятью отслеживаемыми аккаунтами, для MVP этого достаточно.
Токен API нельзя держать во фронтенде: он уходит в .env или на бэкенд-прослойку, которая уже сама дергает TON API и отдает клиенту готовый json. Для истории операций разработчики обычно ограничивают выдачу последними 10 транзакциями и форматируют даты и адреса под читаемый вид перед показом пользователю.
Каждую транзакцию инициирует приложение, но подписывает пользователь в интерфейсе своего кошелька. Списать средства без явного подтверждения на конкретную операцию невозможно.
Это ключевое архитектурное отличие крипто-платежей от сохраненной карты. В обычном e-commerce можно сделать "оплату в один клик" по сохраненным реквизитам. В TON Connect так не получится: каждая операция требует, чтобы пользователь открыл кошелек и подтвердил именно ее.
Для UX это значит одно: закладывайте лишний экран подтверждения в сценарий оплаты. Пользователь может отменить транзакцию, закрыть кошелек или не увидеть уведомление, и Mini App должен корректно обработать все три случая, а не зависнуть в состоянии "ожидание".
Telegram Stars проще для обычных покупок: подписка, доступ, разовый платеж внутри Mini App. TON Connect оправдан, когда владение цифровым активом — суть продукта, а не просто способ оплаты.
Оба рельса живут в одной экосистеме: Stars привязаны к TON по курсу 200 звезд за 1 TON, но тратятся строго внутри Telegram. Для типового сервиса с подпиской или разовой покупкой Stars закрывают задачу за одну интеграцию через BotFather, без объяснения пользователю, что такое криптокошелек и зачем он нужен.
| Критерий | Telegram Stars | TON Connect |
|---|---|---|
| Порог входа для пользователя | Apple Pay / Google Pay в один тап | Нужен TON-кошелек |
| Подходит для | Подписки, доступ, разовые покупки | NFT, токен-экономика, DeFi |
| Комментарий по комиссии | Оплата через App Store / Google Play | Сеть TON, без сторов |
| Вывод разработчиком | Через Fragment, от 1000 звезд | Прямо на TON-адрес |
Максим: «Мы в GoBanana сразу закладывали российский угол: без VPN, без зарубежных карт, платишь сколько нужно. Для многих продуктов это и есть главная причина смотреть в сторону крипты, а не хайп вокруг блокчейна.»
Честный критерий такой: если продукт органически завязан на владение активом (NFT-коллекция, токенизированная игровая экономика), TON Connect не опция, а суть продукта. Для обычного сервиса это лишняя сложность.
Два рабочих сценария из практики: игровые экономики, где внутриигровая валюта конвертируется в токен и пользователь реально может ее вывести, и NFT-маркетплейсы внутри Mini App, где сам товар это ончейн-актив. В обеих ситуациях крипто-логика не надстройка, а фундамент продукта.
Для сервиса с оплатой за подписку, e-commerce или AI-инструмента с кредитами TON Connect добавляет UX-трение без выгоды: пользователю нужно объяснять, что такое кошелек, ждать подтверждения транзакции, разбираться с комиссией сети. Telegram Stars или классический эквайринг закрывают эту задачу проще и без обучения аудитории.
Базовая интеграция кнопки подключения и отображения адреса занимает один вечер: установка пакета, манифест, провайдер, обработка статуса. Полноценные транзакции и работа с TON API добавляют еще день-два.
Для вайбкодера без глубокого бэкграунда в Web3 первый рабочий прототип с кнопкой подключения и адресом в UI реально собрать за 3-4 часа, если манифест уже захостен и IPFS-сервис вроде Pinata под рукой. Дальше время уходит на обработку edge-кейсов: отклоненное подключение, повторный визит, форматирование адреса.
Полноценный платежный флоу с историей транзакций и бэкенд-прослойкой к TON API занимает уже 1-2 полных дня, включая тестирование на реальном кошельке. Тестового окружения с песочницей у TON Connect нет, проверять приходится на живой сети с небольшими суммами.
Нужен ли бэкенд для TON Connect?
Для базового подключения кошелька и отображения адреса бэкенд не нужен, все работает на клиенте. Бэкенд понадобится, если храните адрес в базе или дергаете TON API с приватным токеном.
Можно ли использовать TON Connect без React?
Да, для этого есть пакет @tonconnect/ui, он дает те же компоненты без React-биндингов. Логика подключения и манифест остаются те же.
Что делать если TonConnect отклоняет подключение?
Чаще всего причина в манифесте: неверный URL, отсутствует иконка нужного размера или домен манифеста не совпадает с доменом приложения. Проверьте, что tonconnect-manifest.json реально открывается по прямой ссылке.
Обязательно ли хостить манифест на IPFS?
Нет, это просто удобный вариант для быстрого старта. Манифест можно отдавать с собственного сервера или из папки public в Next.js, главное, чтобы он был доступен по стабильному URL.
Что приходит в адресе кошелька, raw или Base64?
По умолчанию status.account.address возвращает адрес в сыром формате. Для показа пользователю и для работы с большинством API его нужно конвертировать в Base64 отдельной функцией.
Стоит ли делать TON-интеграцию для обычного Telegram-бота с подпиской?
В большинстве случаев нет. Telegram Stars закрывают эту задачу проще, без обучения пользователя работе с кошельком и без ожидания подтверждения транзакции.
TonConnect UI — готовый набор компонентов и хуков для подключения TON-кошелька к приложению.
Handshake — процесс согласования подключения между приложением и кошельком, заканчивается получением публичного адреса.
Manifest URL — json-файл с именем, иконкой и адресом приложения, по которому кошелек идентифицирует Mini App.
dApp — децентрализованное приложение, взаимодействующее с блокчейном напрямую через протоколы вроде TON Connect.
Jetton — токен-стандарт в сети TON, аналог токенов ERC-20 в Ethereum.
Telegram Stars — внутренняя валюта Telegram для оплаты цифровых товаров и услуг в ботах и Mini App.
Если собираете Mini App с нуля, разберите сначала базовую сборку в статье Telegram Mini App на React, а вопрос выбора между Stars, Fragment и TON закрывает разбор монетизации Mini Apps. Актуальные AI IDE для сборки такого прототипа за вечер смотрите в каталоге инструментов VibeCoderz. Если нужна разовая консультация по архитектуре платежей, запишитесь к Максиму.
Источники: официальная документация TON по интеграции в Mini App, гайд по построению продуктов на TON в 2026, руководство TON Connect для разработчиков.