DApp, что означает децентрализованное приложение, использует смарт-контракт для работы в одноранговой (P2P) сети блокчейна. Чтобы взаимодействовать с блокчейном, пользователям необходимо подключить свой крипто-кошелек к dApp.

MetaMask — самый популярный криптовалютный кошелек. Он работает как расширение для популярного браузера. Вы также можете скачать его мобильное приложение для Android и iOS. Это один из самых безопасных и надежных кошельков. Почти каждое популярное dApp поддерживает MetaMask. Таким образом, наличие поддержки MetaMask для любого dApp является плюсом.

Сегодня мы узнаем о следующих вещах:

  • Подключение dApp к MetaMask
  • Извлечение учетных записей из MetaMask
  • Переключение между разными сетями, например, с Polygon на Avalanche

Вы можете подписаться на меня в Twitter(@surajondev), чтобы получать уведомления о таких сообщениях в будущем.

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

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

команда:

npx create-react-app connect-metamask
Войти в полноэкранный режим

Выйти из полноэкранного режима

После установки React удалите все ненужные файлы и код.

Что касается зависимостей, нам нужна только одна библиотека, ethers. Эфиры будут полезны при взаимодействии с нашим кошельком. Установите его с помощью следующей команды:

команда:

npm i ethers
Войти в полноэкранный режим

Выйти из полноэкранного режима

Примечание. Для запуска приведенных выше команд вам необходимо иметь узел.js предварительно установлен.

Теперь, когда все настроено, давайте напишем код.

Мы собираемся реализовать все наши возможности только в App.js файл. Так как будет легко разобраться в коде в одном месте.


Импорт

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

import "./styles.css"; // styling the component using CSS
import { useState } from "react"; // storing data in the state
import { ethers } from "ethers"; // interacting with wallet
Войти в полноэкранный режим

Выйти из полноэкранного режима


Заявление о возврате

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

export default function App() {
  const [publicKey, setPublickey] = useState();
  const [network, setNetwork] = useState();
  const [chainId, setChainId] = useState();
  const [msg, setMsg] = useState();

  return()
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Что касается пользовательского интерфейса, он войдет в блок кода возврата.

return (
    <div className="App">
      <h1>Connect MetaMask</h1>
      <button onClick={connectButton}>Connect Wallet</button>
      <br />
      <button className="btn" onClick={() => swithcNetwork(137)}>
        Connect Polygon
      </button>
      <br />
      <button className="btn" onClick={() => swithcNetwork(43114)}>
        Connect Avalanche
      </button>
      <p>Public Key: {publicKey}</p>
      <p>Network: {network}</p>
      <p>Chain ID : {chainId}</p>
      {msg && <p>{msg}</p>}
    </div>
  );
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это приведет к следующему результату:

изображение.png

Примечание. React будет выдавать ошибки, поскольку мы не определили функцию, используемую для события onClick для кнопок. На приведенном выше снимке экрана показан дополненный проект.

У нас есть следующие компоненты в разделе возврата приложения:

  • Подключить кошелек: При нажатии этой кнопки connectButton функция будет вызывать. Это подключит наше dApp к MetaMask.

  • Подключить полигон/лавину: Эта кнопка вызывает switchNetwork() функция смены сети на Polygon/Avalanche.

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

  • Сообщение: Если возникает какая-либо ошибка, например, MetaMask не установлена. Это покажет пользователю ошибку.

Оператор return реализован достаточно хорошо. Давайте напишем код для всех функций, использованных выше.


Кнопка подключения кошелька

Эта функция сделает запрос к MetaMask для соединения. Перед этим проверим, установлен ли MetaMask или нет.

Вот код кнопки подключения кошелька:

  const connectButton = async () => {
    const { ethereum } = window;
    if (ethereum.isMetaMask) {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const accounts = await provider.send("eth_requestAccounts", []);

      const { name, chainId } = await provider.getNetwork();

      setNetwork(name);
      setChainId(chainId);
      setPublickey(accounts[0]);
    } else {
      setMsg("Install MetaMask");
    }
  };
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вверху мы извлекли объект ethereum из окна. Этот объект содержит информацию, связанную с взаимодействием с блокчейном. Когда MetaMask установлен, он внедряет свои данные в этот объект. Вот почему он стал одним из важных объектов при работе с MetaMask и блокчейном.

С объектом, ethereum.isMetaMask, мы проверяем MetaMask. Он возвращается true если MetaMask установлен и false в противном случае. Мы запускаем весь код только в том случае, если MetaMask установлен, в противном случае он выдаст сообщение на Install MetaMask.

Провайдер в эфирах — это доступная только для чтения абстракция для доступа к данным блокчейна. Для доступа к данным мы использовали ethers.providers.Web3Provider() функция с извлеченным ethereum объект из окна в качестве аргумента. С provider.send() мы запрашиваем учетную запись из MetaMask и сохраняем их в формате массива в accounts переменная.

provider.getNetwork предоставляет нам информацию о сети. Сформируйте, что мы извлекаем имя и chainId сети. Сеть здесь будет по умолчанию из MetaMask. После этого мы устанавливаем состояние с доступными данными для отображения пользователю.


Кнопка переключения сети

Вторая и третья кнопки предназначены для переключения между сетью Polygon и Avalanche.

  const swithcNetwork = async (chainId) => {
    try {
      await window.ethereum.request({
        method: "wallet_addEthereumChain",
        params: [avlNetwork[`${chainId}`]]
      });
      setNetwork(avlNetwork[`${chainId}`].chainName);
      setChainId(chainId);
    } catch (error) {
      setMsg(error);
    }
  };
Войти в полноэкранный режим

Выйти из полноэкранного режима

wallet_addEthereumChain Метод добавит сеть в MetaMask и переключится на эту сеть. Эта функция принимает аргумент chainId изменить сеть на соответствующую сеть. Каждая сеть связана с chainId, и он уникален для каждой сети. У нас есть блок try-catch для настройки msgесли возникает какая-либо ошибка.

Параметры содержат информацию о сети, такую ​​как chainId, rpcUrls, nativeCurrency и другие. Я сохранил сетевую информацию в формате объекта в переменной avlNetwork.


const avlNetwork = {
  137: {
    chainId: `0x${Number(137).toString(16)}`,
    rpcUrls: ["https://rpc-mainnet.matic.network/"],
    chainName: "Polygon Mainnet",
    nativeCurrency: {
      name: "MATIC",
      symbol: "MATIC",
      decimals: 18
    },
    blockExplorerUrls: ["https://polygonscan.com/"]
  },
  43114: {
    chainId: `0x${Number(43114).toString(16)}`,
    rpcUrls: ["https://api.avax.network/ext/bc/C/rpc"],
    chainName: "Avalanche C-Chain",
    nativeCurrency: {
      name: "Avalanche",
      symbol: "AVAX",
      decimals: 18
    },
    blockExplorerUrls: ["https://snowtrace.io/"]
  }
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Есть много информации о сети, на которую мы переключаемся. Вы можете получить всю эту информацию для любой сети из Список цепочек а также Список цепочек — JSON. Я использовал chainId в качестве имени для каждого объекта, чтобы мы могли получить доступ к информации о сети, просто передав chainId.

MetaMask принимает chainId в шестнадцатеричном формате с префиксом 0x. Мы преобразовали chainId каждой сети в шестнадцатеричный формат с toString(16) функция, 16 для шестнадцатеричной.

Сейчас проект завершен. Пришло время протестировать приложение. Если вы нажмете на Connect Walletон подключит наше dApp к MetaMask и предоставит нам подробную информацию.

Подключиться к МетаМасл

Теперь вы можете переключиться на другую сеть. Нажмите на Connect Polygon для переключения на основную сеть Polygon. В кошельке MetaMask появится сообщение с запросом разрешения на переключение на основную сеть Polygon.

Переключить сетевое разрешение

После нажатия на Switch Network, вы будете переключены на основную сеть Polygon. Вы сможете увидеть детали текущей сети в приложении.

Соединить многоугольник

Я создал codeandbox для этих проектов. Вы можете увидеть код и живую работу проекта здесь.

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

Надеюсь, эта статья помогла вам подключить dApp к кошельку. Спасибо за чтение сообщения в блоге.