כיצד להביא ולעדכן נתונים מאתריום באמצעות React ו- SWR

בלוג 1חדשות מפתחיםיזם הסבר על בלוקצ’יין אירועים וכנסים לחץעלונים

הירשם לניוזלטר שלנו.

כתובת דוא”ל

אנו מכבדים את פרטיותך

HomeBlog פיתוח בלוקצ’יין

כיצד להביא ולעדכן נתונים מאתריום באמצעות React ו- SWR

כך תגדיר את החזית של הדאפ שלך, כך יתרת סמלים ועדכון העברות כספים בארנקי ה- Ethereum של המשתמשים שלך. מאת לורנצו סיציליה 18 ביוני 2020 הוצג ב -18 ביוני 2020

להביא נתונים עם גיבור האתר

Ethereum מאפשר לנו לבנות יישומים מבוזרים (dapps). ההבדל העיקרי בין יישום טיפוסי ל- dapp הוא שאתה לא צריך לפרוס backend – לפחות כל עוד אתה מנצל את החוזים החכמים האחרים שפרוסים במערך Ethereum.

בגלל זה, החזית משחקת תפקיד מרכזי. היא אחראית על ביצוע פעולות וניהול של נתונים מהחוזים החכמים, טיפול באינטראקציות עם הארנק (חומרה או תוכנה) וניהול ה- UX כרגיל. לא רק זה, לפי תכנון, דאפ משתמש בשיחות JSON-RPC והוא יכול לפתוח חיבור שקע כדי לקבל עדכונים.

כפי שאתה יכול לראות יש כמה דברים לתזמן אבל אל תדאג, המערכת האקולוגית הבשילה די הרבה בחודשים האחרונים.

תנאים מוקדמים

במהלך הדרכה זו, אניח שכבר יש לך את הדברים הבאים:

ארנק לחיבור לצומת גת

הגישה הפשוטה ביותר היא התקנת MetaMask כדי שתוכלו להשתמש אינפורה תשתית מחוץ לקופסה.

מעט אתרים בחשבונך

כאשר אתה מתפתח עם Ethereum, אני ממליץ לך בחום לעבור לרשת בדיקה ולהשתמש בבדיקת Ether. אם אתה זקוק לכספים למטרות בדיקה אתה יכול להשתמש בברז למשל. https://faucet.rinkeby.io/


הבנה בסיסית של תגובה

אני אדריך אותך צעד אחר צעד אבל אניח שאתה יודע איך React עובד (כולל ווים). אם משהו נראה לא מוכר התייעץ עם תיעוד תגובה.

מגרש משחקים React עובד

כתבתי את המדריך הזה עם Typescript אבל רק כמה דברים הוקלדו כך שעם שינויים מינימליים תוכלו להשתמש בו כמו שהוא ב- Javascript. השתמשתי Parcel.js אבל אל תהסס להשתמש צור אפליקציית תגובה גם או מקבץ יישומי אינטרנט אחר.

התחבר ל- Ethereum Mainnet

לאחר שתהיה מוכן MetaMask, אנו הולכים להשתמש web3-react לטפל באינטראקציה עם הרשת. זה ייתן לך די וו שימושית Web3React, אשר מכיל כלי עזר רבים לשימושים עם Ethereum.

חוט להוסיף @ web3-react / core @ web3-react / מוזרק-מחבר שפת קוד: CSS (css)

אז אתה צריך ספק. ספק מופשט חיבור לבלוקצ’יין את’ריום לצורך הנפקת שאילתות ושליחת עסקאות חתומות על שינוי המדינה.

אנו נשתמש ב- Web3Provider מ- Ether.js.

נראה שכבר ישנן כמה ספריות, אך כשאתם מקיימים אינטראקציה עם את’ריום עליכם לתרגם את סוגי הנתונים של Javascript לסוגי המוצקות. כמו כן, אתה נדרש לחתום על העסקאות כאשר ברצונך לבצע פעולה. Ether.js מספקים באלגנטיות פונקציות אלה.

חוט להוסיף @ ethersproject / providers שפת קוד: CSS (css)

שים לב: החבילה של Ether.js הנ”ל היא ה- v5 שנמצא כעת בטא.

אחרי זה אנחנו מוכנים לרשום עולם שלום מינימלי כדי לבדוק אם יש לנו את כל מה שאנחנו צריכים:

ייבא תגובה מ’הגיב ‘ייבא {Web3ReactProvider} מ- @ web3-react / core’ ייבא {Web3Provider} מ- ‘@ ethersproject / ספקים’ ייבא {useWeb3React} מ- ‘web3-react / core’ ייבא {InjectedConnector} מ- ‘@ web3-react / injected-connector ‘export const injectedConnector = InjectedConnector חדש ({supportChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) פונקציה getLibrary (ספק: כל): Web3Provider {ספריית const = ספריית Web3Provider חדשה (ספק ).pollingInterval = 12000 ספריית החזרה} ייצוא const ארנק = () => {const {chainId, חשבון, הפעל, פעיל} = useWeb3React () const onClick = () => {להפעיל (injectedConnector)} להחזיר ( <div> <div>ChainId: {chainId} div> <div>חשבון: {account} div> {פעיל? ( <div>✅ div> ): ( <סוג כפתור ="לַחְצָן" onClick = {onClick}> כפתור התחברות> )} div> )} ייצוא const App = () => {לחזור ( <Web3ReactProvider getLibrary = {getLibrary}> <ארנק /> Web3ReactProvider> )} שפת קוד: JavaScript (javascript)

אם עשיתם שיעורי בית, עליכם לקבל משהו כזה:

מחבר מוזרק.

הנה מה שעשינו עד כה: GIT – שלב 1

כיצד להביא נתונים מהמיינט

אני אשתמש SWR כדי לנהל את אחזור הנתונים.

זה מה שאני רוצה להשיג.

const {data: balance} = useSWR (["getBalance", חֶשְׁבּוֹן, "הכי מאוחר"]) שפת קוד: JavaScript (javascript)

די מגניב &# 128578;

בואו נחשוף את הטריק! SWR פירושו Stale-While-Revalidate, אסטרטגיית ביטול מטמון HTTP שעליה פופולארית RFC 5861.

SWR תחילה מחזיר את הנתונים מהמטמון (מעופש), ואז שולח את בקשת האחזור (מאמת מחדש), ולבסוף מגיע שוב עם הנתונים המעודכנים.

SWR מקבל מפתח ומאחורי הקלעים יצליח לפתור

לעשות זאת SWR מאפשר להעביר עוברת המסוגלת לפתור את המפתח על ידי החזרת הבטחה. עולם שלום ה- SWR מבוסס על בקשות REST API עם עוברת המבוססת על אחזור API או Axios.

מה שמבריק ב- SWR הוא שהדרישה היחידה ליצור עוברת היא שהיא חייבת להחזיר הבטחה.

אז הנה ההטמעה הראשונה שלי של עוברת עבור Ethereum:

const fetcher = (ספרייה) => (… טוענת) => {const [method, … params] = args console.log (method, params) החזרת ספרייה [method] (… params)} שפת קוד: JavaScript (javascript)

כפי שאתה יכול לראות, זו פונקציה שהוחלה חלקית. בדרך זו, אני יכול להזריק את הספרייה (Web3Provider שלי) כשאני מגדיר את העובר. בהמשך, בכל פעם שמפתח משתנה, ניתן לפתור את הפונקציה על ידי החזרת ההבטחה הנדרשת.

עכשיו אני יכול ליצור את הרכיב שלי

איזון קונסט יצוא = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } לחזור <div>יתרה: {balance.toString ()} div> } שפת קוד: JavaScript (javascript)

אובייקט האיזון שהוחזר הוא BigNumber.

רכיב איזון.

כפי שאתה יכול לראות, המספר אינו מעוצב וגדול במיוחד. הסיבה לכך היא ש- Solidity משתמש במכלול שלם עד 256 ביט.

כדי להציג את המספר בתבנית קריאה אנושית, הפיתרון משתמש באחת מתוכנות השירות האמורות מתוכנות Ether.js: formatEther (איזון)

חוט להתקין @ ethersproject / יחידות שפת קוד: CSS (css)

עכשיו כשאני יכול לעבד מחדש את הרכיב שלי כדי לטפל ולעצב את BitInt בצורה קריאה אנושית:

איזון קונסט יצוא = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } לחזור <div>Ξ {parseFloat (formatEther (balance)). ToPrecision (4)} div> } שפת קוד: JavaScript (javascript) BitInt בצורה קריאה אנושית.

זה מה שעשינו עד כה: GIT שלב -2

כיצד לעדכן את הנתונים בזמן אמת

SWR חושף פונקציית מוטציה לעדכון המטמון הפנימי שלה.

const {data: balance, mutate} = useSWR ([‘getBalance’, חשבון, ‘latest’], {fetcher: fetcher (library),}) const onClick = () => {mutate (BigNumber חדש (10), false)} שפת קוד: JavaScript (javascript)

פונקציית המוטציה קשורה אוטומטית למפתח (למשל [‘getBalance’, חשבון, ‘האחרון’] שממנו היא נוצרה. הוא מקבל שני פרמטרים. יש להפעיל את הנתונים החדשים ואם צריך לאמת. אם זה צריך, SWR ישתמש אוטומטית בעובר כדי לעדכן את המטמון &# 128165;

כצפוי, אירועי המוצקות נותנים הפשטה זעירה על פונקציונליות הרישום של ה- EVM. יישומים יכולים להירשם ולהאזין לאירועים אלה דרך ממשק RPC של לקוח Ethereum.

ל- Ether.js יש ממשק API פשוט להירשם לאירוע:

const {חשבון, ספרייה} = useWeb3React () library.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) שפת קוד: JavaScript (javascript)

עכשיו בואו נשלב את שתי הגישות ברכיב החדש

איזון קונסט יצוא = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) useEffect (() => {// האזן לשינויים ב- console.log של Ethereum (“האזנה לחסימות …`) library.on (‘block’, () => {console.log (‘יתרת עדכון …’) מוטציה (לא מוגדר, נכון)}) // הסר את המאזין כאשר הרכיב אינו מורכב return () => {library.removeAllListeners (‘חסום’)} // מפעילים את האפקט רק על הרכיב הרכיב}, []) אם (! איזון) {לחזור <div>…div> } לחזור <div>Ξ {parseFloat (formatEther (balance)). ToPrecision (4)} div> } שפת קוד: JavaScript (javascript)

בתחילה, SWR יביא את יתרת החשבון, ואז בכל פעם שהיא תקבל אירוע חסימה היא תשתמש במוטציה כדי להפעיל אחזור מחדש..

שימו לב: השתמשנו במוטציה (לא מוגדר, נכון) מכיוון שאיננו יכולים לשלוף מהאירוע הנוכחי את היתרה בפועל, אנו פשוט מפעילים אחזור מחדש של היתרה.

להלן הדגמה מהירה עם שני ארנקים של Ethereum שמחליפים מעט ETH.

הדגמה של שני ארנקים של Ethereum המחליפים ETH.

הנה מה שעשינו עד כה: GIT שלב 3

כיצד לתקשר עם חוזה חכם

עד כה הדגמנו את יסודות השימוש ב- SWR וכיצד לבצע שיחה בסיסית באמצעות Web3Provider. בואו נגלה כעת כיצד לקיים אינטראקציה עם חוזה חכם.

Ether.js מטפל באינטראקציה חכמה באמצעות חוזה באמצעות ABI (ABI) ממשק בינארי לחוזה שנוצר על ידי מהדר הסולידיות.

ממשק בינארי ליישום חוזה (ABI) הוא הדרך הסטנדרטית לקיים אינטראקציה עם חוזים במערכת האקולוגית של Ethereum, הן מחוץ לבלוקצ’יין והן לאינטראקציה בין חוזה לחוזה..

לדוגמא, בהתחשב בחוזה החכם הפשוט להלן:

מוצק פרגמה ^ 0.5.0; מבחן חוזה {קונסטרוקטור () ציבורי {b = hex"12345678901234567890123456789012"; } אירוע אירוע (uint באינדקס a, bytes32 b); אירוע Event2 (uint באינדקס a, bytes32 b); פונקציה foo (uint a) public {emit Event (a, b); } בתים 32 ב; } שפת קוד: JavaScript (javascript)

זה ABI שנוצר

[{ "סוּג": "מִקרֶה", "תשומות": [{ "שֵׁם": "א", "סוּג": "256", "באינדקס": נכון}, { "שֵׁם": "ב", "סוּג": "32", "באינדקס": שקר}], "שֵׁם": "מִקרֶה" }, { "סוּג": "מִקרֶה", "תשומות": [{ "שֵׁם": "א", "סוּג": "256", "באינדקס": נכון}, { "שֵׁם": "ב", "סוּג": "32", "באינדקס": שקר}], "שֵׁם": "אירוע 2" }, { "סוּג": "פוּנקצִיָה", "תשומות": [{ "שֵׁם": "א", "סוּג": "256" }], "שֵׁם": "foo", "תפוקות": []}] שפת קוד: JSON / JSON עם הערות (json)

כדי להשתמש ב- ABI, אנו יכולים פשוט להעתיק אותם ישירות לקוד שלך ולייבא אותם לאן שהוא נדרש. בהדגמה זו נשתמש בתקן ERC20 ABI מכיוון שאנחנו רוצים להשיג את היתרות של שני אסימונים: DAI ו- MKR.

השלב הבא הוא יצירת הרכיב

ייצוא const TokenBalance = ({סמל, כתובת, עשרונים}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([address, ‘balanceOf’, account], {fetcher: fetcher (library, ERC20ABI),}) useEffect (() => {// האזן לשינויים ב- console.log של Ethereum (“האזנה להעברה …”) const contract = חוזה חדש (כתובת, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (חשבון, null) library.on (fromMe, (from, to, amount, event) => {console.log (‘העברה | נשלח’, {מ, אל, סכום, אירוע}) מוטציה (לא מוגדר, נכון)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from , to, סכום, אירוע) => {console.log (‘העברה | התקבל’, {מ, אל, סכום, אירוע}) מוטציה (לא מוגדר, נכון)}) // הסר את המאזין כאשר הרכיב לא הותאם return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // מפעילים את ההשפעה רק על הרכיב הרכיב}, []) אם (! איזון) {return <div>…div> } לחזור ( <div> {parseFloat (formatUnits (איזון, עשרוני)). toPrecision (4)} {symbol} div> )} שפת קוד: JavaScript (javascript)

בוא נתקרב. ישנם שני הבדלים עיקריים:

הגדרת מפתח

המפתח, המשמש את useSWR ([כתובת, ‘balanceOf’, חשבון]), צריך להתחיל בכתובת Ethereum ולא בשיטה. מסיבה זו, העובר יכול לזהות מה אנו רוצים להשיג ולהשתמש ב- ABI.

בואו לשקול מחדש את העובר בהתאם:

const fetcher = (ספרייה: Web3Provider, abi ?: any) => (… טוענת) => {const [arg1, arg2, … params] = args // זה חוזה אם (isAddress (arg1)) {const address = arg1 const method = arg2 const contract = חוזה חדש (כתובת, abi, library.getSigner () ) חוזה החזר [שיטה] (… פאראמס)} // זה eth call const method = arg1 החזרת ספרייה [שיטה] (arg2, … params)} שפת קוד: JavaScript (javascript)

כעת יש לנו עוברת למטרות כלליות המסוגלות לתקשר עם שיחות JSON-RPC של את’ריום. &# 128588;

מסנני יומן

ההיבט הנוסף הוא כיצד להאזין לאירועי ERC20. Ether.js מספק דרך שימושית להגדרת תצורה של מסנן על סמך נושאי האירוע ושם. מידע נוסף על נושא זה ניתן למצוא בכתובת מסמכי מוצקות.

חוזה const = חוזה חדש (כתובת, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (חשבון, null) שפת קוד: JavaScript (javascript)

לאחר שבנית מופע חוזה עם ABI, תוכל להעביר את המסנן למופע הספרייה.

אַזהָרָה:

אתה יכול להתפתות להשתמש בכמות באירוע ERC20 ישירות כדי להגדיל או להקטין את היתרה.

היה מודע לדרקון. כשאתה מתקין את העובר, העברת קלוז’ר כקריאה חוזרת לפונקציה on, שהכילה את ערך האיזון באותה עת.

ניתן לתקן זאת באמצעות useRef אך למען הפשטות בואו נאכלל מחדש את המטמון כדי להבטיח שהאזנות רעננות: מוטציה (לא מוגדר, נכון)

כעת יש לנו את כל החלקים הנדרשים. המעט האחרון הוא מעט דבק.

הגדרתי כמה קבועים על מנת שתהיה לי דרך נחמדה למפות את רכיב ה- TokenBalance שלי לרשימת אסימונים בהתאם לרשת בה אנו עובדים:

יצוא const Networks = {MainNet: 1, Rinkeby: 4, Ropsten: 3, Kovan: 42,} ממשק ייצוא IERC20 {סמל: כתובת מחרוזת: עשרוני מחרוזות: שם מספר: string} ייצוא const TOKENS_BY_NETWORK: {[key: number]: IERC20 []} = {[Networks.Rinkeby]: [{address: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", סֵמֶל: "דיי", שֵׁם: "דאי", עשרוניות: 18,}, {כתובת: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", סֵמֶל: "MKR", שֵׁם: "יַצרָן", עשרוניות: 18,},],} שפת קוד: JavaScript (JavaScript)

ברגע שיש לנו את הקבועים קל למפות את האסימונים המוגדרים לרכיב שלי:

ייצוא const TokenList = ({chainId}) => {לחזור ( <> {TOKENS_BY_NETWORK [chainId] .map ((אסימון) => ( <מפתח TokenBalance = {token.address} {… token} /> ))})} שפת קוד: JavaScript (javascript)

מוכן! עכשיו יש לנו ארנק את’ריום שמטען יתרות אתר וסימנים. ואם המשתמש שולח או מקבל כספים, ממשק המשתמש של הארנק מעודכן.

ארנק את'ריום הטוען יתרות אתרים ואסימונים.

הנה מה שעשינו עד כה: GIT שלב 4

ארגון מחדש

בואו להזיז כל רכיב בקובץ מופרד ולהפוך את העובר לזמין ברחבי העולם באמצעות ספק SWRConfig.

<ערך SWRConfig = {{fetcher: fetcher (ספרייה, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {chainId} /> <SWRConfig />שפת קוד: HTML, XML (xml)

בעזרת SWRConfig נוכל להגדיר כמה אפשרויות כזמינות תמיד, כך שנוכל להשתמש בנוחות יותר ב- SWR.

const {data: balance, mutate} = useSWR ([address, ‘balanceOf’, account]) שפת קוד: JavaScript (javascript)

הנה הכל אחרי הרפקטור: GIT שלב 5

לעטוף

SWR ו Ether.js הן שתי ספריות נחמדות לעבוד איתן אם אתה רוצה לייעל את אסטרטגיית אחזור הנתונים שלך באמצעות ה- Ethereum dapp.

יתרונות עיקריים
  • גישה הצהרתית
  • הנתונים תמיד טריים באמצעות שקעי אינטרנט או אפשרויות SWR
  • הימנע מהמצאת הגלגל מחדש לניהול המדינה בהקשר React מותאם אישית

אם אתה משתמש במספר חוזים חכמים ב- dapp שלך ואהבת את ההדרכה הזו, הכללתי את העובר web3 לשימוש קטן: swr-eth (כוכבים מוערכים &# 128123;)

ולסיום, הנה ריפו ה- GIT המלא: (https://github.com/aboutlo/swr-eth-tutorial).

קבל עוד מדריכי אתריום ישירות לתיבת הדואר הנכנס שלך

הירשם לניוזלטר שלנו לקורסים האחרונים למפתחי Ethereum, כלים, טיפים למקצוענים ועוד. InfuraMetaMask ניוזלטר הירשם לניוזלטר שלנו לקבלת החדשות האחרונות של 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