Envio Gato

Problem Statement

Websites like DefiLlama can be useful and informative, but sometimes overwhelming. We wanted to display the same info in a fun and interactive way, through cute pixel art.We built a real-time visualization of live bridge transactions of Ethereum and 3 rollups (Optimism, Arbitrum, Base) through the Relay hub (relay.link). Relay is an application that allows cross-chain swaps and bridging.We represent Ethereum and some of its rollups (Optimism, Arbitrum, Base) as an island on the left and the Relay Hub on the right. We represent transactions as cute cats (and Ethereum as a doggo) moving from the Ethereum island to the Relay hub.We have:a real-time visualization of transactions moving through Relay hub,a live TX counter on the top right,a counter for all transactions over the last 24 hours,cute art that we drew ourselves!

Solution

This project leverages Envio Hyperindex and Blockscout SDK to deliver comprehensive transaction data. For real-time visualization and live transaction counting, we implemented Apollo Client to subscribe to the Hyperindex GraphQL endpoint, enabling instant updates as transactions occur. For historical 24-hour transaction analytics, we query aggregated data directly from the Hyperindex. To display sender transaction histories, we integrated the Blockscout SDK and customized its styling to seamlessly align with our website's design aesthetic. For front-end animations, we utilized Framer Motion, which provided transitions and interactions throughout the user interface. Worth noting: all pixel art assets were hand-crafted by our team!