1 dienoraštisNewsDevelopersEnterpriseBlockchain ExplainedEvents and ConferencesPressNaujienlaiškiai

Užsiprenumeruokite mūsų naujienlaiškį.

Elektroninio pašto adresas

Mes gerbiame jūsų privatumą

Pagrindinis dienoraštisBlokavimo grandinės plėtra

Kaip gauti ir atnaujinti duomenis iš „Ethereum“ naudojant „React“ ir SWR

Štai kaip sukonfigūruoti „Dapp“ priekinę sąsają, kad atnaujintumėte simbolinius likučius ir lėšų pervedimus savo naudotojų „Ethereum“ piniginėse. Autorius Lorenzo Sicilia 2020 m. Birželio 18 d. Paskelbta 2020 m. Birželio 18 d.

gauti duomenis su ethereum herojumi

„Ethereum“ leidžia kurti decentralizuotas programas („dapps“). Pagrindinis skirtumas tarp įprastos programos ir „dapp“ yra tas, kad nereikia diegti antrinės programos – bent jau tol, kol pasinaudosite kitomis išmaniosiomis sutartimis, įdiegtomis „Ethereum“ tinkle..

Dėl to pagrindinis vaidmuo tenka frontendui. Jis atsakingas už išmaniųjų sutarčių duomenų sutvarkymą ir atskleidimą, sąveikos su pinigine tvarkymą (techninę ar programinę įrangą) ir, kaip įprasta, UX valdymą. Maža to, pagal dizainą „dapp“ naudoja JSON-RPC skambučius ir gali atidaryti lizdo jungtį, kad gautų naujinius.

Kaip matote, yra keletas dalykų, kuriuos reikia orkestruoti, bet nesijaudinkite, per pastaruosius kelis mėnesius ekosistema subrendo gana.

Būtinos sąlygos

Per šią pamoką manysiu, kad jau turite šiuos dalykus:

Piniginė, skirta prisijungti prie „Geth“ mazgo

Paprasčiausias būdas yra diegiant „MetaMask“ kad galėtumėte naudotis Infura infrastruktūra.

Eteris jūsų paskyroje

Kai kuriate ryšį su „Ethereum“, primygtinai patariu pereiti prie testneto ir naudoti bandomąjį eterį. Jei jums reikia lėšų bandymams, galite naudoti maišytuvą, pvz. https://faucet.rinkeby.io/

Pagrindinis reakcijos supratimas

Aš jums vadovausiu žingsnis po žingsnio, bet manysiu, kad žinote, kaip veikia „React“ (įskaitant kabliukus). Jei kažkas atrodo nepažįstama, kreipkitės į Reaguokite į dokumentaciją.

Veikianti „React“ žaidimų aikštelė

Parašiau šią pamoką naudodamas „Typescript“, bet įvesti tik keli dalykai, todėl atlikdami minimalius pakeitimus galite ją naudoti taip, kaip yra „Javascript“. aš naudojau Parcel.js bet drąsiai naudokitės Sukurkite „React“ programą taip pat ar kito interneto programų paketo.

Prisijunkite prie „Ethereum Mainnet“

Kai paruošite „MetaMask“, mes ketiname naudoti web3-reaguoti tvarkyti sąveiką su tinklu. Tai suteiks jums gana patogų kablio naudojimą „Web3React“, kuriame yra daug naudingų įrankių, skirtų žaisti su „Ethereum“.

verpalai pridėti @ web3-react / core @ web3-react / injected-connector Kodo kalba: CSS (css)

Tada jums reikia teikėjo. Teikėjas abstrahuoja ryšį su „Ethereum“ blokų grandine, kad galėtų pateikti užklausas ir siųsti pasirašytas būsenas keičiančias operacijas.

Mes naudosime „Web3Provider“ iš Eteris.js.

Atrodo, kad jau yra kelios bibliotekos, tačiau bendraujant su „Ethereum“ reikia išversti „Javascript“ duomenų tipus į „Solidity“. Be to, jūs turite pasirašyti operacijas, kai norite atlikti veiksmą. „Ether.js“ elegantiškai suteikia šias funkcijas.

verpalai pridėti @ ethersproject / teikėjai Kodo kalba: CSS (css)

pastaba: aukščiau pateiktas „Ether.js“ paketas yra šiuo metu esantis „v5“ beta versija.

Po to mes pasirengę užrašyti minimalų sveikinimo pasaulį, kad patikrintume, ar turime viską, ko mums reikia:

importuoti „React“ iš „reaguoti“ importuoti {Web3ReactProvider} iš „@ web3-react / core“ importuoti {Web3Provider} iš „@ ethersproject / teikėjai“ importuoti {useWeb3React} iš „@ web3-react / core“ importuoti {InjectedConnector} iš „@ „web3-react / injected-connector“ eksportuoti const injectedConnector = naujas „InjectedConnector“ ({palaikomas ChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) funkcija getLibrary (teikėjas: bet kuris): „Web3Provider“ {const biblioteka = nauja „Web3Provider“ (teikėjo) biblioteka.pollingInterval = 12000 grąžinimo biblioteka} eksporto konst. piniginė = () => {const {chainId, paskyra, aktyvuoti, aktyvus} = useWeb3React () const onClick = () => {activ (injectedConnector)} grįžti ( <div> <div>„ChainId“: {chainId} div> <div>Sąskaita: {account} div> {aktyvus? ( <div>✅ div> ): ( <mygtuko tipas ="mygtuką" onClick = {onClick}> Prijunkite mygtuką> )} sk> )} eksporto konst. programa = () => {grįžti ( <Web3ReactProvider getLibrary = {getLibrary}> <Piniginė /> „Web3ReactProvider“> )} Kodo kalba: „JavaScript“ („javascript“)

Jei atlikote namų darbus, turėtumėte turėti kažką panašaus:

Įpurškiama jungtis.

Štai ką mes darėme iki šiol: GIT – 1 žingsnis

Kaip gauti duomenis iš pagrindinio tinklo

Naudosiu SWR tvarkyti duomenų gavimą.

Tai aš noriu pasiekti.

const {duomenys: balansas} = useSWR (["„getBalance“", sąskaitą, "vėliausiai"]) Kodo kalba: „JavaScript“ (javascript)

Gana šaunu &# 128578;

Atskleiskime triuką! SWR reiškia „Stale-While-Revalidate“, kurią išpopuliarino HTTP talpyklos negaliojančių strategija RFC 5861.

Pirmiausia SWR grąžina duomenis iš talpyklos (pasenusi), tada siunčia užklausos užklausą (patvirtina dar kartą) ir galiausiai vėl pateikia naujausius duomenis.

SWR priima raktą ir užkulisiuose pavyks išspręsti

Tai atlikus, SWR leidžia praeiti pritraukėjui, sugebančiam išspręsti raktą, grąžinant pažadą. Sveikas SWR pasaulis yra pagrįstas REST API užklausomis su fetcher, paremtu fetch API arba Axios.

SWR yra puikus tai, kad vienintelis reikalavimas sukurti fetcherį turi būti pažadas.

Taigi čia yra mano pirmasis „Ethereum“ ieškovo įgyvendinimas:

const fetcher = (biblioteka) => (… argumentai) => {const [metodas, … params] = args console.log (metodas, parametrai) grąžina biblioteką [metodas] (… params)} Kodo kalba: „JavaScript“ (javascript)

Kaip matote, tai yra iš dalies pritaikyta funkcija. Tokiu būdu sukonfigūruodamas fetcherį galiu įšvirkšti biblioteką (mano „Web3Provider“). Vėliau, kiekvieną kartą pasikeitus klavišui, funkciją galima išspręsti grąžinant reikiamą pažadą.

Dabar aš galiu sukurti savo komponentą

eksporto konst. likutis = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } grįžti <div>Likutis: {balance.toString ()} div> } Kodo kalba: „JavaScript“ (javascript)

Grąžintas balanso objektas yra „BigNumber“.

Balanso komponentas.

Kaip matote, skaičius nėra suformuotas ir itin didelis. Taip yra todėl, kad „Solidity“ naudoja sveikąjį skaičių iki 256 bitų.

Norint parodyti skaičių žmonėms skaitomu formatu, sprendimas naudoja vieną iš pirmiau nurodytų „Ether.js“ paslaugų: „formatEther“ (balansas)

verpalai įdiegti @ ethersproject / units Kodo kalba: CSS (css)

Dabar, kai galiu pertvarkyti savo komponentą, kad galėčiau tvarkyti ir formatuoti „BitInt“ taip, kad ji būtų suprantama žmonėms:

eksporto konst. likutis = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } grįžti <div>Par {parseFloat (formatEther (balansas)). ToPrecision (4)} div> } Kodo kalba: „JavaScript“ (javascript) „BitInt“ žmonėms suprantama forma.

tai, ką mes darėme iki šiol: GIT 2 žingsnis

Kaip atnaujinti duomenis realiuoju laiku

SWR atskleidžia mutavimo funkciją, kad atnaujintų savo vidinę talpyklą.

const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) const onClick = () => {mutate (new BigNumber (10), false)} Kodo kalba: „JavaScript“ (javascript)

Funkcija „mutate“ yra automatiškai susieta su raktu (pvz., „GetBalance“, paskyra, „naujausias“], iš kurio ji sukurta. Ji priima du parametrus. Nauji duomenys ir, jei reikia suaktyvinti patvirtinimą. Jei taip turėtų būti, SWR talpyklą atnaujins automatiškai naudodamas pakrovėją &# 128165;

Kaip ir buvo galima tikėtis, „Solidity“ įvykiai suteikia nedidelę abstrakciją, papildančią EVM registravimo funkciją. Programos gali užsiprenumeruoti ir klausytis šių įvykių per „Ethereum“ kliento RPC sąsają.

Ether.js turi paprastą API, norėdamas užsiprenumeruoti įvykį:

const {paskyra, biblioteka} = useWeb3React () biblioteka.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}} Kodo kalba: „JavaScript“ (javascript)

Dabar sujungkime abu požiūrius į naująjį komponentą

eksporto konst. likutis = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) useEffect (() => {// klausykite pakeitimų „Ethereum“ adreso console.log („klausau blokų …“) library.on (‘block’, () => {console.log (‘update balance …’) mutate (undefined, true)}) // pašalinti klausytoją, kai komponentas neatjungtas return () => {library.removeAllListeners (‘block’)} // paleidžia efektą tik komponento montavimui}, []) if (! balance) {return <div>…div> } grįžti <div>Par {parseFloat (formatEther (balansas)). ToPrecision (4)} div> } Kodo kalba: „JavaScript“ (javascript)

Iš pradžių SWR atgaus sąskaitos balansą, o tada kiekvieną kartą, kai gaus blokinį įvykį, jis naudos mutatą, kad sukeltų pakartotinį gavimą.

pastaba: Mes naudojome mutatą (neapibrėžtą, teisingą), nes negalime iš dabartinio įvykio gauti tikrojo balanso, o mes tiesiog paleidžiame balansą iš naujo.

Žemiau pateikiama greita demonstracija su dviem „Ethereum“ piniginėmis, kurios keičiasi ETH.

Dviejų „Ethereum“ piniginių, keičiančių ETH, demonstracija.

Štai ką mes darėme iki šiol: 3 GIT žingsnis

Kaip bendrauti su protinga sutartimi

Iki šiol mes iliustravome SWR naudojimo pagrindus ir tai, kaip atlikti pagrindinį skambutį per „Web3Provider“. Dabar sužinokime, kaip bendrauti su išmaniąja sutartimi.

„Ether.js“ vykdo sumanią sutarčių sąveiką naudodama „Solidity Compiler“ sugeneruotą sutarties taikymo dvejetainės sąsajos (ABI) ABI..

Sutarties taikymo dvejetainė sąsaja (ABI) yra standartinis būdas sąveikauti su sutartimis „Ethereum“ ekosistemoje tiek iš išorės, tiek tarp sutarties sąveikos..

Pavyzdžiui, atsižvelgiant į toliau pateiktą paprastą išmaniąją sutartį:

pragmos tvirtumas ^ 0,5,0; sutartis Testas {konstruktorius () public {b = šešiakampis"12345678901234567890123456789012"; } įvykio įvykis (uint indeksuotas a, baitai32 b); įvykis „Event2“ („uint“ indeksuotas a, baitai32 b); funkcija foo (uint a) public {emit Event (a, b); } baitai32 b; } Kodo kalba: „JavaScript“ (javascript)

tai sukurta ABI

[{ "tipo": "įvykis", "įvestys": [{ "vardas": "a", "tipo": "uint256", "indeksuota": tiesa }, { "vardas": "b", "tipo": "baitai32", "indeksuota": klaidinga}], "vardas": "Įvykis" }, { "tipo": "įvykis", "įvestys": [{ "vardas": "a", "tipo": "uint256", "indeksuota": tiesa }, { "vardas": "b", "tipo": "baitai32", "indeksuota": klaidinga}], "vardas": "Įvykis2" }, { "tipo": "funkcija", "įvestys": [{ "vardas": "a", "tipo": "uint256" }], "vardas": "foo", "išėjimai": []}] Kodo kalba: JSON / JSON su komentarais (json)

Norėdami naudoti ABI, galime tiesiog nukopijuoti juos tiesiai į jūsų kodą ir importuoti, kur to reikia. Šioje demonstracijoje naudosime standartą ERC20 ABI, nes norime gauti dviejų žetonų balansus: DAI ir MKR.

Kitas žingsnis yra komponento kūrimas

eksporto konst. TokenBalance = ({simbolis, adresas, dešimtainiai ženklai}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([adresas, ‘balanceOf’, paskyra], {fetcher: fetcher (biblioteka, ERC20ABI),}) useEffect (() => {// klausykite pakeitimų „Ethereum“ adresu console.log („klausau perdavimo …“) const sutartis = nauja sutartis (adresas, ERC20ABI, biblioteka.getSigner ()) const fromMe = contract.filters.Transfer (paskyra, null) biblioteka.on (fromMe, (from, to, summa, įvykis) => {console.log (‘Transfer | sent’, {from, to, summa, įvykis}) mutate (neapibrėžta, tiesa)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from , to, suma, įvykis) => {console.log (‘Transfer | gautas’, {from, to, suma, įvykis}) mutate (neapibrėžtas, true)}) // pašalinti klausytoją, kai komponentas yra neatjungtas return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // suaktyvina efektą tik komponento tvirtinimui}, []) if (! balance) {return <div>…div> } grįžti ( <div> {parseFloat (formatUnits (balansas, dešimtainiai skaičiai)). toPrecision (4)} {simbolis} div> )} Kodo kalba: „JavaScript“ (javascript)

Priartinkime. Yra du pagrindiniai skirtumai:

Pagrindinis apibrėžimas

Raktą, kurį naudoja UseSWR ([adresas, „balanceOf“, paskyra])), reikia pradėti nuo „Ethereum“ adreso, o ne nuo metodo. Dėl to atkūrėjas gali atpažinti, ką mes norime pasiekti, ir naudoti ABI.

Atitaisykime atsivežėją:

const fetcher = (biblioteka: Web3Provider, abi ?: bet koks) => (… argumentai) => {const [arg1, arg2, … params] = args // tai sutartis, jei (isAddress (arg1)) {const address = arg1 const metodas = arg2 const sutartis = nauja sutartis (adresas, abi, biblioteka.getSigner () ) grąžinimo sutartis [metodas] (… params)} // tai yra eth call const metodas = arg1 grąžinimo biblioteka [metodas] (arg2, … params)} Kodo kalba: „JavaScript“ (javascript)

Dabar turime bendrosios paskirties ieškiklį, galintį bendrauti su „Ethereum“ JSON-RPC skambučiais. &# 128588;

Žurnalo filtrai

Kitas aspektas yra tai, kaip klausytis ERC20 renginių. Ether.js suteikia patogų būdą konfigūruoti filtrą pagal įvykio temas ir pavadinimą. Daugiau informacijos apie tai, kas yra tema, galite rasti Solidumo dokumentai.

const sutartis = nauja sutartis (adresas, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (paskyra, null) Kodo kalba: „JavaScript“ (javascript)

Sukūrę sutarties egzempliorių su ABI, filtrą galite perduoti bibliotekos egzemplioriui.

Įspėjimas:

Galite sugundyti tiesiogiai panaudoti sumą ERC20 renginyje, kad padidintumėte ar sumažintumėte balansą.

Žinok apie slibiną. Kai konfigūruojate „fetcher“, jūs perdavėte clojure kaip atgalinį skambutį į „on“ funkciją, kurioje buvo balanso vertė tuo metu.

Tai galima ištaisyti naudojant „useRef“, tačiau paprastumo sumetimais dar kartą patvirtinkime talpyklą, kad įsitikintume, jog balansai yra nauji: mutuoti (neapibrėžti, teisingi)

Dabar mes turime visus reikalingus kūrinius. Paskutinis truputis yra šiek tiek klijų.

Sukonfigūravau keletą konstantų, kad galėčiau gerai susieti savo „TokenBalance“ komponentą su žetonų sąrašu, priklausomai nuo tinklo, kuriame dirbame:

export const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} eksportavimo sąsaja IERC20 {simbolis: eilutės adresas: eilutės dešimtainiai: numerio pavadinimas: eilutė} eksporto konst. TOKENS_BY_NETWORK: {[raktas: numeris]: IERC20 []} = {[Networks.Rinkeby]: [{adresas: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", simbolis: "DAI", vardas: "Dai", po kablelio: 18,}, {adresas: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", simbolis: "MKR", vardas: "Kūrėjas", po kablelio: 18,},],} Kodo kalba: „JavaScript“ (javascript)

Kai turėsime konstantas, lengva sukonfigūruotus žetonus susieti su mano komponentu:

eksportuoti konst TokenList = ({chainId}) => {grįžti ( <> {TOKENS_BY_NETWORK [chainId]. Žemėlapis ((prieigos raktas) => ( <„TokenBalance“ raktas = {token.address} {… token} /> ))})} Kodo kalba: „JavaScript“ (javascript)

Viskas paruošta! Dabar mes turime „Ethereum“ piniginę, į kurią įkeliami eterio ir žetonų balansai. O jei vartotojas siunčia ar gauna lėšų, atnaujinama piniginės vartotojo sąsaja.

„Ethereum“ piniginė, įkelianti eterio ir žetonų balansus.

Štai ką mes darėme iki šiol: GIT 4 žingsnis

Refactoring

Perkelkime kiekvieną atskirame faile esantį komponentą ir padarykime atnešėją visuotinai prieinamą naudojant „SWRConfig“ teikėją.

<SWRConfig value = {{fetcher: fetcher (biblioteka, ERC20ABI)}}> <EthBalance /> <„TokenList chainId“ = {chainId} /> <SWRConfig />Kodo kalba: HTML, XML (xml)

Naudodami „SWRConfig“ galime sukonfigūruoti kai kurias parinktis kaip visada prieinamas, kad galėtume patogiau naudoti SWR.

const {data: balance, mutate} = useSWR ([adresas, ‘balanceOf’, paskyra]) Kodo kalba: „JavaScript“ (javascript)

Štai viskas po pertvarkymo: 5 GIT žingsnis

Apvyniokite

SWR ir Eteris.js yra dvi puikios bibliotekos, su kuriomis norite dirbti, jei norite supaprastinti duomenų gavimo strategiją naudodami „Ethereum dapp“.

Pagrindiniai privalumai
  • Deklaratyvus požiūris
  • Duomenys visada atnaujinami per interneto lizdus ar SWR parinktis
  • Venkite iš naujo išradinėti ratą būsenos valdymui naudodami „Custom React“ kontekstą

Jei „DAPP“ naudojate kelias išmaniąsias sutartis ir ši pamoka jums patiko, apibendrinau „Web3“ fetcher į nedidelį panaudojimą: swr-eth (Žvaigždės vertinamos &# 128123;)

Ir galiausiai, čia yra visa GIT repo: (https://github.com/aboutlo/swr-eth-tutorial).

Gaukite daugiau „Ethereum“ mokymo programų tiesiai į savo gautuosius

Užsiprenumeruokite mūsų naujienlaiškį, kuriame rasite naujausius „Ethereum“ kūrėjų kursus, įrankius, profesionalų patarimus ir dar daugiau. „InfuraMetaMaskNewsletter“ Užsiprenumeruokite mūsų naujienlaiškį, kuriame rasite naujausias „Ethereum“ naujienas, įmonės sprendimus, kūrėjų išteklius ir dar daugiau. El. Pašto adresas Išskirtinis turinysKaip sukurti sėkmingą „Blockchain“ produktąInternetinis seminaras

Kaip sukurti sėkmingą „Blockchain“ produktą

Kaip nustatyti ir paleisti „Ethereum“ mazgąInternetinis seminaras

Kaip nustatyti ir paleisti „Ethereum“ mazgą

Kaip susikurti savo „Ethereum“ APIInternetinis seminaras

Kaip susikurti savo „Ethereum“ API

Kaip sukurti socialinį ženkląInternetinis seminaras

Kaip sukurti socialinį ženklą

Saugumo priemonių naudojimas kuriant išmanųjį kontraktąInternetinis seminaras

Saugumo priemonių naudojimas kuriant išmanųjį kontraktą

Finansų ateitis Skaitmeninis turtas ir „DeFi“Internetinis seminaras

Finansų ateitis: skaitmeninis turtas ir „DeFi“

Mike Owergreen Administrator
Sorry! The Author has not filled his profile.
follow me