Add: Event Explorer Dashboard

[Osuochasam]

Event Explorer Dashboard for Soroban Smart Contract Events

Overview

Implemented a fully responsive Event Explorer interface for browsing, filtering, and inspecting events emitted by registered Soroban smart contracts. The feature provides a scalable and user-friendly experience for exploring on-chain activity while maintaining strong usability across desktop, tablet, and mobile devices.

The Event Explorer is designed to handle large event datasets efficiently and includes comprehensive loading, empty, and error state handling to ensure a smooth user experience.

---

What Was Implemented

1. Dedicated Event Explorer Page

Created a new Event Explorer view that serves as the central interface for viewing smart contract event activity.

Core Features

• Event listing and inspection
• Responsive desktop and mobile layouts
• Pagination support
• URL-driven navigation state
• User-friendly event metadata presentation

The page acts as a dedicated monitoring and auditing surface for contract activity across the platform.

---

2. Modular Component Architecture

Built the feature using reusable, maintainable components.

Components Added

EventExplorerPage

• Parent page container
• Data orchestration layer
• Filter and pagination state management
• URL synchronization

EventTable

• Desktop-optimized event presentation
• Structured tabular layout
• Efficient rendering for larger datasets

EventCard

• Mobile-first event representation
• Compact card-based layout
• Improved readability on small screens

PaginationControls

• Previous/Next navigation
• Page indicators
• Items-per-page selector
• URL parameter synchronization

EventSkeletonLoader

• Loading placeholder interface
• Prevents layout shifting during fetches
• Improves perceived performance

---

3. Event Metadata Visualization

Implemented clear and accessible display of critical event information.

Contract ID Display

Features include:

• Smart truncation (GA3X...7UZ4)
• Full identifier tooltip on hover
• One-click copy-to-clipboard action
• Improved readability without sacrificing access to complete data

Timestamp Formatting

Event timestamps are rendered using:

• Human-readable formatting
• Localized date/time conversion
• Consistent display across all viewport sizes

Example:

2026-06-21 14:35:08

Event Type Badges

Introduced visually distinct badges for event classification.

Examples:

• Contract Events → Blue
• System Events → Purple
• Debug Events → Gray

This allows users to quickly identify event categories while scanning large datasets.

---

4. Responsive Design System

Implemented a mobile-first responsive layout optimized for a wide range of devices.

Desktop Experience

• Full data table view
• Efficient information density
• Optimized for power users and monitoring workflows

Tablet Experience

• Adaptive layout scaling
• Preserved readability and interaction spacing

Mobile Experience

• Automatic transition to card-based rendering
• Improved touch interactions
• No horizontal scrolling required

Accessibility & Layout Stability

• Supports viewports as narrow as 320px
• Prevents horizontal overflow
• Maintains consistent spacing and typography across breakpoints

---

5. Advanced State Handling

Implemented robust state management for all major UI scenarios.

Loading State

Added animated skeleton loaders that:

• Match the shape of event rows/cards
• Prevent visual layout jumps
• Improve perceived responsiveness

Empty State

When no events are available:

• Displays a clear informational view
• Explains that no matching events were found
• Guides users toward adjusting filters or query criteria

Error State

Implemented graceful API failure handling:

• Error banner messaging
• Retry action support
• Recovery without requiring page refresh

---

6. Pagination Engine

Added full pagination support for navigating large event collections.

Features

• Previous page navigation
• Next page navigation
• Current page indicators
• Configurable page size selection
• Total item awareness

URL Synchronization

Pagination state is automatically reflected in route parameters.

Example:

/events?page=2&limit=10

Benefits include:

• Deep linking
• Shareable URLs
• Browser history support
• Page refresh persistence

---

7. Data Flow Integration

Connected UI components to the underlying event data layer.

Capabilities

• Reactive updates on filter changes
• Pagination-driven data refreshes
• URL-bound state synchronization
• Efficient rendering for large datasets

This architecture keeps data management centralized while maintaining clean component boundaries.

---

User Experience Improvements

Faster Perceived Performance

• Skeleton loading states
• Reduced layout shifting
• Immediate visual feedback

Improved Discoverability

• Event type badges
• Readable timestamps
• Accessible contract identifiers

Better Mobile Support

• Dedicated card layout
• Touch-friendly interactions
• Small-screen optimization

Deep-Linking Support

• URL-based pagination state
• Browser navigation compatibility
• Shareable explorer views

---

Technical Highlights

• TypeScript-first implementation
• Modular component architecture
• Responsive Tailwind-based design system
• URL-synchronized state management
• Reusable pagination controls
• Copy-to-clipboard utilities
• Mobile-first development approach
• Graceful loading, empty, and error states

---

Acceptance Criteria Achieved

• Event browsing interface implemented
• Responsive desktop/tablet/mobile layouts completed
• Event filtering and navigation supported
• Pagination controls fully functional
• URL state synchronization implemented
• Loading, empty, and error states included
• Contract metadata presentation enhanced
• Component architecture follows existing TypeScript patterns
• Mobile viewport support validated down to 320px width

Closes #15