區塊鏈研究實驗室 | 如何在DApp中載入區塊鏈

買賣虛擬貨幣

今天,我們將瞭解React,Redux和基本的區塊鏈/ DApp概念。



介紹

Truffle使開發人員能夠建立具有區塊鏈後端的全棧應用程式。在此示例中,我使用Truffle來實現React和Redux前端,並具有一個區塊鏈後端。
由於空間的初期和相對於整體Web使用者的小使用者群,沒有任何可被接受的標準可以在瀏覽器中與Web3進行互動。這是一種確保使用者在使用以太坊DApp時獲得良好體驗的簡便方法。


載入區塊鏈

預設情況下,“ React Truffle”框會在頁面載入後立即嘗試連線到Web3。如果使用者未登入MetaMask或配置為未部署DApp的區塊鏈,則會窒息使用者體驗。

提案:區塊鏈賬戶互動

我提出了以下模式來載入DApp,而不是一次載入所有內容:區塊鏈帳戶互動。每個步驟都彼此不同,併為使用者提供了明確的視覺反饋。
  • 步驟1:載入區塊鏈
  • 步驟2:載入帳戶
  • 步驟3:啟用互動
在此示例中,有一個合同和該合同的DApp前端。在使用者可以與合同進行互動之前,他們需要連線到區塊鏈(我在localhost這裡使用由Ganache提供的區塊鏈)。
這裡發生了幾件事:
  • 頁面載入時,未載入Web3
  • 區塊鏈—使用者單擊“連線區塊鏈”將網頁連線到他們在MetaMask中選擇的區塊鏈
  • 帳戶-載入後,該應用程式提供了第二個按鈕來連線其錢包
  • 互動-使用者現在可以與DApp進行互動

連線區塊鏈

               圖1:React渲染的“ Connect Blockchain”按鈕
使用Bootstrap,我們可以向使用者提供有關他們選擇的區塊鏈是否已連線的視覺反饋。在圖1中,className包括btn-danger尚待載入的時間,     btn-success以及disabled何時包含的時間。Web3代表Redux狀態選擇器。



該connectBlockchain onSubmit動作透過互動來獲取Web3例項,如圖2所示。它分派化約web3Loaded(web3)器,將Web3例項儲存到狀態。
 圖2:將Web3載入到狀態



連線帳戶

圖3:連線錢包
圖3顯示了類似的渲染,其中我們根據是否已載入帳戶將類似的規則應用於“連線錢包”按鈕。但是,這一次,如果載入了Web3,則對是否載入帳戶施加了額外的條件:
(account !== null) ? “btn-success” : “btn-warning”
該connectWallet onSubmit動作是一個函式,該函式呼叫稱為的互動loadBlockchainData(),如圖4所示。
圖4:載入區塊鏈資料
圖4顯示了loadBlockchainData(),它依次呼叫loadAccount()了第一行。此函式獲取MetaMask提供的帳戶,並排程一個名為的操作accountLoaded(),該操作透過化簡器將該帳戶儲存在我們的狀態中。
完成這些步驟後,將啟用其餘介面,並且使用者可以自由與DApp進行互動。


結論

將MetaMask與DApp一起使用可能會引起緊張的體驗,可能會阻止使用者與您的DApp進行互動,可以使用簡單的流程Blockchain-Account-Interaction 來簡化您的使用者。


作者:鏈三豐,來源:區塊鏈研究實驗室

免責聲明:

  1. 本文版權歸原作者所有,僅代表作者本人觀點,不代表鏈報觀點或立場。
  2. 如發現文章、圖片等侵權行爲,侵權責任將由作者本人承擔。
  3. 鏈報僅提供相關項目信息,不構成任何投資建議

推荐阅读