以太坊錢包開發系列4 - 傳送Token(代幣）

Tiny熊發表於2018-11-10

最新內容會更新在主站深入淺出區塊鏈社群
原文連結:使用 ethers.js 開發以太坊 Web 錢包 4 - 傳送 Token (代幣）

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、賬號Keystore檔案匯入匯出、展示錢包資訊及發起簽名交易、傳送Token(代幣），本文是第四篇，Token（代幣、通證）是以太坊的一大特色，既然開發錢包，則傳送Token 功能必不可少。

合約 ABI 資訊

首先我們需要明白，進行Token轉賬的時候，其實是在呼叫合約的轉賬函式，而要呼叫一個合約的函式，需要知道合約的 ABI 資訊。

其次 通常我們所說的Token， 其實指的是符合 ERC20 標準介面的合約， ERC20 介面定義如下：

contract ERC20Interface {

    string public constant name = "Token Name";
    string public constant symbol = "SYM";
    uint8 public constant decimals = 0;

    function totalSupply() public constant returns (uint);

    function balanceOf(address tokenOwner) public constant returns (uint balance);

    function allowance(address tokenOwner, address spender) public constant returns (uint remaining);
    function approve(address spender, uint tokens) public returns (bool success);

    function transfer(address to, uint tokens) public returns (bool success);
    function transferFrom(address from, address to, uint tokens) public returns (bool success);


    event Transfer(address indexed from, address indexed to, uint tokens);
    event Approval(address indexed tokenOwner, address indexed spender, uint tokens);
}

ABI 全稱是 Application Binary Interface，它就是合約介面的描述，因此有了合約的介面定義，就可以很容易通過編譯拿到ABI 資訊，比如像下圖在Remix 的編譯選項卡就可以直接複製ABI。

以太坊錢包開發系列4 - 傳送Token(代幣）

生成的 ABI 描述大概長這樣：

[
...
    {
        "constant": true,
        "inputs": [],
        "name": "totalSupply",
        "outputs": [
            {
                "name": "",
                "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    },
    {
        "constant": true,
        "inputs": [
            {
                "name": "tokenOwner",
                "type": "address"
            }
        ],
        "name": "balanceOf",
        "outputs": [
            {
                "name": "balance",
                "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    },
    ...
]

它是一個JSON形式的陣列，陣列裡每一個元素，都是對函式介面的描述，在外部呼叫合約的時候就需要遵從這個介面，以上面的介面為例，通常一個介面描述包含下述幾個欄位：

  • name: 函式會事件的名稱
  • type: 可取值有function，constructor，fallback，event
  • inputs: 函式的輸入引數，每個引數物件包含下述屬性：
    • name: 引數名稱
    • type: 引數的規範型(Canonical Type)。
  • outputs: 一系列的類似inputs的物件，如果無返回值時，可以省略。
  • constant: true表示函式宣告自己不會改變狀態變數的值。
  • payable: true表示函式可以接收ether，否則表示不能。

接下來在構造合約物件就需要是使用ABI。

構造合約物件

ethers.js 構造合約物件很簡單，僅需要提供三個引數給ethers.Contract建構函式，程式碼如下：

 var abi = [...];
 var addr = "0x...";
 var contract = new ethers.Contract(address, abi, provider);

合約的地址在合約部署之後，可以獲得，關於Token合約部署及ERC20相關的概念，這裡不展開講，不熟悉的同學，可以參考我另一篇文章建立自己的數字貨幣。

只有就可以是使用 contract 物件來呼叫Token合約的函式。

獲取Token餘額及轉移Token

獲取Token餘額

結合UI來實現以下獲取Token餘額，UI如下：

以太坊錢包開發系列4 - 傳送Token(代幣）

在HTML裡，定義的標籤如下：

    <tr>
      <th>TT Token:</th>
      <td>
          <input type="text" readonly="readonly" class="readonly" id="wallet-token-balance" value="0.0" /></div>
      </td>
    </tr>

對應的邏輯程式碼也很簡單：

     var tokenBalance = $('#wallet-token-balance');
     // 直接呼叫合約方法
    contract.balanceOf(activeWallet.address).then(function(balance){
        tokenBalance.val(balance);
    });

轉移Token

轉移Token的UI效果如下：

以太坊錢包開發系列4 - 傳送Token(代幣）

介面的HTML程式碼如下：

<h3>轉移代幣:</h3>
<table>
    <tr>
        <th>傳送至:</th>
        <td><input type="text" placeholder="(target address)" id="wallet-token-send-target-address" /></td>
    </tr>
    <tr>
        <th>金額:</th>
        <td><input type="text" placeholder="(amount)" id="wallet-token-send-amount" /></td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <div id="wallet-token-submit-send" class="submit disable">傳送</div>
        </td>
    </tr>
</table>

上面定義了兩個文字輸入框及一個“傳送“按鈕，在邏輯處理部分，轉移Token代幣儘管和獲取餘額類似，同樣是呼叫合約的方法，不過轉移代幣需要發起一個交易，因此需要測量gas 消耗。
點選傳送時執行一下（關鍵）程式碼：

var inputTargetAddress = $('#wallet-token-send-target-address');
var inputAmount = $('#wallet-token-send-amount');
var submit = $('#wallet-token-submit-send');

var targetAddress = ethers.utils.getAddress(inputTargetAddress.val());
var amount = inputAmount.val();

submit.click(function() {
// 先計算transfer 需要的gas 消耗量，這一步有預設值，非必須。
    contract.estimate.transfer(targetAddress, amount)
      .then(function(gas) {

          // 必須關聯一個有過簽名錢包物件
          let contractWithSigner = contract.connect(activeWallet);

          //  發起交易，前面2個引數是函式的引數，第3個是交易引數
          contractWithSigner.transfer(targetAddress, amount, {
              gasLimit: gas,
              // 偷懶，直接是用 2gwei
              gasPrice: ethers.utils.parseUnits("2", "gwei"),
            }).then(function(tx) {
                console.log(tx);
                // 介紹重新整理上面的Token餘額，重置輸入框
            });  
      });
}

上述有一個地方都要注意一下，在合約呼叫 transfer 之前， 需要連線一個signer，因為發起交易的時候需要用它來進行簽名，在ethers.js API裡 Wallet 是 signer（抽象類）的實現類。

所有會更改區塊鏈資料的函式都需要關聯簽名器，如果是檢視函式則只需要連線provider。

ethers.js 的 Contract 提供了一個非常方便方法：contract.estimate.functionName 來計算預測交易的gasLimit。

在發起交易的時候，可以提供一個可選的Overrides引數，在這個引數裡可以指定如交易的 gasLimit 、 gasPrice，如果我們不指定這個引數時，會預設使用 contract.estimate 獲得的值作為 gasLimit，以及 provider.getGasPrice() 的值來指定 gasPrice。

哈哈，恭喜大家，到這裡這裡就完整的實現了一個基於以太坊去中心化網頁錢包。

這是一條硬廣，歡迎訂閱深入淺出區塊鏈技術小專欄，目前僅需69元， 訂閱就可以檢視完整原始碼，還有其他驚喜哦~。
戳連結收看詳細的視訊課程講解。

參考文件

  1. Ethers.js

深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術部落格。

深入淺出區塊鏈知識星球最專業技術問答社群，加入社群還可以在微信群裡和300多位區塊鏈技術愛好者一起交流。

相關文章