🚀 Starknet Explorer

A beautiful, modern transaction explorer for Starknet that visualizes wallet transactions with stunning UI/UX. Built with Next.js, D3.js, and powered by CoinStats API.

✨ Features

• 🎨 Beautiful Modern UI - Stunning gradient designs and smooth animations
• 📊 Real-time Starknet Stats - Live price, market cap, and performance data
• 🔍 Interactive Transaction Graph - Visualize wallet transactions with D3.js
• 🎮 Fun Loading Experience - "Catch Me If You Can" game during syncing
• 📱 Responsive Design - Works perfectly on all devices
• 🔄 Smart Polling - Automatic wallet sync with status checking
• 📋 Advanced Filtering - Filter by date, transaction hash, and more
• 📄 Pagination - Navigate through large transaction histories
• 🎯 Direct Explorer Links - Click transactions to view on Starkscan

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone <repository-url>
   cd starknet-explorer-graph

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

🎯 How It Works

1. Starknet Stats Display

• Fetches real-time data from CoinStats API
• Shows current price, market cap, volume, and price changes
• Beautiful gradient cards with live updates

2. Wallet Search & Sync

• Enter any valid Starknet wallet address
• Automatic wallet sync with CoinStats API
• Smart polling to check sync status
• Fun "Catch Me If You Can" game during syncing

3. Transaction Visualization

• Interactive D3.js graph showing transaction relationships
• Zoom, pan, and click interactions
• Color-coded nodes for different transaction types
• Direct links to Starkscan explorer

4. Transaction List

• Detailed transaction history with filtering
• Pagination for large datasets
• Profit/loss calculations and fee information
• Advanced filtering by date range and transaction hash

🛠️ Technology Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS 4, Custom animations
• Visualization: D3.js 7
• API: CoinStats API for Starknet data
• Deployment: Vercel-ready

📊 API Integration

The app uses CoinStats API for comprehensive Starknet data:

• Starknet Stats: /coins/starknet
• Wallet Sync: /wallet/transactions (PATCH)
• Sync Status: /wallet/status
• Transactions: /wallet/transactions (GET)

🎨 Design Features

• Glass Morphism: Beautiful backdrop blur effects
• Gradient Backgrounds: Purple to blue gradients throughout
• Smooth Animations: CSS transitions and hover effects
• Responsive Grid: Adaptive layouts for all screen sizes
• Interactive Elements: Hover states and click animations

🎮 Interactive Elements

Catch Me If You Can Game

• Appears during wallet syncing
• Moving target that evades mouse cursor
• Funny quotes that change every 3 seconds
• Score tracking and pause/resume functionality

Transaction Graph

• Hierarchical tree visualization
• Zoom and pan controls
• Click nodes to open in Starkscan
• Color-coded by transaction type

📱 Responsive Design

• Desktop: Full 3-column layout with stats, search, and content
• Tablet: Adaptive 2-column layout
• Mobile: Single column with optimized spacing
• Touch-friendly: Large touch targets and gestures

🔧 Development

Project Structure

src/
├── app/
│   ├── components/
│   │   ├── StarknetStats.tsx      # Real-time stats display
│   │   ├── WalletSearch.tsx       # Address input and validation
│   │   ├── CatchMeGame.tsx        # Interactive loading game
│   │   ├── TransactionGraph.tsx   # D3.js visualization
│   │   └── TransactionList.tsx    # Transaction history table
│   ├── lib/
│   │   └── api.ts                 # CoinStats API service
│   ├── globals.css                # Global styles and animations
│   ├── layout.tsx                 # Root layout
│   └── page.tsx                   # Main application page

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🌟 Key Features Explained

Real-time Data

• Live Starknet price and market data
• Automatic refresh and error handling
• Beautiful number formatting and animations

Smart Syncing

• Automatic wallet sync initiation
• Status polling with timeout handling
• User engagement during sync process

Interactive Graph

• Hierarchical tree layout
• Zoom controls and mouse interactions
• Click-to-explore functionality
• Responsive SVG rendering

Advanced Filtering

• Date range selection
• Transaction hash search
• Real-time filter application
• Clear filters functionality

---

Made with ❤️ for the Starknet community