ZetaFlow - Cross-Chain Transaction Visualizer

Overview

ZetaFlow is an interactive web application for visualizing cross-chain transactions on ZetaChain. It provides an intuitive graph-based interface to explore how assets move across different blockchains, featuring real-time transaction search and automatic network detection.

🏆 Won $300 at ZetaChain Vibeathon 2025

Key Features

Interactive Graph Visualization

• Visual representation of cross-chain transaction flows
• Node-based display showing source and destination chains
• Edge animations for transaction direction
• Zoom and pan controls for exploring complex graphs

Real-Time Search

• Search by transaction hash, wallet address, or block number
• Instant results with live data fetching
• Transaction history exploration

Network Switching

• Automatic mainnet/testnet detection
• Manual network toggle
• Consistent experience across networks

Multi-Layer Caching

• Optimized API calls with intelligent caching
• Reduced load times for repeated queries
• Background data refresh

Technical Implementation

Graph Visualization

• Cytoscape.js: Powerful graph theory library for visualization
• Custom Layouts: Optimized node positioning for readability
• Interactive Elements: Click, hover, and zoom interactions
• Animation System: Smooth transitions and edge flow animations

Data Architecture

• API Integration: Direct connection to ZetaChain explorers
• Data Transformation: Raw blockchain data to visual graph format
• Caching Layer: In-memory and localStorage caching
• Error Handling: Graceful fallbacks for failed requests

Tech Stack

Frontend

• Next.js: React framework with App Router
• React: Component-based UI development
• Tailwind CSS: Responsive styling
• Cytoscape.js: Graph visualization

APIs & Data

• ZetaChain Explorer API: Transaction and block data
• Cross-chain indexers: Multi-network data aggregation

Hackathon Journey

Built this project for ZetaChain Vibeathon 2025, focusing on making cross-chain transactions more understandable. The visual approach to blockchain data won appreciation from judges for its intuitive interface and practical utility.

What I Learned

• Cross-chain transaction mechanics and ZetaChain architecture
• Graph theory and visualization techniques
• Building developer tools for blockchain ecosystems
• Hackathon project management and presentation