रिएक्ट और एसडब्ल्यूआर के साथ एथेरियम से डेटा कैसे प्राप्त करें और अपडेट करें

ब्लॉग 1NewsDevelopersEnterpriseBlockchain समझाया और सम्मेलनसमाचार

Contents

हमारे न्यूज़लेटर की सदस्यता लें.

ईमेल पता

हम आपकी निजता का सम्मान करते हैं

HomeBlogBlockchain विकास

रिएक्ट और एसडब्ल्यूआर के साथ एथेरियम से डेटा कैसे प्राप्त करें और अपडेट करें

यहां बताया गया है कि आपके डैप के फ्रंटेंड को टोकन बैलेंस और फंड ट्रांसफर अपडेट को अपने उपयोगकर्ताओं के एथेरेम वॉलेट्स में अपडेट कैसे करें। लोरेंजो सिसिलियाजुन 18, 2020 जून 18, 2020 को पोस्ट किया गया

एथेरियम नायक के साथ डेटा प्राप्त करें

एथेरियम हमें विकेंद्रीकृत अनुप्रयोगों (डैप) के निर्माण की अनुमति देता है। एक विशिष्ट एप्लिकेशन और डैप के बीच मुख्य अंतर यह है कि आपको बैकएंड को तैनात करने की आवश्यकता नहीं है – कम से कम जब तक आप Ethereum mainnet पर तैनात अन्य स्मार्ट कॉन्ट्रैक्ट का लाभ नहीं लेते हैं.

उस वजह से, दृश्यपटल एक प्रमुख भूमिका निभाता है। यह स्मार्ट कॉन्ट्रैक्ट्स से डेटा को मॉर्स्लिंग और अनमर्श करना, वॉलेट (हार्डवेयर या सॉफ़्टवेयर) के साथ इंटरैक्शन को हैंडल करना और हमेशा की तरह, UX को मैनेज करना है। इतना ही नहीं, डिजाइन के अनुसार, एक डैप JSON-RPC कॉल का उपयोग करता है और यह अपडेट प्राप्त करने के लिए सॉकेट कनेक्शन खोल सकता है.

जैसा कि आप देख सकते हैं कि ऑर्केस्ट्रेट करने के लिए कुछ चीजें हैं लेकिन चिंता मत करो, पिछले कुछ महीनों में पारिस्थितिकी तंत्र काफी परिपक्व हो गया है.

आवश्यक शर्तें

इस ट्यूटोरियल के दौरान, मैं मान लूंगा कि आपके पास पहले से ही निम्नलिखित हैं:

एक अखरोट एक गेथ नोड से कनेक्ट करने के लिए

सबसे सरल तरीका है मेटामास्क स्थापित करना ताकि आप उपयोग कर सकें इन्फ्रा बुनियादी ढाँचा.

आपके खाते में कुछ ईथर

जब आप इथेरियम के साथ विकसित हो रहे हैं, तो मैं आपको दृढ़ता से एक टेस्टनेट पर स्विच करने और टेस्ट ईथर का उपयोग करने की सलाह देता हूं। यदि आपको परीक्षण उद्देश्य के लिए धन की आवश्यकता है तो आप नल का उपयोग कर सकते हैं. https://faucet.rinkeby.io/


प्रतिक्रिया की बुनियादी समझ

मैं आपको कदम से कदम का मार्गदर्शन करूंगा लेकिन मैं आपको यह मानकर चलता हूं कि रिएक्ट कैसे काम करता है (हुक सहित)। अगर कुछ अपरिचित लगता है तो परामर्श करें प्रतिक्रिया प्रलेखन.

एक कार्यशील प्रतिक्रिया खेल का मैदान

मैंने इस ट्यूटोरियल को टाइपस्क्रिप्ट के साथ लिखा है लेकिन बस कुछ चीजें टाइप की गई हैं ताकि कम से कम बदलाव के साथ आप इसका उपयोग कर सकें क्योंकि यह जावास्क्रिप्ट में भी है। मैंनें इस्तेमाल किया Parcel.js लेकिन बेझिझक उपयोग करें रिएक्ट ऐप बनाएं भी या अन्य वेब अनुप्रयोग बंडल.

Ethereum Mainnet से कनेक्ट करें

मेटामास्क तैयार होने के बाद, हम उपयोग करने जा रहे हैं web3- प्रतिक्रिया नेटवर्क के साथ सहभागिता को संभालने के लिए। यह आपको काफी आसान हुक का उपयोग करेगा Web3React, जिसमें Ethereum के साथ खेलने के लिए कई उपयोगी सुविधाएं हैं.

यार्न जोड़ें

फिर आपको एक प्रदाता की आवश्यकता होती है। एक प्रदाता प्रश्नों को जारी करने और हस्ताक्षरित राज्य-परिवर्तन लेनदेन भेजने के लिए एथेरियम ब्लॉकचैन के लिए एक कनेक्शन का सार करता है.

हम Web3Provider का उपयोग करेंगे ईथर.

ऐसा लगता है कि पहले से ही कुछ पुस्तकालय हैं, लेकिन एथेरियम के साथ बातचीत करते समय आपको जावास्क्रिप्ट डेटा प्रकारों को सॉलिडिटी में अनुवाद करने की आवश्यकता होती है। और, जब आप किसी कार्रवाई को अंजाम देना चाहते हैं तो लेन-देन पर हस्ताक्षर करना भी आवश्यक है। Ether.js सुरुचिपूर्ण ढंग से ये कार्य प्रदान करते हैं.

यार्न जोड़ें @ ethersproject / प्रदाताओंकोड भाषा: सीएसएस (सीएसएस)

सूचना: उपरोक्त Ether.js पैकेज वर्तमान में v5 है बीटा.

उसके बाद हम एक न्यूनतम हैलो दुनिया को जगाने के लिए तैयार हैं ताकि यह जांचा जा सके कि हमारे पास सब कुछ है या नहीं:

इंपोर्ट रिएक्शन ‘रिएक्शन’ इंपोर्ट {Web3ReactProvider} से ‘@ वेब 3-रिएक्शन / कोर’ इंपोर्ट {Web3Provider} से ‘@ ethersproject / प्रोवाइडर्स’ इंपोर्ट से {useWeb3React} से ‘@ वेब 3-रिएक्शन / कोर’ इंपोर्ट {इंडीकेटर कॉन्टेक्टर} से @ @ web3- प्रतिक्रिया / इंजेक्ट-कनेक्टर ‘एक्सपोर्ट कास्ट इंजेक्टकॉन्क्टर = नया इंजेक्टकॉन्क्टर ({supportChainIds: [1, // मेनटे 3, // रोपस्टेन 4, // रिंकीबे 5, // गोएर्ने 42, // कोवन],}) फंक्शन गेटलाइफ (प्रदाता: कोई भी): Web3Provider {कास्ट लाइब्रेरी = नया Web3Provider (प्रदाता) पुस्तकालय।पॉलिंगइंटरवल = 12000 रिटर्न लाइब्रेरी} एक्सपोर्ट कास्ट वॉलेट = () => {const {chainId, account, active, active} = useWeb3React () const onClick = () => {सक्रिय करें (इंजेक्शन इंजेक्टर)} वापसी ( <डिव> <डिव>चैनआईड: {चेनआईड} डिव> <डिव>खाता: {खाता} div> {सक्रिय? () <डिव>✅ div> ): ( <बटन प्रकार ="बटन" onClick = {onClick}> कनेक्ट बटन> )} डिव> )} निर्यात कांस्ट ऐप = () => { वापसी ( <Web3ReactProvider getLibrary = {getLibrary}> <बटुआ /> Web3ReactProvider> )} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

यदि आपने अपना होमवर्क किया तो आपको कुछ इस तरह से होना चाहिए:

इंजेक्शन लगाया।

यहाँ हमने अब तक क्या किया: जीआईटी – चरण -1

मेननेट से डाटा कैसे प्राप्त करें

मैं इस्तेमाल करूँगा SWR डेटा लाने का प्रबंधन करना.

यही मैं हासिल करना चाहता हूं.

const {data: balance} = useSWR (["GetBalance", लेखा, "नवीनतम"]) कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

काफी शांत &# 128578;

चलो चाल का अनावरण करें! SWR का अर्थ है, बासी-जबकि-बदला, एक HTTP कैश अमान्य रणनीति द्वारा लोकप्रिय RFC 5861.

SWR पहले कैश (बासी) से डेटा लौटाता है, फिर भ्रूण अनुरोध (रिवाइडलेट) भेजता है, और अंत में फिर से अप-टू-डेट डेटा के साथ आता है.

SWR एक कुंजी को स्वीकार करता है और पर्दे के पीछे हल करने का प्रबंधन करेगा

ऐसा करने के लिए, SWR एक वादा वापस करके कुंजी को हल करने में सक्षम एक भ्रूण को पारित करने की अनुमति देता है। SWR का हैलो वर्ल्ड, REST API रिक्वेस्ट पर आधारित है, जो fetch API या Axios पर आधारित है.

एसडब्ल्यूआर के बारे में क्या शानदार है कि एक भ्रूण बनाने के लिए एकमात्र आवश्यकता यह है कि उसे एक वादा वापस करना चाहिए.

तो यहाँ Ethereum के लिए एक भ्रूण का मेरा पहला कार्यान्वयन है:

const fetcher = (पुस्तकालय) => (… आर्ग्स) => {const [विधि, … params] = args कंसोल.लॉग (विधि, params) वापस पुस्तकालय [विधि] (… params)} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

जैसा कि आप देख सकते हैं, यह आंशिक रूप से लागू फ़ंक्शन है। इस तरह, मैं पुस्तकालय (मेरा Web3Provider) इंजेक्ट कर सकता हूं जब मैं भ्रूण को कॉन्फ़िगर करता हूं। बाद में, हर बार एक महत्वपूर्ण परिवर्तन, आवश्यक वादा वापस करके फ़ंक्शन को हल किया जा सकता है.

अब मैं अपना कंपोनेंट बना सकता हूं

Export const संतुलन = () => {const {खाता, लाइब्रेरी} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, खाता, ‘नवीनतम’], {fetcher: fetcher (पुस्तकालय),} अगर (बैलेंस) {return! <डिव>…डिव> } वापसी <डिव>शेष राशि: {balance.toString ()} div> } कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

शेष राशि ऑब्जेक्ट एक BigNumber है.

संतुलन घटक।

जैसा कि आप देख सकते हैं, संख्या तैयार नहीं है और बहुत बड़ी है। ऐसा इसलिए है क्योंकि सॉलिडिटी 256 बिट्स तक के इंटीजर का इस्तेमाल करती है.

मानव पठनीय प्रारूप में संख्या को प्रदर्शित करने के लिए, समाधान Ether.js उपयोगिताओं में से एक पूर्वोक्त उपयोगिताओं में से एक का उपयोग कर रहा है: formatEther (शेष)

यार्न स्थापित @ ethersproject / यूनिट्सकोड भाषा: सीएसएस (सीएसएस)

अब मैं अपने घटक को मानव पठनीय रूप में BitInt को संभालने और प्रारूपित करने के लिए पुन: काम कर सकता हूं:

Export const संतुलन = () => {const {खाता, लाइब्रेरी} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, खाता, ‘नवीनतम’], {fetcher: fetcher (पुस्तकालय),} अगर (बैलेंस) {return! <डिव>…डिव> } वापसी <डिव>Ξ {parseFloat (formatEther (संतुलन))> } कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट) एक मानव पठनीय रूप में BitInt।

हमने अभी तक यही किया है: जीआईटी चरण -2

वास्तविक समय में डेटा को कैसे अपडेट करें

SWR अपने आंतरिक कैश को अपडेट करने के लिए एक म्यूट फ़ंक्शन को उजागर करता है.

const {data: balance, mutate} = useSWR ([‘getBalance’, खाता, ‘नवीनतम’], {fetcher: fetcher (पुस्तकालय),}) const onClick = () => {म्यूटेट (नया बिगनंबर (10), गलत)} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

म्यूटेट फ़ंक्शन स्वचालित रूप से कुंजी के लिए बाध्य होता है (जैसे [‘getBalance’, खाता, ‘नवीनतम’] जिसमें से उत्पन्न किया गया है। यह दो मापदंडों को स्वीकार करता है। नया डेटा और यदि एक सत्यापन चालू होना चाहिए। कैश को अपडेट करने के लिए स्वचालित रूप से भ्रूण का उपयोग करेगा &# 128165;

जैसा कि अनुमान है, सॉलिडिटी इवेंट ईवीएम की लॉगिंग कार्यक्षमता के शीर्ष पर एक छोटी सी अमूर्तता देते हैं। एक Ethereum क्लाइंट के RPC इंटरफ़ेस के माध्यम से अनुप्रयोग इन घटनाओं को सब्सक्राइब और सुन सकते हैं.

Ether.js में किसी ईवेंट की सदस्यता के लिए एक साधारण API है:

const {खाता, लाइब्रेरी} = उपयोगWeb3React () Library.on ("ब्लॉक संख्या", (ब्लॉकनंबर) => {कंसोल.लॉग ({ब्लॉकनंबर})}) कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

अब नए घटक में दोनों दृष्टिकोणों को मिलाएं

Export const संतुलन = () => {const {खाता, लाइब्रेरी} = उपयोग करें Web3React () const {data: balance, mutate} = useSWR ([‘getBalance’, खाता, ‘नवीनतम’], {fetcher: fetcher (पुस्तकालय),}) useEffect () => {// एक Ethereum एड्रेस कंसोल पर परिवर्तन के लिए सुनो। (`ब्लॉक के लिए सुन रहा है …`) Library.on (‘ब्लॉक’ () =)> {कंसोल.लॉग (‘अपडेट बैलेंस …’) म्यूटेट (अपरिभाषित, सत्य)}) // घटक के बिना रिटर्न के वापस आने पर श्रोता को हटा दें () => {Library.removeAllListeners (‘ब्लॉक’)} // घटक माउंट पर ही प्रभाव को ट्रिगर करें}, []) अगर ((शेष) {वापसी! <डिव>…डिव> } वापसी <डिव>Ξ {parseFloat (formatEther (संतुलन))> } कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

प्रारंभ में, SWR खाता शेष राशि प्राप्त करेगा, और फिर हर बार यह एक ब्लॉक ईवेंट प्राप्त करता है, जो री-फ़िंच को ट्रिगर करने के लिए म्यूट का उपयोग करेगा.

सूचना: हमने म्यूटेट (अपरिभाषित, सत्य) का उपयोग किया है क्योंकि हम वर्तमान घटना से प्राप्त नहीं कर सकते हैं वास्तविक संतुलन जिसे हम अभी शेष राशि का पुन: प्राप्त करते हैं.

नीचे दो Ethereum पर्स के साथ क्विक डेमो है जो कुछ ETH का आदान-प्रदान कर रहे हैं.

ETH का आदान-प्रदान करने वाले दो Ethereum पर्स का डेमो।

यहाँ हमने अब तक क्या किया: जीआईटी स्टेप -3

कैसे एक स्मार्ट अनुबंध के साथ बातचीत करने के लिए

अब तक हमने एसडब्ल्यूआर का उपयोग करने की मूल बातें और वेब 3प्रोवाइडर के माध्यम से एक बुनियादी कॉल करने का तरीका बताया। आइए अब पता करें कि एक स्मार्ट अनुबंध के साथ कैसे संपर्क करें.

Ether.js सॉलिडिटी कंपाइलर द्वारा उत्पन्न कॉन्ट्रैक्ट एप्लिकेशन बाइनरी इंटरफेस (ABI) ABI का उपयोग करके स्मार्ट कॉन्ट्रैक्ट इंटरैक्शन को संभालता है.

कॉन्ट्रैक्ट एप्लिकेशन बाइनरी इंटरफेस (ABI) ब्लॉकचेन के बाहर और कॉन्ट्रैक्ट-टू-कॉन्ट्रैक्ट इंटरैक्शन के लिए, एथेरियम इकोसिस्टम में अनुबंधों के साथ बातचीत करने का मानक तरीका है.

उदाहरण के लिए, नीचे दिए गए सरल स्मार्ट अनुबंध:

प्रैग्म सॉलिडिटी ^ 0.5.0; अनुबंध टेस्ट {कंस्ट्रक्टर () सार्वजनिक {बी = हेक्स"12345678901234567890123456789012"; } ईवेंट ईवेंट (uint अनुक्रमित a, बाइट्स 32 b); घटना Event2 (एक बाइट्स अनुक्रमित, बाइट्स 32 बी); function foo (uint a) public {emit Event (a, b); } बाइट्स 32 बी; } कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

यह ABI द्वारा निर्मित है

[{ "प्रकार": "प्रतिस्पर्धा", "आदानों": [{ "नाम": "ए", "प्रकार": "uint256", "अनुक्रमित": सच }, { "नाम": "ख", "प्रकार": "बाइट्स 32", "अनुक्रमित": असत्य } ], "नाम": "प्रतिस्पर्धा" } { "प्रकार": "प्रतिस्पर्धा", "आदानों": [{ "नाम": "ए", "प्रकार": "uint256", "अनुक्रमित": सच }, { "नाम": "ख", "प्रकार": "बाइट्स 32", "अनुक्रमित": असत्य } ], "नाम": "घटना २" } { "प्रकार": "समारोह", "आदानों": [{ "नाम": "ए", "प्रकार": "uint256" }], "नाम": "फू", "आउटपुट": []}] कोड भाषा: JSON / JSON टिप्पणी के साथ (json)

ABI का उपयोग करने के लिए, हम उन्हें सीधे अपने कोड में कॉपी कर सकते हैं और उन्हें आयात कर सकते हैं जहाँ इसकी आवश्यकता है। इस डेमो में, हम एक मानक का उपयोग करेंगे ईआरसी 20 ABI क्योंकि हम दो टोकन के संतुलन को पुनः प्राप्त करना चाहते हैं: DAI और MKR.

अगला कदम घटक बना रहा है

निर्यात कांस्टेबल टोकनबैलेंस = ({प्रतीक, पता, दशमलव)} => {const {खाता, लाइब्रेरी} = useWeb3React () const {data: balance, mutate} = useSWR ([पता, O balanceOf ’, खाता], {fetcher: fetcher (पुस्तकालय, ERC20DI),}) useEffect ())> {// एक Ethereum एड्रेस कंसोल पर परिवर्तन के लिए सुनो। (`ट्रांसफर के लिए सुन रहा है …`) कॉन्स्ट कॉन्ट्रैक्ट = नया कॉन्ट्रैक्ट (पता, ERC20ABI, Library.getSigner ()) const fromMe = कॉन्ट्रैक्ट.फिल्टर। संदर्भ (खाता,) null) Library.on (fromMe, (से, से, राशि, घटना) => {कंसोल.लॉग (‘ट्रांसफर | भेजा गया’, {से, के लिए, राशि, घटना}) म्यूट (अपरिभाषित, सत्य)}) कॉन्स्ट toMe = contract.filters.Transfer (null, account) Library.on (toMe, (से) ,,, राशि, घटना) => {कंसोल.लॉग (| ट्रांसफर | प्राप्त हुआ ’, {से, के लिए, राशि, घटना}) म्यूट (अपरिभाषित, सत्य)}) // जब घटक अनमैन्डेड रिटर्न () = है तो श्रोता को हटा दें> {Library.removeAllListeners (टॉमी) <डिव>…डिव> } वापसी ( <डिव> {parseFloat (formatUnits (संतुलन, दशमलव))।> )} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

आइए ज़ूम इन करें। दो मुख्य अंतर हैं:

प्रमुख परिभाषा

KeySWR ([पता, ‘balanceOf’, खाता]) द्वारा प्रयुक्त कुंजी, एक विधि के बजाय एक Ethereum पते के साथ शुरू करने की आवश्यकता है। उसकी वजह से, भ्रूण को यह पता चल सकता है कि हम क्या हासिल करना चाहते हैं और एबीआई का उपयोग करें.

अपने अनुसार भ्रूण को रिफ्लेक्टर करें:

const fetcher = (पुस्तकालय: Web3Provider, अबी ?: कोई भी) => (… आर्ग्स) => {const] ) रिटर्न कॉन्ट्रैक्ट [विधि] (… परमेस)} // यह एक एथ कॉल कास्ट मेथड है = arg1 रिटर्न लाइब्रेरी [मेथड] (arg2, … params)} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

अब हमारे पास सामान्य उद्देश्य वाला भ्रूण है जो इथेरियम के JSON-RPC कॉल के साथ बातचीत करने में सक्षम है. &# 128588;

फ़िल्टर लॉग करें

इसमें दूसरा पहलू यह है कि ईआरसी 20 घटनाओं को कैसे सुना जाए। Ether.js विषय के नाम और घटना के आधार पर फ़िल्टर को कॉन्फ़िगर करने का एक आसान तरीका प्रदान करता है। एक विषय क्या है के बारे में अधिक जानकारी में पाया जा सकता है सॉलिडिटी डॉक्स.

const ठेका = नया अनुबंध (पता, ERC20ABI, Library.getSigner ()) const fromMe = contract.filters.Transfer (खाता, शून्य) कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

एक बार जब आपने एबीआई के साथ एक अनुबंध उदाहरण बनाया है, तो आप लाइब्रेरी इंस्टेंस को फ़िल्टर पास कर सकते हैं.

चेतावनी:

ईआरसी 20 ईवेंट में राशि का उपयोग सीधे करके शेष राशि बढ़ाने या घटाने के लिए किया जा सकता है.

अजगर के बारे में पता होना। जब आप भ्रूण को सेट करते हैं, तो आपने कॉलबैक को फ़ंक्शन पर कॉलबैक के रूप में पारित किया, जिसमें उस समय शेष मूल्य शामिल था.

यह एक प्रयोग के माध्यम से तय किया जा सकता है, लेकिन सादगी के लिए, कैश को अमान्य करने के लिए यह सुनिश्चित करने के लिए कि कैश ताज़ा हैं: म्यूट (अपरिभाषित, सत्य)

अब हमारे पास आवश्यक सभी टुकड़े हैं। अंतिम बिट थोड़ा गोंद है.

मैंने नेटवर्क पर निर्भर करते हुए टोकन की एक सूची में टोकन का एक अच्छा तरीका मैप करने के लिए कुछ स्थिरांक कॉन्फ़िगर किए हैं जहां हम काम कर रहे हैं:

Export const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} निर्यात इंटरफ़ेस IERC20 {प्रतीक: स्ट्रिंग पता: स्ट्रिंग दशमलव: संख्या नाम: string} निर्यात const TOKENSYY_NETWORK: {[कुंजी: संख्या]: IERC20 []} = {[Networks.Rinkeby]: [{पता: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", प्रतीक: "दाई", नाम: "दाई", दशमलव: 18,}, {पता: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359ADD85", प्रतीक: "एमकेआर", नाम: "निर्माता", दशमलव: 18,},],} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

हमारे पास स्थिरांक होने के बाद मेरे घटक में कॉन्फ़िगर टोकन को मैप करना आसान है:

निर्यात कास्ट टोकनलेन = ({chainId}) => { वापसी ( <> {TOKENS_BY_NETWORK [chainId] .map (टोकन) => () <टोकनबेलेंस कुंजी = {token.address} {… टोकन} /> ))})} कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

सब तैयार! अब हमारे पास एक Ethereum वॉलेट है जो ईथर और टोकन बैलेंस को लोड करता है। और अगर उपयोगकर्ता धन भेजता है या प्राप्त करता है, तो बटुआ यूआई अपडेट किया जाता है.

एथेरम वॉलेट जो ईथर और टोकन बैलेंस को लोड करता है।

यहाँ हमने अभी तक क्या किया है: जीआईटी चरण -4

पुनर्रचना

आइए प्रत्येक घटक को एक अलग फ़ाइल में ले जाएं और भ्रूण को SWRConfig प्रदाता का उपयोग करके विश्व स्तर पर उपलब्ध कराएं.

<SWRConfig मान = {{भ्रूण: भ्रूण (पुस्तकालय, ERC20ABI)}}> <नैतिकता /> <टोकनलेस्ट चेनआईड = {चेनआईड} /> <SWRConfig />कोड भाषा: HTML, XML (xml)

SWRConfig के साथ हम हमेशा उपलब्ध के रूप में कुछ विकल्पों को कॉन्फ़िगर कर सकते हैं, ताकि हमारे पास SWR का अधिक सुविधाजनक उपयोग हो सके.

const {data: balance, mutate} = useSWR ([पता, ‘balanceOf’, खाता]) कोड भाषा: जावास्क्रिप्ट (जावास्क्रिप्ट)

यहाँ सब कुछ refactoring के बाद है: जीआईटी चरण -5

लपेटें

SWR तथा ईथर यदि आप Ethereum dapp के साथ अपने डेटा लाने की रणनीति को कारगर बनाना चाहते हैं, तो दो अच्छे पुस्तकालय हैं.

मुख्य लाभ
  • घोषणात्मक दृष्टिकोण
  • डेटा हमेशा वेब सॉकेट या SWR विकल्पों के माध्यम से ताज़ा होता है
  • कस्टम प्रतिक्रिया संदर्भ के साथ राज्य प्रबंधन के लिए पहिया को फिर से बनाने से बचें

यदि आप अपने dapp में कई स्मार्ट कॉन्ट्रैक्ट्स का उपयोग करते हैं और आपको यह ट्यूटोरियल पसंद आया है, तो मैंने web3 fetcher को एक छोटे से उपयोग में सामान्यीकृत किया है: swr-eth (सितारे सराहे गए &# 128123;)

और अंत में, यहाँ पूर्ण जीआईटी रेपो है:https://github.com/aboutlo/swr-eth-tutorial).

सीधे अपने इनबॉक्स में अधिक एथेरियम ट्यूटोरियल प्राप्त करें

नवीनतम Ethereum डेवलपर पाठ्यक्रम, टूल, प्रो टिप्स और अधिक के लिए हमारे न्यूज़लेटर की सदस्यता लें. InfuraMetaMaskNewsletter नवीनतम एथेरेम समाचार, उद्यम समाधान, डेवलपर संसाधनों, और अधिक के लिए हमारे न्यूज़लेटर के लिए सदस्यता लें। पता और विशेष सामग्रीकैसे एक सफल ब्लॉकचेन उत्पाद बनाने के लिएवेबिनार

कैसे एक सफल ब्लॉकचेन उत्पाद बनाने के लिए

कैसे सेट अप करें और एक Ethereum नोड चलाएंवेबिनार

कैसे सेट अप करें और एक Ethereum नोड चलाएं

अपनी खुद की Ethereum API कैसे बनायेवेबिनार

अपनी खुद की Ethereum API कैसे बनाये

सोशल टोकन कैसे बनाएंवेबिनार

सोशल टोकन कैसे बनाएं

स्मार्ट अनुबंध विकास में सुरक्षा उपकरणों का उपयोग करनावेबिनार

स्मार्ट अनुबंध विकास में सुरक्षा उपकरणों का उपयोग करना

फ्यूचर ऑफ़ फ़ाइनेंस डिजिटल एसेट्स एंड डेफीवेबिनार

भविष्य का वित्त: डिजिटल एसेट्स और डीआईएफआई

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