bancorprotocol / webapp-v3

Bancor V3 dApp
https://app.bancor.network
MIT License
19 stars 23 forks source link

Create Total Holdings chart #20

Open zavelevsky opened 2 years ago

zavelevsky commented 2 years ago

epic: #18

ashachaf commented 2 years ago

as a user, i would like to have visibility to my historical holdings in a nice chart visual. this chart will show my the value of my stake in Bancor v3 against holding the tokens in my wallet over time.

Data collection

this part is still being defined https://docs.google.com/document/d/1Xx8TFWT_VUR_9qzBnQLbbjO9_w3GKA0iA-ieXicYjaw/edit#heading=h.9yichxoez1kt

Mockup

https://www.figma.com/file/fwADI9wqDrRAdlMX8EddCw/Bancor-v3?node-id=10639%3A342489

Chart elements

Top left data

this section will show the user's value based on the lifetime value regardless to the range selection. //needs validation

  1. Total holdings -> USD value of your current pool tokens & staked pool tokens & standard rewards. this data will be available in the API
  2. left USD indicator -> the USD value your gains.
  3. right % indicator -> the ROI

Top right range selector

Important - chart default range selector should be lifetime Important - all points refer to the first point in the time range. i.e. point for 1 minute = the first data in the 1min range (out of first, last, high, low)

Chart lines and tool tips

Data display

TBA

Bottom left

guide to help explain what are the lines and their meanings Text: Earning vs HODL tool tip: Based on your deposited tokens, gray line indicates the value if you only held in your wallet against the blue line that shows their current value as they earn fees and rewards

Bottom right

data "freshnes" indication Test: Last update hh:mm logic -> when new data is available, we should indicate when it was pulled and displayed on the site

pingustar commented 2 years ago

placeholder/prototype chart component is added in the PR #39 - no logic, just mocked data as of now.