evm.codes is a NextJS and TailwindCSS backed React application. Currently, it does not have any backend, so everything runs in the browser. It's written in TypeScript and uses the latest ES6 language features.
Below is the structure of the app:
app
├── components - React components used throughout the application
|───── layouts - Layout components
|───── ui - Reusable UI components
├── context - Shared React Contexts for the application-wide state
├── docs - Documentation and MDX files used in the reference table
├── lib - Common libraries and reusable React hooks
├── pages - NextJS pages
├── public - Public static assets
├── styles - Global CSS styles
├── types - TypeScript type definitions
└── utils - Utility methods
The core of the application is an context/ethereumContext.tsx powered by EthereumJS, which provides an application-wide state to the Ethereum Virtual Machine and its operating mechanics.
To be able to run NodeJS modules (such as EthereumJS VM) client-side, postinstall script browserifies the lib/ethereum.js, which in turn exposes a global EvmCodes object with references to the ethereum.js libraries.
Additionally, smart contracts compilation is handled by the SolcJC through the lib/solcWorker.js.
The Opcodes reference table relies on the MDX powered docs/opcodes, in order to to build dynamic documentation for each opcode. It follows a standard markdown syntax with a few customizations, implemented by the components/Reference/DocRow.tsx and components/ui/Doc.tsx components:
- Supported page metadata (labels shown in the beginning of the doc) are:
fork,group. - Adding
*in the markdown table header or column, leaves a borderless gap between the columns.