先確認開發環境

想在本地端直接重頭建設整個Dapp做為練習，而把學校提供的範本作為參考範本。

node.js 版本v16.17.0
本地開發環境計畫採用 RainbowKit + wagmi + Next.js 來建立

Step 1 - 快速開始

這邊打算直接使用 RainbowKit 上的快速開始建立一個初始化模板

Step 2 - 終端機執行順序

建立完成後移動到資料夾使用 code . 開啟

Step 3 - VS code上開啟終端機執行dev模式

在VS code上開啟終端機執行
npm run dev
成功啟動local專案

Step 4 - 模板檔案觀察

已經在index.tsx裡面已經幫你寫好首頁樣式(就是上一步啟動本地專案後的首頁圖)，並且設定好了一個Connect Wallet錢包的按鈕，這個連接錢包按鈕是直接引用自RainbowKit套件
看來是省去超多環境設置動作，非常好，但因為沒用過Next.js有關Next.js的設置之後還要再回頭來去讀官方文件。
從模板上_app.tsx這個檔案來分析，我們會需要引入哪些打包好的工具來取得錢包及區塊鏈相關資料：
- import from rainbowkit 部分，參考RainbowKit Docs
  1. getDefaultWallets：設定錢包可以連上哪些鏈
  2. RainbowKitProvider：Wrap providers
- import from wagmi , 這是 create a wagmi client 部分
  1. chain or defaultChains：設定鏈用, chain可以自己設定，或是使用預設的
  2. configureChains：設定可以使用哪些公鏈或測試鏈
  3. createClient：設定客戶端用
  4. WagmiConfig：Wrap app with WagmiConfig，搭配使用rainbowkit要將wagmi包在rainbowkit外層。
- import
  1. alchemyProvider from ‘wagmi/providers/alchemyProvider’：設定configureChains時可以使用alchemy作為觀察app用量，要先到alchemyProvider創建一個App，取得API帶入
  2. publicProvider from ‘wagmi/providers/publicProvider’：設定configureChains時可以同時帶入publicProvider

Step 5 - 改寫_app.tsx設定

Step 6 - 測試是否可以連接錢包

順利連上後會顯示連接的鏈名稱，以及ENS域名或是錢包地址。
點擊右側餘額及頭像，可以展開，提供複製地址按鈕和斷開連線按鈕

Step 7 - 開始修改頁面

隨便先設計版先
開始切版，需要：
- Nav > Connect Wallet
- LeftBoard > Account information
- RightBoard > Chatroom information
- bottomBoard > Input message & send button
從Nav開始修改
製作 LeftBoard
1. 參考本週提供的範本，使用到 useAccount 和 useBalance from wagmi.
2. 直接使用範本程式碼帶入即可，直接看官方文件，基本上只要設定正確變數名稱，然後去呼叫套件語法糖就好了，超方便！
重新整理發現錯
1. 後來發現是在抓區塊鏈資料時造成的Next.js的渲染錯誤（應該）
2. 參考範本，發現有寫一個Components叫NonSSRWrapper，將他複製過來直接使用，再把LeftBoard包起來，就解決了。
先把剩下的版切完，再來調整內部邏輯
先完成右邊的部分
只需將規則說明打上
中間輸出留言的部分

目前結構是MessageBoard元件裡包進InputSend，MessageBoard的部分則負責讀取合約留言，使用到的 wagmi 有
1. useAccount：用來取得帳戶地址，在讀取合約變數時，需將地址做為參數帶入。
2. useContractRead：用來讀取合約內 “showLastestMsg” function，來取得帳戶地址所發送的最後五筆留言。
3. 改寫useContract方式來hooks state，並監聽區塊鏈資料使資料更新後自動更新。這個地方卡了超久，因為原本useContractRead的寫法不是這樣，所以頭腦一直轉不過去到底要怎麼改，後來終於試啊試跟找wagmi文檔，看了好久才發現自己頭腦打結。另外補充，這邊將abi抽出，放在abi資料夾來使用，contractInterface，就可以直接使用JSON.stringify(contractABI)，而不用寫一堆，或是我試了半天，一般變數一直抓不到回傳資料。