Create Interactive Flow Rate Calculator

[grantfox-oss]

Type: UI/UX Design | Priority: LOW | Effort: 4 hours
Component: frontend/components/flow-rate-calculator.tsx

Description: Interactive calculator showing flow rate conversions and visual representation.

Current State: Manual calculation required, no visual feedback.

Desired State: Input one unit (per second, per day, per month), auto-convert to other units, visual representation of flow, save as preset.

Key Acceptance Criteria:

• Input fields update all conversions live (as user types)
• Conversions accurate to 6 decimal places
• Visual bar shows relative size compared to other rates
• Preset buttons (save/load common rates)
• Mobile: full-width inputs (touch-friendly)
• Keyboard navigation works
• Performance: conversions instant (no lag)

Related Files:

• frontend/components/flow-rate-calculator.tsx (create or enhance)
• frontend/components/dashboard/stream-wizard/step-amount-duration.tsx (integrate)

[1sraeliteX]

Hello maintainer, I would like to work on this issue

[BigJohn-dev]

I would like to work on thisASAP

[real-venus]

Hey, I've read through the issue and I understand it — flow rates currently require manual calculation with no visual feedback, so we need an interactive calculator that converts between per-second, per-day, and per-month live and shows the rate visually.

My plan: build flow-rate-calculator.tsx with linked input fields so entering one unit auto-converts the others live as the user types, accurate to 6 decimal places. I'll add a visual bar showing the rate's relative size compared to others, plus preset buttons to save/load common rates. I'll make it mobile-friendly (full-width, touch-friendly inputs), ensure full keyboard navigation, and keep conversions instant by doing them as pure synchronous calculations (no lag). Once the component is solid, I'll integrate it into the stream wizard's step-amount-duration.tsx. I'll run the project's lint/typecheck before opening the PR.

Could you assign it to me? I can finish this within 24 hours.

[grantfox-oss]

🦊 GrantFox — @1sraeliteX has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1201)
2. Your PR will be reviewed by the StellarStream-HQ maintainers

Good luck! Track your progress on GrantFox.