教程：通過 Subspace 和 Infura 實現實時前端數據_WEB

在關于前端開發的上一篇文章中，我們最后提供了一個網站。用戶可通過MetaMask連接該網站，它將顯示用戶的以太幣賬戶余額。但是，有許多以太坊用例涉及到ERC20令牌的發送和接收，其跟蹤方式與原生以太幣不同。在本指南中，我們將介紹如何跟蹤已部署合約的交易，以及當它們在每個新確認的區塊中進行更新時，如何在前端顯示和更新這些數字。我們以跟蹤Uniswap上的Dai<>Eth交易為例來進行說明。

Uniswap

為此，我們將使用來自StatusEmbark團隊的一個庫，名為Subspace。我們首選使用ReactHooks跟蹤實時數據。因此，我們將通過在這里找到的Embark示例代碼，使用以太坊數據流設置前端。總的來說，該前端使用了Infura、React和Subspace。

觀點：加密貨幣在美國的未來很可能由國會而不是法院決定:6月10日消息，美國律師Mike Selig表示，SEC最近對幣安、Coinbase提起訴訟，對加密貨幣行業來說并不完全是壞事。Selig認為，加密貨幣在美國的未來很可能由國會而不是法院決定。如果SEC在對Coinbase、幣安、Ripple和其他公司的訴訟中獲勝（甚至一直打到最高法院），我們仍然有可能看到為加密資產建立合理監管市場結構的立法在國會獲得通過。Coinbase、幣安和其他加密生態系統的參與者最終將有一條合規之路。每個主要的外國司法管轄區都在朝著這個方向發展，美國不太可能成為唯一的抵制者。（CoinDesk）[2023/6/10 21:28:42]

本教程是一個單獨的網站，與上一個前端教程相互獨立。我們將檢查代碼的重要部分，而非全部代碼，因此建議復制示例庫，然后運行根目錄中的npminstall和npmstart，網站將進入localhost:3000。從這里可以看到，使用Hooks和useEffect()添加更多數據跟蹤非常輕松。我們只需要檢查3個重要文件。首先檢查hide/index

香港數碼港行政總裁：數碼港可視作Web3樞紐，已有140多家Web3公司入駐:4月12日消息，香港數碼港管理有限公司行政總裁任景信在 Web3 香港嘉年華峰會發表主旨演講時表示，香港數碼港可以視作為 Web3 樞紐，可以推動香港成為國際創新和技術中心。我們的 Web3 基地（Web3 Hub）旨在推動 Web3 產業發展，凝聚人才和企業，提升大眾對 Web3 的認知，另外資金支持也是很重要的一部分。人才方面，包括 Web3 學院（Web3 Academy）計劃，旨在成立一個平臺希望更多從業人員加入推廣 Web3。產業方面，包括一個 Web3 Living Lab 計劃，包括智慧生活等，具體計劃可能會在后面幾個月在數碼港宣布。同樣重要的是要讓 Web2 企業和人才知道怎么進入 Web3 發展。融資方面，希望一個月后分享鼓勵 Web3 企業發展的信息，此外目前已經有 140 多家 Web3 公司在數碼港入駐。[2023/4/12 13:58:27]

下面3個代碼區塊是去中心化應用中非常重要的Hooks，為我們提供我們需要的實時流。我們將對它進行設置，使我們能夠查看最新挖出的50個區塊，并顯示在這些區塊中發生的最近5次Eth->Dai交易。隨著不斷有新的區塊挖出和交易發生，這些信息將持續更新。

過去1小時全網合約總爆倉金額已達1.1億美元，主爆多單:金色財經報道，數據顯示，過去1小時全網合約總爆倉金額已達1.1億美元。其中，空單爆倉34萬美元，多單爆倉1.1億美元，請注意倉位控制。[2023/3/3 12:40:06]

useEffect(()=>{web3

txnObserver

);return()=>{txnObserver

},);

從我們在第一個Hook中創建的last5Observable，我們獲得了它們的交易詳情，如下：

useEffect(()=>{if(last5Observable===undefined){return;}last5Observable

);return()=>{last5Observable

},);

最后，我們有一些ReactUI代碼，然后就能看到前端！這是gif圖。它剛開始不久，目前有3次交易。在開發者控制臺中，我們可以看到每個交易的更多交易詳情。隨著新的交易涌入，較早的交易將被擠出堆棧。

希望這些內容清晰地解釋了什么是Subspace庫。它讓去中心化應用前端開發變得非常簡單輕松，尤其是使用Infura處理web3數據非常實用！復制這里的樣板庫并使用Subspace。如果您對此有任何問題，請在這里與我們討論。有關更多教程，請訪問我們的社區中的教程部分。

本文來源于非小號媒體平臺：

登鏈社區

現已在非小號資訊平臺發布105篇作品，

非小號開放平臺歡迎幣圈作者入駐

入駐指南：

/apply_guide/

本文網址：

/news/9558536.html

免責聲明：

1.資訊內容不構成投資建議，投資者應獨立決策并自行承擔風險

2.本文版權歸屬原作所有，僅代表作者本人觀點，不代表非小號的觀點或立場

上一篇：

幣安為何推出第三條鏈？這對BNB意味著什么？

Tags：WEBWEB3OBSSERVweb3.0幣龍頭Web3游戲NOBS幣Ethereum Name Service

酷幣