Add a live cost-and-yield estimator panel to CreateCommitmentStepConfigure

[1nonlypiece]

📌 Description

src/components/CreateCommitmentStepConfigure.tsx collects amount/duration/max-loss but shows no projection of expected yield or worst-case penalty, so users commit blind.

This issue adds a live estimator panel that recomputes projected yield and worst-case penalty as inputs change.

🎯 Requirements and Context

This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.

• Compute estimates from current inputs and protocol constants; recompute reactively (debounced).
• Clearly label all figures as estimates; show worst-case penalty and projected return ranges.
• Handle invalid/empty inputs without throwing; show placeholder until valid.
• Use existing protocol constants source rather than hardcoding fees/penalties.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/create-cost-yield-estimator

2. Implement the change

• Primary files to add or modify:
  • src/components/CreateCommitmentStepConfigure.tsx — estimator panel.
  • src/utils/protocol.ts — read protocol constants.
  • src/app/api/protocol/constants/route.ts — source (existing).
• Add focused tests in src/components/create/CostYieldEstimator.test.tsx using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
• Add documentation in docs/COST_YIELD_ESTIMATOR.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
• Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.

3. Cover edge cases

• estimates update on input change
• invalid input shows placeholder
• worst-case penalty shown
• constants sourced not hardcoded

4. Test and commit

• Run the suite (e.g. pnpm test / pnpm vitest run) and ensure new lines are covered.
• Verify keyboard navigation, focus handling, and prefers-reduced-motion where relevant.

Example commit message

feat: live cost-and-yield estimator in configure step

✅ Guidelines

• Minimum 95% test coverage on the new/changed lines.
• Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
• No regressions to existing components, routes, or tests.
• Fully typed (no any), accessible (labels, roles, live regions where relevant).
• Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

• Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
• Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
• Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

[greatest0fallt1me]

Hello Maintainers 👋,
I’m interested in picking up this issue and contributing to the project.
I have solid experience working across both frontend and blockchain layers, including building user interfaces with Next.js and developing Stellar smart contracts using Rust (Soroban). I’m familiar with translating Figma designs into pixel-accurate UIs, handling wallet integrations, and writing efficient, well-tested contract logic.
I focus on writing clean, maintainable code, following repository standards, and keeping communication transparent throughout the development process. I can start immediately and complete the work within the expected timeframe.
Excited to collaborate and add value to the project 🚀
Thank you!