当前位置： 首页 > news >正文

前端快速创建web3应用模版分享

news 文章来源：https://blog.csdn.net/qq_31915745/article/details/131038720 2025/1/18 15:55:07

一、起因

一直以来都有一个创建前端Dapp模版的愿望，一来是工作中也有这样的需要，避免每次都要抽离重复的代码。二来是这样的模版也能帮助其他前端快速了解到web3应用的脚手架以及框架结构。于是决定整理一个模版并开源，希望我的代码能帮助到大家，也希望和大家共同进步。

二、内置的功能

  • 多链切换
  • 自动更新钱包余额
  • 主题切换
  • 多语言切换

三、使用到的技术栈

目前市面上流行的开源dapp大多都使用了 wagmi + rainbotKit/web3Modal 的组合。这里我们也选取这两个库来作为底层钱包调用栈 及 钱包连接框架。

  • Next.js
  • wagmi
  • ethersV6
  • rainbowKit (master branch)
  • web3Modal (web3Modal branch)
  • react-redux
  • react-toastify
  • SWR
  • next-i18next
  • UI framework
    • Chakra UI
    • Styled-components
    • 理论上有一个UI框架就够了，我出于习惯搭配了Styled-components，如果觉得冗余，你也可以自行选择 uninstall这个库。

四、自定义配置项

  • Redux
    • 默认三个reducer: user / transactions / balances
    • User用于记录用户层操作
    • Transaction用于记录钱包交易记录
    • Balances用于记录钱包余额
  • Theme 主题配置
    • src/config/theme
    • 支持配置不同主题色
  • 网站配置
    • src/config/site
    • src/components/Layouts/Seo
  • I18n 多语言配置
    • src/config/language
    • public/locales
    • next-i18next.config.js
    • 默认支持英文 & 中文切换

五、使用

  • useTokenBalance, autoRefresh token balances 1s per time
import { useTokenBalances } from 'state/balances/hooks'const walletBalances = useTokenBalances()
  • UI theme mode
import { useColorModeValue } from '@chakra-ui/react'<Flex bg={useColorModeValue('lightModeColor', 'backModeColor') />

六、运行

yarn && yarn dev

完整代码已开源在Github，如果你有更好的想法或者建议，欢迎给我提 issue 共同讨论。如果我的代码帮助到你，欢迎 star && fork && follow me。每一个🌟都是我坚持创作的动力。 谢谢大家。

相关文章：

前端快速创建web3应用模版分享

一、起因 一直以来都有一个创建前端Dapp模版的愿望&#xff0c;一来是工作中也有这样的需要&#xff0c;避免每次都要抽离重复的代码。二来是这样的模版也能帮助其他前端快速了解到web3应用的脚手架以及框架结构。于是决定整理一个模版并开源&#xff0c;希望我的代码能帮助到大…...

编程日记 2023/6/9 10:47:15

越权漏洞讲解

越权漏洞是指系统或应用程序中存在的安全漏洞&#xff0c;允许攻击者以超越其授权范围的方式访问系统资源或执行特权操作。这种漏洞可能会导致严重的安全风险&#xff0c;因为攻击者可以利用它来获取敏感信息、修改系统设置或执行恶意操作。 下面是一些常见的越权漏洞类型和它…...

编程日记 2023/6/9 10:42:14

短视频矩阵源码系统打包.源码

Masayl是一款基于区块链技术的去中心化应用程序开发平台&#xff0c;可帮助开发者快速、便捷地创建去中心化应用程序。Masayl拥有丰富的API和SDK&#xff0c;为开发者们提供了支持。此外&#xff0c;Masayl还采用了高效的智能合约技术&#xff0c;确保应用程序的稳定、安全和高…...

编程日记 2023/6/9 10:37:13

云南LED、LCD显示屏系统建设，户外、室内广告大屏建设方案

LED大屏幕显示系统是LED高清晰数字显示技术、显示单元无缝拼接技术、多屏图像处理技术、信号切换技术、网络技术等科技手段的应用综合为一体&#xff0c;形成一个拥有高亮度、高清晰度、技术先进、功能强大、使用方便的大屏幕投影显示系统。通过大屏幕显示系统&#xff0c;可以…...

编程日记 2023/6/9 10:32:11

Shell脚本：expect脚本免交互

Shell脚本&#xff1a;expect脚本免交互 expect脚本免交互 一、免交互基本概述&#xff1a;1.交互与免交互的区别&#xff1a;2.格式&#xff1a;3.通过read实现免交互&#xff1a;4.通过cat实现查看和重定向&#xff1a;5.变量替换&#xff1a; 二、expect安装&#xff1a;1.…...

编程日记 2023/6/9 10:27:08

王道考研计算机网络第二章知识点汇总

2.1.1物理层基本概念 电气特性和功能特性易混淆&#xff0c;注意区分。电气特性一般指的是某个范围&#xff0c;功能特性一般指的是电平所代表的含义。 2.1.2数据通信基础知识 同步传输是指发送方和接收方节奏是统一的&#xff0c;数据之间是没有间隔的是一个一个的区块。在键…...

编程日记 2023/6/9 10:22:04

06.05

1.二进制求和 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 考虑一个最朴素的方法&#xff1a;先将 aaa 和 bbb 转化成十进制数&#xff0c;求和后再转化为二进制数。利用 Python 和 Java 自带的高精度运算&#xff0c;我们可以很简单地写出这…...

编程日记 2023/6/9 10:17:03

【虹科案例】虹科数字化仪在激光雷达大气研究中的应用

01 莱布尼茨研究所使用激光雷达进行大气研究 图 1&#xff1a;在 Khlungsborn 的 IAP 办公室测试各种激光器 大气研究使用脉冲激光束通过测量大气中 100 公里高度的多普勒频移和反向散射光来测量沿光束的温度和风速。返回的光信号非常微弱&#xff0c;会被阳光阻挡&#xff0c…...

编程日记 2023/6/9 10:12:02

Java抽象类介绍

1 问题 声明一个名为Employee的抽象类&#xff0c;其中包含name(姓名)和sex(性别)两个String类型的私有属性&#xff0c;并声明一个继承于Employee抽象类的子类Teacher。 2 方法 2.1 定义一个抽象类&#xff1a;Employee。 2.2 为Employee类设计一个抽象方法。 2.3实现抽象类Em…...

编程日记 2023/6/9 10:07:01

适配器模式的运用

文章目录 一、适配器模式的运用1.1 介绍1.2 适配器模式结构1.3 类适配器模式1.3.1 类适配器模式类图1.3.2 代码 1.4 对象适配器模式1.4.1 对象适配器模式类图1.4.2 代码 1.5 应用场景1.6 JDK源码解析1.6.1 字节流到字符流的转换类图1.6.2 部分源码分析1.6.3 总结 一、适配器模式…...

编程日记 2023/6/9 10:01:59

2023/6/8总结

MySQL必知必会 commit 和 rollback 的差异是commit会提交&#xff0c;而rollback不会&#xff0c;就好像是撤回。 使用保留点&#xff1a; 简单的rollback和commit语句就可以写入或者撤销整个事务处理&#xff0c;但是&#xff0c;只是对简单的事务处理才能这样做&#xff0…...

编程日记 2023/6/9 9:56:58

AIGC大模型之——以文生图介绍

一、什么是以文生图&#xff1f; 以文生图是AIGC ( AI Generated Content &#xff09;框架中的一个关键技术&#xff0c;通过文字描述&#xff0c;将文字转化为图像并展示出来。以文生图具有白动化程度高、精度高、可扩展性强、可定制化等优势&#xff0c;具有广泛的应用前景&…...

编程日记 2023/6/9 9:51:55

kali学习笔记（二）

一、关闭自动锁屏 关闭自动锁屏对于测试人员来说&#xff0c;可以按照自己的习惯来设置&#xff0c;不然kali会过十分钟就锁屏&#xff0c;有的时候会比较不方便。 1、使用root账号登录&#xff0c;在display设置选项中做如下设置。 2、把休眠选项关掉。 二、创建快照 关机创…...

编程日记 2023/6/9 9:46:54

avx指令集判断的坑

&#xff08;一&#xff09;背景 项目中依赖算法同学编写的算法模块&#xff0c;他们在使用avx&#xff0c;sse指令集来提高速度&#xff0c;结果在一些机器上崩溃&#xff0c;导致项目无法发版。 我给他们说&#xff0c;我们项目中使用了谷歌的 libyuv 库&#xff0c;也使用了…...

编程日记 2023/6/9 9:41:53

求内推,求明主!

个人资料: 性 别: 男 年 龄: 30岁 户 籍: 湖南衡阳 专 业: 计算机科学与技术 求职意向: Java软件开发工程师/JavaWeb开发工程师 现 居 地: 深圳市龙华新区 自考本科学历,6年工作经验(做过商城,APP,小程序,也研究多个开源案例,开源项目,并提交过PR) 自我评价: 做事积极主动,有责…...

编程日记 2023/6/9 9:36:51

第十三章：约束

第十三章&#xff1a;约束 13.1&#xff1a;约束(constraint)概述 为什么需要约束 ​ 数据完整性(Data Integrity)是指数据的精确性(Accuracy)和可靠性(Reliability)。它是防止数据库中存在不符合语义规定的数据和防止因错误信息的输入输出造成无效操作或错误信息而提出的。 为…...

编程日记 2023/6/9 9:31:50

M.2 SSD接口详解

一、M.2简介 M.2接口是一种新的主机接口方案&#xff0c;可以兼容多种通信协议&#xff0c;如sata、PCIe、USB、HSIC、UART、SMBus等。 M.2接口是为超极本&#xff08;Ultrabook&#xff09;量身定做的新一代接口标准&#xff0c;以取代原来的mSATA接口。无论是更小巧的规格尺…...

编程日记 2023/6/9 9:26:49

在本地Windows 11 系统的桌面版Docker上搭建PlantUML

文章目录 在本地Windows系统的桌面版Docker上搭建PlantUML简介步骤步骤 1&#xff1a;安装Docker Desktop步骤 2&#xff1a;启动Docker Desktop步骤 3&#xff1a;拉取PlantUML镜像步骤 4&#xff1a;运行PlantUML容器步骤 5&#xff1a;访问PlantUML Web界面 结论参考资料 结…...

编程日记 2023/6/9 9:21:48

mysql的sql_mode模式

1、sql_mode是MySQL中的一个系统变量&#xff0c;用于设置服务器在执行SQL语句时的行为模式。它可以控制服务器的严格性和特性&#xff0c;包括数据校验、日期处理、空值处理等。 下面是一些常见的sql_mode模式及其作用&#xff1a; STRICT_ALL_TABLES&#xff1a;为所有存储…...

编程日记 2023/6/9 9:16:46

chatgpt赋能python：Python编程必备之OpenCV库下载与安装

Python编程必备之OpenCV库下载与安装 作为目前最热门的计算机视觉库之一&#xff0c;OpenCV在人工智能领域中发挥着巨大的作用。而Python作为一门强大的编程语言&#xff0c;在OpenCV的使用上也有其独特的优势。本文将介绍Python如何下载和安装OpenCV库&#xff0c;以及如何引…...

编程日记 2023/6/9 9:11:44

sparkSQL的使用

sparksql只能处理结构化数据 基于rdd构建dataframe对象 from pyspark.sql import SparkSession from pyspark.sql.types import StructType, StringType, IntegerTypeif __name__ __main__:spark SparkSession.builder.appName(test).master(local[*]).getOrCreate()sc spa…...

编程日记 2023/6/9 9:06:43

gitignore的语法

.gitignore 文件是用来告诉 Git 哪些文件或目录不应该被跟踪的。下面是一些常见的 .gitignore 文件语法规则&#xff1a; 空行或以#开头的行将被 Git 忽略&#xff0c;可以用作注释。 星号 * 代表零个或多个任意字符。例如, *.txt 会匹配所有的 .txt 文件。 问号 ? 代表一个…...

编程日记 2023/6/9 9:01:41

长袋除尘器

长袋低压脉冲除尘器是具有先进水平的高效袋式除尘设备,是一种处理风量大、清灰效果好、除尘效率高、运行可靠、维护方便、占地面积小的大型除尘设备。 工作机理 1、过滤原理: 长袋低压脉冲除尘器含尘气体由进风口进入&#xff0c;经过灰斗时&#xff0c;气体中部分大颗粒粉尘…...

编程日记 2023/6/9 8:56:39

HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面

仓库链接:https://github.com/MengFanjun020906/HTML_SX 前言 今天要继续完成我们的音乐软件了&#xff0c;昨天写完了封面&#xff0c;今天该完成开屏广告和登陆界面了。 登陆界面代码 <!DOCTYPE html> <html lang"en"> <head><meta charse…...

编程日记 2023/6/9 8:51:38

css蓝桥杯--电影院排座位

目录 一、介绍二、准备三、⽬标四、代码五、知识点六、完成 一、介绍 随着⼈们⽣活⽔平的⽇益提升&#xff0c;电影院成为了越来越多的⼈休闲娱乐&#xff0c;周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近⽇&#xff0c;⼜有⼀个电影院正在做着开张前…...

编程日记 2023/6/9 8:46:37

c++学习——多态

多态 **多态的语法****多态的底层原理图****多态案1——计算机类****纯虚函数和抽象类****多态案例2——饮品****虚析构和纯虚析构****多态案例3—— 电脑组装** 多态是C面向对象三大特性之一 多态分为两类 静态多态:函数重载和运算符重载属于静态多态&#xff0c;复用函数名 动…...

编程日记 2023/6/9 8:41:36

Java SPI机制及原理详解

前言 Java SPI (Service Provider Interface) 是一种重要的组件化方式&#xff0c;它可以让程序在运行时动态地装载一些实现模块&#xff0c;从而增强程序的可扩展性和灵活性。本文将详细介绍 Java SPI 的基本概念、原理以及使用方法。 1. 什么是Java SPI Java SPI 是一种标准…...

编程日记 2023/6/9 8:36:35

不压缩打包layui

手动打包 下载layui源码&#xff08;当前版本2.6.4&#xff09;&#xff0c;并解压缩 下载地址&#xff1a;layui gitee 安装nodejs&#xff08;v10.24.1&#xff09; 下载链接 windows-x64 安装cnpm npm install -g cnpm -registryhttps://registry.npm.taobao.org全局安…...

编程日记 2023/6/9 8:31:34

过去、现在及未来

人生最邪恶的地方在于&#xff0c;只能年轻一次 回顾下我毫无规划的&#xff0c;且已经消耗掉的青春 一&#xff1a;过去 19岁&#xff0c;进入大学&#xff0c;兼职、玩儿、暧昧 20-21岁&#xff0c;初创软件公司打杂、恋爱、暧昧 22、23、24岁&#xff0c;上海&#xff…...

编程日记 2023/6/9 8:26:33

leetcode701. 二叉搜索树中的插入操作(java)

二叉搜索树中的插入操作 leetcode701. 二叉搜索树中的插入操作题目描述 递归解题解题思路代码演示 二叉树专题 leetcode701. 二叉搜索树中的插入操作 原题链接&#xff1a; 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problem…...

编程日记 2023/6/9 8:21:32

宁津哪个网络公司做网站比较好/百度搜索推广是什么

一.Linux 磁盘管理 Linux磁盘管理好坏直接关系到整个系统的性能问题。 Linux磁盘管理常用三个命令为df、du和fdisk。 df&#xff1a;列出文件系统的整体磁盘使用量du&#xff1a;检查磁盘空间使用量fdisk&#xff1a;用于磁盘分区df df命令参数功能&#xff1a;检查文件系统的磁…...

编程日记 2025/1/18 14:50:53

无代码做网站/windows优化大师是哪个公司的

原标题&#xff1a;Navicat for SQLite 表外键的秘密武器for SQLite 外键是在关联式表中符合另一个表主键的栏位。在外键选项卡&#xff0c;只需点击外键栏位即可编辑&#xff0c;使用外键工具栏&#xff0c;可创建新的、编辑或删除选定的外键栏位。Navicat for SQLite使用“名…...

编程日记 2025/1/18 12:55:46

建设工程资讯哪个网站好/百度首页网址

IDC报告显示&#xff0c;交换机市场近年来一直保持着较高的增长势头&#xff0c;到2009年市场规模有望达到15.1亿美元。交换机在企业网中占有重要的地位&#xff0c;通常是整个网络的核心所在&#xff0c;这一地位使它成为******和病毒肆虐的重点对象&#xff0c;为保障自身网络…...

编程日记 2025/1/18 12:26:30

英国帮人做设计作业网站/北京疫情最新消息

varchar(5)和varchar(100)占用的空间是一样的&#xff0c;那么我们都会设置足够大以备不足吗&#xff0c; 错&#xff0c;如果设置的比较大&#xff0c;会使用更多的内存 最好的策略是只分配真正需要的空间。...

编程日记 2025/1/18 10:10:47

叫什么公子的网站做ppt的/营销神器

有人说&#xff1a;一个人从1岁活到80岁很平凡&#xff0c;但如果从80岁倒着活&#xff0c;那么一半以上的人都可能不凡。 生活没有捷径&#xff0c;我们踩过的坑都成为了生活的经验&#xff0c;这些经验越早知道&#xff0c;你要走的弯路就会越少。 1、热带雨林气候 分布规律…...

编程日记 2025/1/18 9:05:36

wordpress 登录 不同/百度搜索排名与点击有关吗

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置&#xff0c;无论如何滚动滚动条&#xff0c;位置不变&#xff0c;就例如经常看到的弹出广告。方法一般是使用js控制&#xff0c;或者使用css。下面本篇文章给大家介绍一下CSS让元素固定不变的方法。在css中&#x…...

编程日记 2025/1/18 7:08:49