Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update validator list columns #4643

Merged
merged 13 commits into from
Dec 7, 2023
Merged

Update validator list columns #4643

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f1cad4c
update colums
eshark9312 Nov 23, 2023
37309ed
sort validators list
eshark9312 Nov 28, 2023
d88782c
fix storybook
eshark9312 Nov 28, 2023
655918f
Update packages/ui/src/validators/components/ValidatorsList.tsx
eshark9312 Nov 30, 2023
4356888
fix validatorlist sort
eshark9312 Dec 1, 2023
d97d1f7
fix sortedValidators
eshark9312 Dec 1, 2023
b1009e4
Merge remote-tracking branch 'origin/dev' into update-validators-list…
eshark9312 Dec 4, 2023
bc55bc3
update type of Validator
eshark9312 Dec 4, 2023
9d27b60
update storybook
eshark9312 Dec 4, 2023
1af4264
fix
eshark9312 Dec 4, 2023
2395f88
lint fix
eshark9312 Dec 4, 2023
ea01220
update interaction test, mocking
eshark9312 Dec 5, 2023
4a2840d
update validator list sort order
eshark9312 Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/ui/src/validators/components/ValidatorItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface ValidatorItemProps {
validator: Validator
}
export const ValidatorItem = ({ validator }: ValidatorItemProps) => {
const { address, member, isVerified, isActive, totalRewards, APR } = validator
const { address, member, isVerified, isActive, commission, APR, staking } = validator

return (
<ValidatorItemWrapper>
Expand All @@ -31,8 +31,10 @@ export const ValidatorItem = ({ validator }: ValidatorItemProps) => {
<BadgeStatus inverted size="l">
{isActive ? 'active' : 'waiting'}
</BadgeStatus>
<TokenValue size="xs" value={totalRewards} />
<TextMedium bold>{APR}</TextMedium>
<TokenValue size="xs" value={staking.own} />
<TokenValue size="xs" value={staking.total} />
<TextMedium bold>{APR}%</TextMedium>
<TextMedium bold>{commission}%</TextMedium>
<ButtonPrimary size="small">Nominate</ButtonPrimary>
</ValidatorItemWrap>
</ValidatorItemWrapper>
Expand All @@ -53,7 +55,7 @@ const ValidatorItemWrapper = styled.div`

export const ValidatorItemWrap = styled.div`
display: grid;
grid-template-columns: 250px 80px 80px 120px 80px 120px;
grid-template-columns: 250px 80px 80px repeat(5, 120px);
grid-template-rows: 1fr;
justify-content: space-between;
justify-items: end;
Expand Down
8 changes: 5 additions & 3 deletions packages/ui/src/validators/components/ValidatorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ export const ValidatorsList = ({ validators }: ValidatorsListProps) => {
<ListHeader>Validator</ListHeader>
<ListHeader>Verification</ListHeader>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a tooltip next to the "Verification" column header: image

The copy could be something like:

The profile of Verified validator has been entirely verified by the Membership working group.

But it would be better to have the link point at the "About" tab and add the Working group description to this tab. See #4654

WDYT @dmtrjsg ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes its a good idea, and we could just add the description to the "About" section which is exactly the same as the are on the working group cards on the WG landing page where they are shown as a list.

<ListHeader>State</ListHeader>
<ListHeader>Total Reward</ListHeader>
<ListHeader>APR</ListHeader>
<ListHeader>Own Stake</ListHeader>
<ListHeader>Total Stake</ListHeader>
<ListHeader>Expected Nom APR</ListHeader>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's not in the design but personally I could really use a tooltip on "Expected Nom APR" !

WDYT @dmtrjsg ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooltip is 100% warranted.

Text: "This column shows the expected APR for nominators who are nominating funds for the chosen validator. The APR is subject to the amount staked and have a diminishing return for higher token amounts."

<ListHeader>Comission</ListHeader>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The table should be sort-able by "Expected Nom APR" and "Commission"

image

</ListHeaders>
<List>
{validators?.map((validator) => (
Expand Down Expand Up @@ -55,7 +57,7 @@ const ListHeaders = styled.div`
display: grid;
grid-area: validatorstablenav;
grid-template-rows: 1fr;
grid-template-columns: 250px 80px 80px 120px 80px 120px;
grid-template-columns: 250px 80px 80px repeat(5, 120px);
justify-content: space-between;
width: 100%;
padding-left: 16px;
Expand Down
9 changes: 9 additions & 0 deletions packages/ui/src/validators/hooks/useValidatorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,15 @@ export const useValidatorsList = () => {
isActive: activeValidators.includes(address),
totalRewards: rewardHistory.reduce((total: BN, data) => total.add(data.eraReward), new BN(0)),
APR: apr,
commission: validatorInfo.commission.toNumber() / 10 ** 7,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a function in @/common/utils.ts (next to clamp):

export const perbillToPercent = (perbill: BN) => perbill.toNumber() / 10 ** 7

and use it here to clarify the code a bit.

staking: {
total: stakingInfo.total.toBn(),
own: stakingInfo.own.toBn(),
others: stakingInfo.others.map((nominator) => ({
address: nominator.who.toString(),
staking: nominator.value.toBn(),
})),
},
}
})
)
Expand Down
9 changes: 9 additions & 0 deletions packages/ui/src/validators/types/Validator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,13 @@ export interface Validator {
isActive: boolean
totalRewards: BN
APR: number
commission: number
staking: {
total: BN
own: BN
others: {
address: Address
staking: BN
}[]
}
}