Optimism ETH Denver hackathon starterkit.

This is a Optimism + wagmi + Foundry + + Rainbowkit + Vite project originally bootstrapped with create-wagmi built with ❤️ for Eth Denver hackers

• Hackers hacking on optimism
• Hackers hacking on the attestation station
• Hackers interested in using the most modern and robust web3 full stack development stack

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.

See below for general usage instructions or FAQ for answers to general questions such as

• where to get goerli eth
• how to deploy to vercel/fleek

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.

See the above instructions.

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.

note Optimism goerli requires signing up for an etherscan key on optimism goerli etherscan rather than mainnet etherscan

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 Optimism fork.

Make sure you have Foundry installed & set up.

See the above instructions.

Run the command:

npm run dev:foundry

This will:

• Start a Next.js dev server,
• Start the @wagmi/cli in 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 interact with the attestation station this library uses the minimal @eth-optimism/atst package currently in beta as well as it's accompioning cli. Feel free to open up issues for ideas of improvements for atst. We are also happy to give you ideas of how you could build an even better version of ATST or make it better for your hack!

TODO document what you can use for backends for atst

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

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.