Add smart contract fee reserve monitoring and visualization page

[sallymoc]

Description

Create a user interface in the Qubic Explorer to display contract fee reserve information, including historical balance trends and current epoch activity.

Features

1. Reserve Balance Graph

Display an interactive line chart showing reserve balance over time.

Requirements:

• X-axis: Time (epochs/dates)
• Y-axis: Reserve amount
• Time range selector: 24h, 7d, 30d, All time
• Tooltip on hover showing exact values
• Responsive design for mobile/desktop
• Loading states while fetching data

2. Current Epoch Statistics Dashboard

Display key metrics for the ongoing epoch:

Metrics to show:

• Current Balance: Latest reserve amount (prominent display)
• Total Additions: Sum of deposits this epoch
• Total Deductions: Sum of withdrawals this epoch
• Net Change: +/- difference
• Epoch Number: Current epoch identifier

3. Events History Table

List individual reserve transactions:

Columns:

• Type (Addition/Deduction)
• Amount
• Timestamp / tick
• Epoch

Features:

• Pagination
• Filter by type (additions/deductions)
• Sort by date/amount
• Export functionality (CSV)

UI/UX Requirements

• Mobile-responsive layout
• Loading skeletons/spinners for async data
• Error states with retry options
• Empty states when no data available
• Tooltips explaining technical terms (reserve, burn, deduction)

Design Considerations

• Consistent with existing explorer design system
• Clear visual hierarchy (most important metrics prominent)
• Use existing chart library
• Match typography and color scheme

Technical Requirements

• Implement data fetching with error handling
• Add loading states
• Cache data appropriately
• Optimize chart rendering for large datasets

Dependencies

• Backend API endpoints (see issue )
• Chart library (e.g., Chart.js, Recharts, D3.js)

References

There is a site offering this functionality in a beta (data not very stable/reliable) state https://contracts.qubic.tools/