Private NFT: Explore collection

[aguycalled]

This task consists on finishing the CollectionScreen screen in the branch private-nfts

This screen receives a parameter collection from MainWallet.

This object stores the items from the collection owned by the wallet:

collection = {
  items: {
    confirmed: {},
    pending: {}
  }
}

confirmed and pending are dictionaries where the key is the nft id and the value is the metadata of the nft.

Tasks:

• Ask sakdeniz to send you a few NFTs from the marketplace to your private account address for testing purposes.
• Ask sakdeniz information about the format he uses in the marketplace for NFTs metadata.
• This screen must render a grid where the thumbnail of each NFT is shown. Items in pending must show some visual sign that they are pending (for example, with opacity = 0.7).
• Tapping a NFT must redirect to a new screen where the NFT is shown full size together with the other parameters from the metadata.

Considerations

• The NFT resources (thumbnail, or the NFT itself) can be hosted in a normal web server or in IPFS. Both options should be supported. IPFS content should be cached and only fetched once.
• To start with, only images need to be supported. In the future more content like audio and video will need to be supported. Sync with sakdeniz about what formats does the marketplace support.

[tsejerome]

Normal View

Pending Art

[aguycalled]

I think items need some padding (both expanded and in collection view)

[tsejerome]

wdym padding in collection view, referenced from instagram there is no padding on the left and right, only between items. Do you want more padding between items?

For expanded view, I checked major app like facebook and instagram, they did full view so they didn't have any padding around the images.

[tsejerome]

Updates: working on IPFS integration..
IPFS is not fully ready for react-native and it leads to an issue as attached. There are current polyfills for fixing it and it will take time to experiment it. References: ipfs/js-ipfs#3404

[aguycalled]

maybe a border for each item (like instagram has), can help to differentiate between them in a collection.
for the expanded view, what about adding a bg color to the item? to cover cases where the image background is transparent