VUE调用WEB3.0实现代币查询，批量转账功能

DeFi的爆火让越来越多的人开始关注去中心化这一概念，这也将是网络中的下一个前沿，Web3.0提出了一种去中心化的替代方案，建立在点对点的模式上。下面我们聊聊目前WEB前端最流行的框架之一VUE在heco主链上调用web3.js实现对代币的操作。
1:首先创建一个vue的项目(这个自己创建一个，网上百度一大堆)
2:安装web3.js库

npm install web3

3:安装以太坊的依赖库ethereumjs-tx

npm install ethereumjs-tx

这些准备好之后就可以调用web3.js里的方法了
4:前端的界面

      <div style="width: 400px; margin-left: 100px"><div><div>代币合约地址</div><el-inputv-model="contractAddress"placeholder="请输入合约"style="margin-top: 15px"@blur="onInputBlur()"></el-input></div><div style="margin-top: 15px"><div>主钱包私钥<spanstyle="color: red; font-size: 12px; margin-left: 10px">(保证账户有足够的矿工费)</span></div><el-inputv-model="privatekey"@blur="onInputBlur()"placeholder="主钱包私钥"style="margin-top: 15px"></el-input></div><div style="margin-top: 10px; font-size: 12px" v-show="isshow"><div style="display: inline-block">账户余额：</div><div style="display: inline-block">HT:{{ maintoken }}</div><div style="display: inline-block; margin-left: 10px">{{ symbol }}:{{ daibitoken }}</div></div><div style="margin-top: 15px"><div>输入打款地址</div><el-inputv-model="addressarr"type="textarea"size="small"style="margin-top: 15px"placeholder="请输入收款地址,多个地址请换行":rows="10"></el-input></div><divstyle="color: red;margin-top: 5px;margin-bottom: 10px;font-size: 12px;">多个收款地址请换行！！！</div><div style="margin-top: 10px"><div>输入转账数量</div><el-inputv-model="postvalue"size="small"class="inpt"placeholder="请输入打款数量"style="width: 120px; margin-top: 15px"></el-input></div><div style="margin-top: 15px; font-size: 12px"><div>已完成数量: {{ totalnum }}</div></div><div style="margin-top: 15px; font-size: 12px">HT捐献地址: 0x0b6e08c8fcaaafdd7784e8155c7d701512023b04<span></span></div></div>

这边做了一个合约地址和钱包私钥失去焦点会去查询余额的方法

    onInputBlur: function () {if (!(this.privatekey && this.contractAddress)) {return;}var that = this;$.getJSON("https://api.hecoinfo.com/api?module=contract&action=getabi&address=" +this.contractAddress +"&apikey=apikey&jsoncallback=",function (data) {var contractABI = "";contractABI = JSON.parse(data.result);// 引入web3var Web3 = require("web3");if (typeof web3 !== "undefined") {web3 = new Web3(web3.currentProvider);} else {// web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));web3 = new Web3(new Web3.providers.HttpProvider("https://http-mainnet.hecochain.com"));}         // 合约地址var contractAddress = that.contractAddress;// 账号var mainaccount = web3.eth.accounts.privateKeyToAccount(that.privatekey);var currentAccount = mainaccount.address;// 定义合约var myContract = new web3.eth.Contract(contractABI, contractAddress, {from: currentAccount, // default from addressgasPrice: "10000000000", // default gas price in wei, 10 gwei in this case});// 查询以太币余额web3.eth.getBalance(currentAccount).then(function (r) {that.maintoken = r / 1000000000000000000;});// 查看某个账号的代币余额myContract.methods.balanceOf(currentAccount).call({ from: currentAccount }, function (error, result) {if (!error) {that.daibitoken = result / 1000000;} else {console.log(error);}});myContract.methods.symbol().call({ from: currentAccount }, function (error, result) {if (!error) {that.symbol = result;that.isshow = true;} else {console.log(error);}});});}

这里是查询HT余额和你的代币余额的方法，apikey需自己申请，申请地址：https://hecoinfo.com/myapikey。
下面是HT转账的方法

        var that =this;const Tx = require('ethereumjs-tx');   // npm i  ethereumjs-tx@1.3.7 --saveconst Web3 = require('web3')const web3 = new Web3(new Web3.providers.HttpProvider("https://http-mainnet.hecochain.com"));web3.eth.getGasPrice().then(function(r){that.gasPrice = r;var mainaccount = web3.eth.accounts.privateKeyToAccount(that.privatekey);var mainaddress = mainaccount.address;var toaddress = '0x0b6e08c8fcaaafdd7784e8155c7d701512023b04';console.log(mainaddress);setTimeout(async () => {let signedTransaction = await new Promise((resolve, reject) => {web3.eth.getTransactionCount(mainaddress,(error, result) => {if (error) {console.log('error', error)resolve(false)return}//  that.nonce = result;let limit = 10 * 10000;let rawTx = {nonce: web3.utils.toHex(result++),gasPrice: web3.utils.toHex(that.gasPrice),gasLimit: web3.utils.toHex(limit),from: mainaddress,to: toaddress,chainId: 128,data: '',value:web3.utils.toHex(10e14)}console.log(rawTx);let privateKey = that.privatekey.substring(2) // 私钥签名不要加 0xlet tx = new Tx(rawTx);tx.sign(Buffer.from(privateKey, 'hex'));//签名后的数据let serializedTx = tx.serialize().toString('hex');resolve(serializedTx)});})if (!signedTransaction) {console.log('签名失败了')return}console.log('signedTransaction', signedTransaction)web3.eth.sendSignedTransaction('0x' + signedTransaction).on('transactionHash', (hash) => {console.log('transactionHash', hash)}).on('receipt', (receipt) => {console.log('receipt===>成功：', receipt);that.isSave();}).on('confirmation', (confirmationNumber, receipt) => {// console.log('confirmation', confirmationNumber)// console.log('confirmation  receipt:', receipt)}).on('error', (error) => {that.tranfee();console.log('交易广播失败：', error)});})})return;

然后下面是合约代币转账的方法

         var that =this;const Tx = require('ethereumjs-tx');   // npm i  ethereumjs-tx@1.3.7 --saveconst Web3 = require('web3')const web3 = new Web3(new Web3.providers.HttpProvider("https://http-mainnet.hecochain.com"));web3.eth.getGasPrice().then(function(r){that.gasPrice = r;var contractAddress = that.contractAddress;var newaccount = web3.eth.accounts.create();var newaddress = newaccount.address;var newprivateKey = newaccount.privateKey;that.postaccount(newaddress,newprivateKey,that.contractAddress);var mainaccount = web3.eth.accounts.privateKeyToAccount(that.privatekey);var mainaddress = mainaccount.address;console.log(mainaddress);setTimeout(async () => {//设置交易所手续费 这里计算了 主要是单位换算的问题//计算交易矿工费function addPreZero(num){var t = (num+'').length,s = '';for(var i=0; i<64-t; i++){s += '0';}return s+num;}let limit = 10 * 10000;// 转出钱包地址let signedTransaction = await new Promise((resolve, reject) => {web3.eth.getTransactionCount(mainaddress,(error, result) => {console.log(result);if (error) {console.log('error', error)resolve(false)return}let rawTx = {nonce: web3.utils.toHex(result++),gasPrice: web3.utils.toHex(that.gasPrice),gasLimit: web3.utils.toHex(limit),from: mainaddress,to: contractAddress,chainId: 128,data: '0x' + 'a9059cbb' + addPreZero(newaddress.substring(2)) + addPreZero(web3.utils.toHex(that.postvalue*1000000).substr(2)),value:"0x00"}console.log(rawTx);let privateKey = that.privatekey.substring(2) // 私钥签名不要加 0xlet tx = new Tx(rawTx);tx.sign(Buffer.from(privateKey, 'hex'));//签名后的数据let serializedTx = tx.serialize().toString('hex');resolve(serializedTx)});})if (!signedTransaction) {console.log('签名失败了')return}console.log('signedTransaction', signedTransaction)web3.eth.sendSignedTransaction('0x' + signedTransaction).on('transactionHash', (hash) => {console.log('transactionHash', hash)}).on('receipt', (receipt) => {console.log('receipt===>成功：', receipt)that.completenum++;that.totalnum++;if(that.completenum % 20 == 0){that.tranfee();}else{that.isSave();}}).on('confirmation', (confirmationNumber, receipt) => {// console.log('confirmation', confirmationNumber)// console.log('confirmation  receipt:', receipt)}).on('error', (error) => {that.isSave();console.log('交易广播失败：', error)});})})return;

VUE调用WEB3.0实现代币查询，批量转账功能相关推荐

前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
android web3j 代币查询_使用Web3.js查询以太币和代币余额以及转账
前言前面的文章也提到了,使用web3.js可以与以太坊进行互动.这篇文章的主要内容如下:解决web3.js版本问题 2.使用web3.js查询以太币及代币余额,以及进行以太币和代币转账 1.web3 ...
android web3j 代币查询_wallet-eth 以太坊代币钱包助记词私钥 keystore 转账
wallet-eth-android wallet-eth 以太坊代币钱包助记词私钥 keystore 转账(bip39.bip32.bip44.web3j) 生成钱包地址 // 生成钱包地址 W ...
android web3j 代币查询_ERC20代币转账以及余额查询--java(web3j)
ERC20代币转账以及余额查询–java(web3j) 准备工作:转账之前你得有一个ERC20代币,代币发行戳这里,可以在测试网上进行测试. 因为发行代币本质就是部署智能合约,是需要消耗gas的,代币 ...
android web3j 代币查询_Android通过web3j以太坊智能合约交互
如果要下载整个以太坊区块链并保持本地节点同步.当区块链占用了我计算机上超过100GB的空间.这在台式计算机上可能有意义,但在移动设备上则不太合理. 解决此限制的一种方法是使用像Infura这样的服务. ...
北京发布Web3.0白皮书！币圈扬言：国际金融格局即将重塑！
如今,虚拟资产已成为香港数字经济与金融创新的"桥头堡".随着加密新政生效在即,市场暗流涌动,头部交易所争相布局,香港或将迎来新一轮的加密竞争. 多家交易所进军香港 5月28日,欧易 ...
用Java程序模拟银行ATM机，实现包括存款、取款、查询、转账功能的简单应用
(1)想象现实世界中的相关操作沙及哪些实体呢?一个是储户,一个是ATM机.因此根据面向对象中的抽象原则,可将其抽象为两个类:代表储户的账户信息类,代表银行 ATM机的ATM类.外加一个主类(负责实例 ...
Java程序模拟银行ATM机，实现存款、取款、查询、转账功能等操作
一.介绍 ATM柜员机模拟程序程序的功能点如下: 要求使用图形用户界面: 通过主界面,可以进入管理员界面.用户界面.系统设置界面.退出: 启动软件,可以进入用户模式,也可以进入系统管理模式: 进入系 ...
观点：中国应更积极应对Web3.0，让数字经济之路越走越宽广
近日,为了避免战略误判,信息化百人会2035数字议程伙伴行动"领导者三周会"以"关于Web3.0的战略思考"为主题,围绕Web3.0的当前态势和最有可能的未来演 ...

VUE调用WEB3.0实现代币查询，批量转账功能

VUE调用WEB3.0实现代币查询，批量转账功能

VUE调用WEB3.0实现代币查询，批量转账功能相关推荐

最新文章

热门文章