Aula 103: Integração com MetaMask
MetaMask é uma carteira de criptomoedas amplamente utilizada, que permite aos usuários gerenciar ativos baseados em Ethereum e interagir com aplicações descentralizadas (dApps). Nesta aula, vamos aprender como integrar o MetaMask com uma aplicação web simples para interagir com contratos inteligentes escritos em Solidity.
Pré-requisitos
Antes de começarmos, verifique se você possui:
- Conhecimentos básicos sobre Solidity e desenvolvimento de contratos inteligentes.
- Um ambiente de desenvolvimento configurado com Node.js e npm.
- Um ambiente de blockchain local em execução (como Ganache) ou acesso a uma rede de teste.
- Uma carteira MetaMask instalada no seu navegador web.
Configurando o Projeto
-
Inicializar um Novo Diretório de Projeto
Crie um novo diretório para seu projeto e navegue até ele:
mkdir integracaoMetaMask cd integracaoMetaMask -
Inicializar o npm
Dentro do diretório do seu projeto, execute o seguinte comando para inicializar um novo projeto npm:
npm init -y -
Instalar Pacotes Necessários
Você precisará instalar o Web3.js, uma biblioteca popular para interagir com a blockchain Ethereum:
npm install web3
Escrevendo um Contrato Inteligente Simples
Crie um novo arquivo chamado SimpleStorage.sol para o nosso contrato inteligente em Solidity:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleStorage {
string private data;
function setData(string memory _data) public {
data = _data;
}
function getData() public view returns (string memory) {
return data;
}
}Esse contrato nos permite armazenar e recuperar uma string simples.
Implantando o Contrato Inteligente
Para implantar nosso contrato SimpleStorage, você pode usar ferramentas como Truffle ou Hardhat. Para simplificar, vamos assumir que você o implantou em sua blockchain local e tem o endereço do contrato.
Criando um Frontend para Interagir com o MetaMask
Crie um arquivo index.html no diretório do seu projeto:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integração com MetaMask</title>
<script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
</head>
<body>
<h1>Integração com MetaMask e SimpleStorage</h1>
<input type="text" id="dataInput" placeholder="Digite os dados">
<button id="setDataBtn">Gravar Dados</button>
<button id="getDataBtn">Obter Dados</button>
<p id="result"></p>
<script>
const contractAddress = "SEU_ENDERECO_DO_CONTRATO"; // Substitua pelo seu endereço do contrato
const abi = [
// ABI do contrato SimpleStorage
{
"inputs": [{"internalType": "string","name": "_data","type": "string"}],
"name": "setData",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getData",
"outputs": [{"internalType": "string","name": "","type": "string"}],
"stateMutability": "view",
"type": "function"
}
];
let web3;
let contract;
window.addEventListener('load', async () => {
// Verifica se o MetaMask está instalado
if (typeof window.ethereum !== 'undefined') {
web3 = new Web3(window.ethereum);
await window.ethereum.request({ method: 'eth_requestAccounts' });
contract = new web3.eth.Contract(abi, contractAddress);
console.log("MetaMask conectado");
} else {
alert('Por favor, instale o MetaMask!');
}
});
document.getElementById('setDataBtn').onclick = async () => {
const accounts = await web3.eth.getAccounts();
const data = document.getElementById('dataInput').value;
await contract.methods.setData(data).send({ from: accounts[0] });
alert('Dados gravados com sucesso!');
};
document.getElementById('getDataBtn').onclick = async () => {
const result = await contract.methods.getData().call();
document.getElementById('result').innerText = `Dados Armazenados: ${result}`;
};
</script>
</body>
</html>Explicação do Código
- Estrutura HTML: A estrutura básica HTML inclui campos de entrada para digitar dados e botões para as funções
setDataegetData. - Inicialização do Web3: Verificamos a existência do MetaMask e inicializamos uma instância do Web3 assim que a página é carregada.
- Interação com o Contrato:
- A função
setDataenvia uma transação para a blockchain para atualizar os dados armazenados. - A função
getDatarecupera os dados armazenados da blockchain.
- A função
Executando a Aplicação
-
Sirva seu arquivo HTML usando um servidor local. Você pode usar ferramentas como
http-serverou apenas abrir o arquivo no seu navegador. -
Certifique-se de que seu MetaMask está configurado na mesma rede onde seu contrato está implantado (por exemplo, a blockchain local fornecida pelo Ganache).
-
Digite alguns dados no campo de entrada, clique em "Gravar Dados" e então clique em "Obter Dados" para ver o valor armazenado.
Conclusão
Nesta aula, integrarmos com sucesso o MetaMask a uma aplicação web para interagir com um contrato inteligente simples em Solidity. Você pode expandir esta aplicação adicionando mais recursos, melhorando a interface ou usando frameworks como React ou Vue.js. Integrar o MetaMask abre as portas para uma ampla gama de possibilidades para aplicações descentralizadas!