小试牛刀-区块链代币锁仓(Web页面)

Welcome to Code Block's blog

本篇文章主要介绍了

[区跨链代币锁仓(Web页面)]
❤博主广交技术好友,喜欢我的文章的可以关注一下❤

目录

1.编写目的

2.开发环境

3.实现功能

4.代码实现

4.1 必要文件

4.1.1 ABI Json文件(LockerContractABI.json)

4.2 代码详解

ABI初始化

4.1.1 MetaMask连接到网站

4.1.2 显示锁仓数量、地址数、时间

4.1.3 显示当前锁仓列表

4.1.4 显示锁仓历史记录

4.1.5 显示我的锁仓列表、

4.1.6 锁仓

 4.1.7 解锁

5.测试

5.1 测试截图

 5.2测试视频

6.页面源码


1.编写目的

        本篇文章是小试牛刀-区块链代币锁仓合约实战的后续,记录前端页面的开发过程,分享前端页面代码,加深对前端页面理解,同时希望能帮到需要实现相关功能的朋友。

2.开发环境

        该网页使用Vue("vue": "^3.3.11",)实现,与合约的交互使用了web3("web3": "^4.3.0")组件,使用VsCode作为开发集成IDE.

3.实现功能

  1. MetaMask连到到网站
  2. 显示锁仓数量
  3. 显示锁仓人数
  4. 显示链上时间
  5. 显示当前锁仓列表
  6. 显示锁仓历史记录
  7. 显示我的锁仓列表
  8. 创建锁仓并锁定指定时间
  9. 超过锁仓时间后执行解锁

4.代码实现

4.1 必要文件

4.1.1 ABI Json文件(LockerContractABI.json)

        该文件是合约的ABI文件,是Json格式,其中为合约方法的名称和返回参数类型,web3.js组件只有通过这个ABI文件才能知道调用合约方法,以及返回的参数类型.(已在下载源码中包含.),同样可以通过这个链接进行下载.ABI文件

4.2 代码详解

ABI初始化

将ABI文件导入到使用的JS中.

import BabyBonkLoderABI from './LockerContractABI.json';
import BabyBonkABI from './BabyBonkContractABI.json'

然后通过以下代码对ABI文件进行初始化,这里lockerContractAddress变量为合约地址。accounts[0]即连接的MetaMusk地址.

    async initializeContract() {try {const accounts = await this.web3.eth.getAccounts();this.lockerContract = new this.web3.eth.Contract(BabyBonkLoderABI, this.lockerContractAddress, {from: accounts[0],});this.tokenContract=new this.web3.eth.Contract(BabyBonkABI,this.tokenContractAddress,{from: accounts[0]})this.address=accounts[0]} catch (error) {console.error('Error initializing contract:', error);}}

4.1.1 MetaMask连接到网站

        使用以下方法连接MetaMask,在连接之前先要对web3组件进行初始化,连接后即可获得链上地址并且通过初始化函数初始化合约内的方法,方便调用。

async connectToMetaMask() {try {await window.ethereum.request({ method: 'eth_requestAccounts' });this.web3 = new Web3(window.ethereum);await this.initializeContract();ElMessage({message: 'connect wallet success!',type: 'success',})} catch (error) {ElMessage.error('Error connecting to MetaMask')}}

4.1.2 显示锁仓数量、地址数、时间

        这里调用合约内的getLockPool方法获取锁仓代币总量,调用getLockerSize方法获取地址数量,getTimestamp()方法获取链上时间戳,并通过格式转换方法将格式转换为字符串的格式方便在前端页面显示.

    async initLockInfo() {await this.initializeContract();try {const lockPool=await this.lockerContract.methods.getLockPool().call();this.lockPool=this.toBalance(lockPool);const lockSize=await this.lockerContract.methods.getLockerSize().call();this.lcokPoolSize=BigInt(lockSize).toString();const timestamp=await this.lockerContract.methods.getTimestamp().call();this.timestamp=parseInt(Number(timestamp)*1000);this.chainTime=this.formattedDateTime();} catch (error) {console.error('Error calling contract method:', error);}}

4.1.3 显示当前锁仓列表

调用合约getLockerList方法获取当前的锁仓列表。

    async getlockList(){await this.initializeContract();return await this.lockerContract.methods.getLockerList().call();}

4.1.4 显示锁仓历史记录

调用getLockerHistoryList方法获取当前的锁仓历史列表。

    async getLockerHistoryList(){await this.initializeContract();return await this.lockerContract.methods.getLockerHistoryList().call();}

4.1.5 显示我的锁仓列表、

调用getUserLock()方法获取当前连接的地址的锁仓列表。

    async getUserLock(){await this.initializeContract();return await this.lockerContract.methods.getUserLocker().call();}

4.1.6 锁仓

锁仓包授权和锁仓请求,当未进行授权时,需要完成授权(approve(数量))操作,授权完成后即可再次点击锁仓按钮请求合约(即lockAmountDuration(数量,时间)),合约会进行转移代币和记录锁仓信息.使用代码如下:

    async approve(amount){await this.initializeContract();const amountToApprove = BigInt(amount)*BigInt(1e9);this.tokenContract.methods.approve(this.lockerContractAddress,amountToApprove).send({from: this.address,to:this.tokenContractAddress,gas: '300000', gasPrice: '3000000000'}) .on('transactionHash', function(hash) {ElMessage.success('send transaction success:'+hash)}).on('error', function(error) {ElMessage.error('Error send TransactionHash')});}async lockAmountDuration(amount,lockDuration){await this.initializeContract();this.lockerContract.methods.lockerToken(amount,lockDuration).send({from: this.address,to:this.lockerContractAddress,gas: '300000', gasPrice: '3000000000'}).on('transactionHash', function(hash) {ElMessage.success('LOCK success:'+hash)}).on('error', function(error) {ElMessage.error('LOCK ERROR')});}

 4.1.7 解锁

解锁即为请求合约unlockerToken方法,合约会通过记录的信息将相应的代币退回给用户。

    async unLockAmount(){await this.initializeContract();this.lockerContract.methods.unLockerToken().send({from: this.address,to:this.lockerContractAddress,gas: '300000', gasPrice: '3000000000',}).on('transactionHash', function(hash) {ElMessage.success('UN LOCK success:'+hash)}).on('error', function(error) {ElMessage.error('UNLOCK ERROR')});}

5.测试

5.1 测试截图

 5.2测试视频

录屏_选择区域_20240225093939

6.页面源码

源码已上传,可以在置顶或当前链接下载小试牛刀-区块链代币锁仓(Web页面).

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI绘画-Stable Diffusion 原理介绍及使用

引言 好像很多朋友对AI绘图有兴趣,AI绘画背后,依旧是大模型的训练。但绘图类AI对计算机显卡有较高要求。建议先了解基本原理及如何使用,在看看如何实现自己垂直行业的绘图AI逻辑。或者作为使用者,调用已有的server接口。 首先需…

掌握Mojolicious会话管理:构建安全、持久的Web应用

掌握Mojolicious会话管理:构建安全、持久的Web应用 Mojolicious是一个基于Perl的高性能、异步Web开发框架,它提供了一套完整的工具来构建现代Web应用。会话管理是Web开发中的一个关键组成部分,它允许应用识别和保持用户的登录状态。本文将深…

单片机软件架构连载(3)-typedef

今天给大家讲typedef,这个关键字在实际产品开发中,也是海量应用。 技术涉及知识点比较多,有些并不常用,我们以贴近实际为原则,让大家把学习时间都花在重点上。 1.typedef的概念 typedef 是 C 语言中的一个关键字&…

WhatsApp机器人:提升客户服务效率的自动化工具

在数字化转型的浪潮中,客户服务领域正经历着一场革命。WhatsApp机器人以其即时性、便捷性和高效性,正在成为企业提升客户服务效率的有力工具。 引言 客户服务是企业与用户建立信任和忠诚度的关键环节。然而,随着用户基数的增长,…

DP:背包问题----0/1背包问题

文章目录 💗背包问题💛背包问题的变体🧡0/1 背包问题的数学定义💚解决背包问题的方法💙例子 💗解决背包问题的一般步骤?💗例题💗总结 ❤️❤️❤️❤️❤️博客主页&…

【RflySim学习笔记】1.RflySim的绪论

目录 文章目录 目录1.RflySim 平台背景2.RflySim 平台特点3.RflySim 平台核心组件介绍3.1 CopterSim3.2 RflySim3D/RflySimUE5UE引擎:RflySim3D/RflySimUE5 3.3 QGroundControl地面站3.4 Python38Env3.5 MATLAB自动代码生成工具箱3.6 SITL/HITL批处理脚本3.7 PX4 Fi…

vue+js 监听组合按键 比如ctrl+f

vuejs 监听组合按键 比如ctrlf 需求&#xff1a;页面中有一个搜索功能&#xff0c;增加快捷键触发 <template><div id"app" ></div> </template><script> export default {mounted() {window.addEventListener(keydown, this.copyTe…

CentOS 7 arm64架构制作openssl 1.1.1w 二进制rpm包——筑梦之路

制作过程几乎和这篇CentOS 7 制作openssl 1.1.1w 版本rpm包 —— 筑梦之路_centos7 openssl 1.1.1 rpm包-CSDN博客 无差别&#xff0c;因此不再赘述。 本次制作主要修改了spec文件&#xff0c;将openssl安装路径修改为/usr/local/openssl。 2024年7月3日 二进制rpm包和src…

vue3实现多表头列表el-table,拖拽,鼠标滑轮滚动条优化

需求背景解决效果index.vue 需求背景 需要实现多表头列表的用户体验优化 解决效果 index.vue <!--/** * author: liuk * date: 2024-07-03 * describe:**** 多表头列表 */--> <template><el-table ref"tableRef" height"calc(100% - 80px)&qu…

springboot+vue+mybatis前台点菜系统+PPT+论文+讲解+售后

21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存储达到…

数字政务信息系统的技术架构方案和发展趋势研究

随着信息技术的飞速发展&#xff0c;数字政务已经成为推动政府治理体系和治理能力现代化的重要手段。数字政务信息系统作为政府信息化建设的重要组成部分&#xff0c;不仅能够提高政府工作效率&#xff0c;还能更好地服务于民众&#xff0c;提升公众满意度。本文将以“数字政务…

Golang | Leetcode Golang题解之第214题最短回文串

题目&#xff1a; 题解&#xff1a; func shortestPalindrome(s string) string {n : len(s)fail : make([]int, n)for i : 0; i < n; i {fail[i] -1}for i : 1; i < n; i {j : fail[i - 1]for j ! -1 && s[j 1] ! s[i] {j fail[j]}if s[j 1] s[i] {fail[i…

SDIO学习(2)--SD 2.0协议

目录 1. SD卡简介 1.1 SD卡概念 1.2 SD卡外形和接口 2. SD 2.0主要特性 3. SD 卡系统概念 3.1 读写属性 3.2 总线拓扑结构 3.2.1 SD模式 3.2.2 SPI模式 3.3 SD 2.0总线协议 3.3.1 命令&#xff08;Command&#xff09; 3.3.1.1 命令分类 3.3.1.2 命令格式 3.3.1.…

精确计算应用的冷启动耗时

在iOS项目中&#xff0c;冷启动时间是指从用户点击应用图标开始&#xff0c;到应用完全加载并呈现出第一个界面&#xff08;可能需要网络请求必要的数据&#xff09;所花费的时间。这里以 main 函数为界&#xff0c;分为两个时间段&#xff1a; 从用户点击应用图标 ~ invoke m…

单片机cmake使用笔记

一、同时拥有两个工程项目时的配置&#xff08;APP IAP&#xff09;方便git等工具的管理 1.1、目录结构如下&#xff1a; |-Power_prj|-CMakelists.txt| |-Power_APP| | |-src| | |-include| | |-main.c| | …

(4)深入探索与优雅安装:Pandas数据处理的魅力之旅

目录 1. 前言1.1 Pandas 概述1.2 Pandas 特点1.3 优化应用举例1.4 Pandas 应用场景 2. DataFrame2.1 DataFrame结构2.2 Pandas 安装2.2.1 Pandas 安装准备2.2.2 Pandas 安装2.2.3 Pandas 包的导入2.2.4 查看 pandas 版本2.2.5 一个简单的 1. 前言 1.1 Pandas 概述 pandas 是 …

大数据招商的应用场景及实施路径有哪些?

当下&#xff0c;我国已经进入数字经济与实体经济融合发展的新阶段&#xff0c;数字技术和数字化转型落地日臻成熟&#xff0c;数据要素价值释放深入到了我国各个领域的发展&#xff0c;招商引资也不例外&#xff0c;在传统招商模式效果日渐甚微的大环境下&#xff0c;大数据招…

Java 基础知识之 switch 语句和 yield 关键字

传统 switch 语句 传统的 switch 语句我们已经写了一万遍了&#xff0c;以下是一个典型的 switch 语句&#xff1a; int dayOfWeek 3; switch (dayOfWeek) {case 1:System.out.println("星期一");break;case 2:System.out.println("星期二");break;case…

NAT地址转换实验,实验超简单

实验拓扑 实验目的 将内网区域&#xff08;灰色区域&#xff09;的地址转换为172.16.1.0 实验过程 配置静态NAT&#xff08;基于接口的静态NAT&#xff09; R1配置 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sysname R1 [R1]un in en I…

游戏AI的创造思路-技术基础-自然语言处理

自然语言处理-可以对游戏AI特别是RPG类、语言类游戏进行“附魔”&#xff0c;开发出“随机应变”和你聊天的“女友”、“队友”或者是根据你定义的文本库来用接近自然语言的生成“语言”&#xff0c;推动游戏情景在受控范围内前进 目录 1. 自然语言处理定义 2. 发展历史 3. …