Τρόπος ανάκτησης και ενημέρωσης δεδομένων από το Ethereum με React και SWR

blog 1ΕιδήσειςΑναπτυσσόμενοιΕξέτασηΕπεξήγηση BlockchainΕκδηλώσεις και ΣυνέδριαΠατήστεΕνημερωτικά δελτία

Contents

Εγγραφείτε στο newsletter μας.

Διεύθυνση ηλεκτρονικού ταχυδρομείου

Σεβόμαστε το απόρρητό σας

HomeBlogBlockchain Ανάπτυξη

Τρόπος ανάκτησης και ενημέρωσης δεδομένων από το Ethereum με React και SWR

Δείτε πώς μπορείτε να διαμορφώσετε το frontend του dapp σας, έτσι ώστε τα υπόλοιπα token και οι μεταφορές χρημάτων να ενημερώνονται στα πορτοφόλια Ethereum των χρηστών σας. Από Lorenzo Sicilia 18 Ιουνίου 2020 Δημοσιεύτηκε στις 18 Ιουνίου 2020

λήψη δεδομένων με ήρωα ethereum

Το Ethereum μας επιτρέπει να δημιουργούμε αποκεντρωμένες εφαρμογές (dapps). Η βασική διαφορά μεταξύ μιας τυπικής εφαρμογής και ενός dapp είναι ότι δεν χρειάζεται να αναπτύξετε ένα backend – τουλάχιστον εφ ‘όσον εκμεταλλευτείτε τις άλλες έξυπνες συμβάσεις που αναπτύσσονται στο Ethereum mainnet.

Εξαιτίας αυτού, το frontend παίζει σημαντικό ρόλο. Είναι υπεύθυνο για τη διαλογή και αποσυμπίεση των δεδομένων από τα έξυπνα συμβόλαια, χειρισμό των αλληλεπιδράσεων με το πορτοφόλι (υλικό ή λογισμικό) και, ως συνήθως, τη διαχείριση του UX. Όχι μόνο αυτό, από τη σχεδίαση, ένα dapp χρησιμοποιεί κλήσεις JSON-RPC και μπορεί να ανοίξει μια σύνδεση υποδοχής για να λαμβάνει ενημερώσεις.

Όπως μπορείτε να δείτε, υπάρχουν μερικά πράγματα για ενορχήστρωση, αλλά μην ανησυχείτε, το οικοσύστημα έχει ωριμάσει αρκετά τους τελευταίους μήνες.

Προαπαιτούμενα

Κατά τη διάρκεια αυτού του σεμιναρίου, θα υποθέσω ότι έχετε ήδη τα εξής:

Ένα πορτοφόλι για σύνδεση σε έναν κόμβο Geth

Η απλούστερη προσέγγιση είναι εγκατάσταση του MetaMask ώστε να μπορείτε να χρησιμοποιήσετε Infura υποδομή έξω από το κουτί.

Μερικοί Ether στο λογαριασμό σας

Όταν αναπτύσσετε το Ethereum, σας συμβουλεύω να μεταβείτε σε ένα δοκιμαστικό δίκτυο και να χρησιμοποιήσετε το τεστ Ether. Εάν χρειάζεστε χρήματα για σκοπούς δοκιμής, μπορείτε να χρησιμοποιήσετε μια βρύση π.χ.. https://faucet.rinkeby.io/


Βασική κατανόηση του React

Θα σας καθοδηγήσω βήμα προς βήμα, αλλά θα υποθέσω ότι γνωρίζετε πώς λειτουργεί το React (συμπεριλαμβανομένων των αγκιστριών). Εάν κάτι φαίνεται άγνωστο συμβουλευτείτε το Αντιδράστε την τεκμηρίωση.

Μια παιδική χαρά React που λειτουργεί

Έγραψα αυτό το σεμινάριο με το Typescript, αλλά μόνο μερικά πράγματα είναι δακτυλογραφημένα, έτσι ώστε με ελάχιστες αλλαγές μπορείτε να το χρησιμοποιήσετε όπως και στο Javascript. χρησιμοποίησα Parcel.js αλλά μη διστάσετε να το χρησιμοποιήσετε Δημιουργία εφαρμογής React επίσης ή άλλο πρόγραμμα δέσμης εφαρμογών ιστού.

Συνδεθείτε στο Ethereum Mainnet

Μόλις το MetaMask είναι έτοιμο, θα το χρησιμοποιήσουμε web3-αντιδρά για να χειριστείτε την αλληλεπίδραση με το δίκτυο. Θα σας δώσει μια πολύ εύχρηστη χρήση αγκίστρουWeb3React, η οποία περιέχει πολλά χρήσιμα βοηθητικά προγράμματα για να παίξετε με το Ethereum.

νήματα add @ web3-react / core @ web3-react / injected-connector Γλώσσα κωδικού: CSS (css)

Τότε χρειάζεστε έναν πάροχο. Ένας πάροχος αφαιρεί μια σύνδεση με το blockchain Ethereum, για την έκδοση ερωτημάτων και την αποστολή υπογεγραμμένων συναλλαγών που αλλάζουν κατάσταση.

Θα χρησιμοποιήσουμε το Web3Provider από Ether.js.

Φαίνεται ότι έχει ήδη λίγες βιβλιοθήκες, αλλά όταν αλληλεπιδράτε με το Ethereum πρέπει να μεταφράσετε τύπους δεδομένων Javascript σε αυτούς του Solidity. Και, πρέπει επίσης να υπογράψετε τις συναλλαγές όταν θέλετε να εκτελέσετε μια ενέργεια. Το Ether.js παρέχει κομψά αυτές τις λειτουργίες.

νήματα add @ ethersproject / provider Γλώσσα κωδικού: CSS (css)

Σημείωση: το παραπάνω πακέτο Ether.js είναι το v5 που βρίσκεται αυτήν τη στιγμή βήτα.

Μετά από αυτό είμαστε έτοιμοι να σημειώσουμε έναν ελάχιστο κόσμο για να ελέγξουμε αν έχουμε ό, τι χρειαζόμαστε:

import React from ‘react’ import {Web3ReactProvider} από ‘@ web3-react / core’ import {Web3Provider} από το ‘@ ethersproject / provider’ import {useWeb3React} από την εισαγωγή ‘@ web3-react / core’ web3-react / injected-connector ‘export const injectedConnector = new InjectedConnector ({υποστηρίζεταιChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) συνάρτηση getLibrary (παροχέας: οποιαδήποτε): Web3Provider {const library = new Web3Provider (provider) library.pollingInterval = 12000 return library} εξαγωγή const Wallet = () => {const {chainId, account, activate, active} = useWeb3React () const onClick = () => {activate (injectedConnector)} επιστροφή ( <div> <div>ChainId: {chainId} div> <div>Λογαριασμός: {account} div> {ενεργός ? ( <div>✅ div> ): ( <τύπος κουμπιού ="κουμπί" onClick = {onClick}> Κουμπί σύνδεσης> )} div> )} εξαγωγή const App = () => { ΕΠΙΣΤΡΟΦΗ ( <Web3ReactProvider getLibrary = {getLibrary}> <Πορτοφόλι /> Web3ReactProvider> )} Γλώσσα κώδικα: JavaScript (javascript)

Εάν κάνατε την εργασία σας, θα πρέπει να έχετε κάτι τέτοιο:

Έγχυση συνδετήρα.

Εδώ τι κάναμε μέχρι τώρα: GIT – βήμα-1

Τρόπος ανάκτησης δεδομένων από το Mainnet

θα χρησιμοποιήσω SWR για τη διαχείριση της ανάκτησης δεδομένων.

Αυτό θέλω να πετύχω.

const {data: balance} = useSWR (["getBalance", λογαριασμός, "αργότερο"]) Γλώσσα κώδικα: JavaScript (javascript)

Πολύ δροσερό &# 128578;

Ας παρουσιάσουμε το κόλπο! SWR σημαίνει Stale-While-Revalidate, μια στρατηγική ακύρωσης HTTP cache που διαδόθηκε RFC 5861.

Το SWR επιστρέφει πρώτα τα δεδομένα από την προσωρινή μνήμη (παλιό), μετά στέλνει το αίτημα ανάκτησης (επανεπικύρωση) και τελικά έρχεται ξανά με τα ενημερωμένα δεδομένα.

Το SWR δέχεται ένα κλειδί και πίσω από τα παρασκήνια θα καταφέρει να επιλύσει

Για να γίνει αυτό, το SWR επιτρέπει τη διέλευση ενός fetcher ικανού να επιλύσει το κλειδί επιστρέφοντας μια υπόσχεση. Ο γειά σου κόσμος του SWR βασίζεται σε αιτήματα REST API με fetcher που βασίζεται στο API ανάκτησης ή στο Axios.

Αυτό που είναι εξαιρετικό για το SWR είναι ότι η μόνη προϋπόθεση για τη δημιουργία ενός fetcher είναι να επιστρέψει μια υπόσχεση.

Λοιπόν, εδώ είναι η πρώτη μου εφαρμογή ενός fetcher για το Ethereum:

const fetcher = (βιβλιοθήκη) => (… args) => {const [method, … params] = args console.log (method, params) επιστροφή βιβλιοθήκης [μέθοδος] (… params)} Γλώσσα κώδικα: JavaScript (javascript)

Όπως μπορείτε να δείτε, είναι μια μερική εφαρμογή. Με αυτόν τον τρόπο, μπορώ να κάνω ένεση στη βιβλιοθήκη (ο Web3Provider μου) όταν ρυθμίζω τη διαμόρφωση του fetcher Αργότερα, κάθε φορά που αλλάζει ένα κλειδί, η λειτουργία μπορεί να επιλυθεί επιστρέφοντας την απαιτούμενη υπόσχεση.

Τώρα μπορώ να δημιουργήσω το στοιχείο μου

Εξαγωγή const Υπόλοιπο = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, λογαριασμός, ‘τελευταίο’], {fetcher: fetcher (βιβλιοθήκη),}) εάν (! υπόλοιπο) {επιστροφή <div>…div> } ΕΠΙΣΤΡΟΦΗ <div>Υπόλοιπο: {balance.toString ()} div> } Γλώσσα κώδικα: JavaScript (javascript)

Το αντικείμενο ισορροπίας που επιστρέφεται είναι ένα BigNumber.

Στοιχείο ισορροπίας.

Όπως μπορείτε να δείτε, ο αριθμός δεν είναι διαμορφωμένος και εξαιρετικά μεγάλος. Αυτό συμβαίνει επειδή το Solidity χρησιμοποιεί ακέραιο έως 256 bit.

Για να εμφανιστεί ο αριθμός σε μορφή αναγνώσιμη από τον άνθρωπο, η λύση χρησιμοποιεί ένα από τα προαναφερθέντα βοηθητικά προγράμματα από τα βοηθητικά προγράμματα Ether.js: formatEther (υπόλοιπο)

νήματα εγκατάσταση @ ethersproject / unit Γλώσσα κωδικού: CSS (css)

Τώρα που μπορώ να επεξεργαστώ ξανά το στοιχείο μου για να χειριστώ και να μορφοποιήσω το BitInt σε μορφή αναγνώσιμη από τον άνθρωπο:

Εξαγωγή const Υπόλοιπο = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, λογαριασμός, ‘τελευταίο’], {fetcher: fetcher (βιβλιοθήκη),}) εάν (! υπόλοιπο) {επιστροφή <div>…div> } ΕΠΙΣΤΡΟΦΗ <div>Ξ {parseFloat (formatEther (υπόλοιπο)). ToPrecision (4)} div> } Γλώσσα κώδικα: JavaScript (javascript) Το BitInt σε μορφή αναγνώσιμη από τον άνθρωπο.

αυτό που κάναμε μέχρι τώρα: GIT βήμα-2

Πώς να ενημερώσετε τα δεδομένα σε πραγματικό χρόνο

Το SWR εκθέτει μια λειτουργία μετάλλαξης για την ενημέρωση της εσωτερικής της προσωρινής μνήμης.

const {data: balance, mutate} = useSWR ([‘getBalance’, λογαριασμός, ‘τελευταίο’], {fetcher: fetcher (library),}) const onClick = () => {mutate (νέο BigNumber (10), false)} Γλώσσα κώδικα: JavaScript (javascript)

Η λειτουργία μετάλλαξης δεσμεύεται αυτόματα στο κλειδί (π.χ. [‘getBalance’, λογαριασμός, ‘τελευταίο’] από το οποίο έχει δημιουργηθεί. Δέχεται δύο παραμέτρους. Τα νέα δεδομένα και εάν πρέπει να ενεργοποιηθεί μια επικύρωση. Εάν πρέπει, SWR θα χρησιμοποιήσει αυτόματα το fetcher για να ενημερώσει την προσωρινή μνήμη &# 128165;

Όπως αναμενόταν, τα συμβάντα Solidity δίνουν μια μικρή αφαίρεση πάνω από τη λειτουργικότητα καταγραφής της EVM. Οι εφαρμογές μπορούν να εγγραφούν και να ακούσουν αυτά τα συμβάντα μέσω της διεπαφής RPC ενός πελάτη Ethereum.

Το Ether.js έχει ένα απλό API για να εγγραφεί σε μια εκδήλωση:

const {account, library} = useWeb3React () library.on ("αριθμός μπλοκ", (blockNumber) => {console.log ({blockNumber})}) Γλώσσα κώδικα: JavaScript (javascript)

Τώρα ας συνδυάσουμε και τις δύο προσεγγίσεις στο νέο συστατικό

Εξαγωγή const Υπόλοιπο = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, λογαριασμός, ‘τελευταίο’], {fetcher: fetcher (library),}) useEffect (() => {// ακρόαση αλλαγών σε μια κονσόλα διεύθυνσης Ethereum.log (“ακρόαση για μπλοκ …”) library.on (‘block’, () => {console.log (‘υπόλοιπο ενημέρωσης …’) mutate (undefined, true)}) // κατάργηση ακρόασης όταν το στοιχείο αποσυνδέεται επιστροφή () => {library.removeAllListeners (‘block’)} // ενεργοποιεί το εφέ μόνο στη συνάρτηση mount}, []) εάν (! υπόλοιπο) {return <div>…div> } ΕΠΙΣΤΡΟΦΗ <div>Ξ {parseFloat (formatEther (υπόλοιπο)). ToPrecision (4)} div> } Γλώσσα κώδικα: JavaScript (javascript)

Αρχικά, το SWR θα ανακτήσει το υπόλοιπο του λογαριασμού και, στη συνέχεια, κάθε φορά που λαμβάνει ένα συμβάν αποκλεισμού, θα χρησιμοποιήσει τη μετάλλαξη για να ενεργοποιήσει μια επαναφορά.

ειδοποίηση: Χρησιμοποιήσαμε τη μετάλλαξη (απροσδιόριστη, αληθινή) επειδή δεν μπορούμε να ανακτήσουμε από το τρέχον συμβάν το πραγματικό υπόλοιπο απλώς ενεργοποιούμε μια επαναφορά του υπολοίπου.

Παρακάτω είναι μια γρήγορη επίδειξη με δύο πορτοφόλια Ethereum που ανταλλάσσουν κάποια ETH.

Επίδειξη δύο πορτοφολιών Ethereum που ανταλλάσσουν ETH.

Εδώ τι κάναμε μέχρι τώρα: GIT βήμα-3

Πώς να αλληλεπιδράσετε με ένα έξυπνο συμβόλαιο

Μέχρι στιγμής, επεξηγήσαμε τα βασικά στοιχεία της χρήσης SWR και του τρόπου πραγματοποίησης μιας βασικής κλήσης μέσω ενός Web3Provider. Ας ανακαλύψουμε τώρα πώς να αλληλεπιδράσουμε με ένα έξυπνο συμβόλαιο.

Το Ether.js χειρίζεται την έξυπνη αλληλεπίδραση συμβολαίου χρησιμοποιώντας το συμβόλαιο Binary Interface (ABI) ABI που δημιουργείται από το Solid Compiler.

Η δυαδική διεπαφή εφαρμογής συμβάσεων (ABI) είναι ο τυπικός τρόπος αλληλεπίδρασης με συμβάσεις στο οικοσύστημα Ethereum, τόσο έξω από το blockchain όσο και για αλληλεπίδραση μεταξύ συμβάσεων και συμβάσεων.

Για παράδειγμα, δεδομένου του παρακάτω απλού έξυπνου συμβολαίου:

σταθερότητα πραγμάτων ^ 0,5,0; συμβόλαιο Test {buildor () public {b = hex"12345678901234567890123456789012"; } συμβάν συμβάντος (uint ευρετήριο a, bytes32 b); event Event2 (uint indexed a, bytes32 b); συνάρτηση foo (uint a) public {emit Event (a, b); } bytes32 β; } Γλώσσα κώδικα: JavaScript (javascript)

αυτό είναι το ABI που δημιουργήθηκε

[{ "τύπος": "Εκδήλωση", "εισόδους": [{ "όνομα": "ένα", "τύπος": "uint256", "ευρετήριο": true}, { "όνομα": "σι", "τύπος": "bytes32", "ευρετήριο": false}], "όνομα": "Εκδήλωση" }, { "τύπος": "Εκδήλωση", "εισόδους": [{ "όνομα": "ένα", "τύπος": "uint256", "ευρετήριο": true}, { "όνομα": "σι", "τύπος": "bytes32", "ευρετήριο": false}], "όνομα": "Εκδήλωση2" }, { "τύπος": "λειτουργία", "εισόδους": [{ "όνομα": "ένα", "τύπος": "uint256" }], "όνομα": "Φοο", "έξοδοι": []}] Γλώσσα κώδικα: JSON / JSON με σχόλια (json)

Για να χρησιμοποιήσετε τα ABI, μπορούμε απλώς να τα αντιγράψουμε απευθείας στον κωδικό σας και να τα εισαγάγουμε όπου απαιτείται. Σε αυτό το demo, θα χρησιμοποιήσουμε ένα πρότυπο ERC20 ABI επειδή θέλουμε να ανακτήσουμε τα υπόλοιπα δύο tokens: DAI και MKR.

Το επόμενο βήμα είναι η δημιουργία του στοιχείου

εξαγωγή const TokenBalance = ({σύμβολο, διεύθυνση, δεκαδικά}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([διεύθυνση, ‘balanceOf’, λογαριασμός], {fetcher: fetcher (library, ERC20ABI),}) useEffect (() => {// ακρόαση αλλαγών σε ένα Ethereum address console.log (“listen for Transfer …”) const contract = new Contract (διεύθυνση, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (λογαριασμός, null) library.on (fromMe, (από, έως, ποσό, συμβάν) => {console.log (‘Transfer | sent’, {from, to, number, event}) mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (από , έως, ποσό, συμβάν) => {console.log (‘Transfer | ληφθεί’, {από, σε, ποσό, event}) mutate (undefined, true)}) // κατάργηση ακρόασης όταν το στοιχείο είναι unmounted return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // ενεργοποιήστε το εφέ μόνο στη συνάρτηση mount}, []) εάν (! υπόλοιπο) {επιστροφή <div>…div> } ΕΠΙΣΤΡΟΦΗ ( <div> {parseFloat (formatUnits (υπόλοιπο, δεκαδικά)). toPrecision (4)} {σύμβολο} div> )} Γλώσσα κώδικα: JavaScript (javascript)

Ας κάνουμε μεγέθυνση. Υπάρχουν δύο βασικές διαφορές:

Βασικός ορισμός

Το κλειδί, που χρησιμοποιείται από το useSWR ([διεύθυνση, ‘balanceOf’, λογαριασμός])), πρέπει να ξεκινήσει με μια διεύθυνση Ethereum και όχι με μια μέθοδο. Εξαιτίας αυτού, ο αγοραστής μπορεί να αναγνωρίσει τι θέλουμε να επιτύχουμε και να χρησιμοποιήσουμε το ABI.

Ας αναθεωρήσουμε το φέροντα αναλόγως:

const fetcher = (βιβλιοθήκη: Web3Provider, abi ?: any) => (… args) => {const [arg1, arg2, … params] = args // είναι σύμβαση εάν (isAddress (arg1)) {const address = arg1 const method = arg2 const contract = new Contract (διεύθυνση, abi, library.getSigner () ) σύμβαση επιστροφής [μέθοδος] (… params)} // είναι μια μέθοδος eth call const = arg1 επιστροφή βιβλιοθήκης [μέθοδος] (arg2, … params)} Γλώσσα κώδικα: JavaScript (javascript)

Τώρα έχουμε έναν γενικό σκοπό που μπορεί να αλληλεπιδράσει με τις κλήσεις JSON-RPC του Ethereum. &# 128588;

Φίλτρα καταγραφής

Η άλλη πτυχή είναι πώς να ακούσετε τα συμβάντα ERC20. Το Ether.js παρέχει έναν εύχρηστο τρόπο διαμόρφωσης ενός φίλτρου με βάση τα θέματα και το όνομα του συμβάντος. Περισσότερες πληροφορίες σχετικά με το τι είναι ένα θέμα μπορείτε να βρείτε στο Έγγραφα σταθερότητας.

const contract = new Contract (διεύθυνση, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (account, null) Γλώσσα κώδικα: JavaScript (javascript)

Μόλις δημιουργήσετε μια παρουσία συμβολαίου με το ABI, τότε μπορείτε να μεταβιβάσετε το φίλτρο στην παρουσία της βιβλιοθήκης.

Προειδοποίηση:

Θα μπορούσατε να μπείτε στον πειρασμό να χρησιμοποιήσετε το ποσό στο συμβάν ERC20 απευθείας για να αυξήσετε ή να μειώσετε το υπόλοιπο.

Να γνωρίζετε τον δράκο. Όταν ρυθμίσατε το fetcher, περάσατε ένα clojure ως επιστροφή κλήσης στη λειτουργία on, η οποία περιείχε την τιμή υπολοίπου τη στιγμή.

Αυτό θα μπορούσε να επιδιορθωθεί χρησιμοποιώντας το useRef, αλλά για λόγους απλότητας ας επικυρώσουμε ξανά την προσωρινή μνήμη για να διασφαλίσουμε ότι τα υπόλοιπα είναι φρέσκα: μετάλλαξη (μη καθορισμένο, αληθινό)

Τώρα έχουμε όλα τα κομμάτια που απαιτούνται. Το τελευταίο κομμάτι είναι λίγο κόλλα.

Διαμόρφωσα μερικές σταθερές για να έχω έναν ωραίο τρόπο να αντιστοιχίσω το στοιχείο TokenBalance σε μια λίστα με διακριτικά ανάλογα με το δίκτυο στο οποίο εργαζόμαστε

εξαγωγή const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} interface εξαγωγής IERC20 {σύμβολο: string address: string decimals: number name: string} export const TOKENS_BY_NETWORK: {[κλειδί: αριθμός]: IERC20 []} = {[Networks.Rinkeby]: [{διεύθυνση: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", σύμβολο: "ΝΑΙ", όνομα: "Ντα", δεκαδικά: 18,}, {διεύθυνση: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", σύμβολο: "MKR", όνομα: "Κατασκευαστής", δεκαδικά: 18,},],} Γλώσσα κώδικα: JavaScript (javascript)

Μόλις έχουμε τις σταθερές, είναι εύκολο να αντιστοιχίσουμε τα διαμορφωμένα διακριτικά στο στοιχείο μου:

εξαγωγή const TokenList = ({chainId}) => { ΕΠΙΣΤΡΟΦΗ ( <> {TOKENS_BY_NETWORK [chainId] .map ((token) => ( <Κλειδί TokenBalance = {token.address} {… token} /> ))})} Γλώσσα κώδικα: JavaScript (javascript)

Ολα έτοιμα! Τώρα έχουμε ένα πορτοφόλι Ethereum που φορτώνει υπόλοιπα αιθέρα και μάρκες. Και αν ο χρήστης στέλνει ή λαμβάνει χρήματα, το UI του πορτοφολιού ενημερώνεται.

Ένα πορτοφόλι Ethereum που φορτώνει ισορροπίες αιθέρα και μάρκες.

Δείτε τι κάναμε μέχρι τώρα: GIT βήμα-4

Ανακατασκευή

Ας μετακινήσουμε κάθε στοιχείο σε ξεχωριστό αρχείο και ας κάνουμε το fetcher παγκοσμίως διαθέσιμο χρησιμοποιώντας τον πάροχο SWRConfig.

<Τιμή SWRConfig = {{fetcher: fetcher (βιβλιοθήκη, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {αλυσίδαId} /> <SWRConfig />Γλώσσα κώδικα: HTML, XML (xml)

Με το SWRConfig μπορούμε να διαμορφώσουμε ορισμένες επιλογές όπως πάντα διαθέσιμες, έτσι ώστε να έχουμε μια πιο βολική χρήση του SWR.

const {data: balance, mutate} = useSWR ([διεύθυνση, ‘balanceOf’, λογαριασμός]) Γλώσσα κώδικα: JavaScript (javascript)

Εδώ είναι τα πάντα μετά το refactoring: GIT βήμα-5

Τύλιξε

SWR και Ether.js είναι δύο ωραίες βιβλιοθήκες για να δουλέψετε εάν θέλετε να βελτιώσετε τη στρατηγική ανάκτησης δεδομένων με το Ethereum dapp.

Βασικά πλεονεκτήματα
  • Δηλωτική προσέγγιση
  • Τα δεδομένα είναι πάντα φρέσκα μέσω πριζών στο Web ή επιλογών SWR
  • Αποφύγετε την επανεφεύρεση του τροχού για διαχείριση κατάστασης με προσαρμοσμένο περιβάλλον React

Εάν χρησιμοποιείτε πολλά έξυπνα συμβόλαια στο dapp σας και σας άρεσε αυτό το σεμινάριο, γενικεύω το web3 fetcher σε μια μικρή χρήση: swr-αιθ (Τα αστέρια εκτιμώνται &# 128123;)

Και τέλος, εδώ είναι το πλήρες repo GIT: (https://github.com/aboutlo/swr-eth-tutorial).

Αποκτήστε περισσότερα μαθήματα Ethereum απευθείας στα Εισερχόμενά σας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τα πιο πρόσφατα μαθήματα, εργαλεία, επαγγελματικές συμβουλές για προγραμματιστές Ethereum και πολλά άλλα. InfuraMetaMaskNewsletterΕγγραφείτε στο ενημερωτικό μας δελτίο για τις τελευταίες ειδήσεις Ethereum, εταιρικές λύσεις, πόρους προγραμματιστών και πολλά άλλα. Διεύθυνση ηλεκτρονικού ταχυδρομείου Αποκλειστικό περιεχόμενοΠώς να δημιουργήσετε ένα επιτυχημένο προϊόν BlockchainΔιαδικτυακό σεμινάριο

Πώς να δημιουργήσετε ένα επιτυχημένο προϊόν Blockchain

Πώς να ρυθμίσετε και να εκτελέσετε έναν κόμβο EthereumΔιαδικτυακό σεμινάριο

Πώς να ρυθμίσετε και να εκτελέσετε έναν κόμβο Ethereum

Πώς να φτιάξετε το δικό σας API EthereumΔιαδικτυακό σεμινάριο

Πώς να φτιάξετε το δικό σας API Ethereum

Πώς να δημιουργήσετε ένα κοινωνικό κουπόνιΔιαδικτυακό σεμινάριο

Πώς να δημιουργήσετε ένα κοινωνικό κουπόνι

Χρήση εργαλείων ασφαλείας στην ανάπτυξη έξυπνων συμβάσεωνΔιαδικτυακό σεμινάριο

Χρήση εργαλείων ασφαλείας στην ανάπτυξη έξυπνων συμβάσεων

Το μέλλον των ψηφιακών στοιχείων ενεργητικού και του DeFiΔιαδικτυακό σεμινάριο

Το μέλλον των οικονομικών: Ψηφιακά περιουσιακά στοιχεία και 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