StampToolsДецентрализованное приложение для поиска, покупки и аналитики криптовалют

Изначальной задачей была верстка децентрализованного приложения для платформы аналитики криптовалют. Всего 12 страниц - графики, таблицы, интерактивные элементы

Скриншот главной страницы сайта VitallyLife

Обратились за версткой сложного проекта - децентрализованного приложения для мониторинга криптовалют.

Децентрализованное приложение - это приложение, которое взаимодействует не с сервером, а с блокчейном, обычно через браузерное расширение (часто через несколько на выбор). Если в обычном приложении сервер один, то здесь серверов много, а чтобы их синхронизировать используют сложные математические рассчеты.

Основная задача - сделать так, чтобы пользователь мог авторизоваться используя свой кошелек и выступать в качестве интерфейса для него, а не в качестве отдельной платформы.

Но началось все вообще не с этого

Все началось с верстки

Моей изначальной задачей было сделать обычную верстку на HTML, CSS и JS. По стеку никаких требований не было, поэтому я решил написать все это с использованием Post CSS, вместо SCSS, как обычно.

Так как это все-таки панель (а фреймворка нет), для того чтобы избежать дубликатов и хоть как-то не запутаться, использовал Nunjucks. Многие, наверное, уже не знают, что это вообще такое, но без него этот проект превратился бы в сущий кошмар.

Для графиков выбрал Chart.js. Это самый простой вариант для небольших объемов данных (сами объемы огромные, но вот одновременный вывод - нет, поэтому проблем это не создает). Для интерактивной навигации и выбора области использовад noUiSlider - это библиотека на ползунки без зависимостей, которая весит около 5 кб и фактически никак не влияет на скорость загрузки. А, и еще может выглядеть абсолютно как угодно.

И как оказалось - идеально интегрируется с Chart.js.

Предлагаю посмотреть на некоторые экраны вёрстки, пока мы еще не перешли к кульминации

Когда верстка была уже готова, казалось что все было идеально. Но оставалась интеграция с бекендом. Приложение, хотя и децентрализованное, имеет свое API для удобного парсинга блокчейна. На самом деле, даже не представляю что там происходило на бекенде, но очевидно, что что-то невероятное.

И вот тут разработчик, который решил, что интеграция фронтенда с бекендом будет легкой задачей, видимо, окончательно понял, что ошибается. И этой интеграцией занялся я

По большому счету, проблем не возникло, кроме одной страницы - вот этой

Здесь 12 выводов и в сумме 24 диаграммы. На каждое переключение надо размонтировать старую диаграмму, делать запрос к API, рассчитывать новый вид и отображать новую. А теперь мы вспоминаем, что это все надо сделать три раза и привязать к регулировке снизу

Состоянием приходится управлять буквально вручную. Это не самая сложная задача, но реализация выглядела мягко говоря печально. По сути, для такой задачи проще было бы написать микро библиотеку для рендеринга… а ведь она уже существует

И да, на этом этапе в проект стратегически был добавлен React. Причем не так, как его используют сейчас, а по его изначальному предназначению - рендерить маленькие кусочки внутри существующего DOM. Именно на такой архитектуре (только правильной и продуманной) работает сайт, на котором вы это читаете.

И теперь вместо ручного управления и запросов у нас был всего один компонент и 3 useState, куда при необходимости абсолютно без потерь производительности можно было добавить хоть 10 переключателей, которые бы добавили… много новых вариаций отображения. А еще это позволило без проблем добавлять функционал, который вообще изначально не задумывался. Например, спиннер при переключении.

А всего за 7 дней абсолютно весь проект был полностью переведен на React. В целом, по меркам проекта, это невероятная скорость, учитывая что абсолютно на каждой странице были графики, интеграции с API и другой сложный функционал. И да, по-хорошему проект надо было изначально писать на React - и так бы оно и было, если бы от меня не хотели именно верстку.

Но это все не важно. Теперь стояла более интересная и важная задача

Интеграция с кошельком

Во-первых, проект буквально только что был переведен на TypeScript. Поэтому пришлось делать то, что обычно делают только создатели npm-пакетов - объяснять TypeScript’у, что такое вообще этот ваш Unisat и что в нем есть. А ещё этот самый Unisat, в отличие от информации из документации, загружается далеко не всегда с первого раза.

Поэтому, мы сначала проверяем несколько раз через некоторое время, доступен ли кошелек, и загрузился ли он, а только потом предлагаем пользователю авторизацию.

А чтобы не оставлять пользователя в неведении, были добавлены всплывающие уведомления через react-hot-toast - это буквально лучшая библиотека для уведомлений. Уведомления появляются откуда угодно и кастомизируются как угодно, вызывать можно из любой части приложения - всего одной строкой!

Authorization success
Error

Ну и бонусом ко всему, есть светлая тема, которая переключается не только вручную, но и автоматически в заисимости от темы, которая установлена в операционной системе

И полная мобильная версия для ВСЕХ страниц с удобным управлением. Многие элементы вообще полностью перестраиваются. Короче, по сути при адаптиве получается полноценное мобильное приложение, но в браузере.