ETH开发DAPP使用Web3+Vue唤醒MetaMask钱包和合约交互

注:
1、we3版本:0.20.7
2、下面使用的是标准的ERC20合约测试
3、其他 HECO BSC OK Polygon 公链对接类似

1、在 mounted 中自动检测浏览器是否安装MetaMask钱包

 mounted () {
    if (window.ethereum) {
      window.ethereum.enable().then((res) => {
        //alert("当前钱包地址:"+res[0])
      })
    }else{
      alert("请安装MetaMask钱包")
    }
  }

2、查询钱包ETH余额

let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
web3.eth.getBalance(fromAddress,(err, res) => {
   if (!err) {
       console.log("ETH余额==",res.toNumber()/Math.pow(10,18));
   }
 })

3、查询代币余额

let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
let ethContract = web3.eth.contract("代币合约Abi")
let functionInstance = ethContract.at("代币合约地址")
functionInstance.balanceOf(fromAddress,(err, res) => {
   if (!err) {
       //代币精度根据所发行的代币合约精度换算 
       console.log("代币余额==",res.toNumber()/Math.pow(10,18));
   }
})

4、ETH转账

let web3 = new Web3(window.web3.currentProvider)
let fromAddress = web3.eth.accounts[0];
//转账数量
let amount = 1*Math.pow(10,18);
//收款地址
let toAddress = "0x40141cF4756A72DF8D8f81c1E0c2ad403C127b9E";
web3.eth.sendTransaction({
    gas: 21000,
    gasPrice: 5000000000,
    from: fromAddress,
    to: toAddress,
    value: amount
 }, (err, result) => {
     console.log("转账Hash=",result)
 })

5、代币转账

let web3 = new Web3(window.web3.currentProvider)
let ethContract = web3.eth.contract("代币Abi")
let functionInstance = ethContract.at("代币地址")
//当前钱包地址
let fromAddress = web3.eth.accounts[0];
//转账数量
let amount = 100*Math.pow(10,18);
//接收地址
let toAddress = "0x40141cF4756A72DF8D8f81c1E0c2ad403C127b9E";
functionInstance.transfer(toAddress,amount,{
     gas: 21000,
     gasPrice: 5000000000,
     from: fromAddress
 }, (err, result) => {
       console.log("转账Hash:",result)
  })

6、代币授权

let web3 = new Web3(window.web3.currentProvider)
let abiContract = web3.eth.contract("代币合约Abi")
let contractInstance = abiContract.at("代币合约地址")
//当前钱包地址
var fromAddress = web3.eth.accounts[0];
//授权数量
var amount = 1000 * Math.pow(10,18);
contractInstance.approve("授权地址",amount,{
    gas: 80000,
    gasPrice: 1500000000,
    from: fromAddress
}, (err, result) => {
    console.log("交易Hash:",result)
})

6、查询授权数量

let web3 = new Web3(window.web3.currentProvider)
let abiContract = web3.eth.contract("代币合约Abi")
let contractInstance = abiContract.at("代币合约地址")
contractInstance.allowance("授权的用户钱包地址","授权的地址",(err, res) => {
    if (!err) {
        console.log("授权数量==",res.toNumber());
    }
})

7、查询去中心化交易所LP地址数量 计算价格

let web3 = new Web3(window.web3.currentProvider)
let ethContract = web3.eth.contract("LP合约Abi")
let functionInstance = ethContract.at("LP合约地址")
functionInstance.getReserves((err, res) => {
  if (!err) {
        // 代币数量1 res[0].toNumber()
        // 代币数量2 res[1].toNumber()
        //根据先后顺序 2个相除可以得到价格
    }
})

多链钱包充提系统

学如逆水行舟,不进则退。心似平原跑马,易放难收。【区块链】【系统/网络/运维】【云计算/大数据】【数据库】【移动开发】【后端开发】【游戏开发】【UI设计】【微服务】【爬虫】【Java】【Go】【C++】【PHP】【Python】【Android/IOS】【HTML/CSS】【JavaScript】【Node】【VUE】【ReactNaive】。。。

欢迎各位大神萌新一起专研分享各行各业技术!

Chain区块链开发社区:593674370


原文连接:https://blog.csdn.net/m0_67265919/article/details/123149052

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?