Buyers can pin up to three marketplace listings and open a side-by-side comparison without leaving the browse view.
- Each grid card exposes a Compare toggle in the header.
- Pinned listings appear in a fixed bottom Compare tray with a count badge.
- Click Compare in the tray (requires at least two listings) to open the comparison dialog.
- Use Clear or Dismiss to empty the tray, or remove individual pins from the tray chips.
| Piece | Location |
|---|---|
| Selection state + session persistence | src/hooks/useCompareListings.ts |
| Bottom tray UI | src/components/marketplace/CompareTray.tsx |
| Side-by-side table | src/components/marketplace/CompareView.tsx |
| Card toggle | src/components/MarketplaceCard.tsx |
| Grid wiring | src/components/MarketplaceGrid.tsx |
| Page orchestration | src/app/marketplace/page.tsx |
Pinned listing payloads are stored in sessionStorage under marketplace-compare-listings. The set survives filter, sort, and pagination changes within the same browser tab.
- Maximum 3 pinned listings; additional cards show a disabled compare control with an explanatory
aria-label. - The tray is a dismissible
region; the comparison view is a focus-trapped dialog closed with Escape or Close. - Compare controls use
aria-pressedto reflect pin state.
The comparison table shows type, compliance score, amount, duration, yield (APY), max loss, price, and seller reputation (address + trust badge) using fields already present on MarketplaceCardProps.