Angular Dapps для Web3 с локальной каской и метамаской

В этом удивительном чтении мы увидим несколько вещей, среди прочего:

  • Среда для локального узла Блокчейна с Hardhat
  • Настройка учетных записей с помощью мнемоники или напрямую с адресами в каске
  • Весь необходимый конфиг для Angular и Web3
  • Пользовательский интерфейс входа
  • Войти с помощью метамаски
  • Показать баланс на нашем счету

Введение

Для создания Dapps существует множество инструментов, фреймворков и библиотек, однако на момент написания статьи я выбираю Hardhat и Angular.

Почему? Каска… Среди прочего

Локальный запуск Solidity

Отладка в первую очередь

Исключительная гибкость

Быстрая разработка

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

Почему угловой?

  • Потрясающий фреймворк, не совсем модный сейчас (все еще интересно, почему). Есть несколько хороших конкурентов, но это по-прежнему самый полный, позволяющий вам делать то, что делают другие, а также то, что другие не могут.
  • Меньше кода, больше мощности и масштабируемости, а также меньше энтропии в отношении плагинов и сторонних вещей.
  • Я согласен, да, у этого есть большая кривая обучения, но ничего, что вы не можете перепрыгнуть с точки зрения инженерии, я имею в виду что-нибудь о приземлении в космосе. 🤔 Возможно, это заговор, чтобы заставить нас поверить, что это худший выбор… Пока команда Google отвечает за Angular, тратя больше времени на его создание и поддержку, а не на маркетинг, для меня это нормально…

Hardhat, запустите свой собственный узел

Инициировать каску

$mkdir hardhat-tutorial
$cd hardhat-tutorial
$npm init --yes
$npm install --save-dev hardhat
$npx hardhat

Конфигурация сети Metamask для Hardhat

Аккаунты в Hardhat

Существует два способа настройки пользовательских учетных записей в Hardhat:

  • Непосредственное жесткое кодирование аккаунтов

hardhat.config.js

module.exports = {
solidity: "0.8.4",
networks: {
 hardhat: {
   accounts:
   [
    {
      privateKey: '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80',
      balance: '1000000000000000000'
    },
    {
      privateKey: '0xde9be858da4a475276426320d5e9262ecfc3ba460bfac56360bfa6c4c28b4ee0',
      balance: '5000000000000000000'
    }
  ]
...

Обратите внимание, что эфиры находятся в Weis. Перейдите по ссылке для более подробной информации об агрегатах

  • Через Mnemonics a Bip39

Если вы понятия не имеете, о чем я говорю, я поделюсь парой статей, довольно хорошо описывающих эти концепции.



Мнемоника | CoinMarketCap
Мнемоники — это средства запоминания с такой системой, как буквы или ассоциации, которые помогают вспомнить. *см. Мнемоническую фразу…coinmarketcap.com





Официальный список слов BIP39 (мнемоника)
Поразите себя словами!medium.com



Итак, настройка HD Wallet

hardhat.config.js

module.exports = {
solidity: "0.8.4",
networks: {
 hardhat: {
   accounts:
   {
      mnemonic: "test test test test test test test test test test test junk",
     path: "m/44'/60'/0'/0",
     initialIndex: 0,
     count: 4,
     passphrase: ""
   }
...

Для получения более подробной информации с помощью пользовательского config в каске

Автономная работа для поддержки кошельков и другого программного обеспечения

Импорт учетной записи в Metamask

Угловой

Создать пустой проект

$ng new ng-metamask-login

Сделайте свое приложение Angular -> Dapp

Зависимости

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

$npm install ethereumjs-wallet bip39 web3 crypto-js --save

Следующим шагом я рассмотрю наиболее распространенные проблемы, которые я обнаружил, чтобы организовать проект Dapp в Angular.

Другие зависимости для пользовательской конфигурации ts/webpack

По сути, потому что нам нужно будет использовать библиотеки узлов для Front, поэтому мы настроим через browserify

$npm install crypto-browserify stream-browserify stream-http https-browserify os-browserify url --save-dev

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

Разрешение зависимостей в JS будет ключом к интеграции тех библиотек, которые уже компилируются в JS. Немного сбивает с толку, но это потому, что они изначально для Node, поэтому мы должны сделать их совместимыми с нашим проектом ts.

angular.json

"build": {
...
"scripts": [],
"allowedCommonJsDependencies": [
    "bip39",
    "crypto-js",
    "ethereumjs-wallet",
    "web3"
  ]
},
...

Настройте браузер для загрузки библиотек узлов

tsconfig.json

"compilerOptions": {
...
"paths" : {
   "crypto": ["./node_modules/crypto-browserify"],
   "stream": ["./node_modules/stream-browserify"],
   "http": ["./node_modules/stream-http"],
   "https": ["./node_modules/https-browserify"],
   "os": ["./node_modules/os-browserify"],
},
...

Создайте index.d.ts в своем src с оберткой этих библиотек, чтобы ваше приложение не разбилось.

index.d.ts

declare module 'bitcore-mnemonic';
declare module 'crypto-js';

Все еще падает, поверьте, вы можете попробовать… Итак, последняя проблема, которую мы решаем с помощью полифиллов.

polyfills.ts

...
* APPLICATION IMPORTS
*/
(window as any).global = window;
import { Buffer } from 'buffer';
global.Buffer = Buffer;
global.process = {
env: { DEBUG: undefined },
version: '',
nextTick: require(‘next-tick’)
} as any;

Угловое децентрализованное приложение

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

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

  • Сервис для взаимодействия с кошельком и web3
  • Компонент, содержащий пользовательский интерфейс входа и логику для пользователя, чтобы использовать наше Dapp.

Примечание. Для простоты в этом посте я не могу рассматривать весь наш код в Angular, пытаясь объяснить все детали. Тем не менее, я делюсь сутью, оставляя все важные функции прокомментированными с тем, что мы сделали на каждом этапе, чтобы вы могли найти это более понятным.

Служба Web3

Сервис для объединения всех функций web3 и создания небольшого ядра всех наших функций.

$ng generate service web3

Затем

web3.service.ts

О пути вы можете узнать в Google и изучить Bip39. В любом случае, немного больше информации



HD-кошельки и пути получения: объяснение
При доступе к блокчейну с помощью аппаратного кошелька или мнемонической фразы у вас есть возможность взаимодействовать с…medium.com



Примечание: см. функцию getInfo | В целях ведения журнала мы отслеживаем некоторую информацию, такую ​​​​как наша версия web3, тип сети и все учетные записи, которые мы настроили в каске.

Примечание: см. функцию getBalance | Будьте осторожны, мы должны перейти из Вайса.

Семена будут ключом для входа в Dapps, поэтому мы сохраняем и удаляем их в локальном хранилище, чтобы упростить регистрацию. Кроме того, мы шифруем и расшифровываем их, чтобы избежать легкого взлома, создавая криптографические -js.

Компонент входа

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

login.component.html

В нашем ТС мы контролируем все взаимодействие с пользователем и платформой

login.component.ts

Результат

Я всегда стараюсь поделиться на Stackblitz или чем-то подобном, хотя на этот раз я не могу разместить каску онлайн и локально, очевидно, она должна быть отправлена ​​​​в тестовую сеть.

Так что на этот раз я оставлю несколько скриншотов Dapp и репозиториев, если вы хотите запускать локально на своем компьютере.

Код

Я делюсь двумя репозиториями github со всем кодом 👨‍💻 Я объяснял ранее. Просто скачайте и следуйте инструкциям (как в ветке feature/login-hardhatlocal).



GitHub — ackuser/ng-metamask-login at feature/login-hardhatlocal
Этот проект создан с помощью Angular CLI версии 14.0.2. Запустите ng serve для сервера разработки. Перейдите на…github.com



$npm i

$npm run start



GitHub — образец ackuser/hardhat в feature/login-hardhatlocal
Этот проект демонстрирует базовый вариант использования Hardhat. Он поставляется с образцом контракта, тестом для этого контракта, образцом…github.com



$npm i

$npx hardhat node

Следующие шаги

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

Это самая основная часть, в следующих главах мы расскажем, как разместить наш проект в Tesnet, как обработать транзакцию, кое-что о токенах ERC и более сложных функциях…

Заключение

Я просто делюсь своим опытом в этой новой захватывающей теме, оставляйте свои комментарии, если вы нашли это действительно полезным или видите какие-либо улучшения. Это было бы очень признательно.

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

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