Kā iegūt un atjaunināt datus no Ethereum, izmantojot React un SWR

emuārs 1NewsDevelopersEnterpriseBlockchain ExplainedEvents and ConferencesPressBiļeteni

Abonējiet mūsu biļetenu.

Epasta adrese

Mēs cienām jūsu privātumu

HomeBlogBlockchain izstrāde

Kā iegūt un atjaunināt datus no Ethereum, izmantojot React un SWR

Lūk, kā konfigurēt dapp priekšējo saskarni, lai marķieru atlikumi un līdzekļu pārskaitījumi tiktu atjaunināti lietotāju Ethereum makos. Autors Lorenzo Sicilia 2020. gada 18. jūnijs Ievietots 2020. gada 18. jūnijā

ielādēt datus ar ethereum varoni

Ethereum ļauj mums izveidot decentralizētas lietojumprogrammas (dapps). Galvenā atšķirība starp tipisku lietojumprogrammu un dapp ir tāda, ka nav nepieciešams izvietot aizmuguri – vismaz tik ilgi, kamēr izmantojat citus viedos līgumus, kas izvietoti Ethereum mainnet.

Tāpēc priekšējā daļa spēlē galveno lomu. Tas ir atbildīgs par viedo līgumu datu apkopošanu un atdalīšanu, mijiedarbības ar seifu (aparatūras vai programmatūras) apstrādi un, kā parasti, par UX pārvaldību. Ne tikai tas, ka pēc dizaina dapp izmanto JSON-RPC zvanus, un tas var atvērt kontaktligzdas savienojumu, lai saņemtu atjauninājumus.

Kā redzat, jāorganizē dažas lietas, bet neuztraucieties, pēdējos mēnešos ekosistēma ir nobriedusi diezgan daudz.

Priekšnoteikumi

Šīs apmācības laikā es pieņemu, ka jums jau ir šādas darbības:

Seifs, lai izveidotu savienojumu ar Geth mezglu

Vienkāršākā pieeja ir instalējot MetaMask lai jūs varētu izmantot Infura infrastruktūru no kastes.

Daži ēteri jūsu kontā

Kad izstrādājat kopā ar Ethereum, es ļoti iesaku pārslēgties uz testnet un izmantot testa Ether. Ja testēšanai nepieciešami līdzekļi, varat izmantot, piemēram, jaucējkrānu. https://faucet.rinkeby.io/

React pamatzināšanas

Es jūs vadīšu soli pa solim, bet pieņemšu, ka jūs zināt, kā darbojas React (ieskaitot āķus). Ja kaut kas šķiet svešs, konsultējieties ar Reaģējiet dokumentāciju.

Darbojošs rotaļu laukums

Es uzrakstīju šo apmācību, izmantojot mašīnrakstu, taču ir ierakstītas tikai dažas lietas, tāpēc ar minimālām izmaiņām jūs varat to izmantot, kā tas ir arī Javascript. ES izmantoju Parcel.js bet jūtieties brīvi izmantot Izveidojiet lietotni React pārāk vai cita tīmekļa lietojumprogrammu pakete.

Izveidojiet savienojumu ar Ethereum Mainnet

Kad esat sagatavojis MetaMask, mēs to izmantosim web3-reaģēt rīkoties ar mijiedarbību ar tīklu. Tas jums dos diezgan ērtu āķa lietošanu Web3React, kurā ir daudz noderīgu utilītu spēlēšanai ar Ethereum.

dzija pievienot @ web3-reaģēt / kodols @ web3-reaģēt / injicēts-savienotājs Kodu valoda: CSS (css)

Tad jums ir nepieciešams pakalpojumu sniedzējs. Pakalpojuma sniedzējs iegūst savienojumu ar Ethereum blokķēdi, lai izsniegtu vaicājumus un nosūtītu parakstītus stāvokļa maiņas darījumus.

Mēs izmantosim Web3Provider from Ether.js.

Šķiet, ka tajā jau ir dažas bibliotēkas, taču, mijiedarbojoties ar Ethereum, jums ir jātulko Javascript datu tipi uz Solidity. Jums arī jāparaksta darījumi, kad vēlaties izpildīt darbību. Ether.js eleganti nodrošina šīs funkcijas.

dzija pievienot @ ethersproject / nodrošinātāji Koda valoda: CSS (css)

paziņojums: iepriekšminētā Ether.js pakotne ir v5, kas pašlaik atrodas beta versija.

Pēc tam mēs esam gatavi pierakstīt minimālu sveicienu pasauli, lai pārbaudītu, vai mums ir viss nepieciešamais:

importēt Reaģēt no ‘reaģēt’ importēt {Web3ReactProvider} no ‘@ web3-reaģēt / kodols’ importēt {Web3Provider} no ‘@ ethersproject / sniedzēji’ importēt {useWeb3React} no ‘@ web3-reaģēt / kodols’ importēt {InjectedConnector} no ‘@ web3-react / injected-connector ‘export const injectedConnector = new InjectedConnector ({atbalstītsChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) funkcija getLibrary (nodrošinātājs: jebkurš): Web3Provider {const bibliotēka = jauna Web3Provider (nodrošinātāja) bibliotēka.pollingInterval = 12000 atgriešanās bibliotēka} eksporta konstante Wallet = () => {const {chainId, konts, aktivizēt, aktīvs} = useWeb3React () const onClick = () => {activ (injectedConnector)} atgriešanās ( <div> <div>ChainId: {chainId} div> <div>Konts: {konts} div> {aktīvs? ( <div>✅ div> ): ( <pogas tips ="pogu" onClick = {onClick}> Savienojuma poga> )} div> )} eksportēt const App = () => {atgriešanās ( <Web3ReactProvider getLibrary = {getLibrary}> <Seifs /> Web3ReactProvider> )} Koda valoda: JavaScript (javascript)

Ja jūs veicāt mājasdarbu, jums vajadzētu būt apmēram šādam:

Iesmidzināts savienotājs.

Lūk, ko mēs darījām līdz šim: GIT – 1. solis

Kā iegūt datus no galvenā tīkla

Es izmantošu SWR lai pārvaldītu datu ielādi.

To es vēlos sasniegt.

const {dati: bilance} = useSWR (["getBalance", konts, "vēlākais"]) Koda valoda: JavaScript (javascript)

Diezgan forši &# 128578;

Atklāsim triku! SWR nozīmē Stale-While-Revalidate – HTTP popularizētās kešatmiņas nederēšanas stratēģiju RFC 5861.

SWR vispirms atgriež datus no kešatmiņas (novecojis), pēc tam nosūta ielādes pieprasījumu (atkārtoti apstiprina) un, visbeidzot, atkal nāk ar atjauninātajiem datiem.

SWR pieņem atslēgu, un aizkulisēs to izdosies atrisināt

Lai to izdarītu, SWR ļauj nodot ienesēju, kurš spēj atrisināt atslēgu, atdodot solījumu. Sveika SWR pasaule ir balstīta uz REST API pieprasījumiem ar ienesēju, kura pamatā ir ielādes API vai Axios.

SWR ir izcili tas, ka vienīgā prasība, lai izveidotu ienesēju, ir jāatdod solījums.

Tātad, šeit ir mana pirmā Ethereum ienesēja ieviešana:

konst fetcher = (bibliotēka) => (… argumenti) => {const [method, … params] = args console.log (method, params) return library [method] (… params)} Koda valoda: JavaScript (javascript)

Kā redzat, tā ir daļēji pielietota funkcija. Tādā veidā es varu injicēt bibliotēku (manu Web3Provider), kad konfigurēju ienesēju. Vēlāk, katru reizi mainot taustiņu, funkciju var atrisināt, atdodot nepieciešamo solījumu.

Tagad es varu izveidot savu komponentu

eksporta konta atlikums = () => {const {konts, bibliotēka} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, konts, ‘latest’], {fetcher: fetcher (bibliotēka),}) if (! atlikums) {return <div>…div> } atgriešanās <div>Atlikums: {balance.toString ()} div> } Koda valoda: JavaScript (javascript)

Atgrieztais bilances objekts ir BigNumber.

Bilances komponents.

Kā redzat, skaitlis nav noformēts un ārkārtīgi liels. Tas ir tāpēc, ka Solidity izmanto Integer līdz 256 bitiem.

Lai numuru parādītu cilvēkiem lasāmā formātā, risinājums izmanto vienu no iepriekš minētajām utilītām no Ether.js utilītprogrammām: formatEther (bilance)

dzija instalēt @ ethersproject / unitsKoda valoda: CSS (css)

Tagad, kad es varu pārstrādāt savu komponentu, lai BitInt apstrādātu un formatētu cilvēkiem lasāmā formā:

eksporta konta atlikums = () => {const {konts, bibliotēka} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, konts, ‘latest’], {fetcher: fetcher (bibliotēka),}) if (! atlikums) {return <div>…div> } atgriešanās <div>Par {parseFloat (formatEther (atlikums)). ToPrecision (4)} div> } Koda valoda: JavaScript (javascript) BitInt cilvēkiem lasāmā formā.

to mēs darījām līdz šim: GIT 2. solis

Kā atjaunināt datus reāllaikā

SWR atklāj mutācijas funkciju, lai atjauninātu tās iekšējo kešatmiņu.

const {data: balance, mutate} = useSWR ([‘getBalance’, konts, ‘latest’], {fetcher: fetcher (bibliotēka),}) const onClick = () => {mutate (new BigNumber (10), false)} Koda valoda: JavaScript (javascript)

Funkcija mutācija tiek automātiski saistīta ar atslēgu (piem., [‘GetBalance’, konts, ‘jaunākais’], no kuras tā ir ģenerēta. Tā pieņem divus parametrus. Jaunie dati un ja ir jāaktivizē validācija. Ja vajadzētu, SWR automātiski izmantos ienesēju kešatmiņas atjaunināšanai &# 128165;

Kā jau bija paredzēts, Solidity notikumi sniedz nelielu abstrakciju papildus EVM reģistrēšanas funkcionalitātei. Lietojumprogrammas var abonēt un klausīties šos notikumus, izmantojot Ethereum klienta RPC saskarni.

Ether.js ir vienkārša API, lai abonētu notikumu:

const {konts, bibliotēka} = useWeb3React () library.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) Koda valoda: JavaScript (javascript)

Tagad apvienosim abas pieejas jaunajā komponentā

eksporta konta atlikums = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, konts, ‘latest’], {fetcher: fetcher (bibliotēka),}) useEffect (() => {// klausieties izmaiņas Ethereum adreses console.log (“klausoties blokus …”) library.on (‘block’, () => {console.log (‘update balance …’) mutate (undefined, true)}) // noņemt klausītāju, kad komponents ir atvienots return () => {library.removeAllListeners (‘block’)} // iedarbina efektu tikai uz komponenta stiprinājumu}, []) if (! balance) {return <div>…div> } atgriešanās <div>Par {parseFloat (formatEther (atlikums)). ToPrecision (4)} div> } Koda valoda: JavaScript (javascript)

Sākotnēji SWR iegūs konta atlikumu un pēc tam katru reizi, kad saņems bloķēšanas notikumu, tas izmantos mutāciju, lai aktivizētu atkārtotu ielādi.

paziņojums: mēs izmantojām mutāciju (nenoteiktu, patiesu), jo mēs nevaram iegūt no pašreizējā notikuma faktisko atlikumu, tāpēc mēs vienkārši izraisām atlikuma atkārtotu atgūšanu.

Zemāk ir ātra demonstrācija ar diviem Ethereum makiem, kas apmainās ar kādu ETH.

Divu Ethereum maku demonstrācija, kas apmainās ar ETH.

Lūk, ko mēs darījām līdz šim: GIT 3. solis

Kā mijiedarboties ar viedo līgumu

Līdz šim mēs ilustrējām SWR izmantošanas pamatus un to, kā veikt pamata zvanu, izmantojot Web3Provider. Tagad atklāsim, kā mijiedarboties ar viedo līgumu.

Ether.js apstrādā viedo līgumu mijiedarbību, izmantojot Solidity Compiler ģenerēto līguma lietojuma binārā interfeisa (ABI) ABI.

Līguma lietojuma binārā saskarne (ABI) ir standarta veids, kā mijiedarboties ar līgumiem Ethereum ekosistēmā, gan ārpus blokķēdes, gan attiecībā uz līgumu savstarpēju mijiedarbību..

Piemēram, ņemot vērā šo vienkāršo viedo līgumu:

pragmas cietība ^ 0,5,0; līgums Pārbaude {konstruktors () publisks {b = sešstūris"12345678901234567890123456789012"; } notikums Notikums (uint indeksēts a, baiti32 b); notikums Event2 (uint indeksēts a, baiti32 b); funkcija foo (uint a) public {emit Event (a, b); } baiti32 b; } Koda valoda: JavaScript (javascript)

tas ir ģenerētais ABI

[{ "tips": "notikumu", "ieejas": [{ "nosaukums": "a", "tips": "uint256", "indeksēts": true}, { "nosaukums": "b", "tips": "baiti32", "indeksēts": nepatiesa}], "nosaukums": "Notikums" }, { "tips": "notikumu", "ieejas": [{ "nosaukums": "a", "tips": "uint256", "indeksēts": true}, { "nosaukums": "b", "tips": "baiti32", "indeksēts": nepatiesa}], "nosaukums": "2. notikums" }, { "tips": "funkciju", "ieejas": [{ "nosaukums": "a", "tips": "uint256" }], "nosaukums": "foo", "izejas": []}] Kodu valoda: JSON / JSON ar komentāriem (json)

Lai izmantotu ABI, mēs tos varam vienkārši nokopēt tieši jūsu kodā un importēt tur, kur tas nepieciešams. Šajā demonstrācijā mēs izmantosim standartu ERC20 ABI, jo mēs vēlamies iegūt divu žetonu atlikumus: DAI un MKR.

Nākamais solis ir komponenta izveide

eksporta konst TokenBalance = ({simbols, adrese, decimāldaļas}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([adrese, ‘balanceOf’, konts], {fetcher: fetcher (bibliotēka, ERC20ABI),}) useEffect (() => {// klausieties izmaiņas Ethereum adresē console.log (“klausoties pārsūtīšanu …”) null) library.on (fromMe, (from, to, summa, notikums) => {console.log (‘Transfer | sent’, {from, to, summa, event}) mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, konts) library.on (toMe, (no , to, summa, notikums) => {console.log (‘Pārsūtīt | saņemts’, {no, uz, summa, notikums}) mutācija (nenoteikta, patiesa)}) // noņemt klausītāju, kad komponents nav atvienots return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // iedarbina efektu tikai uz komponenta stiprinājumu}, []) if (! balance) {return <div>…div> } atgriešanās ( <div> {parseFloat (formatUnits (atlikums, decimāldaļas)). toPrecision (4)} {simbols} div> )} Koda valoda: JavaScript (javascript)

Tuvināsimies. Ir divas galvenās atšķirības:

Galvenā definīcija

Atslēga, ko izmanto useSWR ([adrese, ‘balanceOf’, konts])), jāsāk ar Ethereum adresi, nevis ar metodi. Tāpēc ienesējs var atpazīt, ko mēs vēlamies sasniegt, un izmantot ABI.

Atjaunosim attiecīgi ienesēju:

const fetcher = (bibliotēka: Web3Provider, abi ?: jebkurš) => (… argumenti) => {const [arg1, arg2, … params] = args // tas ir līgums, ja (isAddress (arg1)) {const address = arg1 const metode = arg2 const līgums = jauns līgums (adrese, abi, library.getSigner () ) atgriešanas līgums [metode] (… params)} // tas ir eth call const metode = arg1 atgriešanās bibliotēka [metode] (arg2, … params)} Koda valoda: JavaScript (javascript)

Tagad mums ir vispārējas nozīmes ienesējs, kas spēj mijiedarboties ar Ethereum JSON-RPC zvaniem. &# 128588;

Žurnāla filtri

Otrs aspekts ir tas, kā klausīties ERC20 pasākumus. Ether.js nodrošina ērtu veidu, kā konfigurēt filtru, pamatojoties uz notikuma tēmām un nosaukumu. Plašāku informāciju par tēmu var atrast vietnē Cietības dokumenti.

const līgums = jauns līgums (adrese, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (konts, null) Koda valoda: JavaScript (javascript)

Kad esat izveidojis līguma instanci ar ABI, varat filtru nodot bibliotēkas instancei.

Brīdinājums:

Jums varētu rasties kārdinājums tieši izmantot summu ERC20, lai palielinātu vai samazinātu atlikumu.

Jāapzinās pūķis. Uzstādot fetcher, jūs pārsūtījāt clojure kā atzvanīšanu funkcijai on, kas tajā laikā saturēja atlikuma vērtību.

To varētu novērst, izmantojot useRef, taču vienkāršības labad atkārtoti apstipriniet kešatmiņu, lai pārliecinātos, ka atlikumi ir jauni: mutēt (nenoteikts, patiess)

Tagad mums ir visi nepieciešamie gabali. Pēdējais bits ir mazliet līmes.

Es konfigurēju dažas konstantes, lai būtu labs veids, kā manu TokenBalance komponentu kartēt ar marķieru sarakstu atkarībā no tīkla, kurā mēs strādājam:

export const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} eksporta saskarne IERC20 {simbols: virknes adrese: virknes decimāldaļas: numura nosaukums: virkne} eksporta konst TOKENS_BY_NETWORK: {[atslēga: numurs]: IERC20 []} = {[Networks.Rinkeby]: [{adrese: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", simbols: "DAI", nosaukums: "Dai", decimāldaļas: 18,}, {adrese: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", simbols: "MKR", nosaukums: "Veidotājs", decimāldaļās: 18,},],} Koda valoda: JavaScript (javascript)

Kad mums ir konstantes, ir viegli konfigurēt konfigurētos marķierus manam komponentam:

eksportēt konta TokenList = ({chainId}) => {atgriešanās ( <> {TOKENS_BY_NETWORK [chainId]. Karte ((marķieris) => ( <TokenBalance atslēga = {token.address} {… token} /> ))})} Koda valoda: JavaScript (javascript)

Viss kārtībā! Tagad mums ir Ethereum maks, kas ielādē ētera un žetonu atlikumus. Un, ja lietotājs nosūta vai saņem līdzekļus, seifa lietotāja interfeiss tiek atjaunināts.

Ethereum maks, kas ielādē ētera un žetonu atlikumus.

Lūk, ko mēs līdz šim darījām: GIT 4. solis

Refaktorēšana

Pārvietosim katru komponentu atdalītā failā un padarīsim ienesēju globāli pieejamu, izmantojot SWRConfig nodrošinātāju.

<SWRConfig vērtība = {{fetcher: fetcher (bibliotēka, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {chainId} /> <SWRConfig />Kodu valoda: HTML, XML (xml)

Ar SWRConfig mēs varam konfigurēt dažas iespējas kā vienmēr pieejamas, lai mums būtu ērtāk izmantot SWR.

const {data: balance, mutate} = useSWR ([adrese, ‘balanceOf’, konts]) Koda valoda: JavaScript (javascript)

Pēc atjaunošanas ir viss: 5. GIT solis

Satīt

SWR un Ether.js ir divas jaukas bibliotēkas, ar kurām strādāt, ja vēlaties pilnveidot datu ielādes stratēģiju ar Ethereum dapp.

Galvenās priekšrocības
  • Deklaratīva pieeja
  • Dati vienmēr ir svaigi, izmantojot tīmekļa kontaktligzdas vai SWR iespējas
  • Izvairieties no jauna izgudrot riteni stāvokļa pārvaldībai ar pielāgotu React kontekstu

Ja savā lietotnē izmantojat vairākus viedos līgumus un šī apmācība jums patika, es Web3 ienesēju vispārināju nelielā lietojumā: swr-eth (Zvaigznes tiek novērtētas &# 128123;)

Un visbeidzot, šeit ir pilna GIT repo: (https://github.com/aboutlo/swr-eth-tutorial).

Iegūstiet vairāk Ethereum apmācību tieši savā iesūtnē

Abonējiet mūsu biļetenu par jaunākajiem Ethereum izstrādātāju kursiem, rīkiem, profesionāļu padomiem un daudz ko citu. Abonējiet mūsu biļetenu, lai iegūtu jaunākos Ethereum jaunumus, uzņēmuma risinājumus, izstrādātāju resursus un daudz ko citu. E-pasta adrese Ekskluzīvs satursKā izveidot veiksmīgu Blockchain produktuTīmekļa seminārs

Kā izveidot veiksmīgu Blockchain produktu

Kā izveidot un palaist Ethereum mezgluTīmekļa seminārs

Kā izveidot un palaist Ethereum mezglu

Kā izveidot savu Ethereum APITīmekļa seminārs

Kā izveidot savu Ethereum API

Kā izveidot sociālo marķieriTīmekļa seminārs

Kā izveidot sociālo marķieri

Drošības rīku izmantošana viedo līgumu izstrādēTīmekļa seminārs

Drošības rīku izmantošana viedo līgumu izstrādē

Finanšu digitālo aktīvu un DeFi nākotneTīmekļa seminārs

Finanšu nākotne: digitālie aktīvi un DeFi

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