smlxl / evm.codes Goto Github PK

View Code? Open in Web Editor NEW

708.0 16.0 131.0 3.09 MB

Source for evm.codes an Ethereum Virtual Machine Opcodes Interactive Reference

Home Page: https://evm.codes/

License: MIT License

JavaScript 7.34% TypeScript 90.50% CSS 2.14% HTML 0.02%

ethereum blockchain evm evm-chains

evm.codes's People

Contributors

Stargazers

Watchers

Forkers

c-vision kethcode suitchi syther-labs pinkdiamond1 21w42 0xys amanusk 0xsmartcrypto saw-mon-and-natalie tzann mora-eth hbs gpsanant lipuu nvnx7 w2k-star-forks gnattishness ssghost stermi maddiaa0 jonahcui reichert621 xiaodu1993 ashuaidehao souravinsights teamsplashdevs olivierbbb ptrcarta minaminao jesusds603 mriise 0xdmitry manda2020panda shashankhacker730 ernestognw elawbek dukedaily evalir ethosdev big-aaron michyaraque lynskylate kkrt-labs crypt0nx scott-silver beultra pravin-d jean13 vicnaum omahs icree8 devtooligan shobeirimajid dragan2234 giovannidisiena chriseth thehardcoder05 behrouzt khiem20tc web3-city-0x07 bestxeosx-gm hillhero789 skylar pavlovdog jinukalos mds1 topocount wighawag y1cunhui javadyakuza ohhkaneda zkevmdev woodpile37 0xscratch markus0x1 coniy paulrberg rgarc dmgsoftware xinbenlv xiaolou86 onlyhyde chinw apemon tetration-lab pypy233 dutterbutter lmittmann waxmax1313 developerfred merlox abhigulati hananbeer cryptoloveralex trocher chyiyaqing hataba codewhizperer amirh-a

evm.codes's Issues

Gas cost pane

Gast usage pane:

Total cost

Code editor preferences and status bar

Tab size
Tabs/spaces
LOC
Theme

Dark / Light mode

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

Fuzzy search the opcodes table

Filter by name/opcode

Bytecode Operations pane

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

Stack data should have last element on top, so that the newest element is rendered first

Currently newest element always has index 0 in our examples

Long term idea: connect to the real chain

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

Static site hosting and continuous delivery

Detect Solc compiler from the code instead of failing silently

Highlight current fork

Highlight the current fork
Remove invalid forks (block 0)

Keyboard shortcuts

Map of supported shortcuts
Window/Mac/Linux key binding

Shortcuts:

Next step
Continue
Run
Find opcode

Finish implementing running your own opcodes

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

Refactor reference table with expandable info

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

App layout

Initial app layout:

Sticky nav bar
Hero
Footer

Test on different browsers

Test on Safari/Chrome/Firefox

Opcode table layout/render issues

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

Convert solc worker to TypeScript

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

Network and fork selector

A dropdown to choose the network and fork

Bug: gas cost cannot be copied with ctrl-c

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

Users onboarding with sample contracts

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

Bug: when executing, do not highlight a line after the end of the execution

Idea: add calldata field to add parameter input when executing opcodes

Open source guidance

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

Add support for solidity code for the execution

Add diff capabilities between opcodes and gas cost hardfork

Error handling and dismissable flash message

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

Bare app bones, CSS framework and coding conventions

NextJS
TypeScript
TailwindCSS
Eslint/Prettier/Husky/Yarn

Mobile optimizations

Responsiveness
Menu
Typography

Do not display the current instruction right at the top, but a bit below

About EVM

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

Add colors and general polish 💅

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

Code compilation

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

Code editor

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)

Add Yul in the playground and make it the default view

Dev docs

Running the app
Updating icons

Add keyboard shortcuts for the execution

Add the option to run on different chains (currently only mainnet)

Reference table

The table with EVM opcodes

SEO

Page title
Meta
Opengraph
Favicon

Choosing network other than mainnet or ropsten breaks

    at ethereum.min.js:1
    at Array.map (<anonymous>)
    at e.<anonymous> (ethereum.min.js:1)
    at ethereum.min.js:1
    at Object.next (ethereum.min.js:1)
    at ethereum.min.js:1
    at new Promise (<anonymous>)
    at ____awaiter_13 (ethereum.min.js:1)
    at e.cliqueUpdateSignerStates (ethereum.min.js:1)
    at e.<anonymous> (ethereum.min.js:1)

Add examples section ("how to push 0 on the stack", others)

Step debugger for the bytecode

Breakpoint
Step
Continue

Site copy and prooferead

Tagline
Links
Description

Add more gas cost information

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.

Sticky opcode reference table headers

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

Add EVM version color coding in the opcodes table

For example:

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

Remember editor state in local storage

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

Container
Typography
Button
NavLink
Radio button
Icon