Este projeto divide-se em duas partes: a primeira é o hardhat
, que envolve o desenvolvimento do contrato, e a segunda, é o frontend
, construído usando React
.
A conexão entre essas duas partes é o grande desafio. Para isso, utilizei a biblioteca wagmi
e o comando wagmi-cli
para auxiliar nas chamadas ao contrato.
Aqui, temos o template inicial do hardhat. Para realizar o ciclo completo do contrato, basta seguir os seguintes passos:
-
Desenvolver os contratos na pasta
contracts
e, em sequência, construir os testes, que estão localizados na pastahardhat/test
. Para executar os testes, basta:npx hardhat run test
-
Agora, para realizar o deploy do contrato, é necessário definir a rede. Se for a rede local, primeiro certifique-se de que ela está em funcionamento:
npx hardhat node
2.1 Em outro terminal, execute o script para realizar o deploy do seu contrato.
npx hardhat run scripts/deploy.ts --network localhost
Caso pretenda fazer o deploy em uma rede de testes, não é necessário executar o node localmente. Basta adicionar as variáveis de ambiente
ALCHEMY_API_KEY
eSEPOLIA_PRIVATE_KEY
no arquivo.env
e executar:npx hardhat run scripts/deploy.ts --network sepolia
-
Também é possível verificar o contrato na rede, através do
etherscan
. Para isso, adicione a chave da API na variávelETHERSCAN_API_KEY
no arquivo.env
e, por fim, execute o comando:npx hardhat verify --network sepolia <address> <constructor arguments>
Com o Hardhat
configurado, podemos prosseguir com o desenvolvimento do Frontend
. O principal componente que realiza a conexão do frontend
com a blockchain é o wagmi-cli
. Esta biblioteca está configurada no arquivo wagmi.config.ts
para procurar pelo projeto do hardhat
. Assim, é possível gerar os React Hooks
usando o seguinte comando:
npx wagmi generate
Isso gera o arquivo src/generated.ts
, que contém as chamadas para escrita e leitura do contrato. Estas chamadas são tipadas e oferecem auto-completar.
Por fim, para interagir com o contrato, é necessário adicionar o endereço do mesmo no arquivo .env
. Atualmente, esse processo é realizado de forma manual.
Este site não pretende ser um site dinâmico, mas sim uma web app estática. Para realizar o build e, por fim, o deploy, execute os seguintes comandos:
npm run build
Depois, escolha qualquer ferramenta de hosting, como, por exemplo, Firebase Hosting, Cloudflare Pages, ou Vercel.