📌 Description
src/components/ComparisonPanel.tsx today only renders a static list of
items for a single variant (negative / positive / result). On the
landing page it powers the "problem vs solution" marketing block, but the create
flow in src/app/create/page.tsx gives no comparative help when a provider is
choosing between Safe, Balanced, and Aggressive commitment types.
This issue introduces a risk-profile decision wizard that composes three
ComparisonPanel columns side-by-side so a provider can weigh expected yield,
penalty exposure, and lock duration before committing in
CreateCommitmentStepSelectType.tsx.
Goal: turn an abstract "pick a type" step into a guided, comparative
decision surface that reduces mis-selection and downstream early exits.
🎯 Requirements and Context
- Reuse the existing
ComparisonPanel component; do not fork its markup.
- Source per-profile parameters from
/api/config/supported and
/api/protocol/constants rather than hardcoding numbers.
- Selecting a column must update the wizard's selected type and advance state in
WizardStepper.tsx without losing entered draft data.
- Must be fully keyboard navigable (arrow keys move between columns; Enter
selects) and announce the selected profile via an aria-live region.
- Respect
prefers-reduced-motion for any transition.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/risk-profile-comparison-wizard
2. Implement changes
- New component
src/components/create/RiskProfileComparison.tsx composing three
ComparisonPanel columns from config data.
- Wire it into
src/components/CreateCommitmentStepSelectType.tsx and the parent
src/app/create/page.tsx.
- Add
src/components/create/RiskProfileComparison.test.tsx (RTL) covering
selection, keyboard nav, and config-driven rendering.
- Add
docs/RISK_PROFILE_COMPARISON.md documenting the data sources and the
selection contract.
3. Test and commit
- Run the repo test suite:
pnpm test
- Cover edge cases: missing config response, single-profile config, keyboard
selection, and reduced-motion users.
Example commit message
feat: risk-profile comparison wizard step backed by protocol config
✅ Guidelines
- Minimum 95% test coverage on new/changed lines.
- Clear, reviewer-friendly documentation.
- Timeframe: 96 hours.
🏷️ Labels
type-feature · 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 before you start so we can avoid duplicate work and
pair you with a reviewer.
📌 Description
src/components/ComparisonPanel.tsxtoday only renders a static list ofitemsfor a singlevariant(negative/positive/result). On thelanding page it powers the "problem vs solution" marketing block, but the create
flow in
src/app/create/page.tsxgives no comparative help when a provider ischoosing between Safe, Balanced, and Aggressive commitment types.
This issue introduces a risk-profile decision wizard that composes three
ComparisonPanelcolumns side-by-side so a provider can weigh expected yield,penalty exposure, and lock duration before committing in
CreateCommitmentStepSelectType.tsx.🎯 Requirements and Context
ComparisonPanelcomponent; do not fork its markup./api/config/supportedand/api/protocol/constantsrather than hardcoding numbers.WizardStepper.tsxwithout losing entered draft data.selects) and announce the selected profile via an
aria-liveregion.prefers-reduced-motionfor any transition.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
src/components/create/RiskProfileComparison.tsxcomposing threeComparisonPanelcolumns from config data.src/components/CreateCommitmentStepSelectType.tsxand the parentsrc/app/create/page.tsx.src/components/create/RiskProfileComparison.test.tsx(RTL) coveringselection, keyboard nav, and config-driven rendering.
docs/RISK_PROFILE_COMPARISON.mddocumenting the data sources and theselection contract.
3. Test and commit
pnpm testselection, and reduced-motion users.
Example commit message
✅ Guidelines
🏷️ Labels
type-feature·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support
unblocked fast: https://discord.gg/WV7tdYkJk
pair you with a reviewer.