วิธีดึงและอัปเดตข้อมูลจาก Ethereum ด้วย React และ SWR

บล็อก 1NewsDevelopersEnterpriseBlockchain ExplainedEvents and ConferencesPressจดหมายข่าว

Contents

สมัครรับจดหมายข่าวของเรา.

ที่อยู่อีเมล

เราเคารพความเป็นส่วนตัวของคุณ

หน้าแรกบล็อกการพัฒนา Blockchain

วิธีดึงและอัปเดตข้อมูลจาก Ethereum ด้วย React และ SWR

นี่คือวิธีกำหนดค่าส่วนหน้าของ dapp ของคุณเพื่อให้ยอดคงเหลือโทเค็นและการโอนเงินอัปเดตในกระเป๋าเงิน Ethereum ของผู้ใช้ของคุณโดย Lorenzo Sicilia มิถุนายน 18, 2020 โพสต์เมื่อมิถุนายน 18, 2020

ดึงข้อมูลด้วย ethereum hero

Ethereum ช่วยให้เราสร้างแอปพลิเคชันแบบกระจายอำนาจ (dapps) ความแตกต่างที่สำคัญระหว่างแอปพลิเคชันทั่วไปและ dapp คือคุณไม่จำเป็นต้องปรับใช้แบ็กเอนด์อย่างน้อยตราบเท่าที่คุณใช้ประโยชน์จากสัญญาอัจฉริยะอื่น ๆ ที่ใช้งานบนเครือข่ายหลักของ Ethereum.

ด้วยเหตุนี้ส่วนหน้าจึงมีบทบาทสำคัญ เป็นผู้รับผิดชอบในการจัดระเบียบและเปิดเผยข้อมูลจากสัญญาอัจฉริยะจัดการการโต้ตอบกับกระเป๋าเงิน (ฮาร์ดแวร์หรือซอฟต์แวร์) และตามปกติการจัดการ UX ไม่เพียงแค่นั้นตามการออกแบบ dapp ใช้การโทร JSON-RPC และสามารถเปิดการเชื่อมต่อซ็อกเก็ตเพื่อรับการอัปเดต.

อย่างที่คุณเห็นว่ามีบางสิ่งที่ต้องเตรียมการ แต่ไม่ต้องกังวลระบบนิเวศได้เติบโตเต็มที่ในช่วงไม่กี่เดือนที่ผ่านมา.

ข้อกำหนดเบื้องต้น

ในระหว่างบทช่วยสอนนี้ฉันจะถือว่าคุณมีสิ่งต่อไปนี้แล้ว:

กระเป๋าเงินสำหรับเชื่อมต่อกับโหนด Geth

แนวทางที่ง่ายที่สุดคือ การติดตั้ง MetaMask เพื่อให้คุณสามารถใช้ อินฟูรา โครงสร้างพื้นฐานนอกกรอบ.

Ether บางตัวในบัญชีของคุณ

เมื่อคุณพัฒนาด้วย Ethereum ฉันขอแนะนำอย่างยิ่งให้คุณเปลี่ยนไปใช้เทสเน็ตและใช้อีเธอร์ทดสอบ หากคุณต้องการเงินทุนเพื่อการทดสอบคุณสามารถใช้ faucet เช่น. https://faucet.rinkeby.io/


ความเข้าใจพื้นฐานของ React

ฉันจะแนะนำคุณทีละขั้นตอน แต่ฉันจะถือว่าคุณรู้ว่า React ทำงานอย่างไร (รวมถึงตะขอ) หากสิ่งที่ดูเหมือนไม่คุ้นเคยให้ปรึกษา เอกสารการตอบสนอง.

สนามเด็กเล่น React ที่ใช้งานได้

ฉันเขียนบทช่วยสอนนี้ด้วย typescript แต่มีการพิมพ์เพียงไม่กี่อย่างเพื่อให้มีการเปลี่ยนแปลงเพียงเล็กน้อยคุณสามารถใช้มันได้เหมือนใน Javascript เช่นกัน ฉันใช้ พัสดุ js แต่อย่าลังเลที่จะใช้ สร้างแอป React เกินไปหรือบันเดิลแอปพลิเคชันเว็บอื่น ๆ.

เชื่อมต่อกับ Ethereum Mainnet

เมื่อคุณมี MetaMask พร้อมแล้วเราจะใช้ web3-react เพื่อจัดการการโต้ตอบกับเครือข่าย มันจะช่วยให้คุณใช้งานเบ็ดได้อย่างสะดวก Web3React ซึ่งมียูทิลิตี้ที่มีประโยชน์มากมายสำหรับการเล่นกับ Ethereum.

เส้นด้ายเพิ่ม @ web3-react / core @ web3-react / injection-connectorCode ภาษา: CSS (css)

จากนั้นคุณต้องมีผู้ให้บริการ ผู้ให้บริการสรุปการเชื่อมต่อกับ Ethereum blockchain สำหรับการออกแบบสอบถามและส่งธุรกรรมที่มีการเปลี่ยนแปลงสถานะที่ลงนาม.

เราจะใช้ Web3Provider จาก Ether.js.

ดูเหมือนว่าจะมีไลบรารีอยู่แล้ว แต่เมื่อโต้ตอบกับ Ethereum คุณต้องแปลประเภทข้อมูล Javascript เป็น Solidity นอกจากนี้คุณยังต้องลงนามในธุรกรรมเมื่อคุณต้องการดำเนินการ Ether.js มอบฟังก์ชันเหล่านี้อย่างหรูหรา.

เส้นด้ายเพิ่ม @ ethersproject / ผู้ให้บริการภาษาโค้ด: CSS (css)

ข้อสังเกต: แพ็คเกจ Ether.js ด้านบนคือ v5 ที่อยู่ใน เบต้า.

หลังจากนั้นเราก็พร้อมที่จะจดสวัสดีโลกแบบมินิมอลเพื่อตรวจสอบว่าเรามีทุกสิ่งที่ต้องการหรือไม่:

นำเข้าการตอบสนองจากการนำเข้า “react” นำเข้า {Web3ReactProvider} จาก “@ web3-react / core” นำเข้า {Web3Provider} จากการนำเข้า “@ ethersproject / ผู้ให้บริการ” {useWeb3React} จาก “@ web3-react / core” นำเข้า {InjectedConnector} จาก “@ web3-react / injection-connector ‘export const injectionConnector = new InjectedConnector ({supportedChainIds: [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) ฟังก์ชัน getLibrary (ผู้ให้บริการ: ใด ๆ ): Web3Provider {const library = new Web3Provider (ผู้ให้บริการ) library.pollingInterval = 12000 return library} export const Wallet = () => {const {chainId บัญชีเปิดใช้งานใช้งาน} = useWeb3React () const onClick = () => {เปิดใช้งาน (injectionConnector)} ส่งคืน ( <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 ไม่ถูกต้องซึ่งเป็นที่นิยมโดย RFC 5861.

SWR จะส่งคืนข้อมูลจากแคช (เก่า) ก่อนจากนั้นส่งคำขอดึงข้อมูล (ตรวจสอบความถูกต้องอีกครั้ง) และในที่สุดก็มาพร้อมกับข้อมูลล่าสุดอีกครั้ง.

SWR ยอมรับคีย์และเบื้องหลังจะจัดการแก้ไข

ในการทำ SWR จะช่วยให้สามารถส่ง fetcher ที่สามารถแก้ไขคีย์ได้โดยส่งคืนคำสัญญา โลกแห่งความสวัสดีของ SWR อิงตามคำขอ REST API ที่มีตัวดึงข้อมูลตาม fetch API หรือ Axios.

สิ่งที่ยอดเยี่ยมเกี่ยวกับ SWR คือข้อกำหนดเดียวในการสร้างตัวดึงข้อมูลคือต้องคืนคำสัญญา.

นี่คือการใช้งาน fetcher สำหรับ Ethereum ครั้งแรกของฉัน:

const fetcher = (ไลบรารี) => (… args) => {const [method, … params] = args console.log (method, params) return library [method] (… params)} Code language: JavaScript (javascript)

อย่างที่คุณเห็นมันเป็นฟังก์ชันที่ใช้เพียงบางส่วน ด้วยวิธีนี้ฉันสามารถฉีดไลบรารี (Web3Provider ของฉัน) เมื่อฉันกำหนดค่าตัวดึงข้อมูล ในภายหลังทุกครั้งที่มีการเปลี่ยนแปลงคีย์ฟังก์ชันสามารถแก้ไขได้โดยการคืนสัญญาที่ต้องการ.

ตอนนี้ฉันสามารถสร้างส่วนประกอบของฉันได้แล้ว

ส่งออก const Balance = () => {const {account, library} = useWeb3React () const {data: balance} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) if (! balance) {return <div>…div> } กลับมา <div>ยอดคงเหลือ: {balance.toString ()} div> } ภาษารหัส: จาวาสคริปต์ (javascript)

วัตถุสมดุลที่ส่งคืนเป็น BigNumber.

ส่วนประกอบสมดุล

อย่างที่คุณเห็นตัวเลขไม่ได้ถูกสร้างขึ้นและมีขนาดใหญ่มาก เนื่องจาก Solidity ใช้ Integer ได้ถึง 256 บิต.

ในการแสดงตัวเลขในรูปแบบที่มนุษย์อ่านได้วิธีแก้ปัญหากำลังใช้ยูทิลิตี้ดังกล่าวข้างต้นจากยูทิลิตี้ Ether.js: formatEther (balance)

เส้นด้ายติดตั้ง @ ethersproject / unitsCode ภาษา: CSS (css)

ตอนนี้ฉันสามารถทำส่วนประกอบของฉันใหม่เพื่อจัดการและจัดรูปแบบ BitInt ในรูปแบบที่มนุษย์อ่านได้:

ส่งออก const Balance = () => {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) BitInt ในรูปแบบที่มนุษย์อ่านได้

นี่คือสิ่งที่เราทำจนถึงตอนนี้: GIT ขั้นตอนที่ 2

วิธีอัปเดตข้อมูลแบบเรียลไทม์

SWR แสดงฟังก์ชันการกลายพันธุ์เพื่ออัปเดตแคชภายใน.

const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) const onClick = () => {mutate (new BigNumber (10), false)} รหัสภาษา: JavaScript (javascript)

ฟังก์ชันการกลายพันธุ์จะถูกผูกไว้กับคีย์โดยอัตโนมัติ (เช่น [‘getBalance’, บัญชี, ‘ล่าสุด’] ที่สร้างขึ้นโดยยอมรับพารามิเตอร์สองตัวข้อมูลใหม่และหากควรเรียกใช้การตรวจสอบความถูกต้องหากควร SWR จะใช้ตัวดึงข้อมูลเพื่ออัปเดตแคชโดยอัตโนมัติ &# 128165;

ตามที่คาดการณ์ไว้เหตุการณ์ Solidity ให้นามธรรมเล็ก ๆ อยู่เหนือฟังก์ชันการบันทึกของ EVM แอปพลิเคชันสามารถสมัครสมาชิกและรับฟังเหตุการณ์เหล่านี้ผ่านอินเทอร์เฟซ RPC ของไคลเอนต์ Ethereum.

Ether.js มี API ง่ายๆในการสมัครเข้าร่วมกิจกรรม:

const {บัญชีไลบรารี} = useWeb3React () library.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) รหัสภาษา: JavaScript (javascript)

ตอนนี้เรามารวมทั้งสองวิธีเข้าด้วยกันในองค์ประกอบใหม่

ส่งออก const Balance = () => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([‘getBalance’, account, ‘latest’], {fetcher: fetcher (library),}) useEffect () => {// รับฟังการเปลี่ยนแปลงบน Ethereum address console.log (`listening for blocks … `) library.on (‘block’, () => {console.log (‘update balance … ‘) mutate (undefined, true)}) // ลบตัวฟังเมื่อคอมโพเนนต์ไม่ได้ต่อเชื่อม return () => {library.removeAllListeners (‘block’)} // ทริกเกอร์เอฟเฟกต์เฉพาะเมื่อเมาท์คอมโพเนนต์}, []) if (! balance) {return <div>…div> } กลับมา <div>Ξ {parseFloat (formatEther (balance)). toPrecision (4)} div> } ภาษารหัส: จาวาสคริปต์ (javascript)

ในขั้นต้น SWR จะดึงยอดเงินในบัญชีจากนั้นทุกครั้งที่ได้รับเหตุการณ์บล็อกจะใช้การกลายพันธุ์เพื่อเรียกการดึงข้อมูลอีกครั้ง.

ข้อสังเกต: เราใช้การกลายพันธุ์ (ไม่ได้กำหนดจริง) เนื่องจากเราไม่สามารถดึงยอดคงเหลือจริงจากเหตุการณ์ปัจจุบันที่เราเพิ่งเรียกใช้การเรียกยอดคงเหลืออีกครั้ง.

ด้านล่างนี้เป็นการสาธิตอย่างรวดเร็วด้วยกระเป๋าเงิน Ethereum สองใบที่แลกเปลี่ยน ETH บางส่วน.

การสาธิตกระเป๋าเงิน Ethereum สองใบที่แลกเปลี่ยน ETH

สิ่งที่เราทำจนถึงตอนนี้: GIT ขั้นตอนที่ 3

วิธีโต้ตอบกับสัญญาอัจฉริยะ

จนถึงตอนนี้เราได้แสดงข้อมูลพื้นฐานของการใช้ SWR และวิธีการโทรพื้นฐานผ่าน Web3Provider ตอนนี้เรามาดูวิธีโต้ตอบกับสัญญาอัจฉริยะกัน.

Ether.js จัดการการโต้ตอบสัญญาอัจฉริยะโดยใช้ Contract Application Binary Interface (ABI) ABI ที่สร้างโดย Solidity Compiler.

Contract Application Binary Interface (ABI) เป็นวิธีมาตรฐานในการโต้ตอบกับสัญญาในระบบนิเวศของ Ethereum ทั้งจากภายนอกบล็อกเชนและสำหรับการโต้ตอบระหว่างสัญญากับสัญญา.

ตัวอย่างเช่นรับสัญญาอัจฉริยะอย่างง่ายด้านล่าง:

ความแข็งแกร่งของ pragma ^ 0.5.0; การทดสอบสัญญา {constructor () สาธารณะ {b = hex"12345678901234567890123456789012"; } เหตุการณ์เหตุการณ์ (uint สร้างดัชนี a, bytes32 b); เหตุการณ์ Event2 (uint สร้างดัชนี a, bytes32 b); ฟังก์ชั่น foo (uint a) สาธารณะ {emit Event (a, b); } ไบต์ 32 ข; } ภาษารหัส: จาวาสคริปต์ (javascript)

นี่คือ ABI ที่สร้างขึ้น

[{ "ชนิด": "เหตุการณ์", "ปัจจัยการผลิต": [{ "ชื่อ": "ก", "ชนิด": "uint256", "จัดทำดัชนีแล้ว": true}, { "ชื่อ": "ข", "ชนิด": "ไบต์ 32", "จัดทำดัชนีแล้ว": false}], "ชื่อ": "เหตุการณ์" }, { "ชนิด": "เหตุการณ์", "ปัจจัยการผลิต": [{ "ชื่อ": "ก", "ชนิด": "uint256", "จัดทำดัชนีแล้ว": true}, { "ชื่อ": "ข", "ชนิด": "ไบต์ 32", "จัดทำดัชนีแล้ว": false}], "ชื่อ": "เหตุการณ์ 2" }, { "ชนิด": "ฟังก์ชัน", "ปัจจัยการผลิต": [{ "ชื่อ": "ก", "ชนิด": "uint256" }], "ชื่อ": "ฟู", "เอาต์พุต": []}] รหัสภาษา: JSON / JSON พร้อมความคิดเห็น (json)

ในการใช้ ABI เราสามารถคัดลอกลงในรหัสของคุณได้โดยตรงและนำเข้าในที่ที่จำเป็น ในการสาธิตนี้เราจะใช้มาตรฐาน กกพ. 20 ABI เนื่องจากเราต้องการดึงยอดคงเหลือของโทเค็นสองรายการ: DAI และ MKR.

ขั้นตอนต่อไปคือการสร้างส่วนประกอบ

ส่งออก const TokenBalance = ({สัญลักษณ์ที่อยู่ทศนิยม}) => {const {account, library} = useWeb3React () const {data: balance, mutate} = useSWR ([address, ‘balanceOf’, account], {fetcher: fetcher (library, ERC20ABI),}) useEffect (() => {// รับฟังการเปลี่ยนแปลงบนที่อยู่ Ethereum console.log (`listening for Transfer … `) const contract = new Contract (address, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (account, null) library.on (fromMe, (from, to, amount, event) => {console.log (‘Transfer | sent’, {from, to, amount, event}) mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from ถึงจำนวนเงินเหตุการณ์) => {console.log (‘Transfer | received’, {from, to, amount, event}) mutate (undefined, true)}) // ลบตัวฟังเมื่อคอมโพเนนต์ถูกยกเลิกการต่อเชื่อม () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // ทริกเกอร์เอฟเฟกต์เฉพาะเมื่อเมาท์คอมโพเนนต์}, []) if (! balance) {return <div>…div> } คืน ( <div> {parseFloat (formatUnits (สมดุลทศนิยม)) toPrecision (4)} {symbol} div> )} รหัสภาษา: JavaScript (javascript)

มาขยายความแตกต่างหลัก ๆ สองประการ:

คำจำกัดความที่สำคัญ

คีย์ที่ใช้โดย useSWR ([address, ‘balanceOf’, account])) จำเป็นต้องเริ่มต้นด้วยที่อยู่ Ethereum แทนที่จะเป็นวิธีการ ด้วยเหตุนี้ผู้เรียกสามารถรับรู้สิ่งที่เราต้องการบรรลุและใช้ ABI.

เราจะปรับตัวเรียกตัวเรียกใหม่ให้สอดคล้องกัน:

const fetcher = (ไลบรารี: Web3Provider, abi ?: any) => (… args) => {const [arg1, arg2, … params] = args // เป็นสัญญา if (isAddress (arg1)) {const address = arg1 const method = arg2 const contract = new Contract (address, abi, library.getSigner () ) return contract [method] (… params)} // it’s a eth call const method = arg1 return library [method] (arg2, … params)} Code language: JavaScript (javascript)

ตอนนี้เรามีตัวเรียกใช้งานทั่วไปที่สามารถโต้ตอบกับการเรียก JSON-RPC ของ Ethereum ได้. &# 128588;

ตัวกรองบันทึก

อีกแง่มุมหนึ่งคือวิธีการรับฟังเหตุการณ์ ERC20 Ether.js มีวิธีที่สะดวกในการกำหนดค่าตัวกรองตามหัวข้อและชื่อของเหตุการณ์ สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อได้ในไฟล์ เอกสาร Solidity.

const สัญญา = สัญญาใหม่ (ที่อยู่, 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,} export interface IERC20 {symbol: string address: string decimals: number name: string} export const TOKENS_BY_NETWORK: {[key: number]: IERC20 []} = {[Networks.Rinkeby]: [{ที่อยู่: "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", สัญลักษณ์: "DAI", ชื่อ: "ได", ทศนิยม: 18,}, {address: "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", สัญลักษณ์: "เอ็มเคอาร์", ชื่อ: "เครื่องชง", ทศนิยม: 18,},],} รหัสภาษา: JavaScript (javascript)

เมื่อเรามีค่าคงที่แล้วคุณสามารถแมปโทเค็นที่กำหนดค่ากับส่วนประกอบของฉันได้อย่างง่ายดาย:

ส่งออก const TokenList = ({chainId}) => {กลับ ( <> {TOKENS_BY_NETWORK [chainId] .map ((โทเค็น) => ( <คีย์ TokenBalance = {token.address} {… token} /> ))})} ภาษาของรหัส: JavaScript (javascript)

ทุกชุด! ตอนนี้เรามีกระเป๋าเงิน Ethereum ที่โหลดยอดคงเหลือของอีเธอร์และโทเค็น และหากผู้ใช้ส่งหรือรับเงิน UI กระเป๋าเงินจะได้รับการอัปเดต.

กระเป๋าเงิน Ethereum ที่โหลดยอดคงเหลือของอีเธอร์และโทเค็น

นี่คือสิ่งที่เราทำจนถึงตอนนี้: GIT ขั้นตอนที่ 4

Refactoring

มาย้ายองค์ประกอบทั้งหมดในไฟล์ที่แยกจากกันและทำให้ตัวเรียกใช้งานได้ทั่วโลกโดยใช้ผู้ให้บริการ 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
  • หลีกเลี่ยงการสร้างวงล้อใหม่สำหรับการจัดการสถานะด้วยบริบทการตอบสนองที่กำหนดเอง

หากคุณใช้สัญญาอัจฉริยะหลายสัญญาใน dapp ของคุณและคุณชอบบทช่วยสอนนี้ฉันสรุป web3 fetcher เป็นเครื่องมือขนาดเล็ก: swr-eth (ดวงดาวได้รับการชื่นชม &# 128123;)

และในที่สุดนี่คือ repo GIT แบบเต็ม: (https://github.com/aboutlo/swr-eth-tutorial).

รับบทช่วยสอน Ethereum เพิ่มเติมส่งตรงถึงกล่องจดหมายของคุณ

สมัครรับจดหมายข่าวของเราสำหรับหลักสูตรล่าสุดสำหรับนักพัฒนา Ethereum เครื่องมือเคล็ดลับสำหรับมือโปรและอื่น ๆ. InfuraMetaMask จดหมายข่าวสมัครรับจดหมายข่าวของเราเพื่อรับข่าวสารล่าสุดของ Ethereum โซลูชันระดับองค์กรทรัพยากรสำหรับนักพัฒนาและอื่น ๆ ที่อยู่อีเมลเนื้อหาพิเศษวิธีสร้างผลิตภัณฑ์ Blockchain ที่ประสบความสำเร็จการสัมมนาผ่านเว็บ

วิธีสร้างผลิตภัณฑ์ Blockchain ที่ประสบความสำเร็จ

วิธีการตั้งค่าและเรียกใช้โหนด Ethereumการสัมมนาผ่านเว็บ

วิธีการตั้งค่าและเรียกใช้โหนด Ethereum

วิธีสร้าง Ethereum API ของคุณเองการสัมมนาผ่านเว็บ

วิธีสร้าง Ethereum API ของคุณเอง

วิธีสร้างโซเชียลโทเค็นการสัมมนาผ่านเว็บ

วิธีสร้างโซเชียลโทเค็น

การใช้เครื่องมือรักษาความปลอดภัยในการพัฒนาสัญญาอัจฉริยะการสัมมนาผ่านเว็บ

การใช้เครื่องมือรักษาความปลอดภัยในการพัฒนาสัญญาอัจฉริยะ

อนาคตของการเงินสินทรัพย์ดิจิทัลและ 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