ProtoStar
Protokit is a block explorer for developers building on Protokit app chain and MINA.
About
Protoscope is a specialized blockchain explorer designed specifically for developers building and maintaining Protokit app chains. It serves as a crucial development tool that provides deep insights into your app chain's state, transactions, and block production. **Core Purpose:** When building a Protokit app chain, developers need to understand what's happening under the hood – from state transitions to transaction execution. Protoscope makes this possible by providing: 1. **Development-First Features** - Real-time visualization of state transitions for debugging - Detailed transaction execution results with error messages - Block-by-block examination of state changes - Clear visibility into method calls and their parameters 2. **State Management Insights** - Interactive JSON viewer for complex state structures - Visual diff comparison of state before/after transactions - Detailed view of account states and their changes - Method-specific state transition tracking
How it's made
Protoscope is built as a modular React-based explorer for Protokit blockchain networks, focusing on real-time data visualization and a seamless user experience. Here's a deep dive into its architecture and implementation: **Core Technologies:** - React for the UI framework - GraphQL for efficient data fetching - shadcn/ui for a polished component library - Radix UI for accessible primitives - TailwindCSS for styling - Apollo Client for GraphQL state management **Architecture & Implementation Details:** 1. **Real-time Data Handling** - Implemented an efficient polling system using Apollo Client's built-in features - Created a custom hook system for real-time data updates that maintains UI responsiveness - Used GraphQL subscriptions for instant updates on new blocks and transactions 2. **Search Implementation** - Built a command palette-style search interface (⌘K shortcut) - Implemented debounced search with client-side caching - Created a custom JSON tree viewer for displaying nested state transitions - Added copy-to-clipboard functionality for all important fields 3. **State Management** - Utilized React Context for global configuration - Implemented a custom hook system for shared state - Created a modular reducer pattern for handling complex state updates 4. **Performance Optimizations** - Implemented virtualized lists for handling large datasets - Added pagination with cursor-based GraphQL queries - Used React.memo and useMemo for optimized renders - Implemented aggressive caching strategies for frequently accessed data 5. **UI/UX Considerations** - Built a responsive layout that works seamlessly on all devices - Implemented dark/light mode with system preference detection - Created smooth transitions and animations for a polished feel - Added keyboard shortcuts for power users **Notable Technical Achievements:** 1. **Smart JSON Viewer** - Created a collapsible JSON viewer that intelligently handles deep nested structures - Implemented syntax highlighting for different data types - Added copy functionality for any node in the tree 2. **Efficient State Transitions Display** - Built a custom visualization for state transitions - Implemented diff highlighting for state changes - Created a compact yet informative display of complex state data 3. **Search Optimization** - Implemented fuzzy search for transaction hashes - Created an efficient caching layer for recent searches - Built a smart ranking system for search results