Hogyan lehet adatokat letölteni és frissíteni az Ethereumból a React és az SWR segítségével

blog 1NewsDevelopersEnterpriseBlockchain ExplainedEvents and ConferencesPressHírlevelek

Iratkozzon fel hírlevelünkre.

Email cím

Tiszteletben tartjuk a magánéletét

HomeBlogBlockchain fejlesztés

Hogyan lehet adatokat letölteni és frissíteni az Ethereumból a React és az SWR segítségével

Így konfigurálhatja a dapp kezelőfelületét, hogy a token egyenlegek és az átutalások frissüljenek a felhasználók Ethereum pénztárcáiban. – írta Lorenzo Sicilia 2020. június 18-án. Feladva 2020. június 18-án.

adatokat lehívni az ethereum hősével

Az Ethereum lehetővé teszi számunkra a decentralizált alkalmazások (dapps) felépítését. A fő különbség egy tipikus alkalmazás és egy dapp között az, hogy nincs szükség háttérprogram telepítésére – legalábbis addig, amíg kihasználja az Ethereum mainneten telepített többi intelligens szerződés előnyeit.

Emiatt a frontend játszik nagy szerepet. Feladata az intelligens szerződések adatainak összegyűjtése és feloldása, a pénztárcával (hardver vagy szoftver) történő interakciók kezelése és a szokásos módon az UX kezelése. Nem csak az, hogy a dapp JSON-RPC hívásokat használ, és meg tudja nyitni a socket kapcsolatot a frissítések fogadásához.

Mint láthatja, néhány dolgot kell hangszerelni, de ne aggódjon, az ökoszisztéma eléggé érlelődött az elmúlt hónapokban.

Előfeltételek

A bemutató során feltételezem, hogy már rendelkezik a következőkkel:

Pénztárca, amellyel csatlakozhat egy Geth csomóponthoz

A legegyszerűbb megközelítés az a MetaMask telepítése hogy használhassa Infura infrastruktúra a dobozból.

Néhány éter a fiókjában

Amikor az Ethereummal fejleszt, akkor határozottan azt tanácsolom, hogy váltson teszthálózatra, és használja az Ether tesztet. Ha tesztre van szüksége pénzeszközökre, használhat csapot, pl. https://faucet.rinkeby.io/


A React alapvető ismerete

Lépésről lépésre vezetlek, de feltételezem, hogy tudod, hogyan működik a React (beleértve a kampókat is). Ha valami ismeretlennek tűnik, forduljon a Reagáljon a dokumentációra.

Működő React játszótér

Ezt az oktatóanyagot gépírással írtam, de csak néhány dolog van beírva, így minimális változtatással használhatja, ahogy a Javascriptben is. használtam Parcel.js de nyugodtan használja Hozzon létre React alkalmazást vagy más webalkalmazás-csomagoló.

Csatlakozzon az Ethereum Mainnet-hez

Miután elkészült a MetaMask, használni fogjuk web3-reagál a hálózattal való interakció kezelésére. Ez egy nagyon praktikus horoghasználatot biztosít a Web3React számára, amely számos hasznos segédprogramot tartalmaz az Ethereummal való játékhoz.

fonal hozzáadása @ web3-react / core @ web3-react / injected-connector Kód nyelve: CSS (css)

Akkor szüksége van egy Szolgáltatóra. A Szolgáltató összekapcsolja az Ethereum blokkláncot, lekérdezések kiadására és aláírt állapotváltó tranzakciók küldésére.

A Web3Provider alkalmazást a következőtől fogjuk használni: Ether.js.

Úgy tűnik, hogy már van néhány könyvtár, de amikor kapcsolatba lép az Ethereummal, le kell fordítania a Javascript adattípusokat a Solidity típusokra. És akkor is alá kell írnia a tranzakciókat, amikor műveletet szeretne végrehajtani. Az Ether.js elegánsan biztosítja ezeket a funkciókat.

fonal add @ ethersproject / szolgáltatók Kód nyelve: CSS (css)

értesítés: a fenti Ether.js csomag a jelenleg használt v5 béta.

Ezt követően készen állunk arra, hogy feljegyezzünk egy minimális hello világot, hogy ellenőrizzük, megvan-e minden, amire szükségünk van:

import React from ‘react’ import {Web3ReactProvider} from ‘@ web3-react / core’ import {Web3Provider} from ‘@ ethersproject / szolgáltatók’ import {useWeb3React} from ‘@ web3-react / core’ import {InjectedConnector} from @ web3-react / injected-connector ‘export const injectedConnector = new InjectedConnector ({támogatottChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) függvény getLibrary (szolgáltató: bármilyen): Web3Provider {const könyvtár = új Web3Provider (szolgáltató) library.pollingInterval = 12000 visszatérési könyvtár} export const Wallet = () => {const {chainId, fiók, aktiválás, aktív} = useWeb3React () const onClick = () => {aktiválja (injectedConnector)} return ( <div> <div>ChainId: {chainId} div> <div>Fiók: {account} div> {aktív? ( <div>✅ div> ): ( <gomb típusa ="gomb" onClick = {onClick}> Csatlakozás gomb> }} div> )} export const App = () => { Visszatérés ( <Web3ReactProvider getLibrary = {getLibrary}> <Pénztárca /> Web3ReactProvider> }} Kód nyelve: JavaScript (javascript)

Ha megcsinálta a házi feladatát, akkor valami ilyesmi kell:

Befecskendezett csatlakozó.

Itt, amit eddig tettünk: GIT – 1. lépés

Hogyan lehet adatokat letölteni a mainnetből

használni fogom SWR az adatletöltés kezelésére.

Ezt szeretném elérni.

const {data: balance} = useSWR (["getBalance", számla, "legújabb"]) Kód nyelve: JavaScript (javascript)

Nagyon klassz &# 128578;

Bemutatjuk a trükköt! Az SWR a Stale-While-Revalidate nevű HTTP-gyorsítótár érvénytelenítési stratégiát jelenti RFC 5861.

Az SWR először visszaküldi az adatokat a gyorsítótárból (elavult), majd elküldi a lekérési kérelmet (újbóli érvényesítés), végül megint érkezik a naprakész adatokkal.

Az SWR elfogad egy kulcsot, és a kulisszák mögött sikerül megoldani

Ehhez az SWR lehetővé teszi egy olyan beolvasó átadását, amely képes megoldani a kulcsot egy ígéret visszaadásával. Az SWR hello világa a REST API kérelmeken alapszik, egy fetcherrel, amely a fetch API-n vagy az Axioson alapszik.

Ami az SWR-t illeti, az az, hogy a letöltő létrehozásának egyetlen követelménye az, hogy ígéretet kell adnia.

Tehát itt van az első megvalósításom az Ethereum számára:

const fetcher = (könyvtár) => (… érvel) => {const [method, … params] = args console.log (method, params) return library [method] (… params)} Kód nyelve: JavaScript (javascript)

Amint láthatja, részben alkalmazott funkció. Így be tudom injekciózni a könyvtárat (a Web3Provider-t), amikor konfigurálom a beolvasót. Később, valahányszor megváltozik egy kulcs, a funkció megoldható a szükséges ígéret visszaadásával.

Most létrehozhatom az alkatrészemet

export konst egyenleg = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } Visszatérés <div>Egyenleg: {balance.toString ()} div> } Kód nyelve: JavaScript (javascript)

A visszaküldött egyenleg objektum egy BigNumber.

Egyenleg komponens.

Mint látható, a szám nem formázott és rendkívül nagy. A Solidity ugyanis 256 bitig használja az egész számot.

A szám ember által olvasható formátumban történő megjelenítéséhez a megoldás az Ether.js segédprogramok egyik fent említett segédprogramját használja: formatEther (egyensúly)

fonal install @ ethersproject / units Kód nyelve: CSS (css)

Most, hogy átdolgozhatom az alkotóelemet, hogy a BitInt-et ember által olvasható formában kezelje és formázza:

export konst egyenleg = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } Visszatérés <div>Par {parseFloat (formatEther (egyensúly)). ToPrecision (4)} div> } Kód nyelve: JavaScript (javascript) BitInt ember által olvasható formában.

ezt tettük eddig: GIT 2. lépés

Az adatok valós idejű frissítése

Az SWR mutációs függvényt tár fel a belső gyorsítótár frissítésére.

const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) const onClick = () => {mutate (new BigNumber (10), false)} Kód nyelve: JavaScript (javascript)

A mutációs függvény automatikusan kapcsolódik ahhoz a kulcshoz (pl. [‘GetBalance’, account, ‘latest’], amelyből létrehozták. Két paramétert fogad el. Az új adatokat és ha érvényesítést kell elindítani. Ha kell, akkor SWR automatikusan a letöltő segítségével frissíti a gyorsítótárat &# 128165;

Ahogy az várható volt, a Solidity események apró absztrakciót adnak az EVM naplózási funkcióin felül. Az alkalmazások előfizethetnek és meghallgathatják ezeket az eseményeket az Ethereum kliens RPC felületén keresztül.

Az Ether.js egyszerű API-val rendelkezik az eseményre való feliratkozáshoz:

const {account, library} = useWeb3React () library.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) Kód nyelve: JavaScript (javascript)

Most egyesítsük mindkét megközelítést az új komponensben

export konst egyenleg = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) useEffect (() => {// hallgassa meg a változásokat egy Ethereum cím console.log (“blokkokra figyelve …”) library.on (‘block’, () => {console.log (‘update balance …’) mutate (undefined, true)}) // figyelő eltávolítása, ha az összetevő nincs csatlakoztatva return () => {library.removeAllListeners (‘block’)} // csak a komponens felépítésénél váltja ki a hatást}, []) if (! balance) {return <div>…div> } Visszatérés <div>Par {parseFloat (formatEther (egyensúly)). ToPrecision (4)} div> } Kód nyelve: JavaScript (javascript)

Kezdetben az SWR lekéri a számlaegyenleget, majd minden alkalommal, amikor blokkeseményt kap, mutációval váltja ki az újratöltést.

figyelmeztetés: Mutációt használtunk (definiálatlan, igaz), mert az aktuális eseményből nem tudjuk lekérni a tényleges egyenleget, csak a mérleg újbóli behívását váltjuk ki.

Az alábbiakban bemutatunk egy gyors bemutatót két Ethereum pénztárcával, amelyek cserélnek némi ETH-t.

ETH-t cserélő két Ethereum pénztárca bemutatója.

Itt, amit eddig tettünk: GIT 3. lépés

Hogyan léphet kapcsolatba egy okos szerződéssel

Eddig bemutattuk az SWR használatának alapjait és azt, hogy miként lehet egy alaphívást kezdeményezni a Web3Provider segítségével. Fedezzük fel, hogyan léphetünk kapcsolatba egy okos szerződéssel.

Az Ether.js kezeli az intelligens szerződéses interakciókat a Solidity Compiler által létrehozott Contract Application Binary Interface (ABI) ABI segítségével..

A Contract Application Binary Interface (ABI) az Ethereum ökoszisztémában lévő szerződésekkel való interakció szokásos módja, mind a blokkláncon kívülről, mind a szerződés-szerződés interakcióra..

Például az alábbi egyszerű okos szerződés alapján:

pragma szilárdság ^ 0,5,0; szerződés teszt {konstruktor () public {b = hex"12345678901234567890123456789012"; } esemény Esemény (uint indexelt a, bájt32 b); Event2 esemény (uint indexelt a, byte32 b); függvény foo (uint a) public {emit Event (a, b); } bájt32 b; } Kód nyelve: JavaScript (javascript)

ez a generált ABI

[{ "típus": "esemény", "bemenetek": [{ "név": "a", "típus": "uint256", "indexelt": true}, { "név": "b", "típus": "bájtok32", "indexelt": hamis } ], "név": "Esemény" }, { "típus": "esemény", "bemenetek": [{ "név": "a", "típus": "uint256", "indexelt": true}, { "név": "b", "típus": "bájtok32", "indexelt": hamis } ], "név": "2. esemény" }, { "típus": "funkció", "bemenetek": [{ "név": "a", "típus": "uint256" }], "név": "foo", "kimenetek": []}] Kód nyelve: JSON / JSON Megjegyzésekkel (json)

Az ABI-k használatához egyszerűen átmásolhatjuk őket közvetlenül a kódjába, és importálhatjuk oda, ahol szükséges. Ebben a bemutatóban egy szabványt fogunk használni ERC20 ABI, mert két token egyenlegét szeretnénk lekérni: a DAI és az MKR.

A következő lépés az összetevő létrehozása

export const TokenBalance = ({szimbólum, cím, tizedesjegyek}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([cím, ‘balanceOf’, számla], {fetcher: fetcher (könyvtár, ERC20ABI),}) useEffect (() => {// hallgassa meg a változásokat az Ethereum címen console.log (“hallgatja az átvitelt …”) const contract = új szerződés (cím, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (account, null) library.on (fromMe, (from, to, összeg, esemény) => {console.log (‘Transfer | sent’, {from, to, összeg, esemény}} mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from , to, összeg, esemény) => {console.log (‘Átvitel | beérkezett’, {tól, összeghez, összeghez, eseményhez}) mutáció (undefined, true)}) // figyelő eltávolítása, ha az összetevő nincs csatlakoztatva return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // csak a komponenscsatolásnál váltja ki a hatást}, []) if (! balance) {return <div>…div> } Visszatérés ( <div> {parseFloat (formatUnits (egyenleg, tizedesjegyek)). toPrecision (4)} {szimbólum} div> }} Kód nyelve: JavaScript (javascript)

Nagyítsunk. Két fő különbség van:

Kulcsdefiníció

A useSWR ([cím, ‘balanceOf’, számla])) által használt kulcsnak nem Ethereum címmel, hanem módszerrel kell kezdődnie. Emiatt a beolvasó felismeri, hogy mit akarunk elérni, és felhasználhatja az ABI-t.

Tegyük refaktorrá a beolvasót ennek megfelelően:

const fetcher = (könyvtár: Web3Provider, abi ?: bármilyen) => (… érvel) => {const [arg1, arg2, … params] = args // ez szerződés, ha (isAddress (arg1)) {const address = arg1 const módszer = arg2 const szerződés = új szerződés (cím, abi, library.getSigner () ) visszatérési szerződés [metódus] (… paramek)} // ez egy eth hívási const módszer = arg1 visszatérési könyvtár [módszer] (arg2, … param)} Kód nyelve: JavaScript (javascript)

Most egy általános célú beolvasónk van, amely képes interakcióba lépni az Ethereum JSON-RPC hívásaival. &# 128588;

Naplószűrők

A másik szempont az, hogyan kell meghallgatni az ERC20 eseményeket. Az Ether.js praktikus módon konfigurál egy szűrőt az esemény témái és neve alapján. További információ arról, hogy mi a téma, megtalálható a Szilárdsági dokumentumok.

const szerződés = új szerződés (cím, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (fiók, null) Kód nyelve: JavaScript (javascript)

Miután létrehozott egy szerződéses példányt az ABI-vel, akkor továbbíthatja a szűrőt a könyvtárpéldánynak.

Figyelem:

Kísértésbe eshet, hogy az ERC20 esemény összegét közvetlenül felhasználja az egyenleg növelésére vagy csökkentésére.

Legyen tisztában a sárkánnyal. A fetcher telepítésekor visszahívásként átadott egy klojút az on funkcióhoz, amely az akkori egyenleg értékét tartalmazta.

Ezt meg lehet javítani a useRef használatával, de az egyszerűség kedvéért ellenőrizzük újra a gyorsítótárat, hogy biztosítsuk az egyensúly frissességét: mutáció (undefined, true)

Most megvan az összes szükséges darab. Az utolsó bit egy kis ragasztó.

Konfiguráltam néhány konstansot annak érdekében, hogy a TokenBalance komponensemet egy tokenek listájához hozzárendelhessem, a hálózattól függően, ahol dolgozunk:

export const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} IERC20 exportáló felület IERC20 []} = {[Networks.Rinkeby]: [{cím: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", szimbólum: "DAI", név: "Dai", tizedesjegyek: 18,}, {cím: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", szimbólum: "MKR", név: "Készítő", tizedesjegyek: 18,},],} Kód nyelve: JavaScript (javascript)

Ha megvan az állandó, könnyen hozzárendelhetők a konfigurált tokenek a komponensemhez:

export konst TokenList = ({chainId}) => { Visszatérés ( <> {TOKENS_BY_NETWORK [chainId] .map ((token) => ( <TokenBalance kulcs = {token.cím} {… token} /> ))})} Kód nyelve: JavaScript (javascript)

Minden kész! Most van egy Ethereum pénztárcánk, amely betölti az éter és a token egyensúlyt. És ha a felhasználó pénzt küld, vagy fogad, a pénztárca felhasználói felülete frissül.

Ethereum pénztárca, amely éter és token egyensúlyt tölt be.

Így tettünk eddig: GIT 4. lépés

Refaktorálás

Mozgassunk minden összetevőt egy külön fájlba, és tegyük a beolvasót globálisan elérhetővé az SWRConfig szolgáltató segítségével.

<SWRConfig érték = {{fetcher: fetcher (könyvtár, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {chainId} /> <SWRConfig />Kód nyelve: HTML, XML (xml)

Az SWRConfig segítségével konfigurálhatunk néhány beállítást, ahogy mindig elérhető, hogy kényelmesebb módon használhassuk az SWR-t.

const {data: balance, mutate} = useSWR ([address, ‘balanceOf’, account]) Kód nyelve: JavaScript (javascript)

Itt van minden az utánpótlás után: GIT 5. lépés

Csomagolás

SWR és Ether.js két jó könyvtár, amelyekkel együtt lehet dolgozni, ha az Ethereum dapp segítségével egyszerűsíteni akarja adatgyűjtési stratégiáját.

Főbb előnyök
  • Deklaratív megközelítés
  • Az adatok mindig frissek a webaljzatokon vagy az SWR opciókon keresztül
  • Kerülje el a kerék újbóli feltalálását az állapotkezeléshez egyedi React kontextus használatával

Ha több intelligens szerződést használ a dapp-ban, és tetszett ez az oktatóanyag, akkor a web3 beolvasót egy kis hasznosításban általánosítottam: swr-eth (A csillagokat értékelik &# 128123;)

És végül itt van a teljes GIT repo: (https://github.com/aboutlo/swr-eth-tutorial).

Szerezzen több Ethereum oktatóanyagot egyenesen a postaládájába

Iratkozzon fel hírlevelünkre a legújabb Ethereum fejlesztői tanfolyamokért, eszközökért, profi tippekért és egyebekért. Iratkozzon fel hírlevelünkre a legfrissebb Ethereum-hírek, vállalati megoldások, fejlesztői erőforrások és egyebek érdekében. E-mail címExkluzív tartalomHogyan készítsünk sikeres blokklánc terméketWebinárium

Hogyan készítsünk sikeres blokklánc terméket

Hogyan állítsunk be és futtassunk Ethereum csomópontotWebinárium

Hogyan állítsunk be és futtassunk Ethereum csomópontot

Hogyan készítsünk saját Ethereum API-tWebinárium

Hogyan készítsünk saját Ethereum API-t

Hogyan hozzunk létre közösségi tokentWebinárium

Hogyan hozzunk létre közösségi tokent

Biztonsági eszközök használata az intelligens szerződés-fejlesztésbenWebinárium

Biztonsági eszközök használata az intelligens szerződés-fejlesztésben

A pénzügyi eszközök digitális eszközei és a DeFi jövőjeWebinárium

A pénzügyek jövője: digitális eszközök és DeFi

Mike Owergreen Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map