Вы когда-нибудь задумывались, как подключить крипто-кошелек метамаски к простому реагирующему приложению?
Решение довольно простое, не один лайнер, а просто несколько строк кода.
Следуйте моему последнему руководству на YouTube, чтобы сделать это легко и быстро:
Как подключить кошелек Metamask в реагирующем приложении?
Это довольно просто, удобный интерфейс для подключения включает в себя кнопку, которая инициализирует расширение метамаски в браузере. Для быстрого старта ниже приведена ссылка на подготовленный простой, но гладкий шаблон.
В шаблоне ветки представлена примерная структура реагирующего приложения.
В настройках филиала можно найти готовое решение.
Функция подключения
Ниже вы можете найти часть функции connectWallet, которая инициализируется нажатием кнопки:
Чтобы правильно использовать API метамаски, очень важно сделать асинхронную функцию. Это достигается ключевым словом async. Остальное — стандартная стрелочная функция с оператором if и оператором try catch внутри.
Оператор if проверяет, запущен ли скрипт в браузере и установлено ли расширение метамаски. Он представляет строку кода ниже:
if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
Затем реализуется оператор try catch, который явно перехватывает ошибку и отображает ее для конечного пользователя. Что еще более важно, он использует API метамаски для запроса аутентификации и присваивает ее переменной «accounts».
const accounts = await window.ethereum.request({
method: "eth_requestAccounts",
});
Затем простой хук useState сохраняет первую учетную запись в переменной walletAddress. Это всего лишь пример, поэтому речь шла об авторизации одного кошелька, а не нескольких, что тоже возможно.
Понравилось? Подпишитесь на мой репозиторий со всеми днями челленджа:
