Collection Page

[filipmanole]

Implementing #22 #11

• Fetching NFT ids by filtering past events.
• Fetching metadata in chunks while scrolling.

[filipmanole]

Short preview:

[ghost]

How to start your PR:

https://github.com/airswap/airswap-marketplace/blob/main/CONTRIBUTING.md#pr-description

[filipmanole]

Short video showing the collection page:
https://www.loom.com/share/b1d66dd9755e4123873a121e6797c33b

[ghost]

Looks good. Things are working nicely. I added some commits to make it more solid:

1. Your fetchNFTMetadata was not setup properly. You only have to make it return a promise and then get the responses in a reducer with the pending, fulfilled, and rejected. So I removed all the collection reducers because they are simply not necessary.

2. You had an await fetchCallback() inside the useInfiniteScroll. You should keep all async logic inside the store. So I added an isLoading to the collection store.

3. I removed configureCollectionSubscriber. I understand it's confusing that there's also a configureBalancesSubscriber and configureMetadataSubscriber. But those subscribers are there because those stores can not be called from a specific widget. The collection store is connected to the CollectionWidget, so actions can be called from there.

4. You used a lot of grid in your css. It's only necessary when you're using a grid, like the nfts grid. So I left it there only.

5. You had a onClick prop on NftCard and used navigate for navigation. You should simply use NavLink without any listeners.

6. You had classNames like collection-widget__content__subtitle, while technically correct it's better to just use collection-widget__subtitle.

Things that still need work I have made tickets for:

Infinite scroll and loader needs some work still:
#45

IERC1155 support:
#46

Price of token:
#47

Error handling:
#48

Add support for irregular token id numbers
#49