🔴 Replay

A tool to replay failed transactions in a convenient and easy way.

Building this tool was inspired by this idea from the Optimism ecosystem contributions list : ethereum-optimism/ecosystem-contributions#100.

For most users it's to difficult to use a SDK or CLI to replay failed transactions and understand all necessary steps. So replay abstracts away the the difficult parts providing an easy-to-use UI to do just that. Also developers are provided with this convenience when testing and developing on any of the networks.

Submission for ETHGlobal Superhack 2023 by JD.

Sponsors

• Optimism
• Base
• Zora
• Covalent

Getting started

• Follow the instructions below in the original README of the optimism starter kit.
• cp .env.example .env
• For this project you must set at least VITE_ALCHEMY_API_KEY, VITE_WALLETCONNECT_PROJECT_ID and VITE_COVALENT_API_KEY, VITE_TENDERLY_ACCESS_KEY + VITE_TENDERLY_USER
• pnpm i
• pnpm dev

Tech

Mainly, the following tech stack was used to build the app:

• Optimism starter template - specficially made to get an easy start when participating in hackathons. (Left the original README untouched below. 👇)
• Covalent for anything around fetching tx's data.
• Tenderly for simulating tx's.
• UI w/ ChakraUI
• Viem
• Wagmi
• Typescript

Issues

Some of the issues I had with using tools of the sponsors are marked inside the code. Additional infos here:

• Covalent: The SDK version I used didn't let me fetch transactions for all needed chains e.g. Optimism Goerli. So I created a simple class to fetch from the API directly - which worked perfectly! Check the code in covalent-api.ts for more details.
• Optimsim: The estimate-fees SDK couldn't be used due to some versioning issues. So I first copied the essential parts to estimate-fees.ts and altered it to my needs. Later I noticed that this still wasn't what I needed because the SDK is tailored to contract function calls and I was using transaction objects. So I created my own version of estimateFees in estimate-fees-v2.ts.

How to improve this tool?

Obviously, during a hackathon shortcuts are taken. So the tool is probably not production ready and those things would have to be cleaned up. Some of the features that could be added are:

• Add all the chains (at least for all evm-compatible chains it should work)
• Guides and tips for users (to navigate the flows and understand the data)
• Improved error handling and edge cases

---

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.

1. Run the following command:

   curl -L https://foundry.paradigm.xyz | bash

2. Source your environment as requested by Foundry.

3. Run foundryup.

Set up environment

Get an Etherscan key

1. Register for Etherscan on Optimism. This account is different from your normal Etherscan account.

2. 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.

1. Copy .env.example to .env.

   cp .env.example .env

2. 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

1. Clone/fork the optimism-starter repo

   git clone https://github.com/ethereum-optimism/optimism-starter.git

2. Install the necessary node packages:

   cd optimism-starter
   npm install

3. 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.

4. 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 a public version of your app.

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.