DApp建立: 執行交易

2023 iThome 鐵人賽

DAY 27

Web 3

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

15th鐵人賽

Tcweeei

2023-10-11 20:55:16

394 瀏覽

分享至

交易的執行

交易當然也是 去中心化應用 極為重要的一環

那要如何執行交易呢?

如果一個程序能直接控制資產不是很恐怖嗎?
要是金額瞬間被轉走怎麼辦呢?

因此我們要透過錢包(MetaMask)
程序本身只是提供建議交易 再由使用者同意

最後的同意權仍舊落在使用者身上

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

專案規劃
透過 web3.js 進行交易
透過 ethers.js 進行交易
最終呈現畫面

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

專案規劃

佈局規劃

標題
寫下本頁面的目標
交易目標地址與交易金額
要傳送給的帳戶地址與金額
交易按鈕
執行交易的按鈕
關於交易資訊
顯示該筆交易資訊
交易查詢區域
顯示該筆交易所在的區塊的區塊資訊

架構規劃

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

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

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

交易收據呈現

// 交易結果物件
class Receipt{
    // 交易哈希
    TransactionHash:string;
    // 交易發起人
    From:string;
    // 交易接收人
    To:string | null;
    // 交易所在的區塊 的 區塊哈希
    BlockHash:string;
    // 交易所在的區塊 的 區塊高度
    BlockHeight:number| null
}

透過 web3.js 進行交易

// 建立並執行交易 透過 web3.js
const BuildTransactionWeb3=async () => {
    try {
        if (!window.ethereum || !window.ethereum.isConnected()) {
            throw new Error('請安裝 MetaMask 並連接到一個 Ethereum 網路');
        }
        const provider = window.ethereum;
        const web3 = new Web3(provider);
        const toAddress = addrRef.current?.value;

        const amountToSend = web3.utils.toWei(valueRef.current!.value, 'ether');
        
        const accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
        const account = accounts[0];
        const transactionObject = {
            from: account.toString(),
            to: toAddress,
            value: amountToSend,
        };

        web3.eth.sendTransaction(transactionObject)
            .on('transactionHash', hash => {
                console.log('交易哈希：', hash);
            })
            .on('receipt', transactionReceipt => {
                console.log('交易收據：', transactionReceipt);
                let tmp = new Receipt();
                tmp.BlockHeight = Number(transactionReceipt!.blockNumber);
                tmp.BlockHash = transactionReceipt!.blockHash;
                tmp.TransactionHash = transactionReceipt!.transactionHash;
                tmp.From = transactionReceipt!.from;
                tmp.To = transactionReceipt!.to;
                setR(tmp);
            })
            .on('error', error => {
            })
    } catch (error) {
        console.log(error);
    }
}

首先先連線 MetaMask 帳戶
填充交易資訊
執行交易並且記錄資訊

透過 ethers.js 進行交易

// 建立並執行交易 透過 ethers.js
const BuildTransactionEthers=async () => {
    try {
        if (!window.ethereum || !window.ethereum.isConnected()) {
            throw new Error('請安裝 MetaMask 並連接到一個 Ethereum 網路');
        }

        let provider = new ethers.BrowserProvider(window["ethereum"]);

        const signer =await provider.getSigner();

        const tx = {
            to: addrRef.current!.value,
            value: parseEther(valueRef.current!.value),
        };

        const transactionResponse = await signer.sendTransaction(tx);

        console.log(transactionResponse);

        const transactionReceipt = await transactionResponse.wait();

        let tmp=new Receipt();
        tmp.BlockHeight=transactionReceipt!.blockNumber;
        tmp.BlockHash=transactionReceipt!.blockHash;
        tmp.TransactionHash=transactionReceipt!.hash;
        tmp.From=transactionReceipt!.from;
        tmp.To=transactionReceipt!.to;
        setR(tmp);
        console.log(transactionReceipt);

    } catch (error) {
        console.error('提交交易時發生錯誤:', error);
    }
}