blog 1HaberlerGeliştiricilerEnterpriseBlockchain AçıklamasıEtkinlikler ve KonferanslarBasınBültenler

Haber bültenimize abone ol.

E

Senin gizliliğine saygı duyuyoruz

AnasayfaBlogBlockchain Geliştirme

React ve SWR ile Ethereum’dan Veriler Nasıl Getirilir ve Güncellenir

Kullanıcılarınızın Ethereum cüzdanlarında token bakiyelerinin ve fon transferlerinin güncellenmesi için dapp’ınızın ön ucunu nasıl yapılandıracağınız aşağıda açıklanmıştır. Tarafından Lorenzo Sicilia · Haziran 18, 2020

ethereum hero ile veri getir


Ethereum, merkezi olmayan uygulamalar (dapps) oluşturmamıza izin veriyor. Tipik bir uygulama ile bir dapp arasındaki temel fark, en azından Ethereum ana ağında kullanılan diğer akıllı sözleşmelerden yararlandığınız sürece bir arka uç dağıtmanıza gerek olmamasıdır..

Bu nedenle, ön uç önemli bir rol oynar. Akıllı sözleşmelerden gelen verileri sıralamak ve dağıtmaktan, cüzdanla (donanım veya yazılım) etkileşimleri yönetmek ve her zamanki gibi UX’i yönetmekle sorumludur. Sadece bu değil, tasarım gereği bir dapp JSON-RPC çağrılarını kullanır ve güncellemeleri almak için bir soket bağlantısı açabilir..

Gördüğünüz gibi, yönetecek birkaç şey var ama endişelenmeyin, ekosistem son birkaç ayda oldukça olgunlaştı.

Önkoşullar

Bu eğitim sırasında, aşağıdakilere zaten sahip olduğunuzu varsayacağım:

Geth düğümüne bağlanmak için bir cüzdan

En basit yaklaşım MetaMask kurulumu böylece kullanabilirsin Infura kutudan çıkan altyapı.

Hesabınızda bir miktar Ether

Ethereum ile geliştirme yaparken, bir test ağına geçmenizi ve test Ether’i kullanmanızı şiddetle tavsiye ederim. Test amacıyla paraya ihtiyacınız varsa, bir musluk kullanabilirsiniz.. https://faucet.rinkeby.io/

React’in temel anlayışı

Size adım adım rehberlik edeceğim, ancak React’in nasıl çalıştığını (kancalar dahil) bildiğinizi varsayacağım. Tanıdık olmayan bir şey varsa, React belgeleri.

Çalışan bir React oyun alanı

Bu öğreticiyi Typescript ile yazdım, ancak sadece birkaç şey yazılmıştır, böylece minimum değişikliklerle onu Javascript’te olduğu gibi kullanabilirsiniz. kullandım Parcel.js ama kullanmaktan çekinmeyin React Uygulaması Oluşturun ya da başka bir web uygulaması paketleyicisi.

Ethereum Mainnet’e bağlanın

MetaMask’ı hazırladıktan sonra kullanacağız web3-tepki ağ ile etkileşimi idare etmek için. Ethereum ile oynamak için birçok yararlı araç içeren oldukça kullanışlı bir hook useWeb3React sağlayacaktır..

iplik ekle @ web3-react / core @ web3-react / enjekte-bağlayıcı Kod dili: CSS (css)

O zaman bir Sağlayıcıya ihtiyacınız var. Bir Sağlayıcı, sorgulama yapmak ve imzalı durumu değiştiren işlemler göndermek için Ethereum blok zincirine bir bağlantıyı özetler..

Web3Provider’ı şuradan kullanacağız: Ether.js.

Zaten birkaç kütüphaneye sahip gibi görünüyor, ancak Ethereum ile etkileşim kurarken Javascript veri türlerini Solidity olanlara çevirmeniz gerekiyor. Ayrıca, bir eylemi gerçekleştirmek istediğinizde de işlemleri imzalamanız gerekir. Ether.js bu işlevleri zarif bir şekilde sağlar.

iplik add @ ethersproject / sağlayıcıları Kod dili: CSS (css)

uyarı: yukarıdaki Ether.js paketi şu anda içinde bulunan v5’tir. beta.

Bundan sonra, ihtiyacımız olan her şeye sahip olup olmadığımızı kontrol etmek için minimal bir merhaba dünya yazmaya hazırız:

React’i ‘react’ten içe aktarın {Web3ReactProvider}’ @ web3-react / core’dan içe aktarın {Web3Provider} ‘@ ethersproject / provider’lardan içe aktarın {useWeb3React}’ @ web3-react / core’dan içe aktarın {InjectConnector} ‘dan’ @ web3-react / enjekte-bağlayıcı ‘export const injectedConnector = new InjectedConnector ({supportedChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) getLibrary işlevi (sağlayıcı: herhangi): Web3Provider {const library = new Web3Provider (provider) library.pollingInterval = 12000 return library} export const Wallet = () => {const {chainId, account, activ, active} = useWeb3React () const onClick = () => {activ (injectedConnector)} dönüş ( <div> <div>ChainId: {chainId} div> <div>Hesap: {account} div> {aktif ? ( <div>✅ div> ): ( <düğme türü ="buton" onClick = {onClick}> Bağlan düğmesi> )} div> )} ihracat sabit App = () => { dönüş ( <Web3ReactProvider getLibrary = {getLibrary}> <Cüzdan /> Web3ReactProvider> )} Kod dili: JavaScript (javascript)

Eğer ödevini yaptıysan şunun gibi bir şeye sahip olmalısın:

Enjekte edilmiş konektör.

İşte şimdiye kadar yaptık: GIT – adım-1

Mainnet’ten Veri Nasıl Getirilir

kullanacağım SWR veri getirmeyi yönetmek için.

Başarmak istediğim şey bu.

const {veri: denge} = useSWR (["getBalance", hesap, "En son"]) Kod dili: JavaScript (javascript)

Oldukça havalı &# 128578;

Numarayı ortaya çıkaralım! SWR, Stale-While-Revalidate anlamına gelir; RFC 5861.

SWR önce verileri önbellekten (eski) döndürür, ardından getirme isteğini gönderir (yeniden doğrulama) ve son olarak güncel verilerle tekrar gelir.

SWR bir anahtarı kabul eder ve perde arkası çözmeyi başarır

Bunu yapmak için SWR, bir söz vererek anahtarı çözebilen bir alıcıyı geçmeye izin verir. SWR’nin merhaba dünyası, getirme API’sine veya Axios’a dayalı bir getirici ile REST API isteklerine dayanır.

SWR ile ilgili harika olan şey, bir alıcı yaratmanın tek gerekliliğinin bir söz vermesi gerektiğidir..

İşte Ethereum için bir getiriciye ilişkin ilk uygulamam:

const fetcher = (kitaplık) => (… değiştirgeler) => {const [yöntem, … params] = args console.log (yöntem, parametreler) iade kitaplığı [yöntem] (… parametreler)} Kod dili: JavaScript (javascript)

Gördüğünüz gibi kısmen uygulanan bir işlevdir. Bu şekilde, alıcıyı yapılandırdığımda kitaplığı (Web3Provider’ım) enjekte edebilirim. Daha sonra, bir anahtar her değiştiğinde, gerekli sözü geri getirerek işlev çözülebilir..

Şimdi bileşenimi oluşturabilirim

ihracat sabit Bakiyesi = () => {const {hesap, kitaplık} = useWeb3React () const {veri: denge} = useSWR ([‘getBalance’, hesap, ‘en son’], {fetcher: fetcher (kitaplık),}) if (! bakiye) {dönüş <div>…div> } dönüş <div>Bakiye: {balance.toString ()} div> } Kod dili: JavaScript (javascript)

Döndürülen denge nesnesi bir BigNumber’tır.

Denge bileşeni.

Gördüğünüz gibi, sayı biçimlendirilmemiş ve son derece büyük. Bunun nedeni, Solidity’nin 256 bit’e kadar Tamsayı kullanmasıdır.

Numarayı okunabilir bir biçimde görüntülemek için çözüm, Ether.js yardımcı programlarından yukarıda belirtilen yardımcı programlardan birini kullanıyor: formatEther (denge)

iplik install @ ethersproject / unitsKod dili: CSS (css)

Artık BitInt’i insan tarafından okunabilir bir biçimde işlemek ve biçimlendirmek için bileşenimi yeniden çalışabilirim:

ihracat sabit Bakiyesi = () => {const {hesap, kitaplık} = useWeb3React () const {veri: denge} = useSWR ([‘getBalance’, hesap, ‘en son’], {fetcher: fetcher (kitaplık),}) if (! bakiye) {dönüş <div>…div> } dönüş <div>Ξ {parseFloat (formatEther (denge)). ToPrecision (4)} div> } Kod dili: JavaScript (javascript) İnsan tarafından okunabilir bir biçimde BitInt.

Şimdiye kadar yaptığımız şey: GIT adım 2

Veriler Gerçek Zamanlı Olarak Nasıl Güncellenir

SWR, dahili önbelleğini güncellemek için bir mutate işlevi açığa çıkarır.

const {data: balance, mutate} = useSWR ([‘getBalance’, hesap, ‘en son’], {fetcher: fetcher (kitaplık),}) const onClick = () => {mutate (yeni BigNumber (10), yanlış)} Kod dili: JavaScript (javascript)

Değişim işlevi, oluşturulduğu anahtara (ör. [‘GetBalance’, hesap, ‘en son’] otomatik olarak bağlanır. İki parametre kabul eder. Yeni veriler ve bir doğrulama tetiklenecekse. Gerekirse, SWR önbelleği güncellemek için otomatik olarak alıcıyı kullanacak &# 128165;

Beklendiği gibi, Solidity olayları, EVM’nin günlük kaydı işlevinin üzerinde küçük bir soyutlama sağlar. Uygulamalar, bir Ethereum istemcisinin RPC arayüzü aracılığıyla bu olaylara abone olabilir ve bunları dinleyebilir.

Ether.js, bir etkinliğe abone olmak için basit bir API’ye sahiptir:

const {hesap, kitaplık} = useWeb3React () kitaplığı.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) Kod dili: JavaScript (javascript)

Şimdi her iki yaklaşımı da yeni bileşende birleştirelim

ihracat sabit Bakiyesi = () => {const {hesap, kitaplık} = useWeb3React () const {veri: denge, mutate} = useSWR ([‘getBalance’, hesap, ‘en son’], {fetcher: fetcher (kitaplık),}) useEffect (() => {// bir Ethereum adresindeki değişiklikleri dinle console.log (“blokları dinliyor …”) library.on (‘block’, () => {console.log (‘güncelleme bakiyesi …’) mutate (undefined, true)}) // bileşen bağlı değilken dinleyiciyi kaldır return () => {library.removeAllListeners (‘block’)} // efekti yalnızca bileşen bağlarken tetikler}, []) if (! balance) {return <div>…div> } dönüş <div>Ξ {parseFloat (formatEther (denge)). ToPrecision (4)} div> } Kod dili: JavaScript (javascript)

Başlangıçta, SWR hesap bakiyesini alacak ve ardından her blok olayı aldığında, bir yeniden getirmeyi tetiklemek için mutat kullanacaktır.

not: Mutat kullandık (tanımlanmamış, doğru) çünkü mevcut olaydan gerçek bakiyeyi alamıyoruz, sadece bakiyenin yeniden getirilmesini tetikliyoruz.

Aşağıda, bazı ETH alışverişi yapan iki Ethereum cüzdanıyla hızlı bir demo var.

ETH alışverişi yapan iki Ethereum cüzdanının demosu.

İşte şimdiye kadar yaptık: GIT adım 3

Akıllı Bir Sözleşmeyle Nasıl Etkileşimde Bulunulur

Şimdiye kadar, SWR kullanmanın temellerini ve bir Web3Provider aracılığıyla nasıl basit bir aramanın yapılacağını gösterdik. Şimdi akıllı bir sözleşmeyle nasıl etkileşim kuracağımızı keşfedelim.

Ether.js, Solidity Compiler tarafından oluşturulan Contract Application Binary Interface (ABI) ABI’yi kullanarak akıllı sözleşme etkileşimini yönetir.

Sözleşme Uygulaması İkili Arayüzü (ABI), Ethereum ekosistemindeki sözleşmelerle hem blok zincirinin dışından hem de sözleşmeden sözleşmeye etkileşim için etkileşime girmenin standart yoludur..

Örneğin, aşağıdaki basit akıllı sözleşme verildiğinde:

pragma sağlamlığı ^ 0.5.0; sözleşme Test {yapıcı () genel {b = onaltılık"12345678901234567890123456789012"; } olay Olayı (uint indeksli a, bayt32 b); olay Event2 (uint indeksli a, bayt32 b); function foo (uint a) public {emit Event (a, b); } bayt32 b; } Kod dili: JavaScript (javascript)

bu oluşturulan ABI’dır

[{ "tip": "Etkinlik", "girişler": [{ "isim": "a", "tip": "uint256", "indekslenmiş": doğru }, { "isim": "b", "tip": "bayt32", "indekslenmiş": yanlış } ], "isim": "Etkinlik" }, { "tip": "Etkinlik", "girişler": [{ "isim": "a", "tip": "uint256", "indekslenmiş": doğru }, { "isim": "b", "tip": "bayt32", "indekslenmiş": yanlış } ], "isim": "Event2" }, { "tip": "işlevi", "girişler": [{ "isim": "a", "tip": "uint256" }], "isim": "foo", "çıktılar": []}] Kod dili: Yorumlu JSON / JSON (json)

ABI’leri kullanmak için, bunları doğrudan kodunuza kopyalayabilir ve gerektiği yerde içe aktarabiliriz. Bu demoda bir standart kullanacağız ERC20 ABI çünkü iki jetonun bakiyesini almak istiyoruz: DAI ve MKR.

Sonraki adım bileşeni oluşturmaktır

ihracat const TokenBalance = ({sembol, adres, ondalıklar}) => {const {hesap, kitaplık} = useWeb3React () const {veri: denge, mutate} = useSWR ([adres, ‘balanceOf’, hesap], {getirici: getirici (kitaplık, ERC20ABI),}) useEffect (() => {// bir Ethereum adresindeki değişiklikleri dinleyin console.log (`Transfer için dinleme … ‘) const contract = new Contract (adres, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (hesap, null) library.on (fromMe, (from, to, amount, event) => {console.log (‘Transfer | gönderildi’, {from, to, amount, event}) mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from , miktar, olay) => {console.log (‘Transfer | alındı’, {from, to, amount, event}) mutate (undefined, true)}) // bileşen bağlantısı kesildiğinde dinleyiciyi kaldır return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // efekti yalnızca bileşen bağlamada tetikle}, []) if (! balance) {return <div>…div> } dönüş ( <div> {parseFloat (formatUnits (denge, ondalık sayılar)). toPrecision (4)} {sembol} div> )} Kod dili: JavaScript (javascript)

Yakınlaştıralım. İki temel fark vardır:

Anahtar tanım

UseSWR ([adres, ‘balanceOf’, hesap]) tarafından kullanılan anahtarın, bir yöntemden ziyade bir Ethereum adresiyle başlaması gerekir. Bu nedenle, alıcı, neye ulaşmak istediğimizi anlayabilir ve ABI’yi kullanabilir..

Getiriciyi buna göre yeniden düzenleyelim:

const fetcher = (kitaplık: Web3Provider, abi ?: herhangi) => (… değiştirgeler) => {const [arg1, arg2, … params] = args // bu bir sözleşmedir if (isAddress (arg1)) {const address = arg1 const method = arg2 const contract = new Contract (adres, abi, library.getSigner () ) dönüş sözleşmesi [yöntem] (… params)} // bu bir eth çağrısı sabit yöntemi = arg1 dönüş kitaplığı [yöntem] (arg2, … parametreler)} Kod dili: JavaScript (javascript)

Artık Ethereum’un JSON-RPC çağrılarıyla etkileşime girebilen genel amaçlı bir alıcıya sahibiz.. &# 128588;

Günlük filtreleri

Diğer bir yönü de ERC20 olaylarının nasıl dinleneceğidir. Ether.js, olayın konularına ve adına göre bir filtre yapılandırmanın kullanışlı bir yolunu sağlar. Konunun ne olduğu hakkında daha fazla bilgiyi şurada bulabilirsiniz: Solidity belgeleri.

const sözleşme = yeni Sözleşme (adres, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (hesap, boş) Kod dili: JavaScript (javascript)

ABI ile bir sözleşme örneği oluşturduğunuzda, filtreyi kitaplık örneğine geçirebilirsiniz..

Uyarı:

Bakiyeyi artırmak veya azaltmak için ERC20 etkinliğindeki miktarı doğrudan kullanmak isteyebilirsiniz..

Ejderhanın farkında olun. Getiriciyi kurduğunuzda, o zamanki denge değerini içeren on işlevine geri arama olarak bir tıkanıklık geçirdiniz..

Bu bir useRef kullanılarak düzeltilebilir, ancak basitlik adına, bakiyelerin taze olduğundan emin olmak için önbelleği yeniden doğrulayalım: mutate (undefined, true)

Artık gerekli tüm parçalara sahibiz. Son parça biraz tutkal.

TokenBalance bileşenimi, çalıştığımız ağa bağlı olarak bir token listesine eşlemenin güzel bir yolunu bulmak için birkaç sabiti yapılandırdım:

ihracat const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} dışa aktarma arayüzü IERC20 {sembol: dize adresi: dize ondalık sayılar: sayı adı: dize} dışa aktarma sabit TOKENS_BY_NETWORK: {[anahtar: sayı]: IERC20 []} = {[Networks.Rinkeby]: [{adres: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", sembol: "DAI", isim: "Dai", ondalık sayılar: 18,}, {adres: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", sembol: "MKR", isim: "Yapıcı", ondalık sayılar: 18,},],} Kod dili: JavaScript (javascript)

Sabitlere sahip olduğumuzda, yapılandırılmış jetonları bileşenimle eşleştirmek kolaydır:

ihracat const TokenList = ({chainId}) => { dönüş ( <> {TOKENS_BY_NETWORK [chainId] .map ((jeton) => ( <TokenBalance anahtarı = {token.address} {… token} /> ))})} Kod dili: JavaScript (javascript)

Her şey hazır! Şimdi eter ve token bakiyeleri yükleyen bir Ethereum cüzdanımız var. Kullanıcı para gönderir veya alırsa, cüzdan kullanıcı arayüzü güncellenir.

Ether ve token bakiyelerini yükleyen bir Ethereum cüzdanı.

Şimdiye kadar yaptıklarımız: GIT adım 4

Yeniden düzenleme

Her bileşeni ayrı bir dosyada taşıyalım ve getiriciyi SWRConfig sağlayıcısını kullanarak global olarak kullanılabilir hale getirelim.

<SWRConfig değeri = {{getirici: getirici (kitaplık, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {chainId} /> <SWRConfig />Kod dili: HTML, XML (xml)

SWRConfig ile, SWR’yi daha rahat bir şekilde kullanabilmemiz için bazı seçenekleri her zaman olduğu gibi yapılandırabiliriz..

const {data: balance, mutate} = useSWR ([adres, ‘balanceOf’, hesap]) Kod dili: JavaScript (javascript)

İşte yeniden düzenlemeden sonraki her şey: GIT adım 5

Sarmak

SWR ve Ether.js Ethereum dapp ile veri getirme stratejinizi düzene koymak istiyorsanız, üzerinde çalışabileceğiniz iki güzel kitaplık var.

Temel avantajlar
  • Bildirime dayalı yaklaşım
  • Veriler web soketleri veya SWR seçenekleri aracılığıyla her zaman taze
  • Özel React bağlamıyla durum yönetimi için tekerleği yeniden icat etmekten kaçının

Dapp’ınızda birden fazla akıllı sözleşme kullanıyorsanız ve bu öğreticiyi beğendiyseniz, web3 getiriciyi küçük bir kullanıma genelleştirdim: swr-eth (Yıldızlar takdir edilir &# 128123;)

Ve son olarak, işte tam GIT deposu: (https://github.com/aboutlo/swr-eth-tutorial).

Doğrudan Gelen Kutunuza Daha Fazla Ethereum Öğreticisi Alın

En son Ethereum geliştirici kursları, araçları, profesyonel ipuçları ve daha fazlası için haber bültenimize abone olun. En son Ethereum haberleri, kurumsal çözümler, geliştirici kaynakları ve daha fazlası için haber bültenimize abone olun.Başarılı Bir Blockchain Ürünü Nasıl OluşturulurWeb semineri

Başarılı Bir Blockchain Ürünü Nasıl Oluşturulur

Ethereum Düğümü Nasıl Kurulur ve ÇalıştırılırWeb semineri

Ethereum Düğümü Nasıl Kurulur ve Çalıştırılır

Kendi Ethereum API'nizi Nasıl Oluşturabilirsiniz?Web semineri

Kendi Ethereum API’nizi Nasıl Oluşturabilirsiniz?

Sosyal Simge Nasıl OluşturulurWeb semineri

Sosyal Simge Nasıl Oluşturulur

Akıllı Sözleşme Geliştirmede Güvenlik Araçlarını KullanmaWeb semineri

Akıllı Sözleşme Geliştirmede Güvenlik Araçlarını Kullanma

Finansın Geleceği Dijital Varlıklar ve DeFiWeb semineri

Finansın Geleceği: Dijital Varlıklar ve DeFi

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