Lição: 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
- Conexão: Conectamo-nos à rede Ethereum usando
connectToEthereum
, que solicita ao usuário que conecte sua conta do MetaMask. - Gestão de Estado: Usamos o
useState
do React para acompanhar a conta conectada do usuário e o valor de entrada. - 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!