2022/06/10 發佈於 Medium
說是開發過程的筆記，應該是撞牆心血錄，因為各式各樣的原因，所以為前後端串接困擾了很久⋯⋯在這邊想特別感謝 Pecu老師的指點，如果沒有老師給的新思路，我可能會撞牆撞到天荒地老 QQ
前置作業
- NodeJS 環境（建議先安裝 yarn，沒有也沒關係， yarn 與 npm 的轉換可上網搜尋）
- Metamask 擴充套件下載
- 完工的 HTML 靜態網站（不是 HTML 也OK，跳過轉檔段落即可）
備註：接下來的程式碼中，實作的 ERC20 合約為 CafeChainCoin，文章則會用 YourToken 代稱，若要使用，把相關設定替換成自己的即可。
發行 ERC20 貨幣合約
到 OpenZeppelin Contracts Wizard 創建自己的 ERC20 合約，輸入合約名稱 Name、代稱 Symbol、初發行數量 Premint 就基本完成，還可以額外對合約增加設定， 細節可以參考網站內的說明。實作程式碼（記錄用，建議至 OpenZeppelin Contracts Wizard 創建）：
產出合約後，在 Remix 開新 Workspace，創建 YourToken.sol，貼上剛剛完成的程式碼。
到 SOLIDITY COMPILER 的 COMPILER 選擇合約使用的版本，合約版本通常會在程式碼上方，前綴 pragma solidity ^，像我用的是 0.8.4。
接著點擊 Compile YourToken.sol，完成編譯後，到 DEPLOY & RUN TRANSACTIONS，ENVIRONMENT 選擇 Injected Web3，這時會跳出 Metamask 連結彈窗，請務必確認好要發行的鏈與帳號。
CONTRACT 選擇以 Token 命名的那個（像我的是 CafeChainCoin），點擊 Deploy，接著等幾分鐘，成功的話 Deployed Contracts 區就會出現內容。
發行 ERC20 貨幣交易合約
參考自 How to build an ERC-20 exchange platform — LogRocket Blog
Workspace 開一個 YourTokenVendor.sol，貼上實作程式碼：
tokensPerEther 記得改成自訂 Token 對 Ether 的匯率～
在 Remix 上發行的步驟都與貨幣合約相同，就只差在最後 Deploy 時，要輸入 Token 的合約地址。完成後，先不要關掉視窗，之後還會回來。
NextJS 環境建置
實際操作畫面可參考大神影片<NextJS & Ethers>段落前段。
在 VS Code 打開要建 NextJS APP 資料夾的路徑，於 Terminal 輸入
yarn create next-app .這邊要注意的是，建立 next-app 需要特定 node 版本，如果在這部分有報錯的話，最快的解決方式是直接更到最新版本。
完成建立後，pages 資料夾裡的 car.js 檔可以刪掉。成功的話，這時候跑
yarn devTerminal 會跳一個 ready url，複製貼到瀏覽器就可以進到 NextJS 的初始畫面。
把 HTML 嵌進 NextJS APP
轉換方式參考大神影片。
將 HTML 網站的 css、js、images 資料夾複製貼到 public 目錄下。
到 NextJS Docs 複製 Custom Document 第一段程式碼，進行簡單修改，並直接替換掉 index.js 的程式碼：
import { Head } from 'next/head';
import { Script } from 'next/script';export default function Home() {
return (
<>
<Head>
<Head/>
</>
)
}
將 HTML 檔中被<head>包起來的 非 script 部分，貼到 index.js 的<Head>區段中，並將沒被前後夾擊的單行程式碼 > 替換成 />，大概會長這樣：
<Head>
<title> ... </title>
<meta ... />
<link ... />
<Head/>
接著將 script 貼到<Head>區段後面（前面也可以），把 script 改成 Script。
<>
<Head>
...
<Head/> <Script src="..."></Script>
</>
接著瀏覽器開啟 Transform，左欄選擇 HTML to JSX，把 .html 檔其餘<body>部分貼到 HTML 區，轉碼後複製右邊 JSX 的程式碼，貼到<Head>後面，再來因為轉譯器似乎不是很全面，所以需要短短的 debug 時間。
<>
<Head>
...
<Head/> ... JSX ...
<Script src="..."></Script>
</>
要注意的是，轉碼後的<Input type=”submit”>不相近於<button>，無法觸發 click事件，如果網站有使用，請記得更換。
還有，onclick=要換成onClick=⋯⋯天知道我因為這個卡了多久。
套件安裝
接下來的所有內容參考自：
- How to Connect your Smart Contracts to Metamask | Full Stack Web3 — YouTube <NextJS & Web3-React>
- How to build an ERC-20 exchange platform — LogRocket Blog
打開 Terminal，用以下程式碼安裝套件：
yarn add @web3-react/core
yarn add @web3-react/injected-connector
yarn add react
yarn add ethers
yarn add @ethersproject/providers
建議分開執行，這樣有 bug 時比較好 de (？)
把合約資料丟進來
在 NextJS APP 主目錄新增 constants 資料夾，底下開一個 contracts.js，輸入
module.exports = {
tokenAddress = '你的 ERC20 合約地址',
vendorAddress = '你的交易合約地址' tokenABI =
vendorABI =
}
tokenABI 與 vendorABI 可點擊 Remix SOLIDITY COMPILER 下方的 ABI 鍵複製。
- tokenABI：CONTRACT 選擇 YourToken(YourToken.sol)
- vendorABI：CONTRACT 選擇 Vendor(YourTokenVendor.sol)
複製後，直接貼到程式碼等號後面。
寫程式吧！_app.js
打開 _app.js，改！
詳細說明可到 大神影片<NextJS & Web3-React>段落找一下，只能說 React 永遠的神。
寫程式吧！index.js
流程大概是這樣：
- 點擊錢包登入 Metamask
- 顯示當前連結帳戶地址
- 在「購買」，輸入要購買的 CCO 數量，點擊<確認購買>就會開始交易
- 在「賣出」，輸入要賣出的 CCO 數量，點擊<確認購買>就會開始交易
那就開始吧！
打開 index.js，在之前轉好 HTML 時完成的部分外，再新增億點點程式碼。return 網頁只有放與 function 相關的部分。
這邊我偷懶把 function跟網站頁面寫在一起，導致程式碼看起來不是那麼俐落，有興趣的話，可以研究一下如何改成 import module的形式。
【學習筆記】
- 看不懂就找 大神影片 與 大神文章
- useWeb3React() 是紀錄連結 Web3 資訊的強大工具，account 帳戶地址可以直接叫出來！
- useState() 函式是用狀態+改變狀態的函式命的，這樣說或許有些饒口，簡單舉例一下，設 const [ apple, setApple ] = useState(0)，原本apple=0，想讓蘋果變 1 顆，用 setApple(1) ，就會讓apple=1。
- useState() 補充，「改變狀態的函式」可以用各式各樣的方式觸發，像這次就有結合 useEffect()、onChange 事件等，使用邏輯可以參考程式碼。
- useEffect() 是另一個新學的函式，顧名思義就是產生影響，詳細介紹可到網路搜尋。
- return 中 {variable} 可以在 return 前設定要輸入什麼值，像這裡拿來顯示地址跟存 Input。
這邊的 ETH 轉換是之前撞牆時，寫在前端 JS的（放在 public js 資料夾），有需要可以參考下方程式碼。但當初是因為懶才沒有改到 index.js，轉換還是建議參考 大神文章 ，這樣在做購買時，Token 變數就不用再乘以匯率。
const ccoBuy = document.getElementById('ccoBuy');
const etherBuy = document.getElementById('etherBuy');
const ccoSell = document.getElementById('ccoSell');
const etherSell = document.getElementById('etherSell');ccoBuy.addEventListener('input', (res) => {
etherBuy.innerHTML = (res.target.value) * 0.01;
});ccoSell.addEventListener('input', (res) => {
etherSell.innerHTML = (res.target.value) * 0.01;
【開發心血錄】
- function buyTokens() 與 sellTokens() 都有擋錯誤 Input 格式的設定，還另外偷偷加了單次交易數額的 Limit，程式是設成數量超過 100 就擋。
- Token 系列 function 中有一個我調整了很久的地方，就是 try{} 發送 method 請求部分，當初參考 大神文章 一直報錯，後來改 .send 跟 method 內變數的發送格式才成功，或許是實作方式不同？求了解 QQ
- .buyTokens() 中 ccoBuy*0.01，是因為 Input 單位限定為 Ether⋯⋯但 .sellTokens() 單位是 CCO。
- ether.utils.parseEther() 會報錯，因爲 utils 是直接從 ethers import⋯⋯當時一直找不到這個 bug 的我，對它愛了很久。
- sellTokens() 比 buyTokens() 多了向 Token 合約請求 Approve 的函式，這邊因為 sellTokens() 底下兩個函式都用 await，所以如果 Approve 等太久，會無法揮手送 Vendor 離開。
最後為了解決這個問題，用了 Promise.all。 - 這裡 onClick() 跟 onChange() 的內容物不一樣，是因為 onClick 觸發的是無參數函式，可以簡寫，onChange 則需要傳資料出去。
小菜雞寫的程式碼還有許多不足，有誤或想補充的話，歡迎留言一起學習！
以上引用若侵權，經通知會立刻刪除
