Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

DOU Проектор: CryptoFees  — сравнение комиссий на транзакции Bitcoin и Ethereum

В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на [email protected].

Добрый день, меня зовут Александр Попов. Я работаю front-end разработчиком в компании Onlinico. В этой статье расскажу о создании небольшого pet-проекта, который планировался быть только обучающим для меня, а оказался и весьма полезным для людей.

Идея

В современном мире криптовалюты уже давно стали привычной частью нашей жизни. Денежные переводы с их помощью намного удобнее, быстрее и дешевле, чем, например, с помощью SWIFT или Western Union. Или, по крайней мере, они до недавнего времени были дешевле и быстрее банковских переводов. Несколько месяцев назад комиссии на транзакции в криптовалюте выросли и в некоторых случаях стали соизмеримы с комиссиями банковских переводов.

Так возникла идея создания сервиса для сравнения комиссий транзакций различных криптовалют и помощи в выборе более выгодного способа перевода денег.

CryptoFees — это open-source проект, созданный с единственной целью — показать, какая криптовалюта предоставляет более выгодные комиссии для денежных переводов. Этот сайт анализирует последние транзакции из блокчейнов двух самых популярных криптовалют — Bitcoin и Ethereum.

Реализация

Сперва сайт выбирает текущие курсы валют и последние транзакции из блокчейнов Bitcoin и Ethereum. Затем для наиболее корректного сравнения BTC и ETH транзакций выбираются только транзакции Ethereum между аккаунтами, контрактные транзакции не учитываются. Из этих двух списков транзакций выбираются только те, которые попадают в выбранный диапазон суммы перевода (по умолчанию 20-100 долларов, можно задавать произвольные значения) и вычисляются медиана, среднее, минимальное и максимальное значения комиссий. На основании этих данных пользователь уже может оценить какой тип криптовалюты более выгоден для денежного перевода.

Сайт реализован на 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.

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn

Схожі статті




3 коментарі

Підписатись на коментаріВідписатись від коментарів Коментарі можуть залишати тільки користувачі з підтвердженими акаунтами.

А Эсеры разве можно уже выводить? Вроде читала, что пока невозможен вывод...

Любую криптовалюту можно сконвертировать в BTC, а там уже localbitcoins и т. п. Хотя на всех обменниках есть и прямая покупка/продажа ETH/USD.

Ага, уже вижу, что есть обмен

Підписатись на коментарі