Как подключить MetaMask к React-приложению

Подключение MetaMask к React — базовая задача для любого Web3-приложения: от NFT-маркетплейса до DeFi-сервиса. Ниже — короткий и рабочий алгоритм, который поможет быстро добавить авторизацию кошелька и подготовить проект к взаимодействию с блокчейном.

Что нужно для подключения

• React-приложение
• установленный MetaMask в браузере
• библиотека ethers или web3.js
• доступ к window.ethereum

1. Установите ethers

npm install ethers

2. Проверьте, установлен ли MetaMask

MetaMask внедряет объект window.ethereum в браузер. Если его нет — пользователь не сможет подключить кошелек.

3. Пример подключения в React

import { useState } from "react";
import { ethers } from "ethers";

export default function ConnectWallet() {
  const [account, setAccount] = useState("");

  const connectWallet = async () => {
    try {
      if (!window.ethereum) {
        alert("Установите MetaMask");
        return;
      }

      const provider = new ethers.BrowserProvider(window.ethereum);
      const accounts = await provider.send("eth_requestAccounts", []);
      setAccount(accounts[0]);
    } catch (error) {
      console.error("Ошибка подключения:", error);
    }
  };

  return (
    <div>
      <button onClick={connectWallet}>Подключить MetaMask</button>
      {account && <p>Кошелек: {account}</p>}
    </div>
  );
}

Что делает этот код

• проверяет наличие MetaMask
• запрашивает доступ к аккаунтам через eth_requestAccounts
• получает адрес кошелька
• сохраняет его в state для отображения в интерфейсе

4. Как отследить смену аккаунта 🔄

Пользователь может переключить адрес прямо в MetaMask. Это важно обработать:

window.ethereum.on("accountsChanged", (accounts) => {
  setAccount(accounts[0] || "");
});

5. Как отследить смену сети 🌐

Если dApp работает только в Ethereum, BNB Chain или Polygon, стоит отслеживать network change:

window.ethereum.on("chainChanged", () => {
  window.location.reload();
});

6. Важные нюансы безопасности 🔐

• не храните приватные ключи на фронтенде
• всегда проверяйте сеть перед транзакцией
• показывайте пользователю понятные ошибки
• не запрашивайте доступ к кошельку без действия пользователя

7. Что можно добавить дальше

• подпись сообщений через signer
• отправку транзакций
• проверку баланса токенов
• подключение через wagmi или web3modal для более удобного UX

Вывод

Подключить MetaMask к React-приложению можно буквально за несколько минут. Оптимальный стек сегодня — React + ethers. Для простых dApp этого достаточно, а для масштабных интерфейсов лучше сразу закладывать обработку смены аккаунта, сети и ошибок пользователя. 🚀

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

🫵 Подборка каналов
🐋 Каталог ботов и приложений
🛩 Навигация