Challenges

• Real-time performance: Updating data every 15 seconds without lag or excessive re-renders.
• Data complexity: Displaying validator, staking, and transaction data in a readable, intuitive format.
• Scalability: Ensuring reusable components and state logic can support future features.
• Wallet integration: Providing secure, user-friendly wallet connection and account visibility.

Solutions

• Used React with TypeScript for strong type safety and scalable component structures.
• Built modular card components for blocks, validators, transactions, and eras — allowing for reuse and easy layout restructuring.
• Added wallet connect functionality to display account-specific data like balances and transaction history.

Key Features

• Live block stream with timestamped block previews
• Transaction table with real-time status (success/failure), sender/receiver, and value
• Validator dashboard with total stake, commission rate, and delegation metrics
• Era view for tracking validator cycles and consensus activity
• Account section displaying balance, transferables, and wallet identifiers