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.

ETHover in action

ETHover in action

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

Fetching the verified contract source from etherscan.io

Fetching the verified contract source from etherscan.io

ByteCode Viewer

Interactive ByteCode Viewer

Interactive 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

Interactive Disassembly Viewer

Interactive Disassembly Viewer

  • 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

Decompiling/Reconstructing equivalent source code

Decompiling/Reconstructing equivalent source code

  • 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.

Feedback

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

Thinking about smart contract security? We can provide training, ongoing advice, and smart contract auditing. Contact us.

All posts chevronRight icon

`