vue3 使用 web3.js;钱包转账;唤醒钱包.......

这篇具有很好参考价值的文章主要介绍了vue3 使用 web3.js;钱包转账;唤醒钱包.......。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

web3.js基本使用

本篇文章不适合没有经验的小白,需要对web3有一定的了解,所以有些参数需要自己懂!
准备

安装web3.js依赖包
npm install web3

文档教程地址:https://web3.tryblockchain.org/

这是我自己封装的类 web3.js 直接复制过去就可以用文章来源地址https://www.toymoban.com/news/detail-768232.html

/**
 * web3.js
 * @example 
 * import Web3 from './web3.js' // 根据你实际文件路径引入这个类
 * const web3 = new Web3('https://...');
 * web3.wakeUpWallet() // 唤醒钱包
 */
import Web3 from "web3";

export default class EthJs {
  /**
   * 初始化链接
   * @param {String} url 链址
   */
  constructor(url) {
    this.web3 = new Web3(url);
  }

  // 唤醒钱包
  wakeUpWallet = async () => {
    if (window.ethereum) {
      return await window.ethereum.enable();
    } else {
      console.error("请安装meteMask钱包!");
      return false;
    }
  };

  /**
   * 查看钱包余额
   * @param {String} address 地址
   * @return 余额
   */
  getTokenBalance = async (address) => {
    if (!address) {
      let web3 = new Web3(window.web3.currentProvider); // 初始化
      let arr = await web3.eth.getAccounts();
      address = arr[0];
    }
    let wei = await this.web3.eth.getBalance(address);
    return this.web3.utils.fromWei(wei.toString(), "ether");
  };

  /**
   * 发起转账 - 主币
   * @param {Object} res 转账需要的数据
   * @param {string} res.from 转账发起地址
   * @param {string} res.to 转账接受地址
   * @param {string} res.value 转账金额 单位/eth
   * @param {string} res.gasPrice 费率
   * @param {Function} callBack 回调函数
   */
  send = async (res = {}, callBack) => {
    let { from = "", to = "", gasPrice = "", value = 0, gas = 21000 } = res;
    if (!to || !value)
      return console.error({ code: 0, error: "缺少必要参数!" });
    let web3 = new Web3(window.web3.currentProvider); // 初始化
    if (!from) {
      let arr = await web3.eth.getAccounts(); // 获取钱包地址 @return - Array
      from = arr[0];
    }
    if (!gasPrice) gasPrice = await web3.eth.getGasPrice();
    value = this.web3.utils.toWei(value, "ether"); // eth -> wei
    const trans = web3.eth.sendTransaction(
      {
        gas,
        gasPrice,
        from,
        to,
        value,
      },
      (err, result) => {
        console.log(err, "e");
        console.log("转账Hash=", result);
      }
    );
    trans.on("transactionHash", (txid) => {
      callBack({ event: "transactionHash", data: txid });
    });
    // 第一个节点确认 - 执行一次
    trans.on("receipt", (res) => {
      callBack({ event: "receipt", data: res });
    });
    // 第n个节点确认 - 执行n次
    trans.on("confirmation", (res) => {
      callBack({ event: "confirmation", data: res });
    });
  };

  /**
   * 发起转账-代币
   */
  sendToken = async (res = {}, callBack) => {
    let {
      from = "", // 付款地址
      to = "", // 收款地址
      tokenURl = "", // 合约地址
      value = 0,
      gas = "50000",
      nonce = 0,
      money = 0.00001, // 合约币数量
    } = res;
    console.log(window.web3.currentProvider);
    let web3 = new Web3(window.web3.currentProvider); // 初始化
    if (!from) {
      let arr = await web3.eth.getAccounts(); // 获取钱包地址 @return - Array
      from = arr[0];
    }
    const gasPrice = await this.web3.eth.getGasPrice(); // 获取预计转账费用
    nonce = await this.web3.eth.getBlockTransactionCount(from); // 获取转账次数
    value = this.web3.utils.toWei(value, "ether"); // eth -> wei
    const addPreZero = (num) => {
      let t = (num + "").length,
        s = "";
      for (let i = 0; i < 64 - t; i++) {
        s += "0";
      }
      return s + num;
    };
    let code = `0xa9059cbb${addPreZero(to.substring(2))}${addPreZero(
      this.web3.utils
        .fromDecimal(this.web3.utils.toWei(money, "ether"))
        .substring(2)
    )}`;

    const txraw = {
      gas: this.web3.utils.toHex(gas),
      gasPrice: this.web3.utils.toHex(gasPrice),
      from,
      to: tokenURl,
      value: value,
      data: code,
    };
    const trans = web3.eth.sendTransaction(txraw, (err, result) => {
      console.log(err, "e");
      console.log("转账Hash=", result);
    });
    trans.on("transactionHash", (txid) => {
      callBack({ event: "transactionHash", data: txid });
    });
    trans.on("error", (e) => {
      console.log(e);
    });
    // 调用钱包转账
    // const s = await window.ethereum.request({
    //   method: "eth_sendTransaction",
    //   params: [
    //     {
    //       to: tokenURl,
    //       from,
    //       gas: this.web3.utils.toHex(gas),
    //       value: this.web3.utils.toHex(value),
    //       gasPrice: this.web3.utils.toHex(gasPrice),
    //       data: code,
    //       // data: `0xa9059cbb${addPreZero(
    //       //   to.substring(2)
    //       // )}0000000000000000000000000000000000000000000000001bc16d674ec80000`,
    //     },
    //   ],
    // });
    // console.log(`output->s`, s);
  };
}


到了这里,关于vue3 使用 web3.js;钱包转账;唤醒钱包.......的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 使用nodejs和web3js实现链接metamask钱包并实现合约交互

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

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

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

    2024年01月23日
    浏览(49)
  • web3.js 查看钱包金额

    ajax与web服务器交互,传递数据; 等同于 web3.js 向以太坊网络某一节点交互; 见下图来自link. 所以接下来的问题是: JSON RPC(JSON远程调用)作为程序和EVM client的web3 interface,是如何作用的?? 类似jQuery ajax库来读写web服务器上的数据??这又是什么? 注册infura,创建新proj

    2024年02月16日
    浏览(39)
  • web3.js链接以太坊并查询钱包u余额

    web3.js版本:6.14.15 不会安装以及使用web3.js的小伙伴看:https://blog.csdn.net/qq_45844443/article/details/124330035 获取以太坊的链接地址(也就是以太坊官网的主网链接) 获取地址: https://chainlist.org/. 创建一个js文件并且创建\\\"providers\\\",填上刚才随意取得的主网链接. 有过交易的信息,上面都会显示

    2024年02月03日
    浏览(64)
  • 记录分享vue3通过web3.js连接MetaMask的流程及签名、验签方法

    记录下web3.js连接,希望对像我一样的小白有帮助。废话不多说,开整! 一、先在浏览器上面下载 小狐狸MetaMask插件,然后创建账户,创建成功之后默认连接的是以太坊 Ethereum 主网络,如果有相关网络的信息(如RPC URL和和链id等,可以自己添加,没有就先不管)。  二、本地项

    2024年02月06日
    浏览(57)
  • Python 使用 Web3.py 进行 ETH 和代币转账

    1、安装 Web3.py 2、注册 Infura 获得节点服务 使用邮箱注册 Infura 账户后,创建一个项目,即可获得以太坊节点服务,进入设置即可看到链接的URL 可以选择主网测试网等,会有两个链接,一个是使用HTTPS的一个是使用WebSocket,按你的需求选择一个就行了,注意:Infura 个人免费请

    2024年02月16日
    浏览(46)
  • Vue3项目(Vite+TS)使用Web Serial Api全记录

    之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中,不如部署到服务器上,这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt,得到了以下答案

    2024年02月02日
    浏览(44)
  • 使用WalletConnect Web3Modal v3 链接钱包基础教程

    我使用的是vue+ethers@5.7.2 官方文档:WalletConnect 1.安装 2.引用 新建一个js文件,在main.js中引入,初始化配置sdk 获取 address chainId isConnected 相关信息 调用签名 以上调用方法可以自己结合使用, 具体可以参考官方文档 3.网络组件 点这里看文档 初始化引用之后再调用 4.自定义组合

    2024年02月04日
    浏览(67)
  • vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

    * 初始化node 查看node是否安装 node -v 初始化命令 npm init 初始化配置解释如下: 完成后会有一个package.json文件 * 安装可能用到的依赖 根据需求安装,我这里需要对接mysql,安装依赖 ,我是一次性安装完,后边会直接使用,也可以边安装边使用。如下 安装成功如下: * 配置文件

    2024年02月15日
    浏览(51)
  • 连接区块链节点的 JavaScript 库 web3.js

    通过前面的文章我们可以知道基于区块链开发一个DApp,而DApp结合了智能合约和用户界面(客户端),那客户端是如何与区块链进行连接交互的、如何调用智能合约的、如何发送一个交易到区块链、如何获取区块链上的数据,这就是本文要介绍的 web3.js。 如下图,区块链网络

    2024年02月15日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包