Как подключить кошелек метамаск к сайту

Кошелек METAMASK. Установка и добавление совместимых сетей. Инструкция

MetaMask – это одновременно мобильный кошелек и расширение (плагин) для браузера Chrome, а также для других браузеров, которое работает в качестве криптовалютного кошелька в сети Ethereum и в других Ethereum-совместимых сетях. Пользователи MetaMask могут покупать, отправлять, тратить и обменивать своими монеты и токены.

MetaMask – мультивалютный теплый некастодиальный браузерный кошелек и мультивалютный теплый мобильный кошелек.

В данной инструкции описано, как скачать и установить расширение и приложение MetaMask, как добавить различные Ethereum-совместимые сети и отображение криптовалют в кошельке.

1. Скачивание и установка кошелька
2. Меры безопасности при установке
3. Способы добавления совместимых сетей
4. Список и настройки Ethereum-совместимых сетей
5. Способы добавления отображения криптовалют

Установка расширения браузера MetaMask

1. Мы рекомендуем использовать браузер Chrome от Google. Чтобы скачать и установить MetaMask, перейдите на официальный сайт: https://metamask.io и нажмите «Download now» (“Загрузить сейчас”).Браузерную версию MetaMask так же можно скачать и далее установить по официальной ссылке из магазина расширений браузера Chrome: https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn.

Будьте внимательны и доверяйте только официальному сайту https://metamask.io/ и избегайте попадания на фишинговые сайты.

Будьте бдительны и скачивайте MetaMask только через сайт, предоставленный выше. Все остальные (неофициальные) сайты могут быть связаны с мошенничеством и могут стать причиной кражи личных данных и потери средств.

2. MetaMask подключается к браузеру как расширение, поэтому после нажатия кнопки “Download now” откроется меню, в котором можно выбрать, к какому браузеру прикрепить кошелек. В качестве примера установим MetaMask для браузера Chrome. Выберите браузер и нажмите на кнопку “Install MetaMask for Chrome” (“Установить MetaMask для Chrome”).

3. Далее в браузере откроется новая страница и перенаправит в интернет-магазин Chrome. Необходимо нажать на кнопку «Установить».

4. Нажмите на «Установить расширение» для подтверждения установки кошелька.

5. После успешной установки откроется окно, в котором нужно нажать на кнопку «Начать работу».

Успешно установлен браузерный кошелек MetaMask в браузер Chrome.

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

Для наилучшей защиты пользуйтесь генератором сложных паролей. Например: https://1password.com/ru/password-generator

ВАЖНО: сложный пароль состоит из 15 или более символов, содержит маленькие и большие буквы, специальные символы и цифры. Пример сложного пароля: 3t5k2U_Fs%;S8Pr3Nm^) (не используйте данный пароль).

• Сохраните пароль в недоступном для посторонних людей месте.
• Сохраните seed-фразу в диспетчере паролей, например, в 1Password.
• Запишите seed-фразу на листе бумаги и храните в надежном месте. Если вы хотите дополнительную безопасность, запишите ее на нескольких листах бумаги и храните в 2–3 разных местах.
• Запомните seed-фразу.
• Seed-фраза 12 слов: сохраните seed фразу так чтобы никто никогда кроме вас не получил доступ (в виде сид-фразы).

ВАЖНО: не сохраняйте свои пароли и seed-фразы на компьютере с подключенным интернетом, в google-таблицах и облачных сервисах. Лучше всего сохранить пароли в файле, а сохранить файл на отдельной флешке и продублировать пароли в печатном виде на бумаге.

1. Возможно создать новый кошелек или импортировать кошельки, созданные ранее.

2. Необходимо создать кошелек по шагам, предложенным сервисом. ВНИМАТЕЛЬНО читайте всё, что написано на каждой странице при создании кошелька.

Установка и добавление совместимых сетей

MetaMask — это одновременно мобильный кошелек и расширение (плагин) для браузера Chrome, а также для других браузеров, которое работает в качестве криптовалютного кошелька в сети Ethereum и в других Ethereum-совместимых сетях. Пользователи MetaMask могут покупать, отправлять, тратить и обменивать своими монеты и токены.

MetaMask — мультивалютный теплый некастодиальный браузерный кошелек и мультивалютный теплый мобильный кошелек.

В данной инструкции описано, как скачать и установить расширение и приложение MetaMask, как добавить различные Ethereum-совместимые сети и отображение криптовалют в кошельке.

Содержание:

1. Скачивание и установка кошелька
2. Меры безопасности при установке
3. Способы добавления совместимых сетей
4. Список и настройки Ethereum-совместимых сетей
5. Способы добавления отображения криптовалют

1. Скачивание и установка кошелька MetaMask

Установка расширения браузера MetaMask

1. Мы рекомендуем использовать браузер Chrome от Google. Чтобы скачать и установить MetaMask, перейдите на официальный сайт: https://metamask.io и нажмите «Download now» (“Загрузить сейчас”).
   Браузерную версию MetaMask так же можно скачать и далее установить по официальной ссылке из магазина расширений браузера Chrome: https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn.

Будьте внимательны и доверяйте только официальному сайту https://metamask.io/ и избегайте попадания на фишинговые сайты.

Будьте бдительны и скачивайте MetaMask только через сайт, предоставленный выше. Все остальные (неофициальные) сайты могут быть связаны с мошенничеством и могут стать причиной кражи личных данных и потери средств.

2. MetaMask подключается к браузеру как расширение, поэтому после нажатия кнопки “Download now” откроется меню, в котором можно выбрать, к какому браузеру прикрепить кошелек. В качестве примера установим MetaMask для браузера Chrome. Выберите браузер и нажмите на кнопку “Install MetaMask for Chrome” (“Установить MetaMask для Chrome”).

3. Далее в браузере откроется новая страница и перенаправит в интернет-магазин Chrome. Необходимо нажать на кнопку «Установить».

4. Нажмите на «Установить расширение» для подтверждения установки кошелька.

5. После успешной установки откроется окно, в котором нужно нажать на кнопку «Начать работу».

Успешно установлен браузерный кошелек MetaMask в браузер Chrome.

2. Меры безопасности при установке Metamask

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

Для наилучшей защиты пользуйтесь генератором сложных паролей. Например: https://1password.com/ru/password-generator

ВАЖНО: сложный пароль состоит из 15 или более символов, содержит маленькие и большие буквы, специальные символы и цифры. Пример сложного пароля: 3t5k2U_Fs%;S8Pr3Nm^) (не используйте данный пароль).

• Сохраните пароль в недоступном для посторонних людей месте.
• Сохраните seed-фразу в диспетчере паролей, например, в 1Password.
• Запишите seed-фразу на листе бумаги и храните в надежном месте. Если вы хотите дополнительную безопасность, запишите ее на нескольких листах бумаги и храните в 2–3 разных местах.
• Запомните seed-фразу.
• Seed-фраза 12 слов: сохраните seed фразу так чтобы никто никогда кроме вас не получил доступ (в виде сид-фразы).

ВАЖНО: не сохраняйте свои пароли и seed-фразы на компьютере с подключенным интернетом, в google-таблицах и облачных сервисах. Лучше всего сохранить пароли в файле, а сохранить файл на отдельной флешке и продублировать пароли в печатном виде на бумаге.

Создание децентрализованного кошелька MetaMask

1. Возможно создать новый кошелек или импортировать кошельки, созданные ранее.

2. Необходимо создать кошелек по шагам, предложенным сервисом. ВНИМАТЕЛЬНО читайте всё, что написано на каждой странице при создании кошелька.

dApps | подключаем metamask к смарт-контракту через сайт

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

Весь материал брал у этого классного парня с ютуба @IlyaBodrovKrukowski. Если хотите посмотрите. Но там достаточно сложно и не понятно для новичка. Я же попытался упросить его материал.(надеюсь получилось). А так советую всем посмотреть его ролики.

Итак. До этого, при создании смарт контрактов, мы использовал remix, но сегодня мы будем использовать visual studio code. Если у вас нет vs code, то скачайте.

Создание проекта

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

Первое что нам понадобиться это node.js. Если у вас нет его, то скачать тут тык

После того как вы установили node.js нужно создать проект hardhat.
Создаем папку (у меня это new contract)

Теперь откроем наш терминал и зайдем в нашу папку при помощи команды cd и путь к папке (у меня cd D:\solidity\new contract).

После того как мы зашли в нашу папку пишем команды подряд:
npm init
npm install —save-dev hardhat
npx hardhat

Думаю тут объяснять не нужно подробно. Там все написано. Просто вводим подряд команды.

Единственное что скажу, это после последней команды вам будет предложен выбор проекта. Выбираем первый (create javascript project). И потом хотите ли добавить .gitignore, выбираем ДА (может пригодиться когда то).

Вот так у вас должно быть. Если не получилось то смотрите документацию тут тык

Важно!

После того как был создан проект вводим команду которую нам предлагают

npm install —save-dev и так далее. Она прям в консоли будет написана. Не забудьте про нее а то не будет работать ни чего дальше.

Пишем смарт-контракт и deploy скрипт

Теперь открываем vs code и выбираем нашу папку.

Теперь папку contracts и удаляем все из файла Lock.sol. И пишем наш небольшой и простой код.

Тут ни чего особенного. Просто устанавливаем овнера контракта и возвращаем адрес.

Теперь самое главное. Для того чтоб мы могли взаимодействовать с нашим смарт контрактом после его деплоя. Нам нужно использовать api смарт-контракта. Тут изобретать велосипед не нужно в интернете много примеров.

Заходим в папку scritps и видим файл deploy.js. Удаляем все от туда и вставляем вот этот код

Принцип работы простой. У нас будут аккаунты, которые предоставит hardhat и мы берем первый из списка и просто вызываем метод deploy который собирает наш проект. Ну а дальше функция, которая просто копирует json файлы нам в фронтенд. Не вижу смысла на этом заострять внимание, потому что мы сегодня не про hardhat. Кому интересно можно посмотреть документацию тык

Из важного:
const demo = await ethers.getContractFactory("Lock", deployer)
Слово Lock должно совпадать с названием контракта.

Теперь зайдем в файл hardhat.config.js и добавим код:

Тут в общем это нужно из за того, что бывают ошибки с сетью. Просто добавили забыли.

Localhost8545

Если у вас нет локальной сети в метамаске, то добавляем:

Заходим в настройки networks и тут нажимаем add network.

Вас перекинет сюда и в поиске пишем localhost и после просто добавляем сеть. Все параметры подтянуться сами.

Создаём фронтенд

Теперь давайте создадим наш react.js проект, и запустим свой сервер, чтоб работать с метамаском. Заходим на сайт next.js .

Выбираем один из вариантов установки.

Я беру первый вариант. Открываем консоль, заходим в нашу директорию и вводим команду. Если предложит TypeScript project то отказываемся.

Выбираем название файла, где будет проект. Я назвал front. Потом ждем установку.

Дальше в нашей папке front создаем папку contracts

Теперь мы открываем новую консоль и заходим в наш проект.
Вводим команду:
npx hardhat node

Запуститься локальный блокчейн:

Тут мы можем добавить пару аккаунтов в метамаск.

Выбираем import account и вставляем приватный ключ любого акка из консоли. Желательно импортировать первый акк, так как он является овнером контракта.

У вас будет акк с 10000 эфира.

Теперь снова открываем новую консоль, a ту старую с нодой не закрываем и заходим в проект через cd.
Вводим команду:
npx hardhat run scripts\deploy.js —network localhost

Если все сделали правильно то должно быть так

Теперь переходим в папку front (cd front) в консоли
вводим команду:
npm run dev
запуститься сервер.

Переходим на сайт localhost:3000 и видим это.

Теперь все удаляем из файла index.js и будем писать свой код в index.js:

Можете уже вставить это в index.js, дальше расскажу что мы тут делаем и как это работает.

Мы импортируем бибилотеки react, ethers для работы проекта.
Потом styles — для стилей css чтоб было красиво (если вы хотите)
ConnectWallet — компонент который мы напишем позже.
LockAddress — это адрес самрт контракта
LockArtifact — это наш abi смарт контракта

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

Так как мы создаем класс, то нам нужно конструктор где будут храниться глобальные переменные. Чтоб узнать больше смотрите документацию react.js
У нас это:
Аккаунт: selectedAccount
сообщение о непредельной сети: networkError
баланс аккаунта: balance
null означает: когда мы заходим на сайт у нас нет инфы про наши данные.

Наша первая функция:

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

Внутри функции делаем ряд проверок:
Есть ли у нас метамаск вообще, далее мы выбираем аккаунт метамаска и вызываем для этого метод 'eth_requestAccounts'. Дальше смотрим наша ли сеть стоит. Если наша ,то вызываем функцию _initialize, ее напишем позже. Если мы меняем адрес аккаунта в метамаске, то смотрим есть ли аккаунт и вызываем снова функцию _initialize, но с новым аккаунтом, который выбрали, и последнее. При смене сети мы cбрасываем все по дефолту при помощи _resetState, ее потом тоже напишем.

Надеюсь примерно понятно что мы делаем.

_checkNetwork уже проще, тут просто проверка, является ли наша сеть, сетью hardhat и все. Если да, то true, если нет, то вернем фразу об ошибке.

Тут очень важная функция _initialize.

this._provider мы обращаемся к блокчейну по факту через _provider мы и будем работать с блокчейном. (Это когда метамаск вылезает)
Теперь что такое this.Lock — это по факту мы подрубаемся к самарт-контракту, чтоб получать доступ к нашим функциям и всему остальному. Туда мы передаем 3 важные вещи. Это адрес нашего контракта, abi контракта и того, кто собирается взаимодействовать с смарт-контрактом. То есть наш выбранный аккаунт metamask

Ну и все потом при помощи setState сохраняем аккаунт в глобальную переменную и обновляем баланс.

updateBalance — тут ни чего сложного. Просто берем наш баланс аккаунта через обращение к this._provider и переводим его из BigNumber в string

_resetState — обнуляет все наши параметры глобальных переменных

_dismissNetworkError — просто закрывает сообщение об ошибке.

Теперь последний этап, мы создаем два компонента:

connectWallet и NetworkErrorMessage в папке components, которую нужно создать.

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

Тут мы просто создаем кнопку, которая закрывает наше сообщение об ошибке сети.

Теперь код который выводиться на экран (render):

Если у нас не подключен аккаунт то выводим наш компонент connectWallet, где есть кнопка для подключения кошелька. Если же мы удачно подключили кошелек, то выводим на экран баланс нашего аккаунта. ethers.utils.formatEther(this.state.balance) — конвертирует баланс из wei в eth.

Ну вот и все теперь давайте посмотрим что у нас получилось.

На нашем сайте появилась кнопка connect Wallet. Давайте выберем не нашу сеть и нажмем на кнопку. Посмотрим что будет.

Как подключить существующий кошелек в MetaMask

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

Вариант 1: Браузерное расширение MetaMask

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

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

Произойдет переход на новую страницу, где необходимо щелкнуть «Начало работы».

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

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

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

Найдите эту самую секретную фразу в своем сохраненном источнике и последовательно введите все слова из нее.

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

Остается нажать «Импорт» и дождаться, когда кошелек будет добавлен в браузерное расширение.

Вы получите уведомление о том, что все прошло успешно.

Можете закрыть данное окно и использовать кошелек. Меняйте сети, заводите криптовалюту, оплачивайте транзакции и просто храните токены.

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

Вариант 2: Мобильное приложение

Те юзеры, кто установил MetaMask на свой смартфон или планшет, тоже могут без проблем импортировать уже существующий кошелек. Если нужно выйти из предыдущего, сделайте это так, как было рассказано выше: удалите текущее приложение или очистите данные пользователя через настройки вашего Android или iOS. Далее следуйте инструкции.

Запустите приложение и тапните по кнопке «Импортируйте с помощью секретной фразы для восстановления».

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

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

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

После нажмите «Импорт», чтобы подтвердить добавление уже существующего кошелька в новое приложение.

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

Взаимодействуйте с интерфейсом приложения так, как это нужно именно вам.

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