前端快速创建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。每一个🌟都是我坚持创作的动力。 谢谢大家。