Skip to content

Add a seller-profile filter and seller view to MarketplaceFilters #937

Description

@1nonlypiece

📌 Description

src/components/MarketplaceFilter/MarketplaceFilters.tsx filters by asset/status/risk but not by seller, so buyers can't focus on a trusted seller's listings.

This issue adds a seller filter and a 'view all from this seller' affordance on listings.

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

  • Add a seller filter (by address/label) to MarketplaceFilters integrated with the existing filter state and active-chip UI.
  • Add a 'View seller's listings' action on MarketplaceCard that applies the seller filter.
  • Truncate/sanitize seller addresses for display; never break layout on long values.
  • Empty result for a seller shows the existing empty state.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/marketplace-seller-filter

2. Implement the change

  • Primary files to add or modify:
    • src/components/MarketplaceFilter/MarketplaceFilters.tsx — seller filter.
    • src/components/MarketplaceCard.tsx — view-seller action.
    • src/app/marketplace/page.tsx — wire filter state.
  • Add focused tests in src/components/marketplace/SellerFilter.test.tsx using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
  • Add documentation in docs/SELLER_FILTER.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

  • seller filter narrows results
  • view-seller applies filter
  • address sanitized
  • empty seller result handled

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: seller filter and seller view in marketplace

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

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions