HashDecode

HashDecode is a web application that solves one of the most significant pain points in blockchain - understanding what transactions actually do. When you see a transaction hash like 0x5e1657ef0e9be9bc72efefe59a2528d0d730d478cfc9e6cdd09af9f997bb3ef4, it's just a meaningless string of characters to most people. This app takes that hash, fetches the actual transaction data from the blockchain, and uses AI to translate it into something anyone can understand. Instead of seeing raw JSON with function calls and hex values, you get explanations like "This transaction swaps 100 USDC for 0.05 ETH on Uniswap" or "This transfers 50 tokens from Alice to Bob." The interface is clean and intuitive—paste a hash, click Translate, and get your explanation. There's also a technical details section for developers who want to see the raw data. We built this because we were tired of manually decoding transactions or relying on complex blockchain explorers that only developers could understand.

The tech stack is pretty straightforward but effective. Frontend is React with Vite for fast development, styled with custom CSS to create a sleek dark theme with purple gradients. The backend is Node.js with Express handling the API routes. Processing occurs in two main parts: data fetching and AI translation. For blockchain data, we integrated with Blockscout's API, which provides clean transaction data for the Ethereum mainnet. This was crucial because trying to parse raw blockchain data would have been a nightmare - Blockscout handles all the heavy lifting of decoding function calls and formatting the data. For the translation part, we are using OpenAI's API with GPT-3.5-turbo. We've crafted a specific prompt that tells the AI to focus on explaining transactions in simple terms, format lists nicely, and avoid technical jargon. The prompt is designed to handle different types of transactions - DeFi swaps, token transfers, contract interactions, etc. One interesting challenge was handling API failures gracefully. Since both Blockscout and OpenAI can have rate limits or downtime, I built in proper error handling with specific error messages for different failure scenarios. When OpenAI hits quota limits, the app falls back to a mock translation that still shows the transaction was found, just without the AI explanation. The most hacky part was probably the CSS for the full-width footer. Getting that dark background to extend edge-to-edge across the entire browser width required some creative positioning with viewport units and transforms. It's one of those CSS tricks that works but feels like it shouldn't! The whole thing runs locally with hot reload for development, and the backend automatically restarts when we make changes thanks to Node's --watch flag. It's been surprisingly reliable for a hackathon project.