第五課 - 前端開發｜Starknet開發實戰訓練營二期

Hello 大家好 歡迎來到Stacknet中文課程訓練營第五課 今天我們講前端的開發 我們今天會快速進入代碼的階段 對於Stacknet前端的代碼庫 分別有Rust Python和JS 通過Rust和Python 都可以構建Stacknet的前端應用 那本節課呢 我們專注於講解如何利用Stacknet JS 去構建瀏覽器端的Stacknet的前端應用 我們將跟着這個代碼倉庫 去完成我們今天的任務 本課主要是如何通過Next.js和Stack.js 去創建一個Stacknet的前端應用 我們需要有React, TypeScript一些基本知識 在開始之前 本機需要安裝Node.js 熟悉TypeScript和React的開發 本節課呢我們將完成幾個部分 分別是去查看Stacknet網絡的block number 去檢索某個賬戶地址的餘額 讀取某個合約的值 以及如何向該合約寫入新的值 通過這裏我們大概去了解一下 我們今天要做的事情 我們會分別去看如何去連接我們的錢包 比如這裏我們可以去連接ArgentX 連接錢包以後 我們可以看到我們錢包ETH的餘額 這裏是0.0049 還可以查看Stacknet Sepulia網絡的 當前最新的block number 以及我們去讀取已經部署好的 一個測試合約的某個當前值 我們還可以向該合約寫入新的值 這個寫入是增加這個balance 假設我們增加1 Confirm 我們可以通過區塊鏈瀏覽器 去查看我們剛剛執行的這個transaction 這裏可以看到balance的值已經更新了 好那麼我們進入代碼的編寫 首先我把本地已有的代碼刪掉 然後把代碼clone到本地 進入到代碼本 進入到代碼root文件夾下 我們把brands切換到gettingstart 打開代碼倉庫 簡單瀏覽一下代碼結構 source代碼下是我們正要測試的合約的代碼 我們將通過調用getbalance 去查看balance的值 通過調用increasebalance去增加balance的值 storage存儲了一個balance的變量 然後在web文件夾下是我們的前端代碼 這是一個基於stacknet的前端應用 主要用於連接用戶的錢包 並與區塊鏈交互 項目使用了nextts和stacknet react-ku 這裏是我們安裝的依賴 提供的功能就和我們剛剛看到的一樣 提供了錢包的連接和斷開連接的UI 通過配置json rpc 用於和stacknet節點進行交互 顯示已連接用戶的地址 首先nextts是一個react框架 用於構建web應用 stacknet react是爲stacknet應用提供的react基層工具 type script增強了代碼類型安全 在components下面有一個stacknet provider 該組件提供了全局的stacknet配置 包括錢包連接器 網絡配置和區塊鏈瀏覽器 導入的依賴有sepulia sepulia是用於開發和測試的鏈的ID 同樣我們可以配置manet argent和bravo是stacknet的常用的錢包 那這裏是作爲stacknet的錢包連接器 public provider是rpc的provider use injected connector提供了用戶可用的錢包選項 如果用戶未安裝任何錢包 則推薦argent和bravo only if not connectors表示 只在用戶沒有安裝任何插件錢包時才顯示推薦 order是指連接器的順序顯示是隨機化的 stacknet configure的設置 churn使用的是sepulia鏈 provider使用的public provider connector使用的是我們配置連接器 區塊鏈瀏覽器使用的是Vuliga或者是DarkSky stacknet provider是整個應用的核心配置組件 它爲整個應用提供stacknet網絡連接的上下文 然後在app下面的layout文件 該頁面是整個項目的根佈局 將stacknet provider包裹在全局的上下文中 metadata定義了網頁標題和描述 通過使用谷歌的字體 增強字體樣式的一致性 整體佈局是在html和body下面去包裹我們的應用 通過stacknet provider提供區塊鏈的上下文 然後我們再看一下wallet bar 通過wallet bar 我們可以顯示錢包的已連接的地址 並且提供鏈接錢包的選擇列表 wallet connected是它的自主鍵 通過使用use account的hook或者是鉤子 獲取當前鏈接的用戶的錢包地址 這裏是對錢包地址進行格式化 縮短地址的展示 然後通過use disconnect 去提供了一個可以斷開當前已連接錢包的方法 然後是connect wallet自主鍵 use connect列出所有可用的錢包連接器 提供了一個方法connect進行錢包的連接 下面在渲染的時候 爲每一個錢包連接器提供了一個按鈕 該組件的核心是 當用戶已連接錢包的時候展示錢包的地址 如果沒有連接則提供連接錢包的按鈕 動態的去切換UI 那麼下面我們去嘗試運行一下當前的頁面 首先我們需要去安裝所有的依賴 cd web npm 安裝完成以後我們去運行一下 npm run 刷新一下 啓動頁面後 root layout渲染了stacknet provider和wallet bar 我們可以通過選擇一個錢包 如agent和bravos去連接 點擊agent 這裏我們已經連接到我們自身的agent這個錢包了 成功後用戶的地址會顯示在這 然後通過disconnect去斷開用戶的連接 這時候就回到了未連接的狀態 錢包連接器的作用是通過用戶的簽名權限與區塊鏈進行交互 回到stacknet provider public provider是rpc 是區塊鏈節點通信的標準接口 除了使用public provider 我們還可以使用自定義的provider 配置我們自己的rpc節點 可以使用json-rpc-provider 然後這裏是json-rpc-provider rpc-node-url 回node-url return 然後我們創建一個.env的文件 配置我們自己的rpc 好 那我們這裏就成功配置了自定義的rpc節點 方便在不同的環境下的開發和澆試 在wallet bar 我們使用了user account和user connect 管理錢包的狀態 這裏user memo是爲了優化回調函數的性能 好 然後我們進入澆試的第一步的代碼開發 到app下面的page這個文件 第一步我們是希望通過在stacknet網絡獲取最新的區塊 編號並在頁面上進行展示 這是鏈上數據讀取的一個基礎應用 在頁面渲染這兒我們有一個有一個代碼塊 這是一個綠色背景的卡片 標題顯示的是讀取區塊鏈的區塊號 那麼這裏是該區塊號的數值 爲了獲取區塊號 我們需要用到use block number這個hook 我們可以定義const 等於use block number 然後定一個參數 block identifier 是latest 它的類型是block number 返回只有data 我們重命名一下 block number data 然後is loading 叫它block number is loading is error block number is error use block number 是stacknet react提供的一個勾子 一個hook 用於獲取當前的區塊號 block identifier這裏是表示讀取鏈上最新的區塊 返回值data是最新區塊號的數據 is loading判斷請求是否正在加載 is error表示請求是否失敗 我們希望的展示邏輯是 當is loading爲false is error爲false時顯示區塊號的數據 那進入頁面的渲染 首先判斷非block number is loading and block number is error and這裏顯示區塊號 block number data 好 我們看一下頁面 這裏就成功展示了當前區塊的號碼 渲染的邏輯是 如果請求的加載完成 並且無錯誤渲染區塊號的信息 展示內容是一個綠色的背景卡片 顯示的標題是read the blockchain 加載流程是當組件加載時 use block number這個hook 會自動發起請求獲取區塊號 請求完成後 block number data 也就是data裏面會催述最新的區塊號 最後根據數據的狀態 決定是否去渲染該區塊號 這一部分代碼就展示了 如何通過use block number 獲取鏈上數據 並在前端展示 它是鏈上讀取數據的簡單的一個案例 爲後面的餘額查詢和合約交互奠定基礎 接下來我們進入第二步 也就是讀取用戶的餘額 這一部分是通過use balance 這個hook去讀取 當前鏈接錢包的地址的餘額 並在頁面上展示 同樣我們要展示一個卡片 改一下它的背景色 該卡片分別提供了錢包地址的餘額 以及所查詢的token的標識符 如果是ETH的話 這裏就會展示ETH 回到代碼部分 app1 我們需要用到use account這個hook 它讀取的是當前鏈接錢包的地址 user address user account 然後使用use balance 接受的參數是address user address watch watch表示啓用時時監聽 當餘額發生變化時頁面會自動更新 watch的支持是loading balance是loading 還有data balance data 我們使用了user account這個鉤子 去獲取當前鏈接的錢包的地址 user address存儲了用戶的錢包地址 當用戶未連接錢包時 user address爲undefined 然後使用了use balance use balance用於讀取指定地址的餘額 address這裏的參數address 就是指定的查詢餘額的目標地址 參數watch 啓用了時時監聽 餘額發生變化 data會自動更新 返回值 balance data是餘額的詳情 包括了這個token的符號 和格式化後的餘額 its loading是提示是否正在加載餘額數據 its error是否發生錯誤 error是錯誤的具體信息 下面我們去渲染該數據 如果b balance is loading and b balance is error and symbol是balance data 如果有字的話是symbol 餘額是我們用number balance data 如果有的話就是 .formatted 以後to fixed 看一下頁面 這個卡片還沒有展示 因爲我們沒有連接錢包 所以我們先去連接錢包 連接錢包以後 就展示出了該地址下一帖一次的餘額 那麼它是0.0000 我們看一下代碼 我看了一下是因爲我的那個 RPC被製成了組網 所以我現在已經在.enav文件下面 去切換到了Sepulia這個 刷新一下 好這樣我們的地址的餘額就展示正確了 那看一下阿幾的錢包 0.0049是沒有問題的 這裏的渲染邏輯就是當餘額加載完成以後 且沒有發生錯誤的情況下 就去展示餘額的信息 顯示內容包括這個token的符號 使用balance data.symbol 獲取 然後獲取該token的餘額 當用戶連接錢包後 user count這個hook 會返回user address user balance這個hook 通過user address 請求鏈上的餘額數據 通過使用watch to 會實時更新用戶餘額的變化 balance data會自動更新 通過balance is loading和balance is error 控制是否展示餘額的信息 這一部分實現了讀取用戶 錢包餘額並實時更新的功能 這是一個常見的區塊鏈的應用場景 通過use balance 可以輕鬆獲取用戶的鏈上資產的數據 好接下來我們到第三步 第三步是從合約中讀取數據 我們將在這個合約中 通過get balance的方法 去讀取balance這個餘額的數據 同樣是一個小卡片 切換一下背景顏色 這個卡片的標題是讀取你的合約 那麼balance就是我們那個合約的 變量balance的值 好step二 三 首先那個合約已部署的合約地址是 contract address 是這一個 我們可以通過 五一個瀏覽器去查看 切換到Sepolia get balance方法 查詢 這個是當前的詞 使用 user contract rate 這個hook 我們要調用 該合約的 get balance方法 它不接受任何參數 所以是一個公的數據 合約的API 我們需要導入一下 然後下面是它的地址 address contract address 然後 box src2 我們去複製一下該合約的API 在github source 文件夾下 web source API ok 那麼source下面 我們新建一個文件夾叫ABI s 然後文件是ABI.ts 把代碼複製進去 這就是我們的ABI 在配置裏 去導入改變 contract ABI contract ABI 在下面的文件 export ABI 那麼返回的詞分別有data 這裏我們就叫rater data bfax data bfax isarrow rater is arrow isloading rater is loading arrow rater arrow 這裏contract address 定義了目標合約的地址 下面所有的交互都會基於該地址進行執行 這是已經佈署好的合約地址 我們剛纔已經通過瀏覽器去查看了 通過use contract read這個hook 去調用該合約的制度方法 它的參數function name 是需要調用的合約方法名 這裏是get balance 這是調用方法的參數 因爲不需要傳遞任何參數 所以是一個空數組 ABI是目標合約的ABI address是目標合約的地址 watch to啓動監聽 當鏈上數據變化時 智能更新 返回值分別有data 合約返回 該方法返回的數據 refetch 可以通過手動觸發重新讀取數據 isloading 提示該數據是否正在加載 as error是否發生錯誤 error是錯誤的具體信息 下面我們對數據進行渲染 這裏的balance就是返回的read data的值 我們用to string去格式化一下 當點擊這個按鈕的時候 我們可以手動去調用refetch 也就是data refetch這個方法 現在再回來看一下數據 那麼我們現在已經成功了獲取了balance這個值 和在Q2電瀏覽器上獲得的值是一樣的 這裏是顯示的合約返回的數據 通過read data去讀取balance的值 使用to string將數據格式化爲值不算 我們還可以通過refetch這個按鈕 去手動觸發 當數據加載時 user contract read 會根據function name和參數調用該合約的方法get balance 通過watch true監聽鏈上的數據變化 自動更新read data 如果需要手動更新 我們可以通過調用refetch的方法 如果is error是true 可以通過error向用戶反饋問題 這部分代碼展示瞭如何從智能合約中讀取數據 並在頁面中展示 結合use contract read 可以實現鏈上的數據的實時更新 然後將讀取到的數據與前端的邏輯結合 構建更復雜的交互場景 那最後一步呢 我們將向該合約寫入數據 這一部分實現了通過用戶輸入的數據 調用智能合約的寫的方法 改變鏈上的狀態 用戶可以輸入數據 點擊按鈕發行交易 並查看交易的狀態 在UI這兒還是一個卡片 可以看到這個卡片的標題是 向合約寫入數據 那麼這裏有一個form的表單 我們可以寫上任何的詞 把input的顯示改成select 這裏可以寫入任何詞 然後通過點擊send 去調用合約的寫入方法 首先呢定一個 date 什麼叫amount set amount user date 準則是0 定一個 alpha handle submit form event html event present 下面我們使用 use contract 去獲取 合約實例 首先ABI 還是ABI 然後地址 合約地址是 contract address 導入一下use contract 會指示一個contract實例 然後我們通過該contract實例去 生成 調用合約的call data 用定義call 我們用use memo 如果 沒有鏈接錢包 或者沒有初始化 該合約實例 我們返回一個空的宿主 否則呢我們用contract 這個實例去 生成 call data 這樣的方法是increase balance 我們看一下他接受的參數 increase balance接受的參數是一個 256位的無步號轉型 所以這裏我們需要 分別用到low 和high amount 然後它的依賴分別是contract user address和amount 導入一下用use memo 接下來用 use contract write 這個hook 去調用 合約的寫 call data作爲該hook的參數 返回的詞分別是一個 異步的 write的方法 以及 data我們叫它write data expanding 當我們去處理handle submit的時候 就可以去調用 write async 我們還需要用到 use explorer 返回一個explorer 我們配置的是 weeb 最後去同步一下 調用後的狀態 使用use wait for transaction 它接受的參數分別是一個hash值 hash值就是 write data write data的 第二 transaction hash 我們用watch 去同步更新 返回的詞是有is loading 那麼wait is loading is error of wait is error error wait error data wait data 好 那我們下面去講解一下 首先通過use data 去管理用戶的數值 這裏我們定義了一個變量amount 通過set amount 去動態更新用戶的數目 當表單提交的時候 我們通過使用handle submit 去捕獲表單提交的事件 調用write async去處罰鏈上的交易 使用use contract 創建一個合約的實例 populate transaction 生成該交易調用的參數 low和high 表示無法整形256位的數值 通過使用use memo 緩存生成的 cost 避免不必要的重新計算 通過使用use contract call 這個hook發起合約的交易 write async 是發送該交易的異步方法 data是交易返回的數據 expending是判斷交易是否 處於待處理的狀態 使用use wait for transaction 監聽交易的狀態 trash是用於查詢鏈上的交易狀態的 trash值 is loading是判斷是否在等待交易結果 is error error是失敗式的錯誤信息 data包含了交易的詳細信息 同時我們還使用了交易結果的 區塊瀏覽器鏈接 這裏便於用戶去查看鏈上的交易記錄 下面我們去完成一下頁面的渲染 value是amount content是set amount 這個transaction在區塊鏈瀏覽器的地址是 explorer.name 然後我們通過引入兩個 詞組件去優化UI的展示 分別是loading state和button content wait loading 這裏將優化該按鈕的展示 回到我們的頁面 先連接錢包 然後嘗試調用該合約去更新這個詞 然後我們加10 最後兩位會變成34 點擊發送 調出錢包確認 好 該交易確認 這裏修改一下sief explorer.transaction write data transaction hash 當write data有值的時候 我們再調用一次 現在是34 加1 確認 通過瀏覽器查看 這個transaction 好 該值已經變成了 35 這裏是用戶在輸入框中輸入要增加的 amount的狀態將會被更新 通過點擊send 調用handle submit 觸發write async 向合約發送交易 提交後按鈕顯示交易狀態 例如我們看到的發送中等待確認等 如果交易成功會顯示交易確認 如果失敗則顯示錯誤的提示 發送後可以通過點擊鏈接跳轉到 區塊鏈瀏覽器查看詳細信息 這一部分實現了完整的合約寫入流程 涵蓋了參數的輸入 交易發送 狀態監聽和用戶的反饋 通過利用useContractor write和 useWaitForTransaction 構建線上合約寫的交易 好 今天的課程就到這裏 我們下期課再見