SwiftHTML & CSSSolidityDesenvolvimento de JogosSolana/Rust
22.11.2024

Lição: 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

  1. Inicializar um Novo Diretório de Projeto

    Crie um novo diretório para seu projeto e navegue até ele:

    mkdir integracaoMetaMask
    cd integracaoMetaMask
  2. Inicializar o npm

    Dentro do diretório do seu projeto, execute o seguinte comando para inicializar um novo projeto npm:

    npm init -y
  3. 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 setData e getData.
  • 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 setData envia uma transação para a blockchain para atualizar os dados armazenados.
    • A função getData recupera os dados armazenados da blockchain.

Executando a Aplicação

  1. Sirva seu arquivo HTML usando um servidor local. Você pode usar ferramentas como http-server ou apenas abrir o arquivo no seu navegador.

  2. Certifique-se de que seu MetaMask está configurado na mesma rede onde seu contrato está implantado (por exemplo, a blockchain local fornecida pelo Ganache).

  3. 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!

Video

Did you like this article? Rate it from 1 to 5:

Thank you for voting!