This is a Optimism + wagmi + Foundry + Rainbowkit + Vite project originally bootstrapped with create-wagmi
built with ❤️ for hackers.
Who is this for?
This starter is a great choice for any of the following groups:
- Hackers hacking on Optimism
- Hackers hacking on the Attestation Station
- Hackers interested in using the most modern and robust web3 full stack development stack
Getting Started
Install Node
See here. Note that you need Node at a later version than 14.18.0, or 16 and above. These instructions were verified with Node 18.
Install Foundry
You will need to install Foundry to build your smart contracts.
-
Run the following command:
curl -L https://foundry.paradigm.xyz | bash
-
Source your environment as requested by Foundry.
-
Run
foundryup
.
Set up environment
Get an Etherscan key
-
Register for Etherscan on Optimism. This account is different from your normal Etherscan account.
-
Go to the API keys page and click Add to create a new API key.
Specify .env
You will first need to set up your .env
to tell Forge where to deploy your contract.
-
Copy
.env.example
to.env
.cp .env.example .env
-
Edit your
.env
to specify the environment variables.-
ETHERSCAN_API_KEY
: Your Etherscan API Key. -
FORGE_RPC_URL
: The RPC URL of the network to which you deploy. If you use Alchemy, your URL will look like this:https://opt-goerli.g.alchemy.com/v2/<Alchemy API Key>
-
FORGE_PRIVATE_KEY
: The private key of the wallet you want to deploy from. -
VITE_WALLETCONNECT_PROJECT_ID
: WalletConnect v2 requires a project ID. You can obtain it from your WC dashboard: https://docs.walletconnect.com/2.0/web/web3wallet/installation#obtain-project-id
-
Start the application
-
Clone/fork the optimism-starter repo
git clone https://github.com/ethereum-optimism/optimism-starter.git
-
Install the necessary node packages:
cd optimism-starter npm install
-
Start the frontend with
npm run dev
npm run dev
If you get errors during this step, you might need to update your Foundry to the latest version.
-
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.
See below for general usage instructions or FAQ for answers to general questions such as:
Generate ABIs & React Hooks
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.
Generate code
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 Hooks from the generated file being used.
Deploying Contracts
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:
Deploy contract
You can now deploy your contract!
npm run deploy
Developing with Anvil (Optimism Mainnet Fork)
Let's combine the above sections and use Anvil alongside our development environment to use our contracts (./contracts
) against an Optimism fork.
Start dev server
Run the command:
npm run dev:foundry
This will:
- Start a vite dev server,
- Start the
@wagmi/cli
in watch mode to listen to changes in our contracts, and instantly generate code, - Start an Anvil instance (Goerli Optimism Fork) on an RPC URL.
Deploy our contract to Anvil
Now that we have an Anvil instance up and running, let's deploy our smart contract to the Anvil network:
npm run deploy:anvil
Start developing
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 a counter on the Foundry chain. Use the generated code in src/generated.ts
to do it and follow the Attestooooor component as an example
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
.
Alternatives
Looking to use burner wallets? Prefer hardhat? Prefer NEXT.js? Check out these amazing alternatives:
- create wagmi cli - A flexible cli with many templates (this starterkit was started from vite-react-cli-foundry)
- scaffold-eth - The new 2nd version of a popular NEXT.js based starter including hardhat, burner wallets, great documentation, and an active telegram for support
- Awesome wagmi - Has other alternative examples
- Create Eth App - Uses a wagmi alternative called useDapp that is used at OP Labs
Learn more
To learn more about Optimism, Vite, Foundry, Rainbow kit 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.