网站竞争对手如何做调研网上推广app怎么做
一、起因
一直以来都有一个创建前端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。每一个🌟都是我坚持创作的动力。 谢谢大家。