HyperEVM Transaction Simulator Helper

Expert assistant for working with a React-based HyperEVM transaction simulator application that enables single transaction simulation, transaction bundles, and state override scenarios.

What This Skill Does

Provides specialized guidance for developing, debugging, and extending a HyperEVM transaction simulator built with React 19, TypeScript, Viem, Wagmi, and TailwindCSS. Understands the architecture, blockchain integration patterns, and HyperEVM-specific configurations.

Instructions for the AI Agent

1. Understand the Project Context

When working with this codebase:

2. Navigate the Architecture

Key file locations and responsibilities:

```

src/

├── components/

│ ├── TransactionSimulator.tsx # Single transaction simulation (uses simulateContract)

│ ├── BundleSimulator.tsx # Multiple transaction bundles (uses simulateCalls)

│ └── StateOverrideSimulator.tsx # Advanced state manipulation (UI only, needs backend)

├── config/

│ └── wagmi.ts # HyperEVM chain configuration (chain ID 998, RPC URL)

└── App.tsx # Root component with tab navigation + React Query

```

3. Development Commands

Use these commands for common tasks:

4. Blockchain Integration Patterns

When working with blockchain operations:

5. Configuration and Environment

6. State Management

7. Current Limitations to Be Aware Of

8. Documentation Resources

Comprehensive Japanese documentation exists in `/docs/`:

Reference these files for detailed feature requirements and implementation patterns.

9. Code Quality Guidelines

When writing or modifying code:

10. Common Tasks

**Adding a new simulation feature:**

1. Read existing simulator components to understand patterns

2. Use appropriate Viem/Wagmi functions (simulateContract for single calls, simulateCalls for bundles)

3. Parse ABIs with `parseAbi()` for contract interactions

4. Add React Query hooks for async operations

5. Handle loading, error, and success states in UI

**Modifying HyperEVM configuration:**

1. Edit `src/config/wagmi.ts`

2. Update chain ID, RPC URL, or chain parameters as needed

3. Test connection with `npm run dev`

**Debugging blockchain interactions:**

1. Check browser console for Viem/Wagmi errors

2. Verify ABI parsing is correct

3. Confirm address formats are valid `Address` types

4. Check RPC endpoint connectivity

5. Review transaction parameters (gas, block number, sender)

**Styling updates:**

1. Use TailwindCSS utility classes

2. Follow existing component styling patterns

3. Ensure responsive design with Tailwind breakpoints

4. Test with `npm run dev` for hot reload

Example Usage

**User:** "Add support for simulating ERC20 token transfers in the TransactionSimulator"

**Agent should:**

1. Read `src/components/TransactionSimulator.tsx` to understand current implementation

2. Add ERC20 ABI for transfer function using `parseAbi()`

3. Implement form fields for token address, recipient, and amount

4. Use Wagmi's `simulateContract` hook with ERC20 transfer parameters

5. Add error handling and display results in existing UI pattern

6. Test with `npm run dev`

**User:** "The build is failing with TailwindCSS errors"

**Agent should:**

1. Check `postcss.config.js` for `@tailwindcss/postcss` plugin

2. Verify `tailwind.config.js` content paths include all component files

3. Review `package.json` for correct TailwindCSS version (4.1)

4. Check for syntax errors in TailwindCSS classes

5. Run `npm run build` to reproduce and fix

**User:** "How do I connect to a different HyperEVM network?"

**Agent should:**

1. Direct user to `src/config/wagmi.ts`

2. Explain how to update the RPC URL and chain parameters

3. Verify chain ID remains 998 for HyperEVM or update if needed

4. Test connection with `npm run dev`

Constraints