U ovom članku ćete naučiti kako da napravite full stack dApps sa React-om, Ethers.js, Solidity-om i Hardhat-om.
Nedavno smo se pridružili Edge & Node-u kao inženjeri za odnose sa programerima i dublјe smo se bavili razvojem pametnih ugovora sa Ethereum-om. Odlučili smo se za ono što mislimo da je najbolјi skup za pravlјenje dApps full stack sa Solidity-om:
- Client Framework – React
- Razvojno okruženje Ethereum – Hardhat
- Ethereum web klijentska biblioteka – Ethers.js
- API sloj – The Graph Protocol
Ali naišli smo na problem dok smo sve ovo shvatili. Iako postoji prilično dobra dokumentacija za svaki od ovih alata pojedinačno, ne postoji mnogo toga što vam pomaže da ih sve spojite i razumete kako funkcionišu jedni sa drugima.
Postoje neki zaista dobri šabloni kao što je scaffold-eth (koji takođe uklјučuje Ethers, Hardhat i The Graph), ali oni će možda biti previše za lјude koji tek počinju.
Želeli smo sveobuhvatni vodič koji će nam pokazati kako da napravimo kompletne Ethereum aplikacije koristeći najsavremenije resurse, biblioteke i alate.
Evo šta nas je zanimalo:
- Kako da kreiramo, primenimo i testiramo Ethereum pametne ugovore na lokalnoj, testiranoj i glavnoj mreži
- Kako da se prebacujemo između lokalnog, testnog i proizvodnog okruženja/mreža
- Kako da se povežemo sa ugovorima i komuniciramo sa njima koristeći različita okruženja sa front end-a kao što su React, Vue, Svelte ili Angular
Nakon što smo proveli neko vreme da shvatimo sve ovo, konačno smo počeli sa stackom sa kojim smo se osećali zaista zadovolјno. Onda smo pomislili da bi bilo lepo da napišemo kako da napravimo i testiramo Ethereum aplikaciju sa full stackom koristeći ovaj stek.
Nadamo se da će ovaj vodič biti koristan ne samo za druge lјude koji bi mogli da budu zainteresovani za ovu grupu, već i za nas za buduću upotrebu. Ovo je ta referenca.
Tehnologija koju ćemo da koristimo
Hajde da pređemo na glavne delove koje ćemo da koristimo i kako se uklapaju u gomilu.
- Razvojno okruženje Ethereum-a
Kada pravite pametne ugovore, biće vam potreban način da primenite vaše ugovore, pokrenete testove i otklonite greške kod Solidity-a bez suočavanja sa živim okruženjima.
Takođe će vam trebati način da kompajlirate vaš Solidity kod u kod koji može da se pokrene u aplikaciji na strani klijenta – u našem slučaju, React aplikaciji. Naučićemo više o tome kako ovo funkcioniše malo kasnije.
Hardhat je Ethereum razvojno okruženje i okvir dizajniran za razvoj full stacka, i to je framework koji ćemo koristiti za ovaj vodič.
Drugi slični alati u ekosistemu su Ganache i Truffle.
- Ethereum web klijentska biblioteka
U našoj aplikaciji React biće nam potreban način za interakciju sa pametnim ugovorima koji su raspoređeni. Biće nam potreban način za čitanje podataka, kao i za slanje novih transakcija.
Ethers.js ima za cilј da bude kompletna i kompaktna biblioteka za interakciju sa Ethereum blockchainom i njegovim ekosistemom iz JavaScript aplikacija na strani klijenta kao što su React, Vue, Angular ili Svelte. To je biblioteka koju ćemo koristiti.
Još jedna popularna opcija u ekosistemu je web3.js
- Metamask
Metamask vam pomaže u upravlјanju nalogom i povezivanju trenutnog korisnika sa blockchainom. MetaMask omogućava korisnicima da upravlјaju njihovim nalozima i klјučevima na nekoliko različitih načina dok ih izoluju od konteksta sajta.
Kada korisnik poveže njegov MetaMask novčanik, vi kao programer možete da komunicirate sa globalno dostupnim Ethereum API-em (window.ethereum) koji identifikuje korisnike web3 kompatibilnih browzera (kao što su korisnici MetaMask-a). Kad god zatražite potpis transakcije, MetaMask će zatražiti od korisnika na razumlјiv način.
- React
React je front end JavaScript biblioteka za pravlјenje web aplikacija, korisničkih interfejsa i komponenti korisničkog interfejsa. Održavaju ga Facebook i mnogi pojedinačni programeri i kompanije.
React i njegov veliki ekosistem metaframeworks kao što su Next.js, Gatsby, Redwood, Blitz.js i drugi omogućavaju sve tipove cilјeva primene, uklјučujući tradicionalne SPA-ove, generatore statičkih sajtova, renderovanje na strani servera i kombinaciju sva tri.
React nastavlјa naizgled da dominira front-end prostorom, i mislimo da će to da nastavi da čini u bliskoj budućnosti, a možda i šire.
- The Graph
Za većinu aplikacija izgrađenih na blockchainovima kao što je Ethereum, teško je i dugotrajno je čitati podatke direktno iz lanca. Dakle, u prošlosti ste videli lјude i kompanije kako grade njihov sopstveni centralizovani server za indeksiranje i serviraju API zahteve sa tih servera. Ovo zahteva mnogo inženjerskih i hardverskih resursa i narušava bezbednosna svojstva potrebna za decentralizaciju.
The Graph je protokol za indeksiranje za upite blockchain podataka koji vam omogućava da kreirate potpuno decentralizovane aplikacije. Rešava ovaj problem otkrivanjem bogatog GraphQL sloja upita koji aplikacije mogu da koriste.
Šta ćemo da gradimo
U ovom vodiču ćemo da izgradimo, implementiramo i povežemo se sa nekoliko osnovnih pametnih ugovora:
- Ugovor za kreiranje i ažuriranje poruke na Ethereum blockchainu
- Ugovor o kovanju tokena, koji omogućava vlasniku ugovora da šalјe tokene drugima i čita stanje tokena, a omogućava vlasnicima novih tokena da ih šalјu i drugima.
Takođe ćemo da napravimo React front end koji će omogućiti korisniku da:
- Pročita pozdrav iz ugovora koji je raspoređen na blockchain
- Ažurira pozdrav
- Šalјe novoskovane tokene sa njihove adrese na drugu adresu
- Jednom kada neko primi tokene, dozvoli mu da takođe pošalјe njegove tokene nekom drugom
- Pročita stanje tokena iz ugovora koji je raspoređen u blockchainu
Preduslovi
- Node.js instaliran na vašoj lokalnoj mašini
- MetaMask Chrome proširenje instalirano u vašem browzeru
Ne morate da posedujete Ethereum za ovaj vodič jer ćemo koristiti lažni / testirati Ether na test mreži za ceo vodič.
Kako da počnete sa aplikacijom za kreiranje-reagovanje
Za početak, napravićemo novu React aplikaciju:
npx create-react-app react-dapp
Zatim pređite u novi direktorijum i instalirajte ethers.js i hardhat koristeći NPM ili Yarn:
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
Kako da instalirate i konfigurišete Ethereum razvojno okruženje
Zatim inicijalizujte novo razvojno okruženje Ethereum pomoću Hardhat-a:
npx hardhat
? What do you want to do? Create a sample project
? Hardhat project root: <Choose default path>
Sada bi trebalo da vidite sledeće artifakte kreirane za vas u vašem osnovnom direktorijumu:
- hardhat.config.js – Celokupna vaša Hardhat podešavanja (tj. vaša konfiguracija, dodaci i prilagođeni zadaci) se nalaze u ovoj datoteci.
- scripts – fascikla koja sadrži skriptu pod nazivom sample-script.js koja će primeniti vaš pametni ugovor kada se izvrši
- test – folder koji sadrži primer skripte za testiranje
- contracts – fascikla koja sadrži primer Ethereum pametnog ugovora
Zbog problema sa MetaMask konfiguracijom, moramo da ažuriramo ID lanca na našoj HardHat konfiguraciji na 1337. Takođe moramo da ažuriramo lokaciju artifakata za naše sastavlјene ugovore tako da budu u src direktorijumu naše React aplikacije.
Da biste izvršili ove ispravke, otvorite hardhat.config.js i ažurirajte module.exports da izgleda ovako:
module.exports = {
solidity: „0.8.3“,
paths: {
artifacts: ‘./src/artifacts’,
},
networks: {
hardhat: {
chainId: 1337
}
}
};
Naš pametni ugovor
Zatim, pogledajmo primer ugovora koji imamo na contracts/Greeter.sol :
//SPDX-License-Identifier: MIT
pragma solidity ^0.7.0;
import „hardhat/console.sol“;
contract Greeter {
string greeting;
constructor(string memory _greeting) {
console.log(„Deploying a Greeter with greeting:“, _greeting);
greeting = _greeting;
}
function greet() public view returns (string memory) {
return greeting;
}
function setGreeting(string memory _greeting) public {
console.log(„Changing greeting from ‘%s’ to ‘%s'“, greeting, _greeting);
greeting = _greeting;
}
}
Ovo je veoma osnovni pametni ugovor. Kada se primeni, postavlјa Greeting promenlјivu i izlaže funkciju (greet) koja može da se pozove da vrati pozdrav.
Takođe izlaže funkciju koja omogućava korisniku da ažurira pozdrav (setGreeting). Kada se primene na Ethereum blockchain, ove metode će biti dostupne korisniku za interakciju.
Hajde da napravimo jednu malu modifikaciju pametnog ugovora. Pošto smo postavili Solidity verziju našeg kompajlera na 0.8.3 u hardhat.config.js, hajde da takođe budemo sigurni da ažuriramo naš ugovor da koristimo istu verziju Solidity:
// contracts/Greeter.sol
pragma solidity ^0.8.3;
Kako da čitatei i pišete u Ethereum Blockchain-u
Postoje dva načina za interakciju sa pametnim ugovorom – čitanje ili pisanje/transakcije. U našem ugovoru, greet može da se smatra čitanjem, a setGreeting može da se smatra pisanjem/transakcionim.
Kada pišete ili inicijalizujete transakciju, morate da platite da bi transakcija bila zapisana u blockchain. Da bi ovo funkcionisalo, potrebno je da platite gas, što je naknada ili cena potrebna za uspešno sprovođenje transakcije i izvršenje ugovora na Ethereum blockchainu.
Sve dok samo čitate sa blockchaina i ništa ne menjate ili ažurirate, ne morate da izvršite transakciju i neće biti gasa ili troškova da to uradite. Funkciju koju pozivate tada obavlјa samo čvor na koji ste povezani, tako da ne morate da plaćate nikakav gas i čitanje je besplatno.
Iz naše React aplikacije, mi ćemo da komuniciramo sa pametnim ugovorom koristeći kombinaciju biblioteke ethers.js, adrese ugovora i ABI-a koji će Hardhat da kreira iz ugovora.
Šta je ABI? ABI je skraćenica za binarni interfejs aplikacije. Možete da ga zamislite kao interfejs između vaše aplikacije na strani klijenta i Ethereum blockchaina gde se primenjuje pametni ugovor sa kojim ćete da komunicirate.
ABI se obično sastavlјaju iz Solidity pametnih ugovora pomoću razvojnog frameworka kao što je Hardhat. Takođe često možete da pronađete ABI za pametni ugovor na Etherscan-u
Kako da sastavite ABI
Sada kada smo prešli preko osnovnog pametnog ugovora i znamo šta su ABI, hajde da sastavimo ABI za naš projekat.
Da biste to uradili, idite na komandnu liniju i pokrenite sledeću komandu:
npk hardhat kompajlirati
Sada bi trebalo da vidite novu fasciklu pod nazivom artefakti u src direktorijumu. Datoteka artefacts/contracts/Greeter.json sadrži ABI kao jedno od svojstava. Kada treba da koristimo ABI, možemo da ga uvezemo iz naše JavaScript datoteke:
import Greeter from ‘./artifacts/contracts/Greeter.sol/Greeter.json’
Zatim možemo da referencujemo ABI ovako:
console.log(„Greeter ABI: „, Greeter.abi)
Kako da primenite i koristite lokalnu mrežu / blockchain
Zatim, hajde da primenimo naš pametni ugovor na lokalni blockchain kako bismo mogli da ga testiramo.
Da biste ga primenili na lokalnu mrežu, prvo morate da pokrenete lokalni test čvor. Da biste to uradili, otvorite CLI i pokrenite sledeću komandu:
npx hardhat node
Kada pokrenemo ovu komandu, trebalo bi da vidite listu adresa i privatnih klјučeva.
Ovo je 20 probnih naloga i adresa kreiranih za nas koje možemo da koristimo za primenu i testiranje naših pametnih ugovora. Svaki nalog je takođe napunjen sa 10.000 lažnih Ether-a. Za trenutak ćemo naučiti kako da uvezemo probni nalog u MetaMask da bismo mogli da ga koristimo.
Zatim moramo da rasporedimo ugovor na testnu mrežu. Prvo ažurirajte ime scripts/sample-script.js to scripts/deploy.js.
Sada možemo da pokrenemo skriptu za postavlјanje i damo zastavicu CLI-u da bismo želeli da primenimo na našoj lokalnoj mreži:
npx hardhat run scripts/deploy.js –network localhost
Kada se ova skripta izvrši, pametni ugovor bi trebalo da se primeni na lokalnu testnu mrežu i onda bismo mogli da počnemo da komuniciramo sa njime.
Kada je ugovor raspoređen, koristio je prvi nalog koji je napravlјen kada smo pokrenuli lokalnu mrežu.
Ako pogledate izlaz iz CLI-a, trebalo bi da vidite nešto ovako:
Greeter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0
Ova adresa je ono što ćemo da koristimo u našoj klijentskoj aplikaciji za razgovor sa pametnim ugovorom. Neka ova adresa bude dostupna jer ćemo morati da je da koristimo kada se povezujemo na nju iz klijentske aplikacije.
Da bismo poslali transakcije na pametni ugovor, moraćemo da povežemo naš MetaMask novčanik pomoću jednog od naloga kreiranih kada smo pokrenuli npx hardhat node. Na listi ugovora od kojih se CLI odjavlјuje, trebalo bi da vidite i Account number kao i Private
Key:
➜ react-defi-stack git:(main) npx hardhat node
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/
Accounts
========
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
…
Možemo da uvezemo ovaj nalog u MetaMask da bismo počeli da koristimo neki od lažnih Eth koji su tamo dostupni. Da biste to uradili, prvo otvorite MetaMask i ažurirajte mrežu da bude Localhost 8545:
Zatim u MetaMask kliknite na Import Account iz menija naloga:
Kopirajte, a zatim nalepite jedan od Private Keys sa kojih je CLI odjavlјen i kliknite na Import. Kada se nalog uveze, trebalo bi da vidite Eth na nalogu:
Sada kada smo primenili naš pametni ugovor i postavili nalog, možemo da počnemo da komuniciramo sa njim iz React aplikacije.
Kako da povežete React Client
U ovom tutorijalu nećemo se brinuti o izgradnji prelepog korisničkog interfejsa sa CSS-om i sve to – fokusirani smo 100% na osnovnu funkcionalnost da bismo vas pokrenuli. Odatle, možete da ga uzmete i učinite da izgleda dobro ako želite.
Uz to, hajde da razmotrimo dva cilјa koja želimo od naše React aplikacije:
- Preuzmite trenutnu vrednost greeting iz pametnog ugovora
- Dozvolite korisniku da ažurira greeting vrednost
Pa kako da ovo postignemo? Evo stvari koje treba da uradimo da bi se ovo desilo:
- Napravite polјe za unos i neko lokalno stanje da biste upravlјali vrednošću unosa (da biste ažurirali greeting)
- Dozvolite aplikaciji da se poveže sa MetaMask nalogom korisnika radi potpisivanja transakcija
- Kreirajte funkcije za čitanje i pisanje u pametni ugovor
Da biste to uradili, otvorite src/App.js i ažurirajte ga sledećim kodom, postavlјajući vrednost greeterAddress na adresu vašeg pametnog ugovora:
import ‘./App.css’;
import { useState } from ‘react’;
import { ethers } from ‘ethers’
import Greeter from ‘./artifacts/contracts/Greeter.sol/Greeter.json’
// Update with the contract address logged out to the CLI when it was deployed
const greeterAddress = „your-contract-address“
function App() {
// store greeting in local state
const [greeting, setGreetingValue] = useState()
// request access to the user’s MetaMask account
async function requestAccount() {
await window.ethereum.request({ method: ‘eth_requestAccounts’ });
}
// call the smart contract, read the current greeting value
async function fetchGreeting() {
if (typeof window.ethereum !== ‘undefined’) {
const provider = new ethers.providers.Web3Provider(window.ethereum)
const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
try {
const data = await contract.greet()
console.log(‘data: ‘, data)
} catch (err) {
console.log(„Error: „, err)
}
}
}
// call the smart contract, send an update
async function setGreeting() {
if (!greeting) return
if (typeof window.ethereum !== ‘undefined’) {
await requestAccount()
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner()
const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
const transaction = await contract.setGreeting(greeting)
await transaction.wait()
fetchGreeting()
}
}
return (
<div className=“App“>
<header className=“App-header“>
<button onClick={fetchGreeting}>Fetch Greeting</button>
<button onClick={setGreeting}>Set Greeting</button>
<input onChange={e => setGreetingValue(e.target.value)} placeholder=“Set greeting“ />
</header>
</div>
);
}
export default App;
Da biste to testirali, pokrenite React server:
npm start
Kada se aplikacija učita, trebalo bi da budete u mogućnosti da preuzmete trenutni pozdrav i da ga odjavite na konzoli. Takođe bi trebalo da budete u mogućnosti da ažurirate pozdrav tako što ćete potpisati ugovor sa vašim MetaMask novčanikom i potrošiti lažni Ether.
Kako da primenite i koristite mrežu za testiranje uživo
Kako da primenite i koristite mrežu za testiranje uživoPostoji nekoliko mreža za testiranje Ethereum-a kao što su Ropsten, Rinkeby ili Kovan na koje takođe možemo da primenimo kako bi bila dostupna javno dostupna verzija našeg ugovora bez potrebe da je postavlјamo na mainnet.
U ovom vodiču ćemo primeniti Ropsten testnu mrežu.
Da biste započeli, prvo ažurirajte vaš MetaMask novčanik da biste se povezali na Ropsten mrežu.
Zatim pošalјite sebi testni Etger koji ćete koristiti tokom ostatka ovog uputstva tako što ćete posetiti ovu testnu slavinu.
Možemo da dobijemo pristup Ropsten-u (ili bilo kojoj od drugih testnih mreža) tako što ćemo se prijaviti na servis kao što je Infura ili Alchemy (koristimo Infura za ovaj vodič).
Kada napravite aplikaciju u Infura-i ili Alchemy-iji, dobićete krajnju tačku koja izgleda otprilike ovako:
https://ropsten.infura.io/v3/your-project-id
Obavezno podesite ALLOWLIST ETHEREUM ADDRESSES u konfiguraciji Infura ili Alchemy aplikacije da biste uklјučili adresu novčanika naloga sa kojeg ćete da implementirate.
Da bismo se postavili na testnu mrežu, moramo da ažuriramo našu Hardhat konfiguraciju sa nekim dodatnim informacijama o mreži. Jedna od stvari koje treba da postavimo je privatni klјuč novčanika iz kojeg ćemo da implementiramo.
Da biste dobili privatni klјuč, možete da ga izvezete iz MetaMask-a.
Predlažemo da ovu vrednost ne hardcodujete u vašu aplikaciju, već da je postavite kao nešto poput promenlјive okruženja.
Zatim dodajte networks svojstvo sa sledećom konfiguracijom:
module.exports = {
defaultNetwork: „hardhat“,
paths: {
artifacts: ‘./src/artifacts’,
},
networks: {
hardhat: {},
ropsten: {
url: „https://ropsten.infura.io/v3/your-project-id“,
accounts: [`0x${your-private-key}`]
}
},
solidity: „0.7.3“,
};
Da biste primenili, pokrenite sledeću skriptu:
npx hardhat run scripts/deploy.js –network ropsten
Kada vaš ugovor bude raspoređen, trebalo bi da budete u mogućnosti da počnete da komunicirate sa njime. Sada bi trebalo da budete u mogućnosti da vidite ugovor uživo na Etherscan Ropsten Testnet Explorer-u
Kako da kujete tokene
Jedan od najčešćih slučajeva upotrebe pametnih ugovora je kreiranje tokena. Hajde da pogledamo kako to možemo da uradimo. Pošto znamo malo više o tome kako sve ovo funkcioniše, ići ćemo malo brže.
U glavnom contracts direktorijumu kreirajte novu datoteku pod nazivom Token.sol .
Zatim ažurirajte Token.sol sledećim pametnim ugovorom:
//SPDX-License-Identifier: MIT
pragma solidity ^0.8.3;
import „hardhat/console.sol“;
contract Token {
string public name = „Nader Dabit Token“;
string public symbol = „NDT“;
uint public totalSupply = 1000000;
mapping(address => uint) balances;
constructor() {
balances[msg.sender] = totalSupply;
}
function transfer(address to, uint amount) external {
require(balances[msg.sender] >= amount, „Not enough tokens“);
balances[msg.sender] -= amount;
balances[to] += amount;
}
function balanceOf(address account) external view returns (uint) {
return balances[account];
}
}
Imajte na umu da je ovaj ugovor o tokenima samo u demo svrhe i da nije usklađen sa ERC20. Kasnije ćemo pokriti ERC20 tokene.
Ovaj ugovor će kreirati novi token pod nazivom „Nader Dabit Token“ i postaviti snabdevanje na 1000000.
Zatim sastavite ovaj ugovor:
npx hardhat compile
Sada ažurirajte skriptu za postavlјanje na scripts/deploy.js da biste uklјučili ovaj novi token ugovor:
const hre = require(„hardhat“);
async function main() {
const [deployer] = await hre.ethers.getSigners();
console.log(
„Deploying contracts with the account:“,
deployer.address
);
const Greeter = await hre.ethers.getContractFactory(„Greeter“);
const greeter = await Greeter.deploy(„Hello, World!“);
const Token = await hre.ethers.getContractFactory(„Token“);
const token = await Token.deploy();
await greeter.deployed();
await token.deployed();
console.log(„Greeter deployed to:“, greeter.address);
console.log(„Token deployed to:“, token.address);
}
main()
.then(() => process.exit(0))
.catch(error => {
console.error(error);
process.exit(1);
});
Sada možemo da primenimo ovaj novi ugovor na lokalnu ili Ropsten mrežu:
npx hardhat run scripts/deploy.js –network localhost
Kada se ugovor primeni, možete početi da šalјete ove tokene na druge adrese.
Da bismo to uradili, ažurirajmo klijentski kod koji će nam trebati da bi ovo funkcionisalo:
import ‘./App.css’;
import { useState } from ‘react’;
import { ethers } from ‘ethers’
import Greeter from ‘./artifacts/contracts/Greeter.sol/Greeter.json’
import Token from ‘./artifacts/contracts/Token.sol/Token.json’
const greeterAddress = „your-contract-address“
const tokenAddress = „your-contract-address“
function App() {
const [greeting, setGreetingValue] = useState()
const [userAccount, setUserAccount] = useState()
const [amount, setAmount] = useState()
async function requestAccount() {
await window.ethereum.request({ method: ‘eth_requestAccounts’ });
}
async function fetchGreeting() {
if (typeof window.ethereum !== ‘undefined’) {
const provider = new ethers.providers.Web3Provider(window.ethereum)
console.log({ provider })
const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
try {
const data = await contract.greet()
console.log(‘data: ‘, data)
} catch (err) {
console.log(„Error: „, err)
}
}
}
async function getBalance() {
if (typeof window.ethereum !== ‘undefined’) {
const [account] = await window.ethereum.request({ method: ‘eth_requestAccounts’ })
const provider = new ethers.providers.Web3Provider(window.ethereum);
const contract = new ethers.Contract(tokenAddress, Token.abi, provider)
const balance = await contract.balanceOf(account);
console.log(„Balance: „, balance.toString());
}
}
async function setGreeting() {
if (!greeting) return
if (typeof window.ethereum !== ‘undefined’) {
await requestAccount()
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log({ provider })
const signer = provider.getSigner()
const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
const transaction = await contract.setGreeting(greeting)
await transaction.wait()
fetchGreeting()
}
}
async function sendCoins() {
if (typeof window.ethereum !== ‘undefined’) {
await requestAccount()
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(tokenAddress, Token.abi, signer);
const transation = await contract.transfer(userAccount, amount);
await transation.wait();
console.log(`${amount} Coins successfully sent to ${userAccount}`);
}
}
return (
<div className=“App“>
<header className=“App-header“>
<button onClick={fetchGreeting}>Fetch Greeting</button>
<button onClick={setGreeting}>Set Greeting</button>
<input onChange={e => setGreetingValue(e.target.value)} placeholder=“Set greeting“ />
<br />
<button onClick={getBalance}>Get Balance</button>
<button onClick={sendCoins}>Send Coins</button>
<input onChange={e => setUserAccount(e.target.value)} placeholder=“Account ID“ />
<input onChange={e => setAmount(e.target.value)} placeholder=“Amount“ />
</header>
</div>
);
}
export default App;
Zatim pokrenite aplikaciju:
npm start
Trebalo bi da budemo u mogućnosti da kliknemo na Get Balance i vidimo da imamo 1.000.000 coina na našem nalogu koji je odjavlјen na konzoli.
Takođe biste trebali da budeteu mogućnosti da ih vidite u MetaMask klikom na Add Token:
Zatim kliknite na Custom Token i unesite adresu ugovora o tokenu, a zatim Add Token. Sada bi tokeni trebali da budu dostupni u vašem novčaniku:
Zatim, pokušajmo da te coine pošalјemo na drugu adresu.
Da biste to uradili, kopirajte adresu drugog naloga i pošalјite ih na tu adresu koristeći ažurirani React korisnički interfejs. Kada proverite iznos tokena, on bi trebalo da bude jednak
originalnom iznosu umanjenom za iznos koji ste poslali na adresu.
Kako da napravite ERC20 token
Standard ERC20 tokena definiše skup pravila koja se primenjuju na sve ERC20 tokene koja im omogućavaju laku interakciju jednih sa drugima. ERC20 olakšava nekome da kuje njegove sopstvene tokene koji će imati interoperabilnost sa drugima na Ethereum blockchainu.
Hajde da pogledamo kako možemo da napravimo naš sopstveni token koristeći ERC20 standard.
Prvo, instalirajte OpenZepplin biblioteku pametnih ugovora u koju ćemo uvoziti osnovni ERC20 token:
npm install @openzeppelin/contracts
Zatim ćemo da kreiramo naš token ekstenzijom (ili nasleđivanjem) ERC20 ugovora:
//SPDX-License-Identifier: MIT
pragma solidity ^0.8.3;
import „@openzeppelin/contracts/token/ERC20/ERC20.sol“;
contract NDToken is ERC20 {
constructor(string memory name, string memory symbol) ERC20(name, symbol) {
_mint(msg.sender, 100000 * (10 ** 18));
}
}
Konstruktor vam omogućava da postavite naziv tokena i simbol, a _mint funkcija vam omogućava da kujete tokene i podesite iznos.
Pod podrazumevano postavlјa broj decimala na 18, tako da u našoj _mint funkciji množimo 100.000 sa 10 na stepen 18 da bismo iskovali ukupno 100.000 tokena, svaki sa 18 decimalnih mesta (slično kako se 1 Eth sastoji od 10 do 18. wei.
Da bismo to primenili, moramo da prosledimo vrednosti konstruktora (name i symbol), tako da bismo mogli da uradimo nešto poput ovoga u našoj skripti za primenu:
const NDToken = await hre.ethers.getContractFactory(„NDToken“);
const ndToken = await NDToken.deploy(„Nader Dabit Token“, „NDT“);
Ekstedovanjem originalnog ERC20 tokena, vaš token će naslediti sve sledeće funkcije i funkcionalnost:
function name() public view returns (string)
function symbol() public view returns (string)
function decimals() public view returns (uint8)
function totalSupply() public view returns (uint256)
function balanceOf(address _owner) public view returns (uint256 balance)
function transfer(address _to, uint256 _value) public returns (bool success)
function transferFrom(address _from, address _to, uint256 _value) public returns (bool success)
function approve(address _spender, uint256 _value) public returns (bool success)
function allowance(address _owner, address _spender) public view returns (uint256 remaining)
Kada se primeni, možete da koristite bilo koju od ovih funkcija za interakciju sa novim pametnim ugovorom. Za još jedan primer ERC20 tokena, pogledajte Solidity by example ovde: https://solidity-by-example.org/app/erc20/ .
Zaklјučak
U redu, mnogo toga smo pokrili u ovom članku. Ali za nas je ovo neka vrsta osnove / srži za početak rada sa ovim stackom.
To je nekako ono što smo želeli da imamo, ne samo kao neko ko uči sve ove stvari, već i u budućnosti ako ikada budemo imali potrebu da referencujemo bilo šta što može da nam zatreba. Nadamo se da ste naučili mnogo.
Ako želite da podržite više novčanika pored MetaMask-a, pogledajte Web3Modal koji olakšava implementaciju podrške za više provajdera u vašoj aplikaciji sa prilično jednostavnom i prilagodlјivom konfiguracijom.
