frontend-monorepo
frontend-monorepo copied to clipboard
New markets page list view
Story
As a user I want a much nicer looking market summary page So that I have a good place to look at all markets and choose one
Acceptance Criteria
- [ ] There is a list of all active markets as shown in the sketch
- [ ] The list shows
- [x] Code and name
- [x] Price (use mark for perp / fut and last traded for spot)
- [x] 24h change in value and % plus a spark line
- [x] 24h volume in contracts and in USD terms (assume we will only settle in USD equivalents for now)
- [ ] Open interest in contracts and USD terms (as above)
- [x] There is a panel at the top shown the top network wide 24h volume. Need to make an API request for this, but can loop over markets for now if needed
- [x] There is a panel at the top showing the total TVL ... that should be easier .. its on DefILlama I think and probably is elsewhere too, might need to run some read function on the asset pool contract and do it for each active asset?
- [x] There is a panel showing the top gainers, ie. sorted by biggest 24h change
- [x] There is a panel showing new listsing which is just the 3 most recent opening timestamps on the network
- [ ] You can leave the toggle for tile view for now
- [ ] If the market is in status other than continuous trading indicate this with icons to follow shortly
Sketch
https://www.figma.com/file/ywcCZvXdvG28bg0AmCY9mF/Console-v3?type=design&node-id=6030-34216&mode=design&t=6l6qTRkC2tzvPOLv-0
Additional details / background info
Filters
- Filter list to exclude all settled or terminated markets
- A "quick filter" for these will be added in the next ticket but for now remove them
Status Icons
- A list of icons to express the following statuses should be displayed when they are appropriate:
- Proposed
- Opening auction
- Monitoring auction
- Suspended
- Terminated
- Settled
Just need a set of icons to be added and then we're done.
Will quite quickly need the filtering to be added so we can show the closed markets before someone complains about this.