Update validator list columns #4643
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
chrlschwb
added
community-dev
| @@ -19,8 +19,10 @@ export const ValidatorsList = ({ validators }: ValidatorsListProps) => { | |||
| <ListHeader>Validator</ListHeader> | |||
| <ListHeader>Verification</ListHeader> | |||
There was a problem hiding this comment.
Please add a tooltip next to the "Verification" column header: 
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 ?
There was a problem hiding this comment.
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>Expected Nom APR</ListHeader> | ||
| <ListHeader>Comission</ListHeader> |
There was a problem hiding this comment.
The table should be sort-able by "Expected Nom APR" and "Commission"
| <ListHeader>APR</ListHeader> | ||
| <ListHeader>Own Stake</ListHeader> | ||
| <ListHeader>Total Stake</ListHeader> | ||
| <ListHeader>Expected Nom APR</ListHeader> |
There was a problem hiding this comment.
I know it's not in the design but personally I could really use a tooltip on "Expected Nom APR" !
WDYT @dmtrjsg ?
There was a problem hiding this comment.
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."
| @@ -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, | |||
There was a problem hiding this comment.
Please add a function in @/common/utils.ts (next to clamp):
export const perbillToPercent = (perbill: BN) => perbill.toNumber() / 10 ** 7and use it here to clarify the code a bit.
| isDescending={sortByApr === 'desc'} | ||
| > | ||
| Expected Nom APR | ||
| <Tooltip tooltipText="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."> |
There was a problem hiding this comment.
I think it would be nice to clarify how this APR was calculated so I'm proposing to add:
This is calculated as follow:
Last reward extrapolated over a yeartimesThe nominator commissiondivided byThe total staked by the validator
@eshark9312 could you confirm this description is accurate.
@bwhm could you confirm this is actually how it should be calculated.
| useEffect(() => { | ||
| if (!sortByApr) return | ||
| setSortedValidators(sortedValidators.sort((a, b) => (sortByApr === 'desc' ? a.APR - b.APR : b.APR - a.APR))) | ||
| }, [sortByApr]) | ||
|
|
||
| useEffect(() => { | ||
| if (!sortByCommission) return | ||
| setSortedValidators( | ||
| sortedValidators.sort((a, b) => | ||
| sortByCommission === 'desc' ? a.commission - b.commission : b.commission - a.commission | ||
| ) | ||
| ) | ||
| }, [sortByCommission]) |
There was a problem hiding this comment.
From this code the validators can only be sorted by 1 col at a time but if APR is "desc" and the user click on commission: validators are now sorted by commission "desc" only but it looks like it sorted by both APR and commission. Another problem is that there's one useEffect per sorted columns.
Instead you could have something like:
const [sortBy, setSortBy] = useState<'address' | 'apr' | 'commission'>('address')
const [isDescending, setDescending] = useState(false)
Co-authored-by: Theophile Sandoz <[email protected]>
> Design
> Story