NFTs View - List View

[picarodias]

What is to be done?

• Implement the NFTs List View:
• Implement Mobile version.

Designs

• Desktop - Address information NFTs List view
  • Red square in NFT Image is just for alignment and resizing reference
• Mobile - Address information NFTs List view

Implementation Notes

• The Gallery/List View Toggle Buttons are out of scope, and will be implemented in an upcoming issue (NFTs View - Gallery View [Desktop Only] #439).
• The Collection Filter is out of scope, and will be implemented in an upcoming issue (NFTs View - Filter By Collection Dropdown #443)
• For Mobile:
  • There are some changes to component behaviour.
  • Check Requirements and Designs.

Tech Resources

• Address with NFTs:
  • NekqQM4kT6MESNoFjyrpnnFPi2au6VLkAU
• Ghostmarket NFT list for that same address:
  • https://ghostmarket.io/account/n3/NekqQM4kT6MESNoFjyrpnnFPi2au6VLkAU/?tab=available
  • Use this page only to test if we are returning the same content as Ghost Market.
• We should use Ghost Market API to fetch NFT attributes.
  • Ask @picarodias for the API Docs.

Technical Requirements

NFTs View

List of NFTs owned by the address.

NFTs List View

• For each NFT held a list item must be rendered.
• On page load: Render the first 6 NFT List Itens by default.
• button: Load More
  • (at the end of the list, renders the next 6 NFT List Items)

NFT List Item:

• image: Token image
  • (cropped to a circular frame | image Center aligned to the center of the Frame)
• image: Collection Icon
• text: Token Name
• text: Collection Name
• label: ID
  • number: Token ID
• button: Right Arrow Icon
  • (navigates to NFT Information Page for the given NFT)
• Attribute Component:
  • label: Attribute Key
  • text/number: Attribute Value
    • e.g.: LP Yield Increase: 1%,
  • (render as many Attribute Components as can be fitted in a single line)
• button: Plus Icon / Minus Icon
  • (Renders 2 more lines of attribute components of the given NFT)
  • If there are more attributes to display:
    • text: + X more
      • X = number of hidden attributes.
      • e.g.: + 20 more

Mobile Adjustments

Changes necessary for mobile implementation.

NFTs List View

Attribute Components are removed. Requirements are reduced to:

NFT List Item:

• image: Token image
  • (cropped to a square frame | image Center aligned to the center of the Frame)
• image: Collection Icon
• text: Collection Name
• text: Token Name
• label: ID
  • number: Token ID
• button: Right Arrow Icon
  • (navigates to NFT Information Page for the given NFT)

[EvCastie1]

the load more button is not showing, for viewing all NFTs and button the token figure are also not appearing.

[EvCastie1]

In the mobile version, the "lead more" button and the token figure are also not appearing.

[EvCastie1]

the "load more" button was implemented in both the desktop and mobile versions.