Implement Collapsible Stamp Categories on the Dashboard

[erichfi]

User Story:

As a Passport user, I want to see my stamps organized into collapsible categories on the dashboard, So that I can easily manage and view stamps by category according to their relevance and value.

Acceptance Criteria

GIVEN I am logged into my Passport dashboard, WHEN I navigate to the "My Stamps" section, THEN I should see my stamps organized into the following categories: Blockchain & Crypto Networks, Government IDs, Social & Professional Platforms, and Biometric Verification.

AND WHEN I click on a category header, THEN the category should expand or collapse, showing or hiding the stamps under that category.

AND WHEN the categories are displayed, THEN stamps within each category should be ordered by the number of points they contribute to my total score, from highest to lowest.

AND WHEN I access the dashboard, THEN all categories should initially be in an expanded state.

Product & Design Links:

Figma Link: https://www.figma.com/file/FOOlLEFaBt87atw6CPkA5P/Passport-App?type=design&node-id=3761%3A36672&mode=design&t=A95YBtu2alZO5RG0-1

Tech Details:

• Implement accordion-style collapsible components for each stamp category.
• Utilize existing UI components where possible to maintain a consistent look and feel.
• Ensure that the state (expanded/collapsed) of each category can be controlled by the user.
• Sorting functionality should be dynamic and reflect real-time updates to stamp points.

Open Questions:

Notes/Assumptions:

• Assumes that all necessary backend APIs for fetching stamps and their categories are in place.
• The user understands that the points displayed are dynamic and may change based on verification status or other factors.
• Stamp to Category Mapping:
  • Blockchain & Crypto Networks: Ethereum, NFT, GTC Staking, Idena, Gitcoin, zkSync, Guild, Lens, Snapshot, Gnosis Safe, BrightID, Trusta Labs, ENS
  • Government IDs: Coinbase, Holonym
  • Social & Professional Platforms: Github, LinkedIn, Google, Discord
  • Biometric Verification: Civic

[erichfi]

To improve the user experience with the collapsible stamp categories, I propose that we enhance the hover interaction. Specifically, when a user hovers over the section title (essentially the entire clickable area), the cursor should change to a pointer. This visual feedback will clearly indicate that the section is interactive and can be clicked to expand or collapse. This small UI adjustment can significantly improve the intuitiveness and usability of the feature.