Фронтенд криптобиржи, построенный вокруг подключения кошельков
Торговая платформа доступна ровно настолько, насколько удобно в ней подключить кошелёк. Для этой криптобиржи, сделанной под NDA, мы работали над фронтендом: пользователи привязывают внешние кошельки через WalletConnect и управляют балансами и переводами на экранах веб-кошелька, а браузерный слой никогда не держит у себя их приватные ключи.
Работа длилась четыре месяца, начиная с июля 2021 года. Команда была компактной — тимлид, бэкенд-разработчик и два фронтенд-разработчика, — и мы занимали одну из двух фронтенд-ролей.
Ключевые возможности
- Интеграция WalletConnect — сопряжение сессий с внешними приложениями-кошельками, запросы на подпись транзакций и обработка состояния соединения.
- Сценарии веб-кошелька — балансы, переводы и экраны подтверждения транзакций, сделанные целиком.
- Веб-компоненты на Lit — переиспользуемые блоки интерфейса, упакованные как стандартные custom elements и используемые внутри приложения на React.
- Связь с бэкендом — фронтенд работает с сервисами биржи на Express.js, которые хранят данные в MongoDB.
Как WalletConnect влияет на фронтенд биржи
WalletConnect позволяет веб-приложению работать с кошельком, который у пользователя уже есть. Приложение открывает сессию — обычно через QR-код на десктопе или диплинк на мобильном, — и с этого момента каждое чувствительное действие становится запросом, который пользователь подтверждает или отклоняет в своём кошельке. Фронтенд биржи никогда не касается приватного ключа.
Эта модель переносит в интерфейс реальную работу. Фронтенд должен показывать, активна ли сессия, ждать подпись, которая может прийти через секунды или не прийти вовсе, и восстанавливаться, когда пользователь закрывает приложение-кошелёк или завершает сессию с другой стороны. Экраны переводов, где «отправлено в кошелёк», «подписано» и «отклонено» — разные состояния, избавляют пользователей от гаданий, прошёл ли перевод.
Архитектура и технологический стек
Фронтенд
Интерфейс биржи написан на React, а переиспользуемые компоненты — на Lit. Компоненты Lit — это стандартные веб-компоненты, поэтому они отрисовываются внутри React, не завися от него. Границу между ними приходится продумывать: сложные данные передаются через свойства элемента, а не через атрибуты, а изменения возвращаются DOM-событиями, а не колбэками React.
Подключение кошельков
WalletConnect обеспечивает связь между биржей и внешними приложениями-кошельками — сопряжение, состояние сессии и запросы на подпись. Поверх него построены сценарии веб-кошелька для балансов, переводов и подтверждений.
Бэкенд и данные
Фронтенд обменивается данными с бэкендом на Express.js, который хранит данные в MongoDB. На стороне фронтенда этой границы — запросы, состояния загрузки и ошибок и согласованность экранов кошелька с тем, что возвращает API.
Наша роль
Мы были одним из двух фронтенд-разработчиков в команде из четырёх человек вместе с тимлидом и бэкенд-разработчиком. В нашу зону ответственности входили фронтенд биржи на React и Lit, интеграция WalletConnect и сценарии веб-кошелька. Остальные детали проекта остаются под NDA.
Смежные работы
Ещё один интерфейс с подключением кошелька — наш фронтенд на TronLink для DAO по торговле природными ресурсами; также посмотрите криптобиржу с кастодиальным хранением, где мы руководили командой. Такие фронтенды входят в нашу услугу по разработке веб-приложений.
