Подключение MetaMask через BrowserProvider

Что делает BrowserProvider

BrowserProvider — это адаптер ethers.js для браузерных кошельков вроде MetaMask.

MetaMask внедряет в страницу объект window.ethereum. BrowserProvider оборачивает этот объект и даёт привычный ethers-интерфейс: запрос аккаунтов, получение signer, чтение сети и баланса.

Подключаем MetaMask и читаем баланс

import { BrowserProvider, formatEther } from "ethers";
import type { Eip1193Provider } from "ethers";

declare global {
  interface Window {
    ethereum?: Eip1193Provider;
  }
}

const app = document.createElement("main");
app.innerHTML = `
  <button id="connect-wallet">Подключить MetaMask</button>
  <pre id="wallet-info">Кошелёк не подключён</pre>
`;
document.body.appendChild(app);

const button = document.querySelector<HTMLButtonElement>("#connect-wallet");
const output = document.querySelector<HTMLPreElement>("#wallet-info");

if (!button || !output) {
  throw new Error("Не удалось найти элементы интерфейса");
}

async function connectMetaMask() {
  if (!window.ethereum) {
    output.textContent = "MetaMask не найден. Установите расширение браузера.";
    return;
  }

  const provider = new BrowserProvider(window.ethereum);

  // Открывает окно MetaMask и запрашивает доступ к аккаунту пользователя.
  await provider.send("eth_requestAccounts", []);

  const signer = await provider.getSigner();
  const address = await signer.getAddress();
  const network = await provider.getNetwork();
  const balance = await provider.getBalance(address);

  output.textContent = [
    `Адрес: ${address}`,
    `Сеть: ${network.name} (${network.chainId})`,
    `Баланс: ${formatEther(balance)} ETH`,
  ].join("\n");
}

button.addEventListener("click", () => {
  connectMetaMask().catch((error: unknown) => {
    const message = error instanceof Error ? error.message : "Неизвестная ошибка";
    output.textContent = `Ошибка подключения: ${message}`;
  });
});

Этот код должен выполняться в браузере. В Node.js объекта window.ethereum нет, потому что MetaMask работает как расширение браузера.

Как это работает

window.ethereum — EIP-1193 провайдер, который MetaMask добавляет на страницу.

new BrowserProvider(window.ethereum) — превращает провайдер MetaMask в объект ethers.js.

provider.send("eth_requestAccounts", []) — запрашивает у пользователя разрешение подключить аккаунт к сайту.

provider.getSigner() — возвращает signer для подключенного аккаунта. Через него можно подписывать сообщения и отправлять транзакции.

provider.getNetwork() — читает сеть, выбранную в MetaMask: Ethereum, Sepolia, Base, Polygon или другую.

provider.getBalance(address) — читает ETH-баланс адреса в текущей выбранной сети.

Частые ошибки

Запускать код на сервере → BrowserProvider нужен только в браузере. В Next.js такой код должен быть в client component и выполняться после загрузки страницы.

Вызывать getSigner() без запроса аккаунтов → сначала вызовите eth_requestAccounts, иначе пользователь может ещё не выдать сайту доступ к адресу.

Считать, что MetaMask всегда подключён к Ethereum Mainnet → пользователь может выбрать любую сеть. Всегда проверяйте provider.getNetwork() перед отправкой транзакций.

Что дальше

• Провайдер vs Сайнер — понять, кто читает сеть, а кто подписывает действия пользователя
• EOA vs Contract Account — разобраться, какой тип аккаунта подключает MetaMask
• Отправка ETH — перейти от подключения кошелька к первой транзакции