# Soliday W4 作業講解

---

### 課前準備(指令有貼在 Discord)

git clone https://github.com/intheblackworld/kryptocamp-v3-w4-homework
cd kryptocamp-v3-w4-homework
npm i
npm run start

### 作業繳交方式
程式碼上傳 Github, 於繳交時貼上 Github 連結

---

### 導讀專案架構
找進入點
資料從哪輸出 - 終點
資料從哪取得 - 起點

---

### 作業講解 1-1 contextAPI
1. contextAPI 解決什麼問題？

3. contextAPI 怎麼使用？

---

### 練習1: 5 min
於 React.createContext 中增加一個自定義的 key, 寫定一個值，讓他可以呈現在基礎作業頁面中

tips: 可以觀察 `currentAccount` 的路徑走一遍

**注意事項:**
1. Dev Tools 是你的好朋友

---
### 作業講解 1-2 currentAccount

1. 使用 window.ethereum 來透過 Matamask 來取得錢包地址
2. 將錢包地址設定在上方事先寫好的 currentAccount state
3. 使用 window.ethereum 偵測換錢包地址事件，並且切換 currentAccount 值

---

### 確認下可以看到當前的錢包地址

---

### 練習2： 10 min
使用 window.ethereum 偵測目前的鏈是否為 Rinkeby，如果不是，則透過 window.ethereum 跳出換鏈提示

分階段實作：
1. 監聽鏈改變的事件
2. 取得當前鏈資訊
3. metamask 提示換鏈

tips: `chainChanged`, `net_version`, `wallet_switchEthereumChain`,

**注意事項:**
1. 防呆

---

### 作業講解 1-3 provider
1. 於 `EntryAssignment` 取值
2. useEffect dependency

---

### 作業講解 1-4 建立 Contract 物件
1. 尋找 ABI
2. 建立 contract 物件
3. signer, gasLimit, contractAddress, contractABI, provider

---

### 練習3： 10 min
建立 contract 物件，取得此 contract 中 counter 的值
tips: `toNumber`

---

### 作業示範 1-5 改變 counter 的值

---

### 練習4: 10 min
使用 window.setInterval 輪巡取得 counter 的值
(不用刷新頁面就可以看到 counter 的值變多)

---

### 期末專案分組討論 1520 - 1550
1. 主題
2. 分工
- 白皮書
- 前端
- 後端
3. Github Repo 確認都看的到
https://github.com/Krypto-Camp/batch3-final-project-team-1
https://github.com/Krypto-Camp/batch3-final-project-team-2
https://github.com/Krypto-Camp/batch3-final-project-team-3
https://github.com/Krypto-Camp/batch3-final-project-team-4
https://github.com/Krypto-Camp/batch3-final-project-team-5
https://github.com/Krypto-Camp/batch3-final-project-team-6

---

## QA 時間，寫作業時間，各組交流時間

---

ps. AWS 帳號登記