Ivan Lomovtcev
Разработка

Я написал свой TON Wallet connector

Меня зовут Иван, я фуллстек-разработчик, и это мой первый пост на VC. В последнее время львиная доля проектов, с которыми мне приходилось работать - финтех-продукты в экосистеме TON/Telegram. Почти всегда приходилось использовать готовые решения для интеграции с TON-совместимыми кошельками пользователей, что и вылилось в основную боль, особенно на фронтенде - от регулярных фризов и залипаний UI (ну и .. собственно - UX), до разросшегося бандла из-за одной библиотеки и непредсказуемого даже мне, как разработчику, поведения.

Демонстрация базового UI (из коробки)
Демонстрация базового UI (из коробки)

После множества попыток оптимизировать всё это добро, множества патчей, я сам для себя принял решение - написать свой инструмент, который был бы давал качественный и гибкий DX и предсказуемый UX.

Так появился TBridge или @tbridge/sdk.

Что это вообще за велосипед? - спросите вы

Это клиентский SDK (для браузера): коннектор TON-совместимых кошельков + возможность использовать минимально необходимый UI (выбор кошелька, подключение, транзакции, события). Пара пунктов, которые я хотел бы выделить:

  • без привязки к UI-библиотеке (React, Vue, Svelte или любой другой) - чистый Typescript (на выходе само собой - js), который можно воткнуть куда угодно, хоть в голый HTML. Короче говоря - framework-agnostic;
  • адаптивное, но предсказуемое поведение в Telegram мини-аппах, in-app браузерах, веб-браузерах и на десктопе и на мобильных;
  • опциональный UI "из коробки";
  • возможность гибко настраивать на клиенте: что уходит в storage, какой storage, какие бриджи кошельков можно, а какие нельзя и как парсится этот реестр)

Как устроено (в двух словах)

  • Discovery - список кошельков из реестра (по умолчанию официальный от TON, но можно свой).
  • HTTP-bridge - SSE+POST encrypted message (NaCl box), как принятно в протоколе.
  • JS-bridge - если кошелек встроен на страницу/хост (injected).
  • UI - модалка выбора кошелька, QR для подключения, bottom sheet подтверждения операции в кошельке (если вдруг не удалось выполнить авторедирект, например, если сам кошелек на другом устройстве или не установлен вовсе); само собой - светлая и темная темы и i18n (EN/RU).
  • Всего две зависимости: QR и Tweetnacl (крипто), без "комбайна".

Минимальный пример

import { TBridge, connectWithUi } from '@tbridge/sdk'; const bridge = new TBridge({ manifestUrl: 'https://your-app.example/tonconnect-manifest.json' }); await connectWithUi(bridge); await bridge.sendTransaction({ validUntil: Math.floor(Date.now() / 1000) + 300, messages: [ { address: 'EQ…', amount: '100000000', // nanoTON }, ], });

Подключение

pnpm add @tbridge/sdk # или npm i @tbridge/sdk
Окно подключения к кошельку
Окно подключения к кошельку

Честно про безопасность

Браузерный коннектор не может быть безопасней своего хоста (origin страницы). Если на сайте XXS - сессию можно увести, как и у любого другого клиентского SDK. Шифрование storage в TBridge - это защита на слое хранения, а не замена CSP и нормальной гигиены фронта.

Запросы с SDK ходят строго по маршрутам, требуемым в протоколе: реестр кошельков и bridgeURL, и это не "скрытый телеметрийный канал", а рабочая модель подключения.

Для кого

  • Команды на TON и/или Telegram mini-app, которым нужен свой UI/UX и контроль над клиентом.
  • Продукты, в которые нельзя тащить тяжелый UI-кит и кучу бесполезного кода под один фреймворк.
  • Для тех, кто хочет читать и форкать Typescript-пакет, а не размазанный монорепозиторий.

Ссылки

GitHub: https://github.com/advanceddev/tbridge-sdk

npm: https://www.npmjs.com/package/@tbridge/sdk

Telegram Mini-App (SDK Demo): https://t.me/t_sdkbot

Спасибо за уделенное время! Присылайте багрепорты - на v0.3.x это особенно важно)