Как создать веб-приложение Ethereum Wallet

1656528387 kak sozdat veb prilozhenie ethereum wallet

автор Поль Ло

Обзор самых крутых частей eth-hot-wallet

Эта статья является техническим обзором интересных частей. eth-hot-wallet, веб-приложение кошелька Ethereum со встроенной поддержкой токена erc20 Исходный код можно найти на GitHub (лицензия MIT).

1*6wrsZ2k5DdEHIpS8u-4p1A
eth-hot-wallet Превью

Содержание:

  • Кошелек Ethereum как веб-приложение
  • Стек
  • Контейнеры eth-hot-wallet
  • Унифицированный дизайн кошелька Ethereum
  • Redux и Redux-Saga
  • Безопасный генератор паролей
  • eth-lightwallet и SignerProvider
  • Зашифрованное офлайн-хранилище
  • Отправка Ethereum с помощью Web3.js
  • Передача токенов erc20 с помощью Web3.js
  • Подписка на жизненный цикл транзакции Ethereum с помощью Web3.js V1 и Redux-Saga
  • Опрос данных о блокчейне и ценах Ethereum с помощью Redux-Saga
  • Следите за размером пачки
  • Вывод

Кошелек Ethereum как веб-приложение

Когда программное обеспечение развертывается как веб-приложение, широкая доступность – это первое, что приходит в голову. В конце концов, Интернет является наиболее доступной платформой для разных устройств. Eth-hot-wallet – это PWA (прогрессивное веб-приложение), которое можно использовать с любого современного веб-браузера.

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

Плюсы:

  • Дополнительное программное обеспечение не требуется
  • Никакой установки не требуется
  • Умение использовать современные инструменты веб-разработки.
  • Легко развертывать и обновлять

минусы:

  • Более подвержен фишинговым атакам.
  • Плагины браузера могут вставить вредоносный код на страницу.
  • Высокое время загрузки при медленном интернет-соединении
  • Ограниченный доступ к хранилищу устройства

Важен тот факт, что вредоносные расширения браузера могут вводить код JavaScript, пытаясь извлечь ключи. Чтобы перенести этот риск, пользователю следует поощрять отключить расширение (т.е. использовать в режиме анонимного просмотра) или интегрировать Интернет с внешним провайдером web3, таким как MetaMask или браузер Trust. Превращение веб-приложения в настольную программу также является жизнеспособным вариантом.

Что касается фишинга, пользователю следует поощрять добавить страницу в закладки и получить доступ к ней через поиск Google. Маловероятно, что фишинговый сайт будет иметь более высокий рейтинг в результатах поиска.

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

1*TzOKAf_ykKIz8qC0VrJHGA
логотип eth-hot-wallet

Стек

Большая часть кода посвящена передний край:

Окончательный пакет состоит из множества пакетов, как можно увидеть в package.json.

Компоненты верхнего уровня включают:

  • Eth-lightwallet – легкий JS Wallet для Node и браузер для управления хранилищем ключей
  • React, Redux, saga.js, immutableJS и повторный выбор, обернутый офлайн-первым реакционным шаблоном
  • Ant design – отличный набор компонентов интерфейса для реакции
  • Webpack – пакет для JavaScript и друзей.

И для бэк-энд:

Окончательный пакет разворачивается непосредственно на страницах GitHub из выделенной ветки в репозитории. В традиционной сцене нет нужды в бэк-энде.

Чтобы создать кран Testnet Ethereum, мы будем использовать фреймворк без сервера. Это значительно улучшает работу разработчиков при использовании AWS Lambda. Это очень рентабельное решение, устраняющее потребность в обслуживании инфраструктуры, особенно в программах малого объема.

Контейнеры eth-hot-wallet

1*ufHAtmbsMCMSNwGKX63Zjg
контейнер домашней страницы eth-hot-wallet

При использовании комбинации React, Redux, Saga.js и Reselect каждый контейнер может состоять из следующих ингредиентов:

  • index.js – для воспроизведения графического интерфейса
  • actions.js
  • редуктор.js
  • saga.js
  • selectors.js
  • константы.js

Как сказал Дэн Абрамов, существует более одного подхода к тому, использовать ли компонент или контейнер. По моему опыту, если компонент имеет более чем 8 атрибутов в состоянии программы, его следует отделить в новый контейнер. Это только практическое правило. Со временем количество атрибутов может увеличиться. Со сложными компонентами лучше иметь уникальный контейнер, чем кластерировать состояние основного контейнера.

Не в каждой емкости должны быть все ингредиенты. В eth-hot-wallet, sendTokenконтейнер не использует свой Saga.js. Мы разделили его, чтобы не утруждать состояние компонента домашней страницы.

Контейнер домашней страницы

1*eqJKGRGa7YpBigSGKBYBQw
контейнер домашней страницы eth-hot-wallet

Основным контейнером, где совершается большинство действий, является контейнер домашней страницы. В контейнере домашней страницы Saga.js отвечает за борьбу с побочными эффектами. Помимо графического интерфейса, его основная ответственность будет иметь дело операции с хранилищем ключей.

Пакет ETH-Lightwallet обеспечивает хранилище ключей. Все связанные операции, включая ключи, исходные данные, шифрование, импорт, экспорт выполняются в этом разделе.

Заголовок демонстрирует тот факт, что контейнер – это гораздо больше, чем просто компонент графического интерфейса:

1*ckDt0s8GbB2YeynBss4Qug
контейнер заголовка eth-hot-wallet

Этот контейнер на первый взгляд может выглядеть просто с логотипом и селекцией сети. Нужно ли это даже в собственном контейнере? Ответ состоит в том, что в eth-hot-wallet каждое действие, связанное с сетевой связью, и управление состоянием осуществляется внутри контейнера заголовка. Более чем достаточно для любой емкости.

Контейнер SendToken

SendToken – это модальный способ, который появляется, когда пользователь выбирает отправить Ether/токены.

1*DFy9RyZievPsl3gyCTYC4A
eth-hot-wallet контейнер SendToken

Модальный включает некоторую базовую проверку ввода, например проверку суммы и адреса Ethereum. Он не использует Saga.js для инициирования побочных эффектов, вместо этого использует действия, предоставленные домашней страницей и контейнерами заголовков.

Мы разделили его на новый контейнер, чтобы уменьшить кластеризацию контейнера домашней страницы.

Контейнер TokenChooser

Token Chooser появляется, когда пользователь хочет выбрать, каким маркером будет управлять кошелек.

1*XY_vFMJBjz_HFka9SpTZGA
Контейнер TokenChooser eth-hot-wallet

The TokenChooser имя было выбрано, чтобы не путать с термином «селектор», многократно появляющимся через код кошелька в другом контексте (reduxjs/reselect: библиотека селектора для Redux).

Так же, как и с SendToken контейнер, TokenChooser не использует собственный файл Saga.js, а вызывает действия из контейнера домашней страницы, когда это необходимо.

Унифицированный дизайн кошелька Ethereum

С момента появления стандарта ERC20 (EIP20) было очевидно, что токены будут являться важной частью экосистемы Ethereum. Кошелек Ethereum был разработан с учетом единого подхода к дизайну. С точки зрения пользователя эфир и токен должны рассматриваться одинаково.

Под капотом API для передачи эфира и передачи токенов совсем другой. Так же, как и проверка баланса, но на графическом интерфейсе они будут отображаться одинаково.

1*2IKgDyCw0ogdCKZhWsx2_w
Унифицированный дизайн кошелька Ethereum

Чтобы отправить Ether, нам нужно использовать собственные функции, предоставленные библиотекой web3.js, тогда как отправка токенов и проверка баланса предполагает взаимодействие со смарт-контрактом. Подробнее об этом вопросе позже.

Redux и Redux-Saga

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

Кроме сохранения состояния пользовательского интерфейса, хранилище Redux также содержит объект хранилища ключей (частично зашифрованный объект JavaScript, предоставляемый eth-lightwallet). Это делает хранилище ключей доступным по всей программе с помощью селектора.

Redux-Saga – это то, что делает всю установку блестящей.

redux-saga — это библиотека, которая имеет целью сделать побочные эффекты программы (т.е. асинхронные вещи, такие как получение данных и нечистые вещи, например доступ к кэшу браузера) более простыми в управлении, более эффективными в исполнении, легкими для тестирования и лучшими в обработке сбоев. .

Saga.js использует генераторы для создания асинхронные потоки легко читать и писать. При этом эти асинхронные потоки выглядят как ваш стандартный синхронный код JavaScript (чтобы async/await но с большими параметрами настройки).

В случае кошелька Ethereum, используя Saga, мы получаем удобный способ обработки асинхронных действий, таких как вызовы API отдыха, действия хранилища ключей, вызовы блокчейна Ethereum через web3.js и т.д. Все запросы четко управляются в одном месте, нет ада обратного вызова и очень интуитивно понятен API.

Пример использования для redux-saga:

Безопасный генератор паролей

1*IkEbKHk8GAENsl9M3pGuog
Для пользователя автоматически генерируется исходный и безопасный пароль

Чтобы надлежащим образом защитить хранилище пользовательских ключей, нам нужно зашифровать его надежным паролем. При использовании eth-lightwallet пароль необходимо указать при инициации hd-wallet.

Предположим, что у нас есть функция, которая называется generateStringкоторый может придавать действительно случайные строки любой длины.

Если пользователь хочет создать новый кошелек, мы создадим следующие параметры:

Мы можем попросить пользователя подтвердить пароль и исходный код или создать новый набор от его имени. Кроме того, мы можем попросить пользователя ввести его собственный исходный код и пароль.

generateString реализация: Мы будем использовать относительно новые API window.crypto чтобы получить случайные значения (пока поддерживаются всеми основными браузерами).

Реализация Eth-hot-wallet базируется на следующем коде для создания случайные, но понятные человеку строки:

После того, как пользователь принял пароль и исходный код, мы можем использовать значение и создать новый кошелек.

eth-lightwallet и SignerProvider

  1. LightWallet предназначен как поставщик подписей для поставщика Hooked Web3.
  2. Подключенный поставщик Web3 устарел, и автор рекомендует пакет ethjs-provider-signer в качестве альтернативы.
  3. На момент написания есть ошибка в ethjs-provider-signer, препятствующая отображению сообщений об ошибке. Ошибка была исправлена, но она не слилась обратно в главную ветку. Эти сообщения об ошибках являются критичными для правильной работы этой настройки.

Нижняя линия: Используйте eth-lightwallet с этой версией ethjs-provider-signer: чтобы сэкономить время на пробах и ошибках.

Зашифрованное офлайн-хранилище

Объект JSON хранилища ключей lightwallet зашифрован, и он требует от нас внешнего passwordProvider чтобы безопасно хранить ключ шифрования. Объект хранилища ключей всегда зашифрован. Приложение отвечает за сохранение пароля и оказывает ему какие-либо действия.

eth-hot-wallet использует Store.js Межбраузерное хранилище для всех случаев использования, используемое в Интернете. Store.js позволяет нам легко хранить зашифрованное хранилище ключей и извлекать его из хранилища при доступе к веб-странице.

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

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

1*QICvgsfhKmpOSVMMgWbo4A
заблокированный кошелек после загрузки из локального хранилища

Отправка Ethereum с помощью Web3.js

При использовании Web3.js@0.2.x функция sendTransaction придается в следующей форме:

web3.eth.sendTransaction(transactionObject [, callback])

В случае успеха обратный вызов вернет TX как результат.

Однако чтобы правильно интегрировать его в наш поток saga.js, нам нужно завернуть sendTransaction функция с обещанием:

Таким образом мы продолжаем регулярное исполнение Saga.js после sendTransaction это называется.

Передача токенов erc20 с помощью Web3.js

Блокчейн Ethereum не дает примитивов, которые инкапсулируют функциональные возможности маркеров, и не должны этого делать. Каждый токен, развернутый на Ethereum, действительно является программой, которая отвечает Спецификация eip20. Поскольку виртуальная машина Ethereum (EVM) завершена (с некоторыми ограничениями), каждый токен может иметь разную реализацию (даже для одинаковой функциональности). Что объединяет все эти программы под термином «токен», так это то, что они предоставляют тот же API, как определено спецификацией.

Когда мы присылаем токен на Ethereum, мы взаимодействуем со смарт-контрактом. Чтобы общаться со смарт-контрактом, нам нужно знать его API, формат совместного использования API контракта, который называется Ethereum Contract ABI.

Мы будем хранить erc20 ABI как часть нашего пакета JavaScript и создавать экземпляр контракта при выполнении программы:

const erc20Contract = web3.eth.contract(erc20Abi);

После установки контракта мы можем легко взаимодействовать с ним программно, используя API контракта Web3.js.

Для каждого токена нам понадобится специальный экземпляр контракта:

const tokenContract = erc20Contract.at(tokenContractAddress);

После создания экземпляра контракта мы можем получить доступ к функциям контракта, вызвав нужную функцию прямо с JavaScript:

Полную информацию см. в Web3.js API контракта.

Мы пообещаем tokenContract.transfer.sendTransaction чтобы использовать его с нашим потоком redux-saga:

Можно использовать es6-promisify или подобное вместо того, чтобы писать обещание напрямую, но я предпочитаю прямой подход в этом случае.

Подписка на жизненный цикл транзакции Ethereum с помощью каналов Web3.js V1 и redux-saga

eth-hot-wallet использует web3.js v0.2.x и на данный момент не поддерживает эту функцию. Пример представлен другим проектом. Это немаловажная особенность, и ее следует активно использовать.

Новая версия Web3.js (V1.0.0) поставляется с новым API контрактом, который может информировать нас об изменениях жизненного цикла транзакции.

Введите PromiEvent: Обещанный комбинированный излучатель событий.

web3.eth.sendTransaction({...}).once('transactionHash', function(hash){ ... }).once('receipt', function(receipt){ ... }).on('confirmation', function(number, receipt){ ... }).on('error', function(error){ ... }).then(function(receipt){    //fired once the receipt is mined});

web3.eth.sendTransaction() вернет объект (обещание), который будет решен после того, как транзакция будет добыта. Этот же объект позволит нам подписаться ‘transactionHash’, ‘receipt’, ‘confirmation’ и ‘error’ события.

Этот API гораздо информативнее и элегантнее, чем предоставляемый с версией Web3.js 0.2.x. Мы увидим, как мы можем интегрировать его в наше веб-приложение с помощью каналов Saga.js. Мотивация состоит в том, чтобы обновить состояние программы (хранилище Redux) после обнаружения изменения состояния транзакции.

В следующем примере мы создадим транзакцию ‘commit’ для произвольного смарт-контракта и обновим состояние программы, когда получим ‘transactionHash’, ‘receipt’ и ‘error’ события.

Нам нужно инициализировать новый канал и развить обработчик:

Обработчик перехватит все события канала и вызовет соответствующий конструктор Redux.

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

На самом деле нам не нужен новый канал для каждой трансакции и можем использовать один и тот же канал для всех типов транзакций.

Полный исходный код этого примера можно найти здесь.

Опрос данных о блокчейне и ценах Ethereum с помощью redux-saga

Существует несколько способов следить за изменениями в блокчейне. Можно использовать Web3.js для подписки на события или мы можем самостоятельно опрашивать блокчейн и иметь больше контроля над некоторыми аспектами опроса.

В eth-hot-wallet кошелек периодически опрашивает блокчейн на предмет изменения баланса и Coinmarketcap API для изменения цены.

Этот шаблон redux-saga позволит нам опрашивать любой источник данных или API:

После CHECK_BALANCES действие видно в саге по умолчанию, the checkAllBalances функция вызывается. Это может закончиться одним из двух возможных результатов: CHECK_BALANCES_SUCCESS или CHECK_BALANCES_ERROR . Каждый из них будет пойман watchPollData() подождать X секунд и позвонить checkAllBalance снова. Эта рутина будет продолжаться до этого STOP_POLL_BALANCES ловится watchPollData . После этого голосование можно возобновить путем подачи CHECK_BALANCES снова действие.

Следите за размером пачки

При создании веб-приложений с помощью JavaScript и npm может возникнуть искушение добавить новые пакеты, не анализируя увеличение занимаемой площади. Eth-hot-wallet использует webpack-monitor для отображения диаграммы всех зависимостей и отличия между каждой конструкцией. Это позволяет разработчику отчетливо видеть, как изменяется размер пакета после каждого добавления нового пакета.

1*x_Mis7ppLuj5_Q_ifDCOZQ
Пример диаграммы webpack-monitor

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

Webpack-monitor легко интегрирован, и его, безусловно, следует включить в любую веб-программу на основе webpack.

Вывод

Проблемы, представленные в этой статье, являются лишь частью проблем, которые необходимо устранить при создании кошелька Ethereum. Однако преодоление этих проблем создаст крепкий фундамент и позволит нам продолжать и создавать успешный кошелек.

Создание кошелька также может стать отличным вступлением в мир Ethereum, поскольку большинство распределенных приложений (DApps) требуют схожего набора возможностей как с точки зрения интерфейса, так и с точки зрения блокчейна.

ETH Hot Wallet – кошелек Ethereum с поддержкой ERC20
ETH Hot wallet – это кошелек Ethereum с поддержкой ERC20. Ключи генерируются внутри браузера и никогда не…eth-hot-wallet.com

Если у вас возникли вопросы по eth-hot-wallet или какой-либо связанной теме, не стесняйтесь связаться со мной через Twitter или открыть проблему на GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *