[Portfolio] Your stakes

mitchellchou commented 2 years ago

As a likecoin owner, I want to see a list of which validators I have delegated so that I can arrange my coin or participate in governance.

Acceptance criteria

Positive

[x] I can see my delegated validators and associated info
[x] I can sort by each field (e.g. name, staked)
[x] I can click the validator and jump to its validator details page
[ ] Support pagination when I it has more than 5 items (not including 5)

Negative

[x] I can't see "Your Stakes" section when I don't have any stake or rewards (Possible to Unstake but still have unclaimed rewards)

General

[x] Support RWD

Content

NAME
STAKED: How much coin I staked in this validator
REWARDS: How much reward I can claim right now
EXPECTED RETURNS
VOTING POWER

Design

Figma

Reference

Please note that this API may be also used on validators page

mitchellchou commented 2 years ago

@Rico-Wong @chihimng @ivanng-oursky Confirmed with client, it's rare for people to stake a lot of validators (Let's say more than 5?), we can just handle it in the easiest way. e.g.

pagination, without sorting
pagination, frontend sorting
fixed height, scrollable, with or without sorting

ivanng-oursky commented 2 years ago

@Rico-Wong @chihimng @ivanng-oursky Confirmed with client, it's rare for people to stake a lot of validators (Let's say more than 5?), we can just handle it in the easiest way. e.g.

pagination, without sorting

pagination, frontend sorting

fixed height, scrollable, with or without sorting

IMO 3 would be easily implemented, since all stake rows are fetched and unpaginated when obtaining the total staked amount (used in your portfolio panel), that code can be reused.

1 and 2 involves reimplementing pagination with a page size of 4, since the cosmjs sdk doesn't allow specifying pagination page size, so additional work is needed.

ivanng-oursky commented 2 years ago

Since component requires data from both RPC server and bdjuno db, it is better fetch and combine both from the graphql server. Which will be handled in oursky/likedao#103.

Only UI will be implemented in this story.

oursky / likedao