- Add TokenCard and CexAnalysisCard components for displaying token data - Implement real-time Redis event streaming for token updates - Add environment-based configuration system for dev/prod Redis servers - Create comprehensive hunting ground dashboard with card management - Add individual and bulk card removal functionality - Implement browser integration for token details viewing - Add timestamp utilities and proper type handling for Redis events - Create production-ready configuration with 154.38.185.112 Redis server - Add comprehensive documentation in README.md and CONTRIBUTORS.md - Restructure project architecture with proper Electron-Vue integration BREAKING CHANGE: Redis configuration now uses environment-based settings
5.4 KiB
5.4 KiB
Ziya Token Monitor
A modern Electron-based desktop application for monitoring Solana token creation, CEX analysis, and developer balance source graphs. Built with Vue 3, Nuxt 3, and TypeScript in an Electron wrapper.
🏗️ Architecture
This project follows a hybrid architecture combining the power of Nuxt 3 for the frontend with Electron for desktop capabilities:
Tech Stack
- Frontend: Vue 3 (Vapor Mode), Nuxt 3, TypeScript, Pinia, TailwindCSS + DaisyUI
- Desktop: Electron with secure IPC communication
- Backend Integration: Redis (ioredis) for real-time event streaming
- Development: pnpm workspaces, ESLint, hot reload
Project Structure
ziya/
├── app/ # Nuxt 3 application
│ ├── components/ # Vue components
│ │ ├── TokenCard.vue # Individual token display cards
│ │ ├── CexAnalysisCard.vue # CEX analysis results
│ │ └── ...
│ ├── pages/ # Nuxt pages/routes
│ │ └── hunting-ground.vue # Main dashboard
│ ├── stores/ # Pinia state management
│ ├── utils/ # Utility functions
│ └── types/ # TypeScript definitions
├── electron/ # Electron main process
│ ├── main.ts # Electron entry point
│ ├── config/ # Configuration files
│ │ ├── environment.ts # Environment settings
│ │ └── redis.ts # Redis configuration
│ ├── handlers/ # Event handlers
│ ├── utils/ # Electron utilities
│ └── preload.ts # Preload script for IPC
├── types/ # Shared TypeScript types
│ └── redis-events.ts # Redis event definitions
└── .config/ # Configuration files
└── nuxt.ts # Nuxt configuration
✨ Current Features
Real-time Token Dashboard
- Three-column layout displaying different token event types
- Live updates via Redis pub/sub integration
- Individual card management with close buttons
- Bulk operations with "Clear All" functionality
Token Event Types
- New Token Created - Recently minted tokens with creator information
- CEX Analysis - Tokens analyzed for centralized exchange connections
- Max Depth Analysis - Tokens that reached maximum analysis depth
Interactive Features
- Graph Visualization - Hover tooltips showing node/edge relationships
- Duration Display - Time elapsed since token creation/analysis
- Browser Integration - Click to open token details in browser
- Creator Information - Display developer names and addresses
- CEX Integration - Show exchange connections and analysis results
🚀 Quick Start
Prerequisites
- Node.js >= 18.0.0
- pnpm >= 8.0.0
- Redis server (local or Docker)
Installation
# Clone and install
git clone <repository-url>
cd muhafidh/ziya
pnpm install
# Start Redis (Docker)
docker run -d --name bismillahdao-redis -p 6379:6379 redis:alpine
# Start development
pnpm run dev
🔧 Environment Configuration
The application automatically configures Redis connection based on environment:
Development
- Redis:
localhost:6379(local) orbismillahdao-redis:6379(Docker) - Build:
pnpm run dev - Features: Hot reload, debug logging
Production
- Redis:
154.38.185.112:6379(production server) - Build:
pnpm run build:prod - Features: Optimized builds, minimal logging
📋 Available Scripts
# Development
pnpm run dev # Start development with hot reload
pnpm run dev:nuxt # Start only Nuxt dev server
pnpm run dev:electron # Start only Electron
# Building
pnpm run build # Production build
pnpm run build:dev # Development build
pnpm run build:prod # Production build (explicit)
# Utilities
pnpm run lint # Run ESLint
pnpm run type-check # TypeScript type checking
🎯 Key Components
TokenCard.vue
- Displays new token creation events
- Shows creator information and timestamps
- Handles browser integration for token details
CexAnalysisCard.vue
- Shows CEX analysis and max depth results
- Displays graph data with interactive tooltips
- Includes duration calculation and CEX information
hunting-ground.vue
- Main dashboard page with three-column layout
- Manages real-time Redis event subscriptions
- Handles card state management and user interactions
🔌 Redis Integration
The application subscribes to three Redis channels:
new_token_created- New token creation eventstoken_cex_updated- CEX analysis completionmax_depth_reached- Maximum analysis depth events
Events are automatically forwarded from Electron main process to renderer via secure IPC.
🔒 Security Features
- Context Isolation: Enabled for all renderer processes
- Sandboxing: Renderer processes run in sandbox mode
- Secure IPC: All communication through preload scripts
- No Node.js Exposure: APIs not directly accessible to renderer
🤝 Contributing
For detailed development setup, code style guidelines, and contribution workflow, please see CONTRIBUTORS.md.
📄 License
MIT License - see LICENSE file for details.
Ready to monitor Solana tokens in real-time! 🚀