Рубрики
Без рубрики

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

Paul Laux Как построить Ethereum Wallet Web Appa Обзор самых крутых частей статьи ETH-Hot-Walletithis – это технический обзор интересных частей эт-горячего кошелька, веб-приложения Ethereum Weet с Toke Token. Исходный код можно найти на Github (MIT лицензию). эт-горячий кошельщик

Автор оригинала: FreeCodeCamp Community Member.

Пол Лаукс.

Обзор самых крутых частей эт-горячего кошелька

Эта статья является техническим обзором интересных частей эт-горячее кошелек , Ethateum Wallet Веб-приложение с токеном ERC20 нативной поддержкой. Исходный код можно найти на Github (Лицензия MIT).

Оглавление:

  • Ethereum Wallet как веб-приложение
  • Стек
  • Контейнеры эт-горячего кошелька
  • Единый дизайн для кошелька Ethateum
  • Redux и redux-saga
  • Безопасный генератор паролей
  • Et-Lightwallet и SignerProvider
  • Зашифрованное автономное хранение
  • Отправка Ethereum, используя web3.js
  • Отправка токенов ERC20 с помощью web3.js
  • Подписка в Ethereum Transaction Life-Cycle с использованием Web3.js v1 и redux-saga каналы
  • Обязанность Ethereum BlockChain и Price Data с использованием Redux-Saga
  • Следить за размером пучка
  • Вывод

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

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

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

Плюсы:

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

Минусы:

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

Тот факт, что вредоносные расширения браузера могут вводить код JavaScript в попытке извлечения клавиш значимых. Чтобы мигрировать этот риск, пользователю следует поощрять, чтобы отключить расширения (то есть, используя в режиме Incognito) или интегрировать в Интернете с внешним провайдером Web3, таким как браузер Metamask или Trustr. Преобразование веб-приложения в приложение для рабочего стола также является жизнеспособным вариантом.

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

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

Стек

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

Последний пакет состоит из многих пакетов, как можно увидеть в Package.json. Отказ

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

  • Eth-lightwallet – легкий кошелек JS для узла и браузера для управления ключевым магазином
  • РЕАКТ, Redux, Saga.js, Immutablejs и Reselect, завернутый в автономном режиме React – Boilerplate
  • Дизайн муравья – отличный набор компонентов интерфейса для реагирования
  • WebPack – Bundler для JavaScript и друзей.

И для Задний конец:

Окончательный комплект развернут непосредственно на страницы GitHub из выделенной ветви в репозитории. Там нет необходимости в задней части на традиционной сцене.

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

Контейнеры эт-горячего кошелька

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

  • index.js – для рендеринга GUI
  • Actions.js.
  • редуктор
  • Saga.js.
  • Selectors.js.
  • константы

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

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

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

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

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

Заголовок контейнера

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

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

Контейнер SendToken

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

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

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

Tokenchooser контейнер

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

Tokenchooser Имя было выбрано для того, чтобы не путать с термином «селектор», который выглядит много раз через код кошелька в другом контексте ( Reduxjs/Reselect: библиотека селектора для redux ).

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

Единый дизайн для кошелька Ethateum

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

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

Чтобы отправить эфиру, нам нужно использовать нативные функции, предоставляемые библиотекой Web3.js, при отправке токенов и проверки остатков включает в себя взаимодействие со смарт-контрактом. Больше по этому вопросу позже.

Redux и redux-saga

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

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

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

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

В случае кошелька Ethateum, используя SAGA, мы получаем удобный способ обрабатывать асинхронные действия, такие как REST API вызовы, действия ключевого магазина, Ethereum BlockChain вызывает через Web3.js и многое другое. Все запросы чисто управляются в одном месте, без обратного вызова ада, а также очень интуитивно понятные API.

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

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

Чтобы адекватно закрепить ключевой знак пользователя, нам нужно шифровать его с помощью прочного пароля. При использовании ETH-Lightwallet пароль должен быть предусмотрен во время начала HD-кошелек Отказ

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

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

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

GenerateString Реализация: мы будем использовать относительно новую Window.Crypto API Чтобы получить случайные значения (в настоящее время поддерживаются всеми основными браузерами ).

Реализация Eth-Hot-Wallet основан на следующем коде для генерации случайные, но читаемые черты для чтения человека :

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

Et-Lightwallet и SignerProvider

  1. LightWallet предназначен для того, чтобы быть поставщиком подписания для Зацепил провайдер Web3 Отказ
  2. Зацепленный провайдер Web3 был устарен, и в настоящее время автор рекомендует пакет Этжей-провайдер-сигнал как альтернатива.
  3. В момент написания на момент написания существует ошибка в Ethjs-Provider-Signer, которая предотвращает отображение сообщений об ошибках. Ошибка была исправлена, но не объединялась в главную ветку. Эти сообщения об ошибках имеют решающее значение для правильной функции этой настройки.

Итог : Используйте ETH-Lightwallet с этой версией ethjs-provider-signer: https://github.com/ethjs/ethjs-provider-signer/pull/3 Чтобы сэкономить время на пробную версию и ошибку.

Зашифрованное автономное хранение

Lightwallet Keystore Vault JSON Objecry зашифрован, и он требует от нас внешний PasswordProvider Чтобы безопасно сохранить ключ шифрования. Объект Keystrore всегда зашифрован. Приложение отвечает за хранение пароля и предоставляет ему какое-либо действие.

Eth-Hot-Wallet использует Store.js – Крест-браузерное хранилище для всех случаев использования, используемых через Интернет Отказ Store.js позволяет легко хранить зашифрованный ключ легко и выделять его обратно из хранения при доступе веб-страницы.

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

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

Отправка Ethereum, используя web3.js

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

web3.eth.sendtransaction (транзакцияобекция [, обратный вызов])

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

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

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

Отправка токенов ERC20 с помощью web3.js

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

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

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

const.eth.contract (ERC20ABI) ;

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

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

const.at (токенконатадресс);

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

Смотри Web3.js контракт API за полную информацию.

Мы будем похищать tokencontract.transfer.sendtransaction Чтобы использовать его с нашим потоком redux-Saga:

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

Подписка в Ethereum Transaction Life-Cycle с использованием Web3.js v1 и redux-saga каналы

Eth-Hot-Wallet использует Web3.js v0.2.x и не поддерживает эту функцию в данный момент Отказ Пример предоставляется другим проектом. Это важная особенность и должна использоваться широко.

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

Введите Временные : A Обещайте комбинированный эмиттер событий Отказ

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 () вернет объект (обещание), которое будет разрешено после добычи транзакции. Тот же объект позволит нам подписаться на «транзакционная гаша» , «Получение» , «Подтверждение» и «Ошибка» События.

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

В следующем примере мы создадим транзакцию «Commun» к произвольному умного контракту и обновлению состояния приложения, когда мы получаем «транзакционная гаша» , «Получение» и «Ошибка» События.

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

Обработчик будет ловить все события канала и позвонит соответствующему созданию Action Reedux.

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

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

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

Обязанность Ethereum BlockChain и Price Data с использованием Redux-Saga

Есть несколько способов наблюдать за изменениями блокчанов. Можно использовать web3.js до Подписаться на события Или мы можем опросить блокчан самим собой и иметь больше контроля над некоторыми аспектами опроса.

В эт-горячем кошельке кошелек периодически опросает блокчан для изменений баланса и CoinmarketCap API за изменения цены.

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

После Check_balestion Действие видно по умолчанию SAGA, Checkallances Функция называется. Это может закончиться одним из двух возможных результатов: Check_balances_success или Check_balances_Error Отказ Каждый из них будет пойман WatchPolldata () ждать x секунды и позвоните Checkallance опять таки. Эта рутина будет продолжаться до STOP_POLL_BALANCE пойман WatchPolldata Отказ После этого можно возобновить опрос, отправив Check_balestion действие снова.

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

При строительстве веб-приложений используют JavaScript и NPM, может быть заманчиво добавлять новые пакеты, не анализируя увеличение следа. Eth-Hot-Wallet использует WebPack-Monitor Чтобы отобразить диаграмму всех зависимостей и Различия между каждой сборкой Отказ Это позволяет разработчику видеть размер размера пучка четко после добавления каждого нового пакета.

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

WebPack-Monitor легко интегрировать и определенно стоит в том числе в любом веб-приложении на основе WebPack на основе WebPack.

Вывод

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

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

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

Если у вас есть какие-либо вопросы относительно эт-горячего кошелька или любой связанной темы, не стесняйтесь связаться со мной через Twitter или открыть Выпуск на Github Отказ

Читайте ещё по теме: