22.11.2024

Aula 104: Criando DApps com React

Nesta aula, vamos explorar como construir aplicações descentralizadas (DApps) usando React. Vamos abordar conceitos fundamentais, como a conexão com redes Ethereum, a busca e envio de dados para contratos inteligentes e a gestão de estado dentro de uma aplicação React.

Pré-requisitos

Antes de começarmos, certifique-se de ter o seguinte instalado:

• Node.js e npm
• Extensão do navegador MetaMask
• Noções básicas de React e Ethereum

Configurando sua Aplicação React

Primeiro, vamos criar uma nova aplicação React usando o Create React App:

npx create-react-app meu-dapp
cd meu-dapp

Em seguida, instale as bibliotecas necessárias:

npm install ethers

ethers.js é uma biblioteca que nos ajudará a interagir com nossos contratos inteligentes Ethereum.

Conectando-se à Ethereum

Agora, vamos configurar uma conexão com a rede Ethereum usando o MetaMask. Crie um novo arquivo chamado ethereum.js no diretório src:

// src/ethereum.js
import { ethers } from 'ethers';

let provider;
let signer;
let contract;

export const connectToEthereum = async (contractAddress, contractABI) => {
    if (window.ethereum) {
        provider = new ethers.providers.Web3Provider(window.ethereum);
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        signer = provider.getSigner();
        contract = new ethers.Contract(contractAddress, contractABI, signer);
    } else {
        console.error("Por favor, instale o MetaMask!");
    }
};

export const getProvider = () => {
    return provider;
};

export const getSigner = () => {
    return signer;
};

export const getContract = () => {
    return contract;
};

Construindo a Interface do Usuário

Agora, vamos criar uma interface simples que permita aos usuários interagir com nosso contrato inteligente. Abra App.js e modifique-o da seguinte forma:

// src/App.js
import React, { useEffect, useState } from 'react';
import { connectToEthereum, getContract } from './ethereum';

const contractAddress = "ENDEREÇO_DO_SEU_CONTRATO";
const contractABI = [
    // Seu ABI do contrato vai aqui
];

const App = () => {
    const [account, setAccount] = useState('');
    const [value, setValue] = useState('');

    useEffect(() => {
        const connect = async () => {
            await connectToEthereum(contractAddress, contractABI);
            const accounts = await window.ethereum.request({ method: 'eth_accounts' });
            setAccount(accounts[0]);
        };
        connect();
    }, []);

    const handleSubmit = async (event) => {
        event.preventDefault();
        const contract = getContract();
        const transaction = await contract.yourContractFunction(value);
        await transaction.wait();
        alert('Transação realizada com sucesso!');
    };

    return (
        <div>
            <h1>DApp com React</h1>
            <p>Conta conectada: {account}</p>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={value}
                    onChange={(e) => setValue(e.target.value)}
                    placeholder="Valor a enviar"
                />
                <button type="submit">Enviar</button>
            </form>
        </div>
    );
};

export default App;

Pontos Chave

1. Conexão: Conectamo-nos à rede Ethereum usando connectToEthereum, que solicita ao usuário que conecte sua conta do MetaMask.
2. Gestão de Estado: Usamos o useState do React para acompanhar a conta conectada do usuário e o valor de entrada.
3. Interação com Contratos: Ao enviar o formulário, chamamos uma função do nosso contrato inteligente usando o método getContract.

Adicionando a Lógica do Seu Contrato Inteligente

Certifique-se de substituir "ENDEREÇO_DO_SEU_CONTRATO" e o espaço reservado para contractABI com valores reais do seu contrato inteligente implantado. Aqui está um contrato Solidity simples como exemplo:

// SimpleStorage.sol
pragma solidity ^0.8.0;

contract SimpleStorage {
    string public storedData;

    function set(string memory data) public {
        storedData = data;
    }

    function get() public view returns (string memory) {
        return storedData;
    }
}

Depois de implantar este contrato, substitua os endereços e o ABI relevantes na aplicação React.

Executando Seu DApp

Agora você pode iniciar sua aplicação:

npm start

Abra seu navegador e acesse http://localhost:3000. Você deverá ver uma mensagem de conexão com sua conta Ethereum e um formulário.

Conclusão

Nesta aula, aprendemos como criar um DApp básico usando React e ethers.js. Configuramos uma conexão com Ethereum, construímos uma interface de usuário simples e interagimos com um contrato inteligente. Com essa base, você pode expandir seu DApp adicionando funcionalidades mais complexas e aprimorando a experiência do usuário.

Sinta-se à vontade para modificar o código e experimentar com diferentes funções de contrato inteligente. Boa codificação!

Video

Navigation