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

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

一、起因

一直以来都有一个创建前端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;希望我的代码能帮助到大…...

越权漏洞讲解

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

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

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

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

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

Shell脚本:expect脚本免交互

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

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

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

06.05

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

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

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

Java抽象类介绍

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

适配器模式的运用

文章目录 一、适配器模式的运用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/8总结

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

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

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

kali学习笔记(二)

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

avx指令集判断的坑

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

求内推,求明主!

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

第十三章:约束

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

M.2 SSD接口详解

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

在本地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界面 结论参考资料 结…...

mysql的sql_mode模式

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

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

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

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...