Web3 definitivamente veio para ficar. Redes como Bitcoin, Ethereum, Solana e muitas outras estão crescendo rapidamente, junto com todos os aplicativos sendo construídos sobre elas.

Se você é um desenvolvedor JavaScript e deseja mergulhar no Web3, a primeira etapa é instalar o Metamask. A partir daí, você pode usar um dos métodos API disponíveis no objeto window.ethereum que o Metamask injeta no navegador.

Qualquer projeto Web3 normalmente começa com a conexão de uma carteira. Na Web3, uma carteira é como uma conta de usuário, mas ao contrário das contas de serviços centralizados como Gmail, Instagram ou TikTok, uma carteira é uma parte central da própria rede descentralizada. Metamask atua como um proxy, facilitando a interação com a rede e a criação de uma carteira. Embora existam outras maneiras de criar uma carteira, Metamask é de longe a mais comum.

Com isso em mente, vamos construir um aplicativo web que permita aos usuários conectar suas carteiras.

Pré-requisitos

Você precisará instalar a extensão Metamask em seu navegador ou pode baixar o aplicativo em seu dispositivo móvel – ambas as opções funcionam.

Diagrama

Vamos dar uma olhada no diagrama a seguir, que descreve o fluxo do aplicativo da web:

Lógica

A lógica é direta e dividida nas seguintes etapas:

• Se o Metamask não estiver instalado: Mostre um link para baixar o Metamask.

Isso é simples: quando o Metamask é instalado, ele injeta o objeto window.ethereum. Se este objeto não estiver presente, podemos assumir que o Metamask não foi instalado ou habilitado.

• Se a carteira não estiver conectada: Mostre um botão para conectar a carteira.

Se window.ethereum estiver disponível, podemos exibir um botão "Conectar" para o usuário vincular sua carteira.

• Se a carteira estiver conectada: Exibe o endereço da carteira.

Um dos principais métodos fornecidos por window.ethereum é request, que pode ser usado para solicitar contas como esta:

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

Isso solicita ao usuário acesso à carteira. Se eles concederem permissão, o método retornará uma matriz de contas. Para simplificar, pegaremos a primeira conta e exibiremos seu endereço.

Demonstração

Se você abrir a demonstração sem o Metamask instalado, deverá ver algo assim:

Depois de instalar o Metamask, você deverá ver um botão "Conectar". Quando clicado, o Metamask solicitará que você selecione qual conta conectar. Confira o seguinte GIF para um exemplo visual:

Observe como o estado final exibe o endereço da carteira. Embora esta demonstração seja bastante simples, todo aplicativo Web3 requer uma carteira conectada. Existem algumas bibliotecas excelentes como RainbowKit e WAGMI que simplificam a integração Web3. No entanto, nesta demonstração, estou usando métodos simples da API Metamask para obter o mesmo resultado. Claro, há muitos casos extremos que ainda não estou tratando, como o que acontece se o usuário negar acesso ou tiver várias contas – apenas alguns exemplos dos vários cenários que podem surgir.

Código

Você pode encontrar o código completo no GitHub.

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

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

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

Conclusão

Esta foi uma demonstração muito básica, e a maior parte do código é apenas React padrão. Na verdade, a única linha especificamente relacionada ao Web3 é:

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

Existem alternativas ao Metamask, e essas carteiras também injetam um objeto semelhante ao window.ethereum para interagir com suas APIs.

Você sempre pode escolher uma biblioteca, como as mencionadas anteriormente, que lida com a maior parte do padrão necessário para a integração Web3 e permite que você se concentre em seu negócio e na lógica da UI.

Web3 não vai a lugar nenhum e é provável que você precise incluí-lo em um de seus projetos eventualmente. Quem sabe você pode até se tornar um entusiasta da criptografia! Se for esse o caso, é assim que você iniciará sua jornada.

Ligações

• Demonstração
• Base de código