Игорь Яловый

Обновление

2 ноября MetaMask и другие браузеры dapp прекратят показ учетных записей пользователей по умолчанию. Это заставит некоторый код из этой бумаги сломать. Я опубликую обновленную версию с Web3 1.0 и новым интерфейсом MetaMask.

Metamask является де-факто стандартом для dApps в Интернете. Он вводит экземпляр Web3 в объект окна, что делает его доступным для кода JavaScript.

Мы собираемся использовать Web3 версию 0.20, а не Web3 1.0. Код для Web3 1.0 будет другим.

Каждый dApp имеет свою миссию, но способ их взаимодействия с Metamask схож. В этой статье мы рассмотрим десять наиболее распространенных методов обработки взаимодействий Web3/Metamask.

№1. Выявить Metamask и создать экземпляр Web3

Согласно документам, вот самый лучший способ сделать это.

Что здесь происходит? Сначала мы проверяем, был ли введен Web3. Если он введен, мы создаем новый экземпляр с помощью введенного поставщика. Почему так? Потому что мы хотим использовать нашу библиотечную версию, а не ту, которую ввел Metamask.

Если Web3 отсутствует, мы пытаемся подключиться к поставщику локального хоста, например, ganache.

№2. Проверьте, заблокирован ли Metamask

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

№3. Проверьте текущую сеть

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

№4. Получить текущий счет

Пользователь может иметь несколько аккаунтов в Metamask, но они ожидают, что dApp взаимодействует с текущим.

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

№5. Получить остаток на текущем счете

Здесь мы используем функцию getAccount с №4 и звоните getBalance. Легко.

№6. Выявить, что текущий счет изменился

Пользователь может изменить свой аккаунт в любое время. Ваш dApp должен быть готов к этому и правильно реагировать.

№ 7. Определите, заблокирован / разблокирован ли Metamask

Подобно №6. Пользователь может заблокировать/разблокировать в любое время. Ваш dApp должен обрабатывать это правильно.

№ 8. Отменить/подтвердить

После того, как пользователь взаимодействует с вашим dApp, вы должны отправить транзакцию с помощью Web3 API. Пользователь может нажать кнопку отмены или подтверждения во всплывающем окне Metamask. Это может привести к несоответствию пользовательского интерфейса, если его не обрабатывать должным образом.

Чтобы мгновенно вернуться с транзакцией хэша, позвоните contract.methodName.sendTransaction.

№ 9. Получите квитанцию ​​о транзакции

Как только ваша транзакция dApp добыта, становится доступной квитанция транзакции. Но нет события/сообщения, поэтому мы должны ввести механизм опроса.

№ 10. Слушайте события Web3

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

Резюме

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

PS

Во многих примерах здесь используются методы, которые могут вызвать ошибку из-за состояния Metamask или некоторых переменных, которые не определены в момент вызова. Вы должны завернуть их try/catch в производственной среде
Async/await использовался здесь для простоты. Его можно заменить на Promise then/catch.

Социальный

Хочу больше?

Как создать и развернуть собственный маркер EOS
Мы собираемся выяснить, что такое токен EOS и как его можно создать и развернуть самостоятельно.hackernoon.comСколько стоит запуск DApp в 2018 году
Вы думаете, что ваш счет AWS или Digital Ocean за ваш веб-сайт убивает вас?hackernoon.comРазница между токенами Ethereum и EOS
Ethereum имеет токен ERC-20, а EOS – EOSIO.Token. Они служат одной цели, но одинаковы ли они?medium.com

Первоначально опубликовано на ylv.io 15 октября 2018 года.