小试牛刀-区块链代币锁仓(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.实现功能
- MetaMask连到到网站
- 显示锁仓数量
- 显示锁仓人数
- 显示链上时间
- 显示当前锁仓列表
- 显示锁仓历史记录
- 显示我的锁仓列表
- 创建锁仓并锁定指定时间
- 超过锁仓时间后执行解锁
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页面).
相关文章:

小试牛刀-区块链代币锁仓(Web页面)
Welcome to Code Blocks blog 本篇文章主要介绍了 [区跨链代币锁仓(Web页面)] ❤博主广交技术好友,喜欢我的文章的可以关注一下❤ 目录 1.编写目的 2.开发环境 3.实现功能 4.代码实现 4.1 必要文件 4.1.1 ABI Json文件(LockerContractABI.json) 4.2 代码详解…...
Geoserver源码解读五 Catalog
系列文章目录 Geoserver源码解读一 环境搭建 Geoserver源码解读二 主入口 Geoserver源码解读三 GeoServerBasePage Geoserver源码解读四 REST服务 Geoserver源码解读五 Catalog 目录 系列文章目录 前言 一、定义 二、前置知识点 1.Spring 的 Bean 生命周期 ApplicationCon…...
安全与加密常识(5)自签名证书
文章目录 什么是自签名证书?自签名证书有什么优势?自签名证书有什么缺陷?企业可以使用自签名证书吗?如何创建自签名证书?前面我们介绍了什么是证书签名请求:证书签名请求(Certificate Signing Request,CSR)是一种数据文件,通常由申请者生成,并用于向证书颁发机构(C…...
Java官网网址及其重要资源
Java是一种广泛应用于开发各种应用程序的编程语言,它具有跨平台、面向对象和高性能等优势。若你想学习Java或深入了解它的最新动态,Java官网是你的首要目的地。在本文中,我们将向你介绍Java官网的网址以及一些重要资源。 Java官网网址&#x…...
Linux--start-stop-daemon
参考:start-stop-daemon(8) - Linux manual page 1、名称 start-stop-daemon:启动和停止系统守护程序。 2、简介 start-stop-daemon [option...] command 3、描述 start-stop-daemon用于控制系统级进程的创建和终止。使用其中一个匹配选项࿰…...
优化Java中XML和JSON序列化
优化Java中XML和JSON序列化 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在Java应用程序中,对于XML和JSON的序列化操作是非常常见的需求。本文将…...

像学Excel 一样学 Pandas系列-创建数据分析维度
嗨,小伙伴们。又到喜闻乐见的Python 数据分析王牌库 Pandas 的学习时间。按照数据分析处理过程,这次轮到了新增维度的部分了。 老样子,我们先来回忆一下,一个完整数据分析的过程,包含哪些部分内容。 其中,…...
Rust 基础教程
Rust 编程语言教程 Rust是一门注重安全、并发和性能的系统编程语言。本文将从Rust的基本语法、常用功能到高级特性,详细介绍Rust的使用方法。 目录 简介环境配置基础语法 变量和常量数据类型函数控制流 所有权和借用 所有权借用 结构体和枚举 结构体枚举 模块和包…...

Study--Oracle-06-Oracler网络管理
一、ORACLE的监听管理 1、ORACLE网络监听配置文件 cd /u01/app/oracle/product/12.2.0/db_1/network/admin 2、在Oracle数据库中,监听器(Listener)是一个独立的进程,它监听数据库服务器上的特定端口上的网络连接请求,…...

uniapp零基础入门Vue3组合式API语法版本开发咸虾米壁纸项目实战
嗨,大家好,我是爱搞知识的咸虾米。 今天给大家带来的是零基础入门uniapp,课程采用的是最新的Vue3组合式API版本,22年发布的uniappVue2版本获得了官方推荐,有很多同学等着我这个vue3版本的那,如果没有学过vu…...

数字信号处理教程(2)——时域离散信号与时域离散系统
上回书说到数字信号处理中基本的一个通用模型框架图。今天咱们继续,可以说今天要讲的东西必须是学习数字信号处理必备的观念——模拟与数字,连续和离散。 时域离散序列 由于数字信号基本都来自模拟信号,所以先来谈谈模拟信号。模拟信号就是…...

imx6ull/linux应用编程学习(8)PWM应用编程(基于正点)
1.应用层如何操控PWM: 与 LED 设备一样, PWM 同样也是通过 sysfs 方式进行操控,进入到/sys/class/pwm 目录下 这里列举出了 8 个以 pwmchipX(X 表示数字 0~7)命名的文件夹,这八个文件夹其实就对应了…...

等保2.0 实施方案
一、引言 随着信息技术的广泛应用,网络安全问题日益突出,为确保信息系统安全、稳定、可靠运行,保障国家安全、公共利益和个人信息安全,根据《网络安全法》及《信息安全技术 网络安全等级保护基本要求》(等保2.0&#x…...

7/3 第六周 数据库的高级查询
...
ubuntu20.04安装kazam桌面屏幕录制工具
在Ubuntu 20.04上安装Kazam可以通过以下步骤进行: 1.打开终端:可以通过按下Ctrl Alt T组合键来打开终端。 2.添加PPA源:Kazam不再在官方Ubuntu仓库中,但可以通过PPA源进行安装。在终端中输入以下命令来添加PPA: su…...
Python应对反爬虫的策略
Python应对反爬虫的策略 概述User-Agent 伪造应对302重定向IP限制与代理使用Cookies和Session管理动态内容加载数据加密与混淆请求频率限制爬虫检测算法法律与道德考量结语 概述 在数字化时代,网络数据采集已成为获取信息的重要手段之一。然而,随着技术…...

240703_昇思学习打卡-Day15-K近邻算法实现红酒聚类
KNN(K近邻)算法实现红酒聚类 K近邻算法,是有监督学习中的分类算法,可以用于分类和回归,本篇主要讲解其在分类上的用途。 文章目录 KNN(K近邻)算法实现红酒聚类算法原理数据下载数据读取与处理模型构建--计算距离模型预测 算法原理 KNN算法虽…...

keil5模拟 仿真 报错没有读写权限
debug*** error 65: access violation at 0x4002100C : no write permission 修改为: Dialog DLL默认是DCM3.DLL Parameter默认是-pCM3 应改为 Dialog DLL默认是DARMSTM.DLL Parameter默认是-pSTM32F103VE...
力扣爆刷第158天之TOP100五连刷56-60(子集、最小栈、最长有效括号)
力扣爆刷第158天之TOP100五连刷56-60(子集、最小栈、最长有效括号) 文章目录 力扣爆刷第158天之TOP100五连刷56-60(子集、最小栈、最长有效括号)一、78. 子集二、105. 从前序与中序遍历序列构造二叉树三、43. 字符串相乘四、155. …...
高薪程序员必修课-Java中 Synchronized锁的升级过程
目录 前言 锁的升级过程 1. 偏向锁(Biased Locking) 原理: 示例: 2. 轻量级锁(Lightweight Locking) 原理: 示例: 3. 重量级锁(Heavyweight Locking)…...

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...

idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析,分为已启动和未启动两种场景: 一、ContentProvider已启动的情况 1. 核心流程 触发条件:当其他组件(如Activity、Service)通过ContentR…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题
20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起,为了跨网段推流,千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...