河北建设集团有限公司 信息化网站,广州番禺邮政编码,国际营销信息系统,网站二级导航一、起因 一直以来都有一个创建前端Dapp模版的愿望#xff0c;一来是工作中也有这样的需要#xff0c;避免每次都要抽离重复的代码。二来是这样的模版也能帮助其他前端快速了解到web3应用的脚手架以及框架结构。于是决定整理一个模版并开源#xff0c;希望我的代码能帮助到大…一、起因 一直以来都有一个创建前端Dapp模版的愿望一来是工作中也有这样的需要避免每次都要抽离重复的代码。二来是这样的模版也能帮助其他前端快速了解到web3应用的脚手架以及框架结构。于是决定整理一个模版并开源希望我的代码能帮助到大家也希望和大家共同进步。 二、内置的功能
多链切换自动更新钱包余额主题切换多语言切换
三、使用到的技术栈
目前市面上流行的开源dapp大多都使用了 wagmi rainbotKit/web3Modal 的组合。这里我们也选取这两个库来作为底层钱包调用栈 及 钱包连接框架。
Next.jswagmiethersV6rainbowKit (master branch)web3Modal (web3Modal branch)react-reduxreact-toastifySWRnext-i18nextUI framework Chakra UIStyled-components理论上有一个UI框架就够了我出于习惯搭配了Styled-components如果觉得冗余你也可以自行选择 uninstall这个库。
四、自定义配置项
Redux 默认三个reducer: user / transactions / balancesUser用于记录用户层操作Transaction用于记录钱包交易记录Balances用于记录钱包余额 Theme 主题配置 src/config/theme支持配置不同主题色 网站配置 src/config/sitesrc/components/Layouts/Seo I18n 多语言配置 src/config/languagepublic/localesnext-i18next.config.js默认支持英文 中文切换
五、使用
useTokenBalance, autoRefresh token balances 1s per time
import { useTokenBalances } from state/balances/hooksconst walletBalances useTokenBalances()UI theme mode
import { useColorModeValue } from chakra-ui/reactFlex bg{useColorModeValue(lightModeColor, backModeColor) /六、运行
yarn yarn dev完整代码已开源在Github如果你有更好的想法或者建议欢迎给我提 issue 共同讨论。如果我的代码帮助到你欢迎 star fork follow me。每一个都是我坚持创作的动力。 谢谢大家。
