Blockchain Explorer

Web3 application for exploring blockchain transactions and smart contracts.

Nov 2023

Tech Stack

SolidityReactWeb3.jsEthers.jsThe GraphIPFSPostgreSQL

Overview

Built this during the crypto winter when I realized existing blockchain explorers (Etherscan, etc.) are incredibly slow and have terrible UX for developers. Wanted something fast, with better contract interaction UI, and the ability to decode transactions without copy-pasting into Tenderly. Focused on Ethereum mainnet and L2s. It's basically a better Etherscan for devs who actually need to debug stuff.

The Problem

Etherscan is slow. Loading a transaction takes 3-5 seconds. The contract interaction UI makes you manually input ABI parameters. Can't easily trace why a transaction reverted. Can't fork state from a specific block for testing. The verified contract source code viewer is painful for large contracts. As a developer, you end up using 5 different tools to understand one transaction.

The Solution

Fast search (sub-second), clean UI, smart contract interactions that parse the ABI and give you form fields, transaction trace visualization that shows the entire call stack with gas usage per step, one-click forking to a local Hardhat node for debugging. For verified contracts, I split the source code into files with syntax highlighting and jump-to-definition. Basically took everything I wished Etherscan had and built it.

Technical Details

  • React frontend with TanStack Query for aggressive caching - most searches hit the cache
  • Backend syncing from Ethereum nodes (running my own Geth archive node, expensive but worth it)
  • The Graph for indexing - created subgraphs for popular protocols to speed up contract event queries
  • Ethers.js for all blockchain interactions, web3.js for some lower-level stuff
  • PostgreSQL with aggressive indexing on addresses, block numbers, transaction hashes
  • IPFS integration for reading contract metadata and decoding token URIs
  • Redis for caching decoded transactions (same transaction gets viewed 100+ times sometimes)
  • Custom transaction trace decoder that recursively parses internal calls and decodes them using 4byte.directory
  • WebSocket connections for live block updates - new transactions stream in without refreshing
  • ENS resolution everywhere - show 'vitalik.eth' instead of '0xd8dA6...' when possible

Challenges

  • Running an archive node costs $400+/month and needs 12TB of storage. Looked into using Alchemy/Infura, but rate limits kill the UX. Eventually split it: recent data from my node, historical data from providers.
  • Transaction tracing is expensive compute-wise. A complex DeFi transaction might have 50+ internal calls. Had to implement trace caching and lazy loading - only fetch full traces when the user expands the details.
  • Decoding arbitrary contract calls is hard when contracts aren't verified. Built a heuristic system using function signatures from 4byte and existing verified contracts with similar bytecode. Works ~60% of the time.
  • IPFS is slow and unreliable for NFT metadata. Some tokens take 10+ seconds to load their images. Added a metadata proxy with caching, helps a bit.
  • Keeping up with blockchain state is a constant sync challenge. Geth occasionally falls behind during high load. Built monitoring to alert when we're >5 blocks behind head.

Results

  • Personal project, not monetized (yet), but gets ~2K visitors per month from Twitter and dev communities
  • Indexing 18M+ transactions and 3M+ unique addresses
  • Average search response time: 180ms (vs 3-5s on Etherscan)
  • Successfully debugged several production issues in DeFi protocols using the trace visualizer
  • A few teams reached out asking about white-labeling it for their L2 chains (considering this)
  • Learned a ton about blockchain indexing, probably spent $2K on infrastructure so far