bitshares / bitshares/bitshares-ui

[2.5][react-cat] Restyling of Market Picker

Open
#3,038 6 comments 0 reactions 0 assignees View on GitHub
[1c] Task [3] Enhancement [5b] Small
Dominant language
JavaScript
Stars
520
Forks
575
Avg merge
12h 7m
Merged PRs (30d)
5

Description

@react-cat of course. Summarizing all this made me realize that it may need some more time. I've increased it to be 1.5 hrs. Mainly because table pagination and the starred asset handling requires some work. Also note that you should use `noTip` on the `` to hide the popup.

Market picker can be found by clicking on the asset names of the market pair on the Exchange. (note `1` below)

In the market picker window I would like to change these things. (Note `2` below).

**New table structure**

⭐|Asset|Owner|Info
-|-|-|-
⭐|gdex.EOS❓|gdex-team|[Link]
⭐|open.EOS❓|gdex-team|[Link]
-|gdex.BTC❓|gdex-team|[Link]

1. The list should be a table, structured like mentioned above. It should have pagination if required and display 10 assets per page to not make it to long.
2. No scrollbar
3. When nothing is searched for it should use the defaultValue that all other tables use when there is nothing to view, just look on other tables.

~First column is starred if the user has the asset as a favorite. For now we should use the list from the landing page, which is added from the search market (note `3` below). It could be refined later. Starred are wildcards, so for example `EOS` will be `*EOS*` so it will match any EOS asset. This column has no action.~

**UPDATED** On a second thought, the asset should have a star if it's matching a starred market pair.

Second column is the asset name, behind it is a `?` which will display the asset information details. This columns action will be to change asset pair.

Third column is asset creator. Column action is same as second column.

Fourth column will link to the asset information page. I don't know what an appropriate icon would be here. Perhaps a button would do as well. Could be `[Asset Info]`.

# 1
![image](https://user-images.githubusercontent.com/12114550/62160875-47b15580-b315-11e9-8c37-939072cae551.png)

# 2
![image](https://user-images.githubusercontent.com/12114550/62161038-a1b21b00-b315-11e9-809d-9935fd2325b5.png)

# 3

### Landing Page
![image](https://user-images.githubusercontent.com/12114550/62161789-3bc69300-b317-11e9-8bff-8a7cec8c0152.png)

### On Exchange Page
![image](https://user-images.githubusercontent.com/12114550/62161996-965fef00-b317-11e9-9898-8ec09313efe6.png)

_Originally posted by @startailcoon in https://github.com/bitshares/bitshares-ui/issues/2931#issuecomment-516582004_

Contributor guide

Open the contributing guide

Research direction

Open the market picker from asset names on the Exchange and compare its current behavior with the other tables, especially their empty-state defaultValue. Confirm how the landing page and starred market pairs are represented, then implement the requested table, pagination, asset details and information link behavior, including noTip on AssetName. Done means 10 assets per page, no scrollbar, correct stars, and the specified columns and actions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.