This is a wagmi + Foundry + Vite project bootstrapped with create-wagmi
Run npm run dev in your terminal, and then open localhost:5173 in your browser.
Once the webpage has loaded, changes made to files inside the src/ directory (e.g. src/App.tsx) will automatically update the webpage.
This project comes with @wagmi/cli built-in, which means you can generate wagmi-compatible (type safe) ABIs & React Hooks straight from the command line.
To generate ABIs & Hooks, follow the steps below.
First, you will need to install Foundry in order to build your smart contracts. This can be done by running the following command:
curl -L https://foundry.paradigm.xyz | bash
To generate ABIs & React Hooks from your Foundry project (in ./contracts), you can run:
npm run wagmi
This will use the wagmi config (wagmi.config.ts) to generate a src/generated.ts file which will include your ABIs & Hooks that you can start using in your project.
Here is an example of where Hooks from the generated file is being used.
To deploy your contracts to a network, you can use Foundry's Forge – a command-line tool to tests, build, and deploy your smart contracts.
You can read a more in-depth guide on using Forge to deploy a smart contract here, but we have included a simple script in the package.json to get you started.
Below are the steps to deploying a smart contract to Ethereum Mainnet using Forge:
Make sure you have Foundry installed & set up.
You will first need to set up your .env to tell Forge where to deploy your contract.
Go ahead and open up your .env file, and enter the following env vars:
ETHERSCAN_API_KEY: Your Etherscan API Key.FORGE_RPC_URL: The RPC URL of the network to deploy to.FORGE_PRIVATE_KEY: The private key of the wallet you want to deploy from.
You can now deploy your contract!
npm run deploy
Let's combine the above sections and use Anvil alongside our development environment to use our contracts (./contracts) against an Ethereum Mainnet fork.
Make sure you have Foundry installed & set up.
Run the command:
npm run dev:foundry
This will:
- Start a Next.js dev server,
- Start the
@wagmi/cliin watch mode to listen to changes in our contracts, and instantly generate code, - Start an Anvil instance (Mainnet Fork) on an RPC URL.
Now that we have an Anvil instance up and running, let's deploy our smart contract to the Anvil network:
pnpm run deploy:anvil
Now that your contract has been deployed to Anvil, you can start playing around with your contract straight from the web interface!
Head to localhost:5173 in your browser, connect your wallet, and try increment the counter on the Foundry chain.
Tip: If you import an Anvil private key into your browser wallet (MetaMask, Coinbase Wallet, etc) – you will have 10,000 ETH to play with 😎. The private key is found in the terminal under "Private Keys" when you start up an Anvil instance with
npm run dev:foundry.
To learn more about Vite, Foundry or wagmi, check out the following resources:
- Foundry Documentation – learn more about the Foundry stack (Anvil, Forge, etc).
- wagmi Documentation – learn about wagmi Hooks and API.
- wagmi Examples – a suite of simple examples using wagmi.
- @wagmi/cli Documentation – learn more about the wagmi CLI.
- Vite Documentation – learn about Vite features and API.
Cannot find module error: related to pnpm/npm, try uninstalling/reinstalling
Config the .env (FORGE_RPC_URL=http://127.0.0.1:8545), (FORGE_PRIVATE_KEY= private key taken from the privates keys when running pnpm anvil)
4 terminal tabs for development: pnpm run dev, pnpm anvil, pnpm deploy (take the address of the deployed contract, copy/paste it in the wagmi.config.ts and rerun pnpm dev), wagmi generate (to refresh the 'generated.ts')