Skip to content

Add a ComparisonPanel-driven risk-profile decision wizard to the create flow #679

Description

@1nonlypiece

📌 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.

Metadata

Metadata

Assignees

Labels

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions