wujunze / dethcode

View source of deployed Ethereum contracts in VSCode

DethCode

View source of deployed Ethereum smart contracts in VS Code

While on Etherscan, change .io to .deth.net and browse contracts comfortably in ephemeral VS Code instance

💸 Enjoy using DethCode? Consider funding development via GitCoin 💸

Usage

While browsing smart contract code on Etherscan just change URL from .io to .deth.net. This will open Visual Studio Code instance and fetch the verified code using Etherscan API.

Or save the following code snippet as a bookmarklet to quickly go from any supported chain explorer to DethCode.

javascript: location.href = location.href.replace(/\.\w+(\/)/, ".deth.net/")

Features ⚡

• frictionless - just tweak URL while browsing etherscan .io -> deth.net
• proxy support - automatically follows proxies and displays implementation source code
• multichain - supports different etherscan instances: testnets, L2s, L1s (all supported chains)

Motivation

Browsing contracts directly on etherscan sucks! Browsing multi-file contracts on etherscan sucks even more. Limited search, weird syntax highlighting, and many, many more. Finally, it's often impossible to just git clone repository and browse source code locally because it's hard to find the exact commit that matches onchain code.

DethCode was born out of frustration, and it's here to fix all of these issues. In addition, it improves the experience by automatically following the implementation of proxies and so on.

Examples

• Arbitrum ERC20 Gateway on mainnet: dethcode | etherscan
• Arbitrum ERC20 Gateway on arbitrum: dethcode | arbiscan
• Optimism L1CrossDomainMessenger: dethcode | etherscan
• Dai Stablecoin: dethcode | etherscan

Contributing

Repository structure and package managers

The repository contains two packages, ethereum-viewer extension and the VSCode compilation meant for hosting it online.

All packages (currently one) except of @dethcrypto/ethereum-viewer-vscode-host located in packages/vscode-host are managed by pnpm. As VSCode depends on Yarn, our vscode-host also needs Yarn.

Step by step instructions

# You need to create dummy certs using mkcert - https://github.com/FiloSottile/mkcert
cd ./certs
mkcert localhost
mkcert -install
cd ..

# install deps
pnpm install

# install vscode deps
cd packages/vscode-host/
yarn
cd ../../

pnpm build # this builds whole vscode and can take A LOT of time
pnpm serve

Scripts

• pnpm install - Installs dependencies for the workspace, ethereum-viewer extension, and triggers yarn install for vscode-host through the postinstall script.

• pnpm build - Builds all packages.

• pnpm watch - Starts webpack for ethereum-extension in watch mode.

• pnpm serve - Starts HTTP server with vscode-host.

• pnpm dev - Copies ethereum-extension and serves vscode-host. Run alongside pnpm watch.

Resources

DethCode's is a VSCode Web Extension using FileSystemProvider API to show sources of deployed Ethereum smart contracts. The following links might be provide some insight, if you're not familiar with some of the aforementioned terms.

• https://code.visualstudio.com/api/extension-guides/web-extensions
• https://code.visualstudio.com/api/references/vscode-api#FileSystemProvider
• https://github.com/microsoft/vscode-extension-samples/blob/main/fsprovider-sample/README.md