NextJS & HTML 實作 ERC20 交易網站【開發筆記】

Lien

2022/12/05閱讀時間約 13 分鐘

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 dev

Terminal 會跳一個 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

點擊 GIF 連結看看呈現的感覺，接下來說明會比較好理解。

流程大概是這樣：

點擊錢包登入 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 則需要傳資料出去。

打完程式看可愛貓貓治癒一下