Ethereum frontend app template with the following features:
- Vue 3 as the foundation
- Tailwind CSS for styling
- Nightwind for easy dark mode support
- Ethers for interacting with Ethereum
- Vite for 10x-100x faster builds
- vue-dapp for the wallet connect
# Install packages
yarn install
# Run in development mode
yarn dev
# Compiles and minifies for production
yarn build
# Format files
yarn prettier
# Run linter
yarn lint
### Run your unit tests and end-to-end tests (not yet setup)
yarn test:unit
yarn test:e2e
Notes on customizing this app:
- Primary and secondary theme colors are defined in
tailwind.config.js
. Other colors are inlined as classes, e.g.text-gray-400
. - Dark mode is handled with Nightwind, which is a Tailwind CSS plugin that generates a dark theme by automatically inverting color classes. The resulting dark mode will not look as a good as a fully customized/hand-crafted dark mode, but this is much less work to implement, and Nightwind does offer some control over the output
- Vite does not use
process.env.MY_VARIABLE
for environment variables, but instead usesimport.meta.env.VITE_MY_VARIABLE
. Values in.env
that are prefixed withVITE_
are automatically included. Update the type definitions insrc/shims.d.ts
for any new environment variables - The Vue router is configured to use
history
mode and assumes the app is hosted at the domain root. Both of these defaults can be changed insrc/router/index.ts
- Vue Dapp vue-dapp is used for connecting wallets.
- The store modules live in
src/store
, and there are three setup by defaultwallet.ts
manages the user's wallet connectiondata.ts
atomically polls for data each block usingMulticall2
settings.ts
saves and manages user settings such as dark mode and wallet selection