以太坊钱包开发系列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,// 偷懒,直接是用 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(代币)相关推荐
- 以太坊钱包开发系列3 - 展示钱包信息及发起签名交易
最新内容会更新在主站深入浅出区块链社区 原文链接:使用 ethers.js 开发以太坊 Web 钱包 3 - 展示钱包信息及发起签名交易) 以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际 ...
- 以太坊钱包开发系列 - 创建钱包账号
想知道更多关于区块链技术知识,请百度[链客区块链技术问答社区] 链客,有问必答!! 以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际使用的钱包,本系列文章是理论与实战相结合,一共有四篇:创 ...
- 使用以太坊发布属于你自己的虚拟代币
使用以太坊发布属于你自己的虚拟代币 2018年04月22日 10:54:32 阅读数:98 本文从技术角度详细介绍如何基于以太坊ERC20创建代币的流程. 关于以太坊的编程语言Solidity的教学我 ...
- 助记词创建以太坊钱包源码_技术指南 | 以太坊钱包开发:生成账户地址、私钥、keystore、助记词...
一.使用web3连接到以太坊网络(测试网.主网) 1. 什么是web3 web3是以太坊官方开提供的一个连接以太坊区块链的模块,允许您使用HTTP或IPC与本地或远程以太坊节点进行交互,它包含以太坊生 ...
- 以太坊钱包开发-下载、编译 go-ethereum,搭建 eth 私有链
下载 $ mkdir -p $GOPATH/src/github.com/ethereum $ cd $GOPATH/src/github.com/ethereum $ git clone https ...
- Android以太坊钱包全部功能-基于web3j实现
文章目录 需要用到的工具 Ganache Metamask 钱包功能的具体实现 引入依赖 创建钱包 第一种创建方式 第二种创建方式 keystore导入钱包 助记词导入钱包 私钥导入钱包 Ganach ...
- 以太坊构建DApps系列教程(六):使用定制代币进行投票
在本系列关于使用以太坊构建DApps教程的第5部分中,我们讨论了如何为Story添加内容,查看如何添加参与者从DAO购买代币的功能以及在Story中添加提交内容.现在是编写DAO最终形式的时候了:投票 ...
- 以太坊构建DApps系列教程(二):构建TNS代币
在本系列关于使用以太坊构建DApps教程的第1部分中,我们引导大家做了两个版本的本地区块链进行开发:一个Ganache版本和一个完整的私有PoA版本. 在这一部分中,我们将深入研究并构建我们的TNS代 ...
- 以太坊钱包1-Android-创建钱包
以太坊钱包1-Android-创建钱包 2018年09月19日 18:24:13 勤奋的懒惰 阅读数 1557 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn ...
最新文章
- js封装函数_JavaScript基础-如何封装函数来改变元素的位置
- Ansible-----循环
- Castle学习之一:安装与环境设置
- linux驱动位置_Linux驱动程序学习一 (续)
- 5行Python代码实现刷爆全网的动态条形图!
- Django之form组件加cookie,session
- 绘图的尺寸_【科研绘图1】你离顶级期刊封面仅差一步
- 无监督模型 训练过程_监督使用训练模型
- easydarwin 安装_EasyDarwin流媒体服务器
- js金额小写转换成大写
- Excel 2010去掉网格线
- Android studio下的DNK开发JNI详解流程
- HDOJ 5620-KK's Steel【斐波那契数列】
- linux 文件名带日期,在linux中追加日期到文件名
- java maptodouble_Lambda表达式mapToDouble.sum精度问题
- 奇瑞汽车用鸿蒙,奇瑞正式确认:将搭载“华为鸿蒙车机系统”,鸿蒙系统真的要来了...
- 快速下载官方网站软件
- 蛮力法(python)
- S2SH The web application[] registered the JDBC driver [com.mysql.jdbc.Driver] bur failed to unreqist
- 浙大计算机学院博士毕业论文要求,浙江大学博士论文编写规则.doc
热门文章
- 字符动图_手把手教你做一个python+matplotlib的炫酷的数据可视化动图
- c++ ftp服务端_FTP客户端软件介绍及使用
- java 运行时类型_Java基础之RTTI 运行时类型识别
- 特斯拉是l3还是l2_比特斯拉还“高一级”,长安的“L3级自动驾驶”到底什么来头?...
- iOS手势操作简介(四)
- 对flex深入研究一点
- Java生鲜电商平台-B2B生鲜的互联网思维
- UOJ310 黎明前的巧克力 FWT
- (五)DOM4j进行XML文件的解析及生成
- [LeetCode_5] Longest Palindromic Substring