verida/verida-one-webapp

Verida One is a public, decentralized platform that allows you to showcase who you are across Web2 and Web3, online and IRL

verida-one-webapp's Issues

Implement Search feature

A rough idea of the implementation is as follow:

• A dedicated molecule component for the Search field
• A dedicated molecule for the Search result item
• A dedicated organism component for the Search Result
• I'd say the Header integrates these component and manages the state but depending on the complexity it might good to move into a hook and dedicated components
• The Search Result component will have to be positioned below the Search Field and accomodate the different designs on large and narrow screens. We'll have to look whether a position: fixed is enough or if a portal is needed.
• The query being async, we should look at using useQuery
• A debounce of the search query is likely needed
• A loading state will be needed as well as an error state. If no design available, ask the design team
• Clicking on a search result item will redirect to the profile page and clear the state of the search

Fix Collectible display on different browsers

    NFTs are showing different sizes (desktop Firefox). Need to constrain them?

This doesn't need to be fixed before merging but should be fixed.

Good for you to merge.

Originally posted by @nick-verida in #22 (comment)

Resolve a Verida Username to a DID

When the identity params of the url is not a DID (starting with did:), we should consider it a Verida Username.

We need to resolve the Verida Username to a DID in order to fetch the associated data.

Note: an evolution of the protocol SDK could allow the SDK to resolve it itself. This issue would not be necessary then.

Fix Collectible labels display in card

Oleksandr confirmed:

• Collection label should be one line max with ellipsis if longer
• Token label should be 2 lines max with ellipsis if longer

Support different format for the asset media

Have to handle different formats of media.
May have to distinguish video and image, technically. Likely have to use a <video> tag.

Handle empty profile display

For a valid identity (Verida name or DID can be resolved), if the user haven't configured its Verida One profile, or if the configuration is empty, the UI should display an information message to the viewer.

See Figma design

Implement Profile page

Update Tailwind config

• Allow a spacing of 2.75
• Define additional text options (our custom typography doesn't fit the default tailwind font-size and line-height)
• ...

Define and implement data loading

Create Ryan's mock profile

https://www.notion.so/verida/Ryan-s-Verida-One-Profile-for-demo-d41922ab7eb94361964e342b5fc66271

Implement Badge page (one badge)

Set up error reporting

Set up Sentry and handle errors to be redirected to it

Fix display chain logo in Collectible chip even with no price info

Currently if there is no information of price and price unit, the Chip is not displayed.
But there is the Chain logo on it, so it's relevant to keep it.

Will have to update the AssetPriceChip props to accept optional price and unit.

Questions are:

• Should we display price if unit is missing
• Should we display unit if price is missing

Also, considering the Chain logo is hidden in the compact variant, if the price and unit are not displayed (because missing), then the component should return null.

Optimise for accessibility

Follow best practices on accessibility (aria, WCAG AA, ...)

Create UI components using atomic design approach

Develop the following components

• Buttons,Chip Label, IconButton , Profile avatar

• Activity card, Assets card, Modal

• Header

Consider lazy loading and code splitting

If loading performance is an issue and it is necessary to reduce the size of the bundle, we should consider code splitting.

Main pages can be set as lazy loading as well as some other components such as modals.

Implement a fixed bottom bar

Several pages use a bottom bar to provide some actions, for instance: "View in Explorer" in the Collectibles details page.

This bottom bar is fixed at the bottom, the rest of the page scroll under it.

Note that the footer must not be covered by the bottom bar. It means footer should have a spacing of the height of the bottom bar below it.

As the footer is managed outside of the page defining if there's a bottom bar, it will be challenging.

We should investigate React Portals for that

Implement Collectible page (one collectible)

Fix the collectibles carousel underneath the container spacing

Not correct:

Correct:

Optimise for SEO

Including (not exhaustive):

• meta tag
• social graph
• profile image for search engine and other URL rendering

Implement Badge related components

Implement the components displaying the Badge and list of Badges (hexagonal mosaic, ...).

Fetch Collectibles from Wallet Provider

Focused on the Collectibles (NFTs)

• Get the list of public wallet addresses
• Define API schemas and types
• Update components and other utils using the updated types
• Fetch data from Wallet Provider for theses addresses
• Whatever the data strategy is (see #47 ), ensure the data is displayed in the corresponding pages
• Remove collectibles from mock data

See #57 focused on personal information from Vault public profile
See #62 ,focused on the other data (links, wallets, ...)

Implement Collectibles page (collectibles list)

Integrate Plausible

Implement tooltips

• At least use the title property

Then when time:

• Create a tooltip component
• Add the tooltip where needed

Define unit tests

Set up the unit testing structure and start writing unit tests for components.

Consider Storybook for defining the tests, see #20

Implement "Share" modal

We should explore React Portal to achieve it.

I see the following structure (not exhaustive).

• Modal component (molecule)
  • defining style and behaviour (responsive) of the modal
  • Defined as a Portal targeting an element high in the DOM
• ShareModalcomponent (organism)
  • Using Modal as a container
  • Defining the content of the modal
• In whatever component the ShareModal must be displayed, place it in render tree and managed its visibility state and other props.

Consider using the Web Share API for the Share button

Handle Badge not found in UI

If a viewer ends up in the "Badge Details" page (for instance via URL), but the badge cannot be found, we currently display a blank page, while we should display some information for the user.

• Get design
• Implement it

Note that our resolution of the badge involves if the badge is allowed to be shown by configuration, ie: the wallet address owning the badge shall be part of the configuration, this badge is not explicitly in the "hidden" list in the configuration.

It means that even if an SBT (defined by its chain, contract address and token id) actually exists, we can consider it as "non-displayable" / "not found"

Define `title` property on some elements (tooltip)

The title property on html tags allow displaying a sam textual tooltip while hovering on it.

List of element to add some information:

• Verida tick icon -> "Verified by Verida"
• Any blockchain logo -> The blockchain name, ie: "Ethereum", "Polygon", ...
• Social Media link -> Platform and id, ie: "@Thapot on Twitter", ...
• Wallet address -> the full address, as the rendered could be truncated
• Most icon buttons and icon links (as they have no label) -> what it does, where it goes, ie: "Copy to clipboard", "Open in explorer"
• ...

Feel free to extend

Define schema for Verida One profile information

To be complete in collaboration with the Vault as this is how the Vault will save the data.

The Verida One webapp will read the data following this schema.

Fix the background image

According to the Figma design, only the Profile page has the gradient background, all other pages have a the solid background.

Implement custom theme in tailwing config

Handle @formatjs/intl errors when not matching the locale

ReactIntlProvider allows a onError prop to handle errors.
At some point we should raise them to Sentry. In short term, we can have an empty function.

Implement the footer

Footer with legal information and links

Implement Activity feed

Set up Storybook

Decide wether we want to set up a Storybook in this project.

Handle empty list in the Badge List page

If a viewer ends up in the "Badge List" page (for instance via URL), but the list is empty, we currently display a blank page, while we should display some information for the user.

• Get design for empty list
• Implement it

Fix internal links and non-reset of the scroll

When using useNavigate from react-router on a Button, we loose some behaviour of a normal link, for instance the "Open link in new Tab" in the contextual menu (or often shortcut middle-click).

Additionally, and more importantly, it looks like the scroll is not reset when moving to another page.
For example: Scrolling down on the Profile page to the "Collectibles" section and clicking on the "Show all" will redirect us to the "Collectibles" page but the scroll is still in the middle of the page.

It looks like using the <Link /> from react-router is more appropriate than the navigate(...).

We should update the <ButtonLinkBase/> to be either internal or external and use either Link or a.

Fix long Asset's description display

For the moment, the description in the Asset details pages are not truncated.
According to the design, it should be limited to 5 or 6 lines and if longer, display an ellipsis and a show more button to expand and reveal the full description.

While truncating the text to 5/6 lines is easy (with class line-clamp-x), knowing when to display a "show more" button and handling its behaviour is more challenging. It is possible with CSS only but will have to double check with Tailwind.

This ticket aims to address this.

Display label of a wallet address

Fetch information from Verida One configuration datastore

Focused on the Verida One specific data (links, wallets, social media, ...)

• Create a environment variable for the schema URL
• Fetch data from the Verida Network (Verida One Configuration datastore)
• Whatever the data strategy is (see #47 ), ensure the data is displayed in the corresponding pages

See #57 focused on personal information from Vault public profile
See #58 ,focused on on-chain assets (NFTs and SBTs)

URL of the Verida One profile schema:
https://common.schemas.verida.io/veridaOne/profile/latest/schema.json

Implement 'Not Found' profile page

If arriving on the webapp with a url that cannot be resolved. We should display a dedicated page informing the user and suggesting some actions.

• Get design from Excited
• Implement the page
• Set up the router to redirect to this page

Implement Verida React context, helpers and hook

Create a VeridaContext to handle connect, disconnect, access to Verida context, profile, etc.
If needed create a helper for the Verida operations.
Create a hook to simplify getting the React context.

Set up error handling and error boundaries

Handle Collectible not found in UI

If a viewer ends up in the "Collectible Details" page (for instance via URL), but the collectible cannot be found, we currently display a blank page, while we should display some information for the user.

• Get design
• Implement it

Note that our resolution of the Collectible involves if the Collectible is allowed to be shown by configuration, ie: the wallet address owning the collectible shall be part of the configuration, this Collectible is not explicitly in the "hidden" list in the configuration.

It means that even if an NFT (defined by its chain, contract address and token id) actually exists, we can consider it as "non-displayable" / "not found"

Replace 'Connect' button in header by CTA "Create profile"

This is temporary until the connection is supported

Fetch personal information from Vault public profile

Focused on the Verida public profile information (name, avatar, bio)

• Fetch data from the Verida Network (Vault public profile)
• Whatever the data strategy is (see #47 ), ensure the data is displayed in the Profile page

See #62 ,focused on the other data (links, wallets, ...)
See #58 ,focused on on-chain assets (NFTs and SBTs)

Implement Badges page (list of badges)

Handle empty list in the Collectible List page

If a viewer ends up in the "Collectible List" page (for instance via URL), but the list is empty, we currently display a blank page, while we should display some information for the user.

• Get design for empty list
• Implement it

Set up routes

Define the routes and set up the router