feat: complete stream detail page redesign with moon theme - #1171
Merged
Folex1275 merged 6 commits intoJun 18, 2026
Merged
Conversation
added 6 commits
June 17, 2026 11:33
- Redesigned stream/[id]/page.tsx with moon theme nebula backgrounds - Created StreamHeader component with org avatar, status badge, sender/receiver - Created FlowRateGauge with animated SVG semi-circle gauge (green to cyan) - Created BalanceProjectionChart using Recharts with green-yellow-red color shift - Created ProgressBar with animated progress and days/weeks remaining display - Created TransactionHistory with pagination (20 per page), type icons, status badges - Created ActionButtons with 5 action buttons, ripple animation, and modals - Created StreamSkeleton for loading states with shimmer effects - Created StreamError with retry button - Updated ViewStreamClient with WebSocket real-time updates (socket.io) - All components use Stellar Glass design system with glass-card aesthetic - Mobile-first single column layout with responsive grid - Loading skeleton and error state with retry functionality - Accessibility: aria-labels, keyboard navigation, semantic structure
- Removed 'socket' from attemptReconnect useCallback dependency (caused infinite re-renders) - Changed to use socketRef instead of closure socket variable for reconnect - Changed useEffect dependency from [attemptReconnect] to [] (runs once) - Used attemptReconnectRef pattern to avoid stale closure issues
The early return guard if (!CONTRACT_ID || !streamId) return null; caused mock data to never be reached in dev mode. Restructured so mock/demo data is returned when CONTRACT_ID is not configured, allowing the stream detail page to render without Stellar RPC credentials.
…aria-live region - Progress bar: color changes based on TIME REMAINING (green >50%, yellow 20-50%, red <20%) per spec, not based on percent complete - Progress bar: time-remaining label now renders ON the bar itself with adaptive text color (dark on light fill, light on dark fill) - Live counter: added role='status' and aria-live='polite' so screen readers announce streaming updates - Rate display: aria-label on rate text, aria-hidden on decorative icon
13 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request: Stream Detail Page Redesign — Moon Theme
Closes #1170
Branch
feature/stream-detail-redesign-moon-themeDescription
Complete redesign of the individual stream detail page with a moon theme, enhanced data visualization, action buttons, and real-time WebSocket updates.
Changes Made
Modified Files
frontend/app/stream/[id]/page.tsx— Added nebula background blobs, updated layout for new component integrationfrontend/components/view-stream-client.tsx— Complete rewrite integrating all new stream components with WebSocket real-time updatesScreenshots
Desktop — Header & Live Counter
Desktop — Progress, Flow Rate & Chart
Desktop — Quick Actions & Transaction History
New Components (frontend/components/stream/)
stream-header.tsx— Header card with org avatar, stream name, status badge (active/paused/ended), sender/receiver info, time remainingflow-rate-gauge.tsx— Animated SVG semi-circle gauge showing flow rate with color shift (cyan to green), tick marks, live rate displayprogress-bar.tsx— Animated progress bar with green → yellow → red color shift based on completion percentage, days/weeks remainingbalance-projection-chart.tsx— Recharts area chart showing streamed amount over time with projection line (dashed), color-coded by progresstransaction-history.tsx— Paginated transaction list (20 per page) with type icons, status badges (confirmed/pending/failed), hover animationsaction-buttons.tsx— 5 action buttons (Pause, Resume, Withdraw, Top Up, Cancel) with ripple animation, modal dialogs showing gas estimatesstream-skeleton.tsx— Loading skeleton with shimmer animations for all sectionsstream-error.tsx— Error state with animated icon, retry button, and guidance textKey Features Implemented
Design System
Testing