[US] As a user, I want to see a card view of my Attestations

[alainncls]

As a user,
I want to see a card view of my Attestations,
So that this information is easier to understand

---

Context

For end-users, the main use case for the explorer is to view attestations issued to a specific recipient, which can be their own address. At the moment, to get this information, the users would need to use the search bar to look for and address or go to the “My Attestation” view. In both cases, the users are presented with a list of attestations containing “technical” information like the Portal or Schema name. Now that we have Attestation Type metadata, we can present contextual information that provides better indication to the users.

Current page for “My Attestation”

Proposed Solution

We propose displaying attestations as cards, similar to the Issuer Page. This format provides better readability and is more familiar for users, as it is widely used to display NFTs, badges etc. The cards would provide all the information provided in the Attestation Types, namely:

• "Attestation Type" name (fall back to Schema if not set)
• "Attestation Type" logo (fall back to Issuer logo if not set)
• Issuer name
• Issuance date
• "Attestation Type" description (hidden if not set)

A button would be displayed at the bottom of the card:
"View details" button (brings to the Attestation detail page)

Impacted pages
This page can be first implemented in the “My Attestation” page as well as by creating a dedicated “subject” page which can be accessed through the url explorer.ver.ax/[chain]/subject/[address]. This page would be accessible by:

1. Clicking on a subject for an attestation (rather from an attestation list or the attestation page - see screenshot below) instead of redirecting to Etherscan
2. Redirection from 3rd party website such as the Etherscan Attestation Card

At a later stage we will aim to find a proper heuristic to display this page when the users use the search bar to look for a subject address.

Design
The cards should use the same design as the Issuer Page cards

Future iterations (out of scope for the current ticket)

The aim is to have restricted scope for the first version and then quickly iterate on it.
Here is a list of improvement that should follow:

• [SPIKE] Explore the libraries to easily share a page on social platforms (including Lens, Farcaster, etc.) #758
• [US] As a user, I want to share Attestations from the card view #750
• [US] As a user, I want the Search feature to redirect me to the Subject page #751
• [US] As a user, I want to be able to toggle the Subject page between a card view and a list view #752
• [SPIKE] Explore the OpenGraph tags we could use on the Explorer #753
• [US] As the Explorer, I should implement OpenGraph tags to help sharing pages #754
• [US] As a user, I want to see Expired and Revoked Attestations as greyed out with a watermark on the Subject page #755
• [US] As a user, I want the ability to show or hide expired or revoked attestations on the Subject page #756
• [SPIKE] Iterate on the information within the Attestation Card view based on user feedback (expiry date, chain, see more…) #757