В рубрике DOU Проекторвсе желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на editors@dou.ua.
Image may be NSFW.
Clik here to view.
Добрый день, меня зовут Александр Попов. Я работаю front-end разработчиком в компании Onlinico. В этой статье расскажу о создании небольшого pet-проекта, который планировался быть только обучающим для меня, а оказался и весьма полезным для людей.
Идея
В современном мире криптовалюты уже давно стали привычной частью нашей жизни. Денежные переводы с их помощью намного удобнее, быстрее и дешевле, чем, например, с помощью SWIFT или Western Union. Или, по крайней мере, они до недавнего времени были дешевле и быстрее банковских переводов. Несколько месяцев назад комиссии на транзакции в криптовалюте выросли и в некоторых случаях стали соизмеримы с комиссиями банковских переводов.
Так возникла идея создания сервиса для сравнения комиссий транзакций различных криптовалют и помощи в выборе более выгодного способа перевода денег.
CryptoFees — это open-source проект, созданный с единственной целью — показать, какая криптовалюта предоставляет более выгодные комиссии для денежных переводов. Этот сайт анализирует последние транзакции из блокчейнов двух самых популярных криптовалют — Bitcoin и Ethereum.
Реализация
Сперва сайт выбирает текущие курсы валют и последние транзакции из блокчейнов Bitcoin и Ethereum. Затем для наиболее корректного сравнения BTC и ETH транзакций выбираются только транзакции Ethereum между аккаунтами, контрактные транзакции не учитываются. Из этих двух списков транзакций выбираются только те, которые попадают в выбранный диапазон суммы перевода (по умолчанию
Image may be NSFW.
Clik here to view.
Сайт реализован на React.js, а адаптивная HTML+CSS разметка сделана с использованием Twitter Bootstrap. Все вычисления полностью выполняются на клиенте, так что страница может даже быть сохранена и открыта локально.
Данные для вычисления комиссий получаются и предварительно обрабатываются в классах BTCProviderи ETHProvider. Они являются потомками родительского класса CurrencyInfoProvider, в котором есть лишь простая обертка для XHR для того, чтобы код не зависел от сторонних библиотек и его было легче переиспользовать.
BTCProviderиспользует открытое API blockr.ioдля получения данных. Сперва он получает текущий курс Bitcoin по отношению к доллару и номер последнего блока в блокчейне. Затем он получает транзакции из последних 8 блоков, что составляет достаточно большой набор данных для того, чтобы вычислять достоверные медиану и средние значения комиссий.
ETHProviderполучает данные из API etherchain.org. Транзакции Ethereum требуют предварительной фильтрации. Поскольку Ethereum — это платформа для создания децентрализованных онлайн-сервисов, то в ней предусмотрены обычные транзакции по переводу криптовалюты Ether, а также контрактные транзакции, которые имеют дополнительные комиссии за передачу данных. Для сравнения с Bitcoin все контрактные транзакции отбрасываются, так как они не имеют Bitcoin аналога и они не используются в качестве денежных переводов. API etherchain.orgимеет лимиты по скорости подачи запросов для предотвращения DoS-атак, поэтому пришлось добавить небольшую задержку между запросами на транзакции каждого блока для избежания отказа сервера по причине превышения лимита.
Оба провайдера приводят данные к единому формату, который может использоваться React компонентами для отображения. Таким образом, в случае необходимости можно легко изменять провайдеры для использования других API и создавать новые провайдеры для анализа других криптовалют, таких как Litecoin, Monero или Ripple.
Провайдеры имеют функцию initialize()с двумя callback для обработки успешной инициализации и ошибки. После инициализации провайдеры получают и сохраняют текущие курсы криптовалют и необходимую дополнительную информацию для получения транзакций (например, номер последнего блока). После успешной инициализации можно вызывать функцию getLastTransactions()для получения списка последних транзакций. Эта функция также имеет два аргумента с коллбеками для успешного выполнения и обработки ошибок.
Провайдеры кэшируют данные о транзакциях в памяти на 20 минут для того, чтобы не обращаться к внешним API каждый раз при пересчете комиссий (при изменении нижней и верхней границы суммы денежного перевода).
Отображение данных реализовано с использованием нескольких компонентов React.js.
Простейший компонент для отображения информации о транзакции — Transaction. Этот класс не имеет никакой логики и лишь отображает переданные в него данные. Он принимает сумму транзакции, сумму комиссии, процент комиссии и ссылку на внешний ресурс для визуализации транзакции. На основе этих данных рендерится одна строка таблицы со списком транзакций.
Вся конечная обработка данных (предварительная фильтрация транзакций уже проделана в соответствующих CurrencyInfoProvider) выполняется в компоненте FeeVisualizer. Он берет провайдер данных, минимальные и максимальные суммы транзакций из свойств и на основании этих данных отфильтровывает только необходимые транзакции. Затем рендерится набор компонентов Transactionи вычисляются медиана, среднее, минимальное и максимальное значения комиссий.
И, наконец, компонент Appсоздает экземпляры провайдеров данных и настраивает два компонента FeeVisualizerдля отображения данных. Также в нем реализована работа двух полей ввода минимальной и максимальной суммы для поиска транзакций, и передает данные этих полей в состояние соответствующих FeeVisualizer-ов, когда пользователь изменяет эти значения.
Развертывание сайта реализовано с помощью сервиса surge.sh. Так как сайт полностью статичный и не требует никакого бек-энда для своей работы (только для сборки), то surge.shявляется идеальной утилитой для паблишинга и вместе с этим и хостинга проекта.
Благодаря предварительно настроенной среде Create React Appи удобству командной строки surge.shвесь процесс сборки и паблишинга на хостинг заключается всего в двух командах:
npm run build
surge build/
Результаты
После первого запуска сайта я запостил новостьоб этом сервисе на Reddit. Пользователи Reddit проверили, оценили и дали ценные рекомендации по улучшению как UI, так и логики сайта. Благодаря их поддержке, отзывам и разъяснениям сайт предоставляет более полноценную и осмысленную информацию.
Планы для дальнейших улучшений проекта очевидны — получать данные о транзакциях других набирающих популярность криптовалют.
И, конечно же, вы можете брать исходный код с GitHubдля улучшения или переиспользования — он распространяется по лицензии MIT.
Image may be NSFW.Clik here to view.