最新内容会更新在主站深入浅出区块链社区

原文链接:使用 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。

生成的 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元, 订阅就可以查看完整源码,还有其他惊喜哦~。

戳链接收看详细的视频课程讲解

参考文档

  1. Ethers.js

深入浅出区块链 - 系统学习区块链,打造最好的区块链技术博客。

深入浅出区块链知识星球最专业技术问答社区,加入社区还可以在微信群里和300多位区块链技术爱好者一起交流。

以太坊钱包开发系列4 - 发送Token(代币)的更多相关文章

  1. 以太坊钱包开发系列2 - 账号Keystore文件导入导出

    以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际使用的钱包,本系列文章是理论与实战相结合,一共有四篇:创建钱包账号.账号Keystore文件导入导出.展示钱包信息及发起签名交易.发送Tok ...

  2. c#实战开发:用.net core开发一个简单的Web以太坊钱包 (六)

    今天就来开发一个C# 版的简易钱包 先回顾以前的内容 c#实战开发:以太坊Geth 命令发布智能合约 (五) c#实战开发:以太坊Geth 常用命令 (四) c#实战开发:以太坊钱包快速同步区块和钱包 ...

  3. 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结

    基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...

  4. [币严区块链]数字货币交易所之以太坊(ETH)钱包对接(四) 使用web3j对接以太坊钱包

    本文给大家介绍了 Web3j Java 版本的框架的基本使用,大家可根据本文的内容进行扩展性的练习,对其他 API 的使用进行尝试. 使用web3j对接以太坊钱包 一.开发准备事项 启动 Geth 此 ...

  5. PPT分享 | 以太坊钱包分析与介绍

    艾伯特AI人工智能(公众号:aibbtcom)按: (编者按:本文为姗姗来迟的Meetup系列推文.12月3日,林修平在亚太区以太坊社区培训与交流Meetup深圳站上跟我们分享了他对以太坊各种钱包模式 ...

  6. 以太坊web3开发初步学习

    以太坊web3开发初步学习 此文是对https://learnblockchain.cn/2018/04/15/web3-html/的学习再理解. 以太坊智能合约通过使用web3.js前端和智能合约交 ...

  7. (转)以太坊 钱包 创建 导入 Keystore

    最近闲来无事 研究了下以太坊钱包 下边分享下 准备工作 : 需要用到的加密:BIP32 BIP39 BIP44 SCRYPT 加密算法 githab地址 https://github.com/Nova ...

  8. 牛奶ddw如何通过以太坊钱包实现互相打赏

    很多朋友不清楚如何转账ddw,但是万能的网友是无敌的,这两天就自己摸索的一点经验总结下今天的转账经验. 1. 提取到自己的账户 这个大家都知道如何操作,使用官方的钱包 在“日日盈app”中点击&quo ...

  9. 以太坊钱包Geth使用命令

    一.启动以太坊钱包Geth 打开一个控制台,执行同步区块命令 #同步测试链geth --fast --cache=512 --rpc --rpcapi personal,db,eth,net,web3 ...

随机推荐

  1. ios证书生成

    iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试 发布(Distribution)证书和描述文件 用于提交Appstore 准备环境 必需要 ...

  2. dokuwiki 安装配置

    dokuwiki如果在用户注册的时候,发生"发送密码邮件时产生错误.请联系管理员!",那么需要配置sendmail. 在linux平台下,参考这个帖子https://www.dok ...

  3. mybatis+oracle实现简单的模糊查询

    第一种 concat select * from cat_table where cat_name like concat(#{catName},'%') --单个百分号 select * from ...

  4. WCF中的ServiceHost初始化两种方式

    1 代码方式 using(ServiceHost host=new ServiceHost(typeof(HelloWordService))) { host.AddServiceEndpoint(t ...

  5. Spring Data JPA框架

    1.前言 扔一个 spring data jpa 的代码,可运行,后续补充博客内容. 环境:eclipse + tomcat8 2.部分截图 3.源码 https://gitee.com/niceyo ...

  6. python tkinter Label

    """小白随笔,大佬勿喷""" #Label标签 用于可显示文本或图片,不可编辑 import tkinter as tk #初始化窗口 w ...

  7. python框架之Django(10)-Form组件

    介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来.与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入 ...

  8. freeswitch报错

    1.         2010-10-26 11:01:58.448513 [ERR] sofia_reg.c:816 Can not do authorization without a compl ...

  9. input type = file 上传图片转为base64

    项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...

  10. 【JVM】-NO.110.JVM.1 -【JDK11 HashMap详解】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...