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

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

news 2026/2/8 3:18:58

一、起因

一直以来都有一个创建前端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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/1/31 13:59:37

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41