Delete Lock.sol na pasta contracts e tbm Lock.ts da pasta testes. Crie um contrato simples de greet.ts na pasta contracts:
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9;
contract Greeter {
constructor() {}
function greet() public pure returns (string memory) {
return "Hello, World!";
}
}
bash:
npx hardhat compile
Agora vamos integrar ao front!
O melhor caminho eh criar testes automatizados via typescript. Depois de criar as funcionalidades ja testadas, basta copiar o fluxo testado pro front e acoplar em algum botao.
Crie um arquivo na pasta test como greeter.ts
import { expect } from "chai";
import { ethers } from "hardhat";
import {Greeter__factory} from "../typechain-types";
import {Greeter} from "../typechain-types";
describe("Greeter", function () {
let greeter: Greeter;
async function deployGreeter() {
const Greeter: Greeter__factory = await ethers.getContractFactory("Greeter") as Greeter__factory;
const [owner, otherAccount] = await ethers.getSigners();
greeter = await Greeter.deploy();
return ;
}
beforeEach(async function () {
await deployGreeter();
});
describe("Hello Test", function () {
it("Should print \"Hello World!\"", async function () {
let response = await greeter.greet();
await expect(response).equal( "Hello, World!");
});
});
});
Rode os testes:
hardhat test
Se tudo tiver certo, faca deploy do contrato, recomendo testnet polygon. Edite o orquivo deploy.ts da pasta scripts. Para efetivamente fazer deploy do contrato.
import { ethers } from "hardhat";
import { Greeter__factory } from "../typechain-types";
import { Greeter } from "../typechain-types";
async function main() {
const Greeter: Greeter__factory = await ethers.getContractFactory("Greeter") as Greeter__factory;
const [owner, otherAccount] = await ethers.getSigners();
let greeter: Greeter = await Greeter.deploy();
await greeter.deployed();
console.log(`Greeter deployed to ${greeter.address}`);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
Pra que o contrato seja deployado em alguma chain, digamos polygon testnet, vc precisara das credenciais da wallet.
Pra isso crie um arquivo .env coloque ele no .gitignore e adicione o seu mnemonic phrase la. Se voce nao tiver uma wallet, recomendo criar uma apenas para este fim agora e salvar no arquivo .env. Como vamos usar .env nao esqueca de instalar o pacote dotenv com npm install --save-dev dotenv.
Para usar o contrato no navegador a forma mais simple eh adicionar a extensao metamask. Apos isto, importe suas chaves na metamask(criado no passo anterior) ou crie uma por la.
Use esse hardhat.config.ts que ele ja esta configurado para usar testnet da polygon e outras chains.
Se voce nao tiver tokens na wallet que vc estiver usando, precisamos adicionar fundos, no caso da polygon mumbai, adicione fundos aqui. https://faucet.polygon.technology/
Para deployar para a polygon testnet basta rodar agora com tudo configurado:
hardhat run --network mumbai scripts/deploy.ts
Guarde o endereco do contrato pois vamos usar ele na integracao com o front. No meu caso o endereco do contrato gerado foi: "0xe720699f67778FBF021B3a5C6C5092ea4e5c3087"
Agora vamos integrar o contrato ao front.
Crie o projeto com a stack typescript que melhor lhe convir. Recomendo react. Copie toda a pasta typechain-types para o seu sources pois vamos usar ele.
Se voce estiver na pasta do smartcontracts-tuto acima, volte um nivel com cd ...
Introducao a SmartContracts com Solidity
Tema: aplicação frontend consumindo um smartcontract Pitch: Desenvolvimento de Aplicações Descentralizadas
Sumario
Atividade:
Seguir documentacao https://hardhat.org/tutorial/creating-a-new-hardhat-project
Seguir documentacao https://www.npmjs.com/package/@typechain/hardhat
Adicione no arquivo
hardhat.config.ts
Delete Lock.sol na pasta contracts e tbm Lock.ts da pasta testes. Crie um contrato simples de greet.ts na pasta contracts:
bash:
Agora vamos integrar ao front! O melhor caminho eh criar testes automatizados via typescript. Depois de criar as funcionalidades ja testadas, basta copiar o fluxo testado pro front e acoplar em algum botao.
Crie um arquivo na pasta test como greeter.ts
Rode os testes:
Se tudo tiver certo, faca deploy do contrato, recomendo testnet polygon. Edite o orquivo
deploy.ts
da pastascripts
. Para efetivamente fazer deploy do contrato.Pra que o contrato seja deployado em alguma chain, digamos polygon testnet, vc precisara das credenciais da wallet.
Pra isso crie um arquivo
.env
coloque ele no.gitignore
e adicione o seu mnemonic phrase la. Se voce nao tiver uma wallet, recomendo criar uma apenas para este fim agora e salvar no arquivo.env
. Como vamos usar.env
nao esqueca de instalar o pacotedotenv
comnpm install --save-dev dotenv
.Para usar o contrato no navegador a forma mais simple eh adicionar a extensao metamask. Apos isto, importe suas chaves na metamask(criado no passo anterior) ou crie uma por la.
Use esse
hardhat.config.ts
que ele ja esta configurado para usar testnet da polygon e outras chains.Adicione a mumbai a sua wallet aqui https://chainlist.org/chain/80001
Se voce nao tiver tokens na wallet que vc estiver usando, precisamos adicionar fundos, no caso da polygon mumbai, adicione fundos aqui. https://faucet.polygon.technology/
Para deployar para a polygon testnet basta rodar agora com tudo configurado:
Guarde o endereco do contrato pois vamos usar ele na integracao com o front. No meu caso o endereco do contrato gerado foi: "0xe720699f67778FBF021B3a5C6C5092ea4e5c3087"
Agora vamos integrar o contrato ao front.
Crie o projeto com a stack typescript que melhor lhe convir. Recomendo react. Copie toda a pasta
typechain-types
para o seu sources pois vamos usar ele.Se voce estiver na pasta do
smartcontracts-tuto
acima, volte um nivel comcd ..
.Para criar um esqueleto com react, vc pode usar:
Agora copie o typechain-types da sua pasta
smartcontracts-tuto
para a nova pasta doreact-demo
recem criada dentro da subpastasrc
.Na pasta do react-demo, instale
@nomicfoundation/hardhat-toolbox
vianpm install --save @nomicfoundation/hardhat-toolbox
.Altere o
App.tsx
para chamar o greeter.E pronto basta voce editar seu contrato e usar ele como achar melhor no seu frontend.