Actionable Smart Contract Addresses for VSCode

Microsoft’s Visual Studio Code (VSCode) is my one-stop IDE for most security activities. Mainly because it is super easy to write custom extensions allowing me to automate recurring tasks and be more efficient 🤖.

When one of my colleagues asked me whether it would be possible to extend VSCode with functionality that provides information and actions on ethereum addresses in the IDE’s editor, I was initially skeptical. Why would someone need that? What action would you want to have? And why would you want to have it in the IDE? Well, it all makes sense if you’re working a lot with contract addresses instead of source code directly and want to know what’s going on at a specific address.

We often find ethereum addresses in source code files (i.e., for already deployed or shared 3rd party components), test and auxiliary scripts, or the deployment documentation. When dealing with these addresses having the IDE support, can come quite handy.

For example, fetching the source-code from etherscan.io directly in the IDE is pretty convenient as the IDE can take care of decorating the source code and providing means to navigate it. If the contract source is not available, you might want to explore its byte-code instead, or maybe first disassemble it? You could also try reconstructing a source code equivalent from bytecode to make more sense of the contract. This extension gives you access to all this right off your fingertips.

What’s in the box?

• Hover
  • Actionable popup menu when hovering over an ethereum address
  • Show information like the mainnet balance (can be disabled)
  • Open the address in a block explorer such as etherscan.io
• Code
  • Retrieve and render bytecode
  • Retrieve and disassemble bytecode
  • Retrieve verified contract source if available on etherscan.io
  • Reconstructs equivalent contract source from byte-code
• Language Support
  • Interactive ByteCode explorer for .evm files
  • Interactive Disassembly explorer for .evmtrace files

Contract Verified Source

• Fetches contract source code from etherscan.io
• Uses the IDE’s native language support extension for source code highlighting and other functions (e.g., Solidity Visual Developer)

ByteCode Viewer

• Hover information on bytes
• Click to see instruction boundaries
• Color-coded bytes to reflect the type of instruction

Do you want to load bytecode from disk? No problem, rename it to .evm and open it with VSCode.

Disassembly View

• Hover info on instructions
• Representing data as ASCII and resolving 4bytes to Function Signatures, Color code reflects the type of instruction: stack, memory, storage, arithm., logic, system, environment, …

Do you want to load bytecode from disk? No problem, rename it to .evmtrace and open it with VSCode.

Contract Source Code reconstruction

• Show reconstructed contract source from eveem.org
• Reconstruct contract source locally using evm.js
• Reconstruct contract source locally using vscode-decompiler

Acknowledgments ❤️

Without the smart teams developing the following projects, this extension would only be half as useful.

• etherscan.io (get your API-Key there)
• https://www.npmjs.com/package/evm (disassembler, decompiler: evm.js)
• https://eveem.org (remote panoramix)
• vscode-decompiler (local panoramix)

Feedback

• What feature do you wish ETHover had? → Github
• Bugs and other issues? → Github

All posts