前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能

这篇具有很好参考价值的文章主要介绍了前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里分享下相关文档

1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html
2.metamask官方文档:https://docs.metamask.io/

第一种方法:连接钱包

// 参考网址:https://blog.csdn.net/cjy_win/article/details/117248919?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&utm_relevant_index=2

// 1.先确认自己的浏览器安装了metaMask插件,建议谷歌浏览器

// 2.Vue项目安装web3.js,使用npm安装web3js依赖

//在vue中安装web3
npm install web3 --save
//在main.js引入
import Web3 from 'web3'
Vue.prototype.Web3 = Web3

自己创建一个getWeb3.js文件把下面代码放入里面,需要用到的页面直接引入即可

import Web3 from "web3";
const getWeb3 = () =>
  new Promise((resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.
    window.addEventListener("load", async () => {
      // Modern dapp browsers...
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          // Request account access if needed
          await window.ethereum.enable();
          // Acccounts now exposed
          resolve(web3);
        } catch (error) {
          reject(error);
        }
      }
      // Legacy dapp browsers...
      else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
        resolve(web3);
      }
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:9545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      }
    });
  });
export default {
	getWeb3
};

3.上面是一个js方法,根据当前页面来初始化web3对象,在对应页面 通过  const Web3= require('../common/getWeb3') 引入,然后通过下面方法使用

注意:加web3前面必须有window : window.web3

 Web3.default.getWeb3().then((res) => {
      window.web3 = res;
      console.log("getWeb3", res);
    });

源码:

<template>
  <div>
    <button @click="get()">连接钱包</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    get() {
      // web3前面必须有window
      const Web3 = require("../common/getWeb3");
      Web3.default.getWeb3().then((res) => {
        window.web3 = res;
        console.log("getWeb3", res);
      });
    }
  },
};
</script>

第二种方法: 连接钱包 安装依赖直接可以使用

参考网址:https://blog.csdn.net/qq_16137795/article/details/120239103?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-120239103.pc_agg_new_rank&utm_term=web3+%E8%B0%83%E7%94%A8MetaMask%E9%92%B1%E5%8C%85%E8%BD%AC%E8%B4%A6eth&spm=1000.2123.3001.4430

// 1.先确认自己的浏览器安装了metaMask插件,建议谷歌浏览器

// 2.Vue项目安装web3.js,使用npm安装web3js依赖

//在vue中安装web3
npm install web3 --save
//在main.js引入
import Web3 from 'web3'
Vue.prototype.Web3 = Web3


注意:ethereum 和 web3 前必须有window:  window.ethereum window.web3

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

源码:

<template>
  <div class="home">
    <button @click="get">连接钱包</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    get() {
      if (window.ethereum) {
        window.ethereum.enable().then((res) => {
          alert("当前钱包地址:" + res[0]);
        });
      } else {
        alert("请安装MetaMask钱包");
      }
    },
  },
};
</script>

前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能

其他功能:

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)
})

7、查询授权数量

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());
    }
})

8、查询去中心化交易所LP地址数量 计算价格文章来源地址https://www.toymoban.com/news/detail-508566.html

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个相除可以得到价格
    }
})

到了这里,关于前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面

    公司业务迭代, 需要前端vue项目里增加一个查看实时监控模块, 这个需求是之前离职的前端小哥没有研究明白的, 现在落在了我的肩上, 压力还是有的. 但是压力归压力, 问题还是要解决的. 第一步: 调研大佬们已经实现的方案, 找设备对接. 公司后端大佬提出用官方SDK稍加修改即

    2024年02月08日
    浏览(42)
  • MetaMask与Web3中智能合约调用(2)

    智能合约交易区别于点对点交易,智能合约交易只需付费给矿工费用,也就是gas fee,是支付给矿工的手续费,当我们在以太坊区块链上进行转账时,矿工要把我们的交易打包并放上区块链,才能使交易完成,在这过程中会消耗区块链的运算资源,所以要支付费用 这个过程为

    2024年01月16日
    浏览(47)
  • 使用 React、Web3.js 和 Metamask 构建 Web3 dApp 身份验证

    我相信您和我一样对 Web3 充满热情。本文介绍了一种新的区块链开发登录方法:使用 MetaMask 扩展的一键式加密安全登录流程,所有数据都存储在我们自己的后端。它还可以保护我们的数据和加密货币的安全。 在这里,我们将构建一个允许用户使用 MetaMask 登录的身份验证解决

    2024年02月04日
    浏览(62)
  • 使用Node.js和Web3.js实现链接MetaMask钱包并批量创建钱包并且批量发送代币

    MetaMask是一款基于浏览器的插件钱包,它可以安全地存储、发送和接收以太坊(Ethereum)代币。而Web3.js是一款JavaScript库,可以通过它连接以太坊区块链网络并管理以太坊钱包。 在此文中,我们将学习如何使用Node.js和Web3.js编程语言编写代码,实现链接MetaMask钱包并批量创建钱

    2024年02月08日
    浏览(79)
  • 使用nodejs和web3js实现链接metamask钱包并实现合约交互

    在以太坊区块链上,metamask钱包是一个非常常用的钱包,用以管理以太币和其他以太坊资产。同时,它也是一个重要的以太坊智能合约交互工具。在本文中,我们将介绍如何使用nodejs和web3js实现链接metamask钱包并实现合约交互。 在开始之前,首先需要安装NodeJS和Web3JS。 NodeJS是

    2024年02月04日
    浏览(90)
  • 使用nodejs和web3js来实现链接MetaMask钱包并取消风险代币授权

    随着区块链技术的快速发展,数字货币资产在投资及交易市场中得到了广泛的应用。而在数字货币交易过程中,钱包是一个非常重要的环节。比如MetaMask就是一款非常流行的区块链钱包,它可以让用户在浏览器中安全地管理自己的数字资产。 然而,在数字货币交易过程中也存

    2024年01月23日
    浏览(49)
  • 【Web3】MetaMask钱包配置

    目录 主网更换测试网 私钥如何登录钱包 主网更换测试网 私钥如何登录钱包

    2024年02月12日
    浏览(88)
  • Web3简述MetaMask并演示谷歌安装MetaMask扩展程序方式

    我们会基本使用显然不够啊 我们要去了解mustache的原理 乃至自己去写一个mustache 首先 mustache 不是不能用简单的正则表达式来实现 但是 这里为了让大家理解 为什么不能 我们还是用简单正则写一下 我们创建一个 html文件 然后 编写代码如下 这里 我们定义了一个模板字符串 t

    2024年02月09日
    浏览(64)
  • Web3.js在以太坊上部署和调用智能合约

    介绍如何使用Web3.js在以太坊上部署和调用智能合约;Web3.js是以太坊JavaScript API的实现,它可以与以太坊区块链进行交互 智能合约编写 使用Solidity编写一个简单的智能合约,然后使用Web3.js将其部署到以太坊区块链,通过JavaScript调用该智能合约 这个智能合约非常简单。它有两

    2024年02月16日
    浏览(46)
  • Web3在HTML中获取 MetaMask 启用的用户列表

    当然 我们还是要先启动ganache环境 然后 通过MetaMask 导入一些用户 然后 我们需要在页面中引入 web3.min.js 如果您还没有这个文件 可以查看我的文章web3.js获取导入 然后我访问官网 https://learnblockchain.cn/docs/web3.js/web3-eth.html#getchainid 打开后 先来到 web3.eth 下面 下面有一个 getAccount

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包