以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號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。

生成的 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如下：

在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效果如下：

界面的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,// 偷懶，直接是用 2gweigasPrice: 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。

完整源碼請訂閱深入淺出區塊鏈技術小專欄查看， 哈哈，是不是有一點雞賊，創作不易呀。 戳鏈接收看詳細的視頻課程講解。

參考文檔: ethers.js

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

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

總結

以上是生活随笔為你收集整理的以太坊钱包开发系列4 - 发送Token(代币）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。