小试牛刀-区块链代币锁仓(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)…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...

2.3 物理层设备
在这个视频中,我们要学习工作在物理层的两种网络设备,分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间,需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质,假设A节点要给…...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...

算法—栈系列
一:删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

Java中HashMap底层原理深度解析:从数据结构到红黑树优化
一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一,是基于哈希表的Map接口非同步实现。它允许使用null键和null值(但只能有一个null键),并且不保证映射顺序的恒久不变。与Hashtable相比,Hash…...