Como Conectar o Metamask ao Seu Site com React, Next.js e TypeScript

Se você está criando um dApp ou deseja permitir interações blockchain diretamente do front-end com Metamask, este tutorial é para você. Vamos utilizar window.ethereum, que o Metamask injeta no navegador, sem usar bibliotecas externas como web3.js ou ethers.js.

O que vamos fazer?

1. Verificar se o Metamask está instalado.
2. Conectar a conta do usuário ao seu DApp.
3. Monitorar mudanças na conta ativa.
4. Exibir a conta conectada no front-end.

Pré-requisitos

• Conhecimento básico de React e Next.js.
• Ter o Metamask instalado no seu navegador.

---

1. Verificando se o Metamask está instalado

Primeiro, precisamos verificar se o Metamask está disponível. No React, podemos fazer isso no useEffect, pois o código de window.ethereum deve ser executado no lado do cliente. Vamos também garantir que estamos utilizando TypeScript corretamente.

import { useEffect, useState } from 'react';

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

export default function Home() {
  const [metamaskInstalled, setMetamaskInstalled] = useState(false);

  useEffect(() => {
    if (typeof window.ethereum !== 'undefined') {
      setMetamaskInstalled(true);
    } else {
      console.log('Metamask não está instalado!');
    }
  }, []);

  return (
    <div>
      {metamaskInstalled ? (
        <p>Metamask está instalado!</p>
      ) : (
        <p>Metamask não está instalado. Por favor, instale-o!</p>
      )}
    </div>
  );
}

---

2. Solicitando a Conexão à Conta do Usuário

Agora que verificamos que o Metamask está instalado, vamos solicitar a conexão à conta do usuário ao clicar em um botão. Vamos adicionar tipagem para o retorno da função request.

import { useEffect, useState } from 'react';

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

export default function Home() {
  const [metamaskInstalled, setMetamaskInstalled] = useState(false);
  const [account, setAccount] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window.ethereum !== 'undefined') {
      setMetamaskInstalled(true);
    }
  }, []);

  const connectMetamask = async () => {
    try {
      const accounts: string[] = await window.ethereum.request({
        method: 'eth_requestAccounts',
      });
      setAccount(accounts[0]);
    } catch (error) {
      console.log('Erro ao conectar Metamask:', error);
    }
  };

  return (
    <div>
      {metamaskInstalled ? (
        <>
          <button onClick={connectMetamask}>Conectar Metamask</button>
          {account && <p>Conta conectada: {account}</p>}
        </>
      ) : (
        <p>Metamask não está instalado. Por favor, instale-o!</p>
      )}
    </div>
  );
}

---

3. Monitorando Mudanças na Conta do Usuário

O Metamask permite que você monitore eventos de troca de conta ou rede. Podemos utilizar o evento accountsChanged para atualizar a conta conectada quando o usuário trocar de conta.

useEffect(() => {
  if (window.ethereum) {
    window.ethereum.on('accountsChanged', (accounts: string[]) => {
      setAccount(accounts[0]);
    });
  }
}, []);

---

4. Exibindo a Conta Conectada

Ao conectar, o endereço da conta do usuário será exibido na interface. Isso permite interações diretas entre o usuário e a blockchain. Aqui está a versão final do código:

import { useEffect, useState } from 'react';

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

export default function Home() {
  const [metamaskInstalled, setMetamaskInstalled] = useState(false);
  const [account, setAccount] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window.ethereum !== 'undefined') {
      setMetamaskInstalled(true);
      
      window.ethereum.on('accountsChanged', (accounts: string[]) => {
        setAccount(accounts[0]);
      });
    }
  }, []);

  const connectMetamask = async () => {
    try {
      const accounts: string[] = await window.ethereum.request({
        method: 'eth_requestAccounts',
      });
      setAccount(accounts[0]);
    } catch (error) {
      console.log('Erro ao conectar Metamask:', error);
    }
  };

  return (
    <div>
      {metamaskInstalled ? (
        <>
          <button onClick={connectMetamask}>Conectar Metamask</button>
          {account && <p>Conta conectada: {account}</p>}
        </>
      ) : (
        <p>Metamask não está instalado. Por favor, instale-o!</p>
      )}
    </div>
  );
}

---

Considerações Finais

Agora você tem um exemplo básico de como conectar o Metamask ao seu site utilizando apenas window.ethereum, sem dependências externas. A partir daqui, você pode expandir a funcionalidade para realizar transações, interagir com contratos inteligentes, e muito mais.