# PecuLab WEB3 LiveCoding (2022-04-14 & 2022-04-28)

課程錄影：https://youtu.be/StJ_gqnb-ms

## 在 VS Code 中直接進行 Code Compare
https://www.mytecbits.com/microsoft/dot-net/compare-contents-of-two-files-in-vs-code

## Solidity Smart Contract Framework / JavaScript Framework

### Async/Await functions in JavaScript

https://medium.com/@shehanatuk/async-await-functions-in-javascript-bd1e92fc2039

This component is in charge of doing these things:
1. It connects to the user's wallet
1. Initializes ethers and the Token contract
1. Polls the user balance to keep it updated.
1. Transfers tokens by sending transactions
1. Renders the whole application

### 複製 artifacts/contracts/xxx.sol/xxx.json 至 front/src/contracts/

取得合約地址及合約ABI，等待進行調用

## initialize ethers by creating a provider using window.ethereum


## 非同步 function 透過 window.ethereum.request 訪問錢包
async _connectWallet()

## 確認錢包連結成功


## front react 專案資料夾原始檔
https://github.com/pecu/PecuLab4SEP/tree/main/MyDapp
把前端網頁資料下載進行搬磚

## 2022-04-14 重點：
1. 第一步先將合約編譯成 ABI，放入 react 專案資料夾中
1. 第二步在 react 專案中建立 Dapp.js 和 ABI 溝通的 functions
1. 第三步在 react 專案中建立其他 .js 畫面來和 Dapp.js 中的 functions 溝通

## Dapp.js 和 ABI 溝通的重點：
1. 建立合約地址、建立合約的 ABI 調用路徑
1. 透過 ethers 建立 provider 當成存取 Rinkeby 測試鏈的入口
1. 確認取得從 .js 前端畫面進入的 \<input\> tag 呼叫 Dapp.js 中的 functions 將使用者的操作輸入帶進 \<form onSubmit\> function 的參數中
1. 啟動 .js \<form onSubmit\> 中呼叫的 Dapp.js 中的 function，並將相關參數帶入
1. 走回 Dapp.js 中去執行跟 ABI 互動，等待 Rinkeby 完成上鏈資訊後回傳目前狀態

## 2022-04-28 進行內容
## 修改一個智能合約，增加可調用 ABI 的 functions 到 Dapp.js 裡面

1. 建立新合約檔 C:\PecuData\BlockChainProjects\MyDAPP\contracts\PecuLabNFTVisit.sol

2. 編譯合約檔 npx hardhat compile 編譯之前記得清空 npx hardhat clean

3. 建立發布合約使用的 js 檔 C:\PecuData\BlockChainProjects\MyDAPP\scripts\deployPecuLabVisit.js

4. 發布合約 npx hardhat run scripts/deployPecuLabVisit.js --network rinkeby

5. 記錄下合約地址 0xaae0f742f76ed59e83a4fe0da75e1947e39e3921 (每個人要自己改成自己的)

7.1 把合約地址複製到 C:\PecuData\BlockChainProjects\MyDAPP\front\src\contracts\contract-address.json

6. 把 compile 後產生的 abi .json 檔複製到 react 專案中 C:\PecuData\BlockChainProjects\MyDAPP\front\src\contracts

7. 建立跟合約互動的渠道 C:\PecuData\BlockChainProjects\MyDAPP\front\src\components\Dapp.js

7.1 匯入 abi .json 檔
7.2 建立與合約互動的區塊 new ethers.Contract

8. this._visit.mint(to, tokenURI); 在 Dapp.js 中要建立從網頁端取得使用者貼入的

8.1 錢包地址
8.2 NFT 要塞入的 ipfs json 連結

9. mintVisit 產生出放在 Dapp.js 等待要送往 abi 檔的 form，接收使用者從網頁端填入的值 C:\PecuData\BlockChainProjects\MyDAPP\front\src\components\MintVisit.js

10. 從 C:\PecuData\BlockChainProjects\MyDAPP\front\src\components\MintVisit.js 取得使用者輸入的值，用 get 拿到 form 中的值，送入 mintVisit

11. Dapp.js 就能與 abi 進行 mint，完成 mint NFT

### 歡迎來 PecuLab 觀光 https://discord.gg/GvKPay6m6t