• 那是从何处传来的钟声呢?偶尔听到那钟声,平添一份喜悦与向往之情。

使用ethers.js开发以太坊Web钱包4 – 发送Token(代币)

编程 Nanait 4年前 (2021-05-18) 4315次浏览 已收录 0个评论 扫描二维码

合约 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。

哈哈,恭喜大家,到这里这里就完整的实现了一个基于以太坊去中心化网页钱包。

参考文档

  1. Ethers.js

何处钟 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 ethers.js 开发以太坊 Web 钱包 4 – 发送 Token(代币)
喜欢 (21)
[15211539367@163.com]
分享 (0)

您必须 登录 才能发表评论!