smlxl / evm.codes Goto Github PK

A dropdown to choose the network and fork

• NextJS
• TypeScript
• TailwindCSS
• Eslint/Prettier/Husky/Yarn

Initial app layout:

• Sticky nav bar
• Hero
• Footer

• Container
• Typography
• Button
• NavLink
• Radio button
• Icon

Would be great to let users resize the panes as they wish and remember their preferences.

When scrolling down, the table headers should stick under the nav bar for easier reference.

Currently newest element always has index 0 in our examples

Gast usage pane:

• Total cost

The bundled lib/solcWorker.js worker code should be converted to TypeScript and removed from Eslint ignores.

Integrate demo code compilation to the app with the related worker/compiler.

A simple code editor with the support for plain -text and Solidity:

• Code highlighting
• Line numbers
• Horizontal/Vertical scrollbars
• Format on paste (initially with 4 spaces)

Page (or side panel) about EVM and its operation, with some links from the main page

• Code type (bytecode/solidity)
• Network of #20
• Light/Dark theme
• Table filter of #17
• Source code?

• Map of supported shortcuts
• Window/Mac/Linux key binding

Shortcuts:

• Next step
• Continue
• Run
• Find opcode

• Repo for the public (separate one?)
• Labels
• New issue template
• Repo configuration
• Readme
• Contributing
• License
• Contributors
• Libraries used and acknowledgment
• References to Comity

• List of operations to be executed
• Stack
• Memory
• Storage slots
• Contract address

• Fix step by step
• Fix continue button
• Add stack information
• Add memory information
• Add storage information
• Add return value information

• Running the app
• Updating icons

The Opcode table layout seems buggy on my browser with a massive gap between the input and output columns and issues with horizontal scroll

I assume it has to do with the shortcuts.
Version: https://evm-codes-88qk7nyv2-comity.vercel.app/playground

The table with EVM opcodes

• Page title
• Meta
• Opengraph
• Favicon

• Run a sample contract
• Some guidance on how to step/execute/breakpoint

Example opcodes to reproduce:
601060015700

• Tagline
• Links
• Description

When there is a compiler/code error, show it nicely and let users dismiss a flash message.

• Breakpoint
• Step
• Continue

• Tab size
• Tabs/spaces
• LOC
• Theme

• Responsiveness
• Menu
• Typography

• Highlight the current fork
• Remove invalid forks (block 0)

• Configure Tailwind with brand colors
• Polish font weights, line heights
• Add hover effects
• Basic animations
• Colors for the forks
• Loading indicators
• Tooltips
• Disabled states

• Filter by name/opcode

Connect to the real chain to be able to get data from it and do contracts calls, but run those locally.

For each opcode with a runtime component to the gas cost, add the editable formula so that the full cost can be obtained, and the different conditions changed.

For example:
BALANCE [] warm [] cold: x cost (exclusive checkbox)
EXP 10 + 50 * [byte_len_exponent]: x cost (input field)

The constants can be obtained from ethereum-js, to stay up to date with version changes.

• Toggle
• Follow system preferences
• Adjust the app theme
• Adjust the editor theme

Test on Safari/Chrome/Firefox

For example:

• Remove the group column, color code it instead with a legend somewhere else
• Color code per version of ethereum

• Move notes & fork into doc
• Per opcode Markdown template doc
• Expandable rows
• Cross link from the About page