Como usar o Web3.js?

Bora desmistificar o Web3.js e te transformar em um(a) craque da web descentralizada! Se você está aqui, provavelmente já ouviu falar do Web3.js, certo? Aquela ferramenta mágica que conecta seus aplicativos web com a blockchain, abrindo um mundo de possibilidades incríveis. Mas, a real é que, para muitos, o Web3.js parece um bicho de sete cabeças. “Como que eu uso isso?”, “É complicado?”, “Preciso ser um gênio da programação?” Relaxa, amigo(a)! A resposta é: não precisa ser nenhum gênio e a gente vai te mostrar como!

Desvendando o Web3.js: O que é e por que você deveria se importar?

O Web3.js é, basicamente, uma biblioteca JavaScript que serve como uma ponte entre seus aplicativos web e as redes blockchain. Imagine que você quer interagir com um contrato inteligente (aqueles “programas” que rodam na blockchain) para, sei lá, comprar um NFT, enviar criptomoedas ou participar de uma votação descentralizada. O Web3.js é a ferramenta que te permite fazer isso de forma fácil e segura. Ele te dá as funções e os métodos necessários para se comunicar com a blockchain, ler informações, enviar transações e muito mais.

Mas por que você deveria se importar com isso? Simplesmente porque o Web3.js é a chave para construir os aplicativos do futuro. Ele abre as portas para um mundo de possibilidades incríveis, como:

• Aplicativos Descentralizados (dApps): Crie aplicativos que não dependem de um servidor central, mas sim da rede blockchain. Isso significa mais segurança, transparência e controle para o usuário.
• Finanças Descentralizadas (DeFi): Explore o mundo dos empréstimos, investimentos e trocas de criptomoedas sem intermediários, tudo rodando em contratos inteligentes.
• NFTs e Colecionáveis Digitais: Crie ou interaja com tokens não fungíveis, que representam itens únicos no mundo digital, como obras de arte, itens de jogos e muito mais.
• Governança Descentralizada (DAOs): Participe de organizações autônomas descentralizadas, onde as decisões são tomadas de forma democrática pelos membros da comunidade.

Em resumo, o Web3.js te permite construir aplicativos mais seguros, transparentes, e que dão mais controle para os usuários. É o futuro da web, e dominar essa ferramenta é uma habilidade valiosa para qualquer desenvolvedor(a) que quer estar na vanguarda da inovação. Curioso(a) para saber mais? Vamos mergulhar nos detalhes!

Entendendo a Magia por Trás do Web3.js

O Web3.js funciona como uma camada de abstração que simplifica a complexidade da interação com a blockchain. Sem ele, você teria que lidar diretamente com as APIs da blockchain, o que seria um baita trabalho. O Web3.js esconde essa complexidade e te oferece uma interface amigável e fácil de usar. Ele faz isso fornecendo:

• Conexão com a Blockchain: O Web3.js permite que seu aplicativo se conecte a diferentes redes blockchain, como Ethereum, Binance Smart Chain, Polygon e outras.
• Comunicação com Contratos Inteligentes: Ele te dá os métodos para interagir com os contratos inteligentes, enviando transações, lendo dados e executando funções.
• Gerenciamento de Contas: O Web3.js facilita o gerenciamento de contas de usuários, permitindo que eles se conectem às suas carteiras digitais e autorizem transações.
• Eventos: Ele te permite monitorar eventos que acontecem na blockchain, como a conclusão de uma transação ou a emissão de um novo token.
• Formatos de Dados: O Web3.js lida com a conversão de dados entre o formato JavaScript e o formato usado pela blockchain, simplificando a troca de informações.

Em outras palavras, o Web3.js é o seu “tradutor” e “facilitador” na hora de se comunicar com a blockchain. Ele te poupa de ter que entender os detalhes técnicos da rede e te permite focar na lógica do seu aplicativo. É como ter um assistente que faz todo o trabalho pesado para você. Quer entender como isso funciona na prática? Vamos para o próximo tópico!

O que você precisa para começar a usar o Web3.js?

Antes de começar a codar, você precisa preparar o terreno. A boa notícia é que não precisa de muito para começar a usar o Web3.js. Aqui estão os pré-requisitos:

• Conhecimento Básico de JavaScript: Se você já sabe o básico de JavaScript (variáveis, funções, objetos, etc.), você está no caminho certo. Se não souber, não se desespere! Existem muitos recursos online para aprender JavaScript de forma rápida e fácil.
• Ambiente de Desenvolvimento: Você vai precisar de um ambiente de desenvolvimento para escrever e testar seus códigos. Pode ser qualquer editor de texto (como VS Code, Sublime Text, Atom, etc.) ou um ambiente de desenvolvimento integrado (IDE) mais completo.
• Node.js e npm (ou yarn): Node.js é um ambiente de execução JavaScript que permite que você execute código JavaScript fora do navegador. npm (Node Package Manager) ou yarn são gerenciadores de pacotes que facilitam a instalação e o gerenciamento das dependências do seu projeto, incluindo o Web3.js.
• Carteira Digital (Wallet): Para interagir com a blockchain, você vai precisar de uma carteira digital (como MetaMask, Trust Wallet, etc.). Ela é responsável por armazenar suas chaves privadas e autorizar as transações.
• Rede Blockchain: Você pode usar a rede principal (mainnet) da Ethereum, mas para testes e desenvolvimento, é mais recomendado usar uma rede de teste (testnet) como a Ropsten, Goerli ou Sepolia. Elas são gratuitas e permitem que você experimente sem gastar dinheiro real.
• Um pouquinho de vontade de aprender: A web3 é um universo novo, então não tenha medo de errar e aprender com seus erros. A curiosidade e a persistência são as suas melhores ferramentas!

Com esses itens em mãos, você estará pronto(a) para começar a construir seus próprios aplicativos Web3. Se precisar de ajuda com algum desses itens, não se preocupe! Vamos te guiar em cada passo do caminho.

Instalando e Configurando o Web3.js no seu projeto

Agora que você tem os pré-requisitos, vamos instalar e configurar o Web3.js no seu projeto. É um processo simples, mas importante para começar a usar a biblioteca.

1. Crie um novo projeto: Se você ainda não tem um projeto, crie uma pasta para o seu projeto e navegue até ela no terminal.
2. Inicialize o projeto com npm: No terminal, digite npm init -y. Isso vai criar um arquivo package.json no seu projeto, que vai conter as informações sobre o projeto e suas dependências.
3. Instale o Web3.js: No terminal, digite npm install web3. Isso vai baixar e instalar a biblioteca Web3.js no seu projeto. O npm também vai criar uma pasta chamada node_modules no seu projeto, que vai conter todas as dependências instaladas.
4. Importe o Web3.js no seu código: No seu arquivo JavaScript (por exemplo, index.js), importe o Web3.js usando a instrução require: const Web3 = require('web3'); Ou, se você estiver usando módulos ES6 (com import e export), use: import Web3 from 'web3';
5. Configure a conexão com a blockchain: Para se conectar à blockchain, você precisa criar uma instância do objeto Web3 e configurar o provedor de conexão.

// Usando uma rede de teste (ex: Ropsten) - substitua pela sua URL RPC
const web3 = new Web3('https://ropsten.infura.io/v3/SUA_CHAVE_DA_INFURA');

// Ou usando um provedor local (ex: Ganache) - se você tiver um
// const web3 = new Web3('http://localhost:7545');

// Ou usando uma carteira como Metamask (precisa de uma extensão no navegador)
// if (window.ethereum) {
// web3 = new Web3(window.ethereum);
// await window.ethereum.enable(); // Solicita permissão ao usuário
// } else {
// console.log('Metamask não detectado!');
// }

Importante: Substitua https://ropsten.infura.io/v3/SUA_CHAVE_DA_INFURA pela sua URL RPC da rede de teste que você estiver usando. Se você estiver usando a Infura, crie uma conta e gere uma chave API. Se você estiver usando o Ganache, use a URL do seu servidor local.

6. Pronto! Agora você está pronto(a) para usar o Web3.js no seu projeto. No próximo tópico, vamos ver alguns exemplos de como usar o Web3.js para interagir com a blockchain.

Lembre-se que esta é apenas a configuração básica. Dependendo do seu projeto, você pode precisar de outras configurações, como configurar o acesso à sua carteira digital ou interagir com outros provedores. Mas este é o ponto de partida! Quer ver o Web3.js em ação? Vamos para o próximo passo!

Interagindo com a Blockchain: Primeiros Passos com o Web3.js

Agora que você já instalou e configurou o Web3.js, vamos começar a interagir com a blockchain de verdade! Vamos ver como você pode obter informações da blockchain, ler dados de contratos inteligentes e enviar transações.

Obtendo Informações da Blockchain

Uma das primeiras coisas que você pode fazer é obter informações básicas da blockchain, como o número do bloco mais recente, o saldo de uma conta ou o histórico de transações. O Web3.js oferece vários métodos para fazer isso.

• Obtendo o número do bloco mais recente:

web3.eth.getBlockNumber()
.then(blockNumber => {
console.log('Número do bloco mais recente:', blockNumber);
})
.catch(error => {
console.error('Erro ao obter o número do bloco:', error);
});

Este código usa o método web3.eth.getBlockNumber() para obter o número do bloco mais recente na blockchain. A função .then() é chamada quando a requisição é bem-sucedida, e a função .catch() é chamada se houver algum erro.

• Obtendo o saldo de uma conta:

const accountAddress = '0x...'; // Substitua pelo endereço da conta que você quer consultar
web3.eth.getBalance(accountAddress)
.then(balance => {
console.log('Saldo da conta:', web3.utils.fromWei(balance, 'ether'), 'ETH'); // Converte de Wei para Ether
})
.catch(error => {
console.error('Erro ao obter o saldo da conta:', error);
});

Este código usa o método web3.eth.getBalance() para obter o saldo de uma conta específica. O saldo é retornado em Wei (a menor unidade de Ether), então usamos web3.utils.fromWei() para converter para Ether.

• Obtendo o gás usado em uma transação:

const transactionHash = '0x...'; // Substitua pelo hash da transação que você quer consultar
web3.eth.getTransaction(transactionHash)
.then(transaction => {
if (transaction) {
console.log('Gás usado na transação:', transaction.gasUsed);
} else {
console.log('Transação não encontrada');
}
})
.catch(error => {
console.error('Erro ao obter os detalhes da transação:', error);
});

Este código usa o método web3.eth.getTransaction() para obter os detalhes de uma transação específica, incluindo o gás usado.

Experimente esses exemplos no seu código e veja os resultados no console do seu navegador ou no terminal. Essa é uma ótima maneira de começar a se familiarizar com o Web3.js e a blockchain.

Lendo Dados de Contratos Inteligentes

Além de obter informações da blockchain, você também pode ler dados de contratos inteligentes. Os contratos inteligentes armazenam informações importantes, como o saldo de um token, a lista de NFTs de um usuário ou o resultado de uma votação.

Para ler dados de um contrato inteligente, você precisa:

1. Obter o endereço e o ABI do contrato: O endereço é o local onde o contrato está implantado na blockchain. O ABI (Application Binary Interface) é uma descrição do contrato, que define as funções, os eventos e as estruturas de dados do contrato.
2. Criar uma instância do contrato: Use o Web3.js para criar uma instância do contrato, passando o endereço e o ABI.
3. Chamar as funções de leitura do contrato: Use a instância do contrato para chamar as funções de leitura do contrato e obter os dados.

Aqui está um exemplo de como ler o saldo de um token ERC-20:

// 1. Obtendo o endereço e o ABI do contrato
const contractAddress = '0x...'; // Substitua pelo endereço do contrato ERC-20
const contractABI = [...]; // Substitua pelo ABI do contrato (uma lista de objetos JSON)

// 2. Criando uma instância do contrato
const contract = new web3.eth.Contract(contractABI, contractAddress);

// 3. Chamando a função de leitura (por exemplo, balanceOf)
const accountAddress = '0x...'; // Substitua pelo endereço da conta que você quer consultar

contract.methods.balanceOf(accountAddress)
.call()
.then(balance => {
console.log('Saldo do token:', balance); // O valor retornado pode depender do token (ex: em wei)
})
.catch(error => {
console.error('Erro ao obter o saldo:', error);
});

Neste exemplo:

• Substituímos 0x... pelo endereço e o ABI do contrato ERC-20 que queremos consultar.
• Usamos o método new web3.eth.Contract() para criar uma instância do contrato, passando o ABI e o endereço.
• Usamos contract.methods.balanceOf(accountAddress).call() para chamar a função balanceOf do contrato, que retorna o saldo de um usuário. O método .call() é usado para chamar funções de leitura (que não alteram o estado da blockchain).

Para obter o ABI de um contrato, você pode consultar o código-fonte do contrato no Etherscan ou usar ferramentas de desenvolvimento como o Remix IDE.

Enviando Transações

Enviar transações é a parte mais importante e complexa da interação com a blockchain. Ao enviar uma transação, você está alterando o estado da blockchain, como transferindo criptomoedas, mintando um NFT ou interagindo com um contrato inteligente.

Para enviar uma transação, você precisa:

1. Ter uma carteira digital: A carteira digital é responsável por assinar a transação com sua chave privada.
2. Obter o endereço e o ABI do contrato (se aplicável): Assim como na leitura de dados, você precisa do endereço e do ABI do contrato para interagir com ele.
3. Criar uma instância do contrato (se aplicável):
4. Preparar os dados da transação: Isso inclui o endereço do destinatário, a quantidade de criptomoedas a serem transferidas, o gás a ser usado e outros dados relevantes.
5. Assinar e enviar a transação: Use o Web3.js para assinar a transação com sua carteira digital e enviá-la para a blockchain.

Aqui está um exemplo de como enviar uma transação de transferência de Ether:

// 1. Configurando a carteira (usando Metamask como exemplo)
if (window.ethereum) {
web3 = new Web3(window.ethereum);
try {
// Solicita acesso à conta do usuário
await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('Metamask conectado!');
} catch (error) {
console.error('Erro ao conectar ao Metamask:', error);
}
} else {
console.log('Metamask não detectado!');
// Avise o usuário para instalar o Metamask
}

// 2. Preparando os dados da transação
const recipientAddress = '0x...'; // Substitua pelo endereço do destinatário
const amountInEther = 0.01; // Quantidade de Ether a ser transferida
const amountInWei = web3.utils.toWei(amountInEther.toString(), 'ether'); // Converte para Wei

// 3. Enviando a transação
web3.eth.sendTransaction({
from: window.ethereum.selectedAddress, // Endereço da sua carteira
to: recipientAddress,
value: amountInWei,
gas: 21000, // Gás padrão para uma transferência simples
})
.then(receipt => {
console.log('Transação enviada com sucesso:', receipt);
console.log('Hash da transação:', receipt.transactionHash);
})
.catch(error => {
console.error('Erro ao enviar a transação:', error);
});

Neste exemplo:

• Usamos o window.ethereum (Metamask como exemplo) para obter o endereço da carteira do usuário.
• Preparamos os dados da transação, incluindo o endereço do destinatário e a quantidade de Ether a ser transferida.
• Usamos web3.eth.sendTransaction() para enviar a transação. O método retorna um objeto receipt com informações sobre a transação, incluindo o hash da transação.

Importante: Ao enviar transações, certifique-se de ter Ether suficiente na sua carteira para pagar as taxas de gás. O gás é a taxa que você paga para que os mineradores processem sua transação.

Enviar transações pode ser um pouco mais complexo do que ler dados, mas com um pouco de prática, você vai pegar o jeito. Lembre-se de que você sempre pode testar suas transações em uma rede de teste antes de enviá-las para a rede principal.

Pronto(a)! Agora você já sabe como obter informações da blockchain, ler dados de contratos inteligentes e enviar transações usando o Web3.js. Pratique esses exemplos e comece a explorar o mundo da web3!

Construindo dApps com Web3.js: Dicas e Truques Essenciais

Agora que você já tem uma base sólida, vamos aprofundar um pouco mais e ver algumas dicas e truques que vão te ajudar a construir dApps (aplicativos descentralizados) incríveis com o Web3.js.

Otimizando o desempenho dos seus dApps

O desempenho é crucial para a experiência do usuário em qualquer aplicativo, e com os dApps não é diferente. Aqui estão algumas dicas para otimizar o desempenho dos seus dApps:

1. Otimize as chamadas à blockchain:

• Cache de dados: Cache os dados da blockchain que você usa com frequência no lado do cliente. Isso reduz o número de chamadas à blockchain e melhora o tempo de resposta do seu aplicativo.
• Chamadas em lote: Agrupe várias chamadas à blockchain em uma única transação, sempre que possível. Isso reduz as taxas de gás e melhora o desempenho.
• Eventos: Use eventos para monitorar mudanças na blockchain em vez de verificar constantemente o status dos dados.

2. Considere o uso de off-chain data: Nem todos os dados precisam estar na blockchain. Dados que não precisam ser completamente seguros ou transparentes podem ser armazenados em um servidor off-chain. Isso reduz o custo e a complexidade da sua aplicação.

3. Gás e otimização de contratos inteligentes:

• Otimize o uso de gás: Otimize o código do seu contrato inteligente para reduzir as taxas de gás.
• Limitando o uso de gás: Especifique um limite de gás nas suas transações para evitar que elas consumam todo o gás disponível.

4. Interface do usuário:

• Mostre indicadores de progresso: Mostre aos usuários indicadores de progresso enquanto as transações são processadas na blockchain.
• Responsividade: Projete sua interface do usuário para que ela seja responsiva e funcione bem em diferentes dispositivos.

5. Testes: Teste seu dApp em diferentes cenários para identificar gargalos de desempenho.

Lidando com erros e exceções no Web3.js

Lidar com erros e exceções é uma parte importante do desenvolvimento de qualquer aplicativo. Aqui estão algumas dicas para lidar com erros e exceções no Web3.js:

1. Use try...catch: Envolva o seu código Web3.js em blocos try...catch para capturar erros e exceções.

try {
// Seu código Web3.js aqui
} catch (error) {
console.error('Ocorreu um erro:', error);
// Trate o erro (ex: mostre uma mensagem de erro ao usuário)
}

2. Verifique os retornos das funções: Verifique os retornos das funções Web3.js para garantir que elas foram executadas com sucesso. Por exemplo, as transações retornam um objeto receipt que contém informações sobre a transação.

3. Use console.error() para registrar erros: Use console.error() para registrar erros no console do navegador ou no terminal. Isso vai te ajudar a diagnosticar e solucionar problemas.

4. Trate erros específicos: Se você souber quais erros podem ocorrer, você pode tratar esses erros especificamente. Por exemplo, você pode verificar se o usuário tem Ether suficiente para pagar o gás.

5. Mostre mensagens de erro amigáveis ao usuário: Mostre mensagens de erro amigáveis ao usuário em vez de exibir mensagens de erro técnicas. Isso torna seu aplicativo mais fácil de usar.

6. Use bibliotecas de tratamento de erros: Considere o uso de bibliotecas de tratamento de erros, como o web3-utils e o web3-eth, para facilitar o tratamento de erros.

7. Monitore seu dApp: Monitore seu dApp em tempo real para identificar e resolver erros rapidamente.

Melhorando a segurança dos seus dApps

A segurança é fundamental no mundo da web3. Aqui estão algumas dicas para melhorar a segurança dos seus dApps:

1. Valide os dados de entrada: Valide todos os dados de entrada do usuário para evitar ataques de injeção e outros tipos de ataques.

2. Use contratos inteligentes seguros: Use contratos inteligentes seguros e revise-os cuidadosamente antes de implantá-los na blockchain. Considere a possibilidade de auditorias por empresas especializadas.

3. Proteja as chaves privadas: Nunca armazene as chaves privadas do usuário no seu aplicativo. Use carteiras digitais (como Metamask) para gerenciar as chaves privadas de forma segura.

4. Use HTTPS: Use HTTPS para proteger a comunicação entre o seu aplicativo e a blockchain.

5. Mantenha suas dependências atualizadas: Mantenha suas dependências atualizadas para se proteger contra vulnerabilidades de segurança conhecidas.

6. Seja transparente: Seja transparente sobre a segurança do seu aplicativo e informe os usuários sobre as medidas de segurança que você está tomando.

7. Teste e audite seu código: Realize testes e auditorias regulares no seu código para identificar e corrigir vulnerabilidades de segurança.

8. Eduque seus usuários: Eduque seus usuários sobre as melhores práticas de segurança, como proteger suas chaves privadas e desconfiar de sites suspeitos.

Usando Bibliotecas e Frameworks úteis com o Web3.js

Para facilitar o desenvolvimento de dApps, você pode usar bibliotecas e frameworks que complementam o Web3.js:

• Frameworks:

• Truffle: Um framework popular para o desenvolvimento e implantação de contratos inteligentes.
• Hardhat: Outro framework popular para desenvolvimento, teste e implantação de contratos inteligentes.
• Remix: Um IDE online para desenvolver, compilar, testar e implantar contratos inteligentes.

• Bibliotecas:

• ethers.js: Uma biblioteca alternativa ao Web3.js, com algumas vantagens em termos de tamanho e desempenho.
• web3modal: Uma biblioteca para conectar diferentes carteiras digitais ao seu dApp.
• wagmi: Um conjunto de hooks React para interagir com Ethereum.

Listas com Dicas Importantes

1. Comece com o básico: Não tente fazer tudo de uma vez. Comece com projetos simples e vá aumentando a complexidade gradualmente.

2. Estude os exemplos: Explore os exemplos de código e tutoriais disponíveis online para aprender como usar o Web3.js.

3. Use as redes de teste: Use as redes de teste (como Ropsten, Goerli, Sepolia) para testar seus aplicativos sem gastar dinheiro real.

4. Entenda os conceitos: Entenda os conceitos básicos da blockchain, como contratos inteligentes, transações e taxas de gás.

5. Documente seu código: Documente seu código para que você e outros desenvolvedores possam entender o que ele faz.

6. Teste seu código: Teste seu código regularmente para garantir que ele funcione corretamente.

7. Aprenda com os erros: Não tenha medo de cometer erros. Aprenda com eles e continue aprimorando suas habilidades.

8. Participe da comunidade: Participe da comunidade Web3.js para aprender com outros desenvolvedores e obter ajuda quando precisar.

9. Mantenha-se atualizado: A tecnologia Web3 está em constante evolução. Mantenha-se atualizado sobre as últimas novidades e tendências.

10. Divirta-se: O desenvolvimento Web3 pode ser desafiador, mas também muito gratificante. Divirta-se enquanto aprende e constrói seus aplicativos!

Tabela de Comparação de Frameworks

Passo a Passo: Criando um dApp Simples de Transferência de Tokens

Vamos criar um dApp simples que permite aos usuários transferir tokens ERC-20.

Passo 1: Configuração do Ambiente

1. Instale o Node.js e npm (ou yarn).
2. Crie um novo projeto: mkdir meu-dapp && cd meu-dapp && npm init -y
3. Instale as dependências: npm install web3 --save
4. Instale uma carteira como Metamask e conecte a uma rede de teste (ex: Goerli).

Passo 2: Escreva o Contrato Inteligente (Solidity)

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MeuToken is ERC20 {
constructor(uint256 _initialSupply) ERC20("MeuToken", "MTK") {
_mint(msg.sender, _initialSupply); // Cria tokens para o criador do contrato
}
}

Passo 3: Compile e Implante o Contrato

1. Compile o contrato usando um compilador Solidity (como Remix, Truffle ou Hardhat).
2. Implante o contrato em uma rede de teste (ex: Goerli) usando sua carteira (Metamask). Anote o endereço do contrato implantado e o ABI.

Passo 4: Crie a Interface do Usuário (HTML, CSS, JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Meu dApp de Transferência de Tokens</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Transferir Tokens</h1>
<p>Endereço do Contrato: <span id="contractAddress"></span></p>
<p>Saldo: <span id="balance"></span> MTK</p>

<div>
<label for="recipient">Destinatário:</label>
<input type="text" id="recipient" placeholder="Endereço do destinatário">
</div>
<div>
<label for="amount">Quantidade:</label>
<input type="number" id="amount" placeholder="Quantidade de tokens">
</div>
<button id="transferButton">Transferir</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="script.js"></script>
</body>
</html>

/* style.css */
body {
font-family: sans-serif;
}

// script.js
const contractAddress = 'SEU_ENDERECO_DO_CONTRATO'; // Substitua pelo endereço do seu contrato
const contractABI = [...]; // Substitua pelo ABI do seu contrato (JSON)

let web3;
let contract;

async function init() {
if (window.ethereum) {
web3 = new Web3(window.ethereum);
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('Metamask conectado!');
} catch (error) {
console.error('Erro ao conectar ao Metamask:', error);
}
} else {
console.log('Metamask não detectado!');
// Avise o usuário para instalar o Metamask
}

contract = new web3.eth.Contract(contractABI, contractAddress);
document.getElementById('contractAddress').innerText = contractAddress;
await updateBalance();
document.getElementById('transferButton').addEventListener('click', transferTokens);
}

async function updateBalance() {
if (!contract || !window.ethereum?.selectedAddress) return;
const balance = await contract.methods.balanceOf(window.ethereum.selectedAddress).call();
document.getElementById('balance').innerText = balance / 10**18; // Assumindo 18 decimais
}

async function transferTokens() {
if (!contract || !window.ethereum?.selectedAddress) return;
const recipient = document.getElementById('recipient').value;
const amount = document.getElementById('amount').value;
const amountInWei = web3.utils.toWei(amount, 'ether'); // Converte para Wei

try {
const result = await contract.methods.transfer(recipient, amountInWei)
.send({ from: window.ethereum.selectedAddress });
console.log('Transferência realizada com sucesso!', result);
alert('Transferência realizada com sucesso!');
await updateBalance();
} catch (error) {
console.error('Erro na transferência:', error);
alert('Erro na transferência: ' + error.message);
}
}

init();

Passo 5: Teste o dApp

1. Abra o arquivo HTML no seu navegador.
2. Conecte sua carteira (Metamask) ao seu dApp.
3. Verifique seu saldo de tokens.
4. Insira o endereço do destinatário e a quantidade de tokens.
5. Clique em “Transferir” e aprove a transação na sua carteira.
6. Verifique o saldo do destinatário.