合约 ABI 信息
首先我们需要明白，进行 Token 转账的时候，其实是在调用合约的转账函数，而要调用一个合约的函数，需要知道合约的 ABI 信息。
如何创建直接的 Token，可阅读创建 ERC20 代币
其次 通常我们所说的 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。
哈哈，恭喜大家，到这里这里就完整的实现了一个基于以太坊去中心化网页钱包。
