Skip to content
Gallery
blockchain
timeline of technology
web 3.0
elements of computing
cryptography
DLT
fabric network
web3dev
money definition...
More
Share
Explore
bootcamp 1 - solidity

configurando cliente = site

⁠
https://github.com/w3b3d3v/projeto-tchauzinho
⁠
⁠

repositório no replit

⁠
https://replit.com/@DanielCukier/projeto-tchauzinho?v=1
⁠
⁠
fork and run
⁠
https://www.loom.com/share/4578eb9fba1243499a6913d214b21dc3
⁠
⁠
no rplit arquivos javascript tem a extensão jsx
⁠
image.png
⁠
⁠

deploy na blockchain ethereum

quando chamamos wave e ele faz totalWaves += 1, isso é uma transação!
o deploy de um contrato inteligente também é uma transação.
a (ethereum) blockchain não tem dono.
é um monte de computadores ao redor do mundo administrados por mineradores
quando implantamos nosso contrato, precisamos contar a todos mineradores
e pedir que ele seja adicionado à blockchain
o Alchemy transmite a transação criação de contrato para que possa ser coletada por mineradores
depois que a transação é minerada, ela é transmitida para a blockchain como uma transação legítima. daí todos atualizam sua cópia da blockchain.
⁠
https://www.loom.com/share/35aabe54c3294ef88145a03c311f1933
⁠
⁠
criar conta no alchemy
criar app
chain = ethereum
network = rinkeby → rede de teste, roda transações com fake ETH! haha
copiar HTTP key
colar no hardhat config

obtendo fake ETH em uma torneira (faucet)

certifique-se de que sua carteira MetaMask está definida como "Rinkeby Test Network"
antes de usar a faucet.
name
link
amount
time
1
MyCrypto
https://app.mycrypto.com/faucet
0.01
none
2
Buildspace
https://buildspace-faucet.vercel.app/
25
1day
3
Ethily
https://ethily.io/rinkeby-faucet/
0.2
1second
4
Rinkeby Oficial
https://faucet.rinkeby.io/
3 / 7.5 / 18.75
8h / 1d / 3d
5
Chainlink
https://faucets.chain.link/rinkeby
0.1
none
There are no rows in this table
⁠

alterando o arquivo hardhat.config.js

require("@nomiclabs/hardhat-waffle");

module.exports = {
solidity: "0.8.0",
networks: {
rinkeby: {
//PRIVATE!!! DO NOT DISCLOSE PRIVATE INFO!!!
url: "YOUR_ALCHEMY_API_URL",
//PRIVATE!!! DO NOT DISCLOSE PRIVATE INFO!!!
accounts: ["YOUR_PRIVATE_RINKEBY_ACCOUNT_KEY"],
},
},
};

deploy na rede de teste

npx hardhat run scripts/deploy.js --network rinkeby
⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠

WavePortal address = contract address na rede de teste rinkeby

0x1E2F345E79548eC134F6b088ac32d76fD065ad39
0x811bD8E8BaE351f9b4c666AA341b1f750c9406D5
⁠
https://rinkeby.etherscan.io/
⁠
⁠
⁠
image.png
⁠
⁠

conectando site a carteira pra ele poder chamar o smart contract

replit > src > App.jsx (código adicionado / alterado)

import React, { useEffect } from "react";
import { ethers } from "ethers";
import './App.css';

export default function App() {

const checkIfWalletIsConnected = () => {
//temos acesso ao objeto window.ethereum?
const { ethereum } = window;

if (!ethereum) {
console.log("verifique se a Metamask está instalada!");
return;
} else {
//sucesso!!!
console.log("temos o objeto ethereum!", ethereum);
}
}

useEffect(() => {
checkIfWalletIsConnected();
}, [])

const wave = () => {
}

return (
<div className="mainContainer">

<div className="dataContainer">
<div className="header">
👋 hello
</div>

<div className="bio">
eu sou a tati e resolvi voltar a programar!
</div>
<div className="bio">
não sei fazer nada ainda!
</div>
<div className="bio">
esse código é todo do danicuki :p
</div>
<div className="bio">
mas... que tal conectar sua carteira ethereum e me mandar um abraço?!?
</div>
<button className="waveButton" onClick={wave}>
send me a hug 🌟
</button>
</div>
</div>
);
}
replit → run
abra site em nova tab
⁠
https://web3dev-hug.thaisfelipelli.repl.co/
⁠
⁠
inspect / console
deve aparecer a mensagem "temos o objeto ethereum!"

verificar se estamos "conectados"

usamos o método eth_accounts para checar se estamos autorizados a acessar
alguma das contas na carteira do usuário.
o usuário pode ter várias contas em sua carteira.
pegamos a primeira.
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import './App.css';

export default function App() {

//variável de estado para armazenar carteira pública do usuário
const [currentAccount, setCurrentAccount] = useState("");

const checkIfWalletIsConnected = async () => {
try {
//temos acesso ao objeto window.ethereum?
const { ethereum } = window;

if (!ethereum) {
console.log("verifique se a Metamask está instalada!");
return;
} else {
console.log("temos o objeto ethereum", ethereum);
}

//estamos autorizados a acessar a carteira do cliente?
const accounts = await ethereum.request({ method: "eth_accounts" });

if (accounts.length !== 0) {
const account = accounts[0];
console.log("conta autorizada:", account);
setCurrentAccount(account)
} else {
console.log("não encontramos nenhuma conta autorizada...")
}
} catch (error) {
console.log(error);
}
}

useEffect(() => {
checkIfWalletIsConnected();
}, [])

const wave = () => {
}

return (
<div className="mainContainer">

<div className="dataContainer">
<div className="header">
👋 hello
</div>

<div className="bio">
eu sou a tati e resolvi voltar a programar!
</div>
<div className="bio">
não sei fazer nada ainda!
</div>
<div className="bio">
esse código é todo do danicuki :p
</div>
<div className="bio">
mas... que tal conectar sua carteira ethereum e me mandar um abraço?!?
</div>
<button className="waveButton" onClick={wave}>
send me a hug 🌟
</button>
</div>
</div>
);
}

botão para conectar carteira

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import './App.css';

export default function App() {
//variável de estado para armazenar carteira pública do usuário
const [currentAccount, setCurrentAccount] = useState("");

const checkIfWalletIsConnected = async () => {
try {
//temos acesso ao objeto window.ethereum?
const { ethereum } = window;

if (!ethereum) {
console.log("verifique se a Metamask está instalada!");
return;
} else {
console.log("temos o objeto ethereum", ethereum);
}
//estamos autorizados a acessar a carteira do cliente?
const accounts = await ethereum.request({ method: "eth_accounts" });

if (accounts.length !== 0) {
const account = accounts[0];
console.log("conta autorizada:", account);
setCurrentAccount(account)
} else {
console.log("não encontramos nenhuma conta autorizada...")
}
} catch (error) {
console.log(error);
}
}

//método connectWallet
const connectWallet = async () => {
try {
const { ethereum } = window;

if (!ethereum) {
alert("metamask encontrada!");
return;
}
//pedindo à Metamask para dar acesso à carteira do usuário
const accounts = await ethereum.request({ method: "eth_requestAccounts" });

console.log("conectados!", accounts[0]);
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error)
}
}

useEffect(() => {
checkIfWalletIsConnected();
}, [])

const wave = () => {
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.