reservoirprotocol / marketplace-v1 Goto Github PK

Add a collection explorer for the www subdomain.

• Add a bit more padding to left of reservoir.market logo
• Add a bit more padding to right of wallet address
• Reduce padding between header and banner
• Center banner
• Increase font size of collection name
• Increase size of collection logo
• Make collection data 2 lines
• Remove faint line that appears on the left and right of the collection header (see screenshot below)
  

• There's no way to cancel listing. Let's do it same as cancelling offer
• While cancelling, the buy now button copy changed to pending. Only the cancel copy should
• After the cancellation was successful, it still showed button to cancel. Didn't happen every time, but definitely once. Maybe a race condition where API hasn't updated. Similar to when making purchases, we should poll API to make sure it is updated before changing state

The goal should be that a user can check out the repo, run it locally, and it works out of the box. I got two different errors when I tried to do this.

On the root URL:

error - lib/params.ts (11:41) @ eval
TypeError: Cannot read properties of undefined (reading 'toString')
   9 | ) {
  10 |   Object.keys(query).map((key) =>
> 11 |     url.searchParams.set(key, query[key].toString())
     |                                         ^
  12 |   )
  13 | }

And when using a subdomain, it failed if I did not specify open sea api key. What is this used for? Also why does it say that an infura key is needed? What is that used for?

• Remove gradient from banner image
• Round corners of banner image
• Move collection logo, name and data below the banner
• Move Buy for 100 ETH and Make Collection Bid buttons below banner

• Hide power by reservoir
• Increase width of search bar so all text is visible
• Decrease size of collections and display in two columns so that more can be seen

When I click this button, nothing happens.

Reservoir.market is a demo marketplace designed to show how simple it is to build on top of Reservoir, a web3-native order book protocol.

It supports 3 modes:

• Single collection community: cryptocoven.reservoir.market
• Multi collection community: bayc.reservoir.market
• All collections: www.reservoir.market

It comes with all the functionality you expect (browsing, listing, buying, etc), as well as powerful new features like trait exploration and bidding.

It's open-source, and ready to be forked. Just add lore.

Learn more about our project here.

The breakpoints should include padding in their calculation, so that you never experience the page without padding

When a user clicks on the 'powered by reservoir' icon open a pop up modal that contains information about Reservoir and how they can fork the repo.

Copy:

What is Reservoir?
Reservoir is a web3-native NFT order book protocol and framework powering marketplaces and tools all sharing a global pool of liquidity.
Learn more

What is this sample app for?
This is a sample marketplace built to highlight some of the functionality you can access immediately when building with Reservoir.

Check out some other examples below:

General Marketplace
https://reservoir.market/

Bored Ape Yacht Club Collection Marketplace
https://boredapeyachtclub.reservoir.market/

BAYC Community Marketplace
https://bayc.reservoir.market/

All of our sample marketplaces are fully functional but we also encourage developers to fork our GitHub repository here.

Acceptance criteria:

• 'Learn more' links to https://reservoirprotocol.github.io/
• 'fork our GitHub repository here' likes to sample app repo
• Don't display the example link for the marketplace the user is current on. Eg. If I am on the general marketplace, only list the Bored Ape Yacht Club Collection Marketplace and BAYC Community Marketplace examples.
• User can close the modal

As discussed, it should be possible to set the collection / community via ENV variable. This should be checked first, and override the subdomain:

NEXT_PUBLIC_COLLECTION={collection-slug}
NEXT_PUBLIC_COMMUNITY={community-id}

This might have been done already, but I couldn't find it. I updated README to reflect this, so let's make sure it matches the described behavior.

When filtered onto a specific attribute, the 'Make a collection bid' button will become 'Make an attribute bid' button. The user can the click this button and make a bid on a specific attribute.

• Add margin to left and right side of collection pages and token pages on mobile web

• Filter out collections where "tokenSetId": null (eg Decentraland and The Sandbox)

• Replace 'Sample Marketplace' with 'Your Logo Here' in top left corner
• Replace 'WELCOME TO OUR SAMPLE MARKETPLACE!' with 'Discover, buy and sell NFTs'
• Replace 'Fork me on GitHub' with 'powered by reservoir' (do this on collection and community pages too)

1. I make an offer for 0.01 ETH

Expected:
Total cost with royalty should be 0.011 and displayed offer should be 0.01

Actual:
Top offer is appearing as 0.0099

• Increase background blur to 15px

• When displaying collection logos use cover instead of contain
• When displaying collection logos use circles instead of squares
• Make these changes anywhere a collection logo appears on the site (general market home, search, collection page etc)

Acceptance criteria:

• Add 'Buy for {attribute floor} ETH' button to allow user to instantly buy cheapest token from the attribute
• Add 'Make an attribute bid' button to open attribute bid module

Steps to reproduce:

1. Visit https://crazy-babies-official.reservoir.market/
2. Click Explore Al
3. Switch to Table view
4. Click The Lost Zombie Baby
5. User is navigated to broken URL: https://crazy-babies-official.reservoir.market/collections/undefined?attributes%5BName%5D=The+Lost+Zombie+Baby

Purple:
6B4EE2

White:
FFFFFF

High Floor = floorSellValue DESC
Top Offer = topBuyValue DESC

This attribute has a top offer of 0.012 ETH. However when viewing it in grid view, the offer field is empty.

Also, when you switch to table view. The Top Offer is listed at 0.01, which is also incorrect.

This is working on general and community marketplaces but not collection marketplaces. Eg. https://cryptocoven.reservoir.market/

Use this order:
https://mainnet-api-v4.reservoir.tools/collections?community=bayc&sortBy=floorCap&sortDirection=desc

• Change background color to white
• Add drop shadows to token cards on collection pages and home page
• When user hovers over card increase drop shadow (eg. https://www.gem.xyz/collection/0xed5af388653567af2f388e6224dc7c4b3241c544/)

Acceptance criteria:

• Update 'Your Logo Here' to be reservoir.market logo
• Update 'powered by reservoir' to be 'What is reservoir.market?' -> This should still open pop-up modal when clicked.
• Add collection banner and gradient to each collection page
• Update collection title and status
• Add 'Buy for {collection floor} ETH' button to allow user to instantly buy cheapest token from collection
• Add 'Make a collection bid' button to open collection bid module
• Update attributes filtering and sorting options from reservoir.app

Note: Where designs use Ξ symbol please replace with eth icon:

• Add more padding between left side of search box and 'Search for an NFT collection' text
• Show top results when clicking in search box
• It appears to takes double time to render result after receiving response from backend. Can this be improved?

If user clicks on these buttons, prompt them to connect their wallets.

• the total cost doesn't include the fee
• i don't think you need to show the amount of fees, just the percentage
• can we make it a bit wider, so that weth notice doesn't wrap
• let's move the weth notice under the total cost. it's confusing why it's wrapping more than my input amount until i've seen fees
• it doesn't make sense to have a tick box for posting a collection wide offer. instead, the modal will always be triggered with either a token, collection or attribute, and the logic should differ for each. i'll do quick mocks of the variations
• i actually have WETH. but when i tested this, I was connected to mainnet, which i assume is why it got my balance wrong. let's add the warning banner, and also not let you access the modals until you're connected to correct network
• let's use the ETH image instead of the 3 lines. looks a lot cleaner
• the total cost amount should be bigger and bold
• let's make the expiry selection a drop-down, so it's clean on one line
• Rename the open sea option to "Also post to Open Sea"

See new modal mocks here: https://www.figma.com/file/g11iTdlOPKsP1uXJ9TXxBG/Community-Marketplace?node-id=0%3A1

For example:
For general marketplace use reservoir.market logo (reservoir.market)
For Bored Apes Yacht Club use Bored Apes Yacht Club logo (boredapesyachtclub.reservoir.market)
For Bored Apes Community use BAYC logo (bayc.reservoir.market)

Acceptance criteria:

• Update 'Your Logo Here' to be reservoir.market logo
• Update 'powered by reservoir' to be 'What is reservoir.market?' -> This should still open pop-up modal when clicked.
• Update styling of collections (removing price data) and only display top 16
• When user searches for collection it should navigate to /collection/{collection-id} not the subdomain

Acceptance criteria:

• Update 'Your Logo Here' to be reservoir.market logo
• Update 'powered by reservoir' to be 'What is reservoir.market?' -> This should still open pop-up modal when clicked.
• Update styling of collections (removing price data) and center them on the page