DApp建立: 智能合約的互動

2023 iThome 鐵人賽

DAY 28

Web 3

從區塊鏈到去中心化應用程式(DApp)系列第 28 篇

15th鐵人賽

Tcweeei

2023-10-12 22:50:11

263 瀏覽

分享至

智能合約的互動

"智能合約的互動" 是 "DApp(去中心應用程序)" 變為更多可能性的契機

為甚麼這麼說呢?
其實早在比特幣出現時就有人提出DApp(去中心應用程序)

根本原因就是 "區塊鏈就是一種資料庫"(在實踐區塊鏈時應能理解)

在傳統的主從式架構應用程序(App、Website)

傳統應用程序(根據客戶不同請求查詢資料庫後回答)

去中心化應用程序架構(未有智能合約)

那既然 區塊鏈就是一種資料庫(公開的)
完全沒必要依賴中心化後端給予的回覆 自己查詢即可

是能擺脫中心化後端的需求不過略顯無聊

去中心化應用程序架構(有智能合約)

而智能合約本質上就是程序根據不同選擇有不同回應
這樣的特性導致 智能合約就類似傳統後端功能 (不過在區塊鏈上且公開的)

增加互動的環節(可以根據不同的請求有不同的回覆)

理解對於智能合約如何讓 DApp(去中心應用程序) 變得更趣味後

接下來這篇將以下重點進行敘述:

專案規劃
合約互動的函式
最終呈現畫面
合約的互動

另外可參考 GitHub 專案位置:
https://github.com/weiawesome/dapp_website

專案規劃

佈局規劃

標題
寫下本頁面的目標
合約地址與合約 ABI 文件
分別得知合約的位置與內容輸入輸出
執行合約互動區塊
執行交易的按鈕
- 函式、事件選擇
  選擇觀察事件或是執行函式
- 輸入參數
  根據該筆事件或函數有不同的參數
- 是否轉帳金額
  當函式可以付款時詢問付款金額
- 執行結果
  即與合約的互動結果
新增執行區塊
可新增與上方相同的新一個區塊
方便同時執行不同函式或觀察事件

架構規劃

├── src
│   ├── app
│   ├── pages
│   │   ├── interact_contract.tsx
│   ├── style
│   │   ├── interact_contract.css
│

"src/app/pages/interact_contract.tsx" 邏輯與基本布局
"src/app/style/interact_contract.css" 對上述畫面的修飾

因此最後畫面會顯示在 /interact_contract 這個路由下

執行合約互動的內容

// 合約方法或事件的資訊
class ContractMethod{
    // 合約執行結果
    Result:string;
    // 種類 (函式或事件)
    Type:string;
    // 方法名稱 或 事件名稱
    Method:string;
    // 執行方法的參數
    Parameters:string[];
    // 執行方法或事件的序列
    Index:number;
    // 是否可付款
    Payable:boolean;
    // 金額
    Amount:number;
}

合約互動的函式

// 合約互動的方法
const ContractInteraction=async (index) => {
    // 檢查是否安裝 MetaMask
    if (typeof window.ethereum !== 'undefined') {
        // 定義 合約地址 與 ABI
        const contractAddress = addressRef.current!.value;
        const contractAbi = abiContent;
        await window.ethereum.request({method: 'eth_requestAccounts'});
        // 連線 MetaMask
        const provider=new ethers.BrowserProvider(window.ethereum);
        const signer = await provider.getSigner();
        // 建立合約實體
        const contract = new ethers.Contract(contractAddress, contractAbi, signer);
        
        // 對於觀察事件的處理方式 其他則為函式
        if (workers[index].Type==="event"){
            const filter = contract.filters[workers[index].Method]();
            const events = await contract.queryFilter(filter);
            let tmp=[...workers]
            let ans=[];
            for (let i = 0; i < events.length; i++) {
                // @ts-ignore
                ans.push({"index":i,"Value":events[i].args.toString()})
            }
            tmp[index].Result=JSON.stringify(ans);
            setWorkers(tmp);
        } else{
            // 對於函式可以付款的方式 其他則為非付款
            if (workers[index].Payable===true){
                const basicFoundation = ethers.parseEther(workers[index].Amount.toString());

                await contract[workers[index].Method](...workers[index].Parameters,{value:basicFoundation}).then((result)=>{
                    console.log("Result: ",result.toString());

                    let tmp=[...workers];
                    tmp[index].Result=result.toString();
                    setWorkers(tmp);
                }).catch((e)=>{
                    alert(e);
                })
            } else{
                await contract[workers[index].Method](...workers[index].Parameters).then((result)=>{
                    console.log("Result: ",result);
                    let tmp=[...workers];
                    tmp[index].Result=result.toString();
                    setWorkers(tmp);
                }).catch((e)=>{
                    alert(e);
                })
            }
        }
    } else {
        alert('請安裝 MetaMask 錢包並連接到網絡');
    }
}