以太坊去中心化網頁錢包開發系列,將從零開始開發出一個可以實際使用的錢包,本系列文章是理論與實戰相結合,一共有四篇:創建錢包賬號、賬號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,
// 偷懶,直接是用 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元, 訂閱就可以查看完整源碼,還有其他驚喜哦~。
參考文檔
深入淺出區塊鏈 - 系統學習區塊鏈,打造最好的區塊鏈技術博客。
深入淺出區塊鏈知識星球最專業技術問答社區,加入社區還可以在微信羣裏和300多位區塊鏈技術愛好者一起交流。