https://github.com/evmts/evmts-vite-wagmi-example
A forkable boilerplate for starting an Evmts project with vite react and wagmi
https://github.com/evmts/evmts-vite-wagmi-example
Last synced: 9 months ago
JSON representation
A forkable boilerplate for starting an Evmts project with vite react and wagmi
- Host: GitHub
- URL: https://github.com/evmts/evmts-vite-wagmi-example
- Owner: evmts
- License: mit
- Created: 2023-07-20T05:12:49.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-24T21:58:54.000Z (over 2 years ago)
- Last Synced: 2025-06-02T21:54:21.688Z (about 1 year ago)
- Language: TypeScript
- Size: 545 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Evmts Vite Wagmi Boilerplate
To use this plugin with Visual Studio Code, you should set your workspace's version of TypeScript, which will load plugins from your tsconfig.json file.
For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
# 🤝 Getting Started
1. Install PNPM
PNPM is similar to npm and the usage of it's cli is nearly identical to NPM but much faster at installing node_modules
```
npm install pnpm --global
```
2. Fill in environment variables with an alchemy key. To gets started quick just use the public alchemy key `_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC` but you may face rate limits
```
cp example.env .env
```
3. Start app
Run `npm run dev` in your terminal. If you are not using node18 you may have to pass in `--experimental-fetch` to node. Use [NVM](https://github.com/nvm-sh/nvm) with `nvm use` command to use this workspaces node version
## ✨ What is this?
This is a [Evmts](https://evmts.dev) + [wagmi](https://wagmi.sh) ! [vite](https://vitejs.dev/) boilerplate to get started using Evmts quickly
Evmts allows you to import Solidity directly into your NEXT.js typescript files with great editor support and minimal boilerplate. Features include
- Etherscan links on hover
- Human readable ABIs
- Seemless integration with wagmi for reads, writes, and events
- No ABIs referenced again just import the contract directly
- No Addresses needed to be copy pasted just configure them in the [tsconfig](./tsconfig.json)
## 🌟 Evmts features
- Direct contract imports with etherscan links on hover
- [Read example](./src/wagmi/WagmiReads.tsx)
- [Write example](./src/wagmi/WagmiWrites.tsx)
- [Events example](./src/wagmi/WagmiEvents.tsx)
# 📜 Docs
Evmts docs exist at [evmts.dev](https://evmts.dev). As Evmts is currently still in Alpha and following [documentation driven development](https://gist.github.com/zsup/9434452) much of the documented behavior may not be implemented yet.
# 🔧 Configuration
This boilerplate comes preconfigured but we will document what needed to be configured in case you are following along to add to your own NEXT.js app
Evmts requires two pieces of configuration to get started.
1. TypeScript configuration
`@evmts/ts-plugin` is configured in the [tsconfig.json](./tsconfig.json). Evmts uses this configuration to configure the addresses, solc version etc. The TypeScript plugin provides TypeScript editor support for your Solidity imports.
2. Bundler configuration
The bundler is how the files are processed at runtime. This boilerplate uses esbuild. Simple esbuild configuration is done in the [build.ts](./build.ts) file. The plugin here will read the configuration in the [tsconfig.json](./tsconfig.json)
## 🪄 Usage examples
Usage examples are in [src/wagmi](./src/wagmi) folder
## 💻 VSCode setup
- **Recommended usage**
To use this plugin with Visual Studio Code, you should set your workspace's version of TypeScript, which will load plugins from your tsconfig.json file.
For instructions, see: [Using the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
- **Alternative usage**
You can simple add this plugin to "typescript.tsserver.pluginPaths" in settings. You cannot provide plugin options such as contract addresseswith this approach.
{
"typescript.tsserver.pluginPaths": ["@evmts/ts-plugin"]
}
- **Other editors**
Other editors are not tested/documented yet. I personally use neovim successfully and it should work in most editors. They all work via the ts-plugin settings similar to vscode.
## 🩹 Rough edges
#### Typechecking
Typechecking is disabled in the next.config.ts. Your editor will typecheck and provide diagnostics correctly but the NEXT.js build is not configured yet.
Full TypeChecking will be available soon in one of the next few releases of Evmts alpha after it migrates the langauge server to [volar](https://volarjs.github.io/)
#### Importing from lib or node_modules
Currently there is a bug when importing from node_modules (or lib if using foundry remappings) directly from TS files.
## ⭐ Github
If you like Evmts give it a ⭐ at the [Evmts monorepo](https://github.com/evmts/evmts-monorepo)
## 🔗 See also
- Check out [Next example](https://github.com/orgs/evmts/repositories) for an example of Evmts wagmi and Next
- Check out [Vite example](https://github.com/evmts/evmts-monorepo/tree/main/examples/vite) for an example of Evmts wagmi and Vite