reservoirprotocol / marketplace-v1 Goto Github PK

Purple:
6B4EE2

White:
FFFFFF

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

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)

• 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)
  

• 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/)

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

• 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

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?

• 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)

Add a collection explorer for the www subdomain.

• 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

High Floor = floorSellValue DESC
Top Offer = topBuyValue DESC

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.

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

• 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)

• Increase background blur to 15px

When I click this button, nothing happens.

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

• 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

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

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.

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

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

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.

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

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.

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

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:

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

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

• 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?

• 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