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.

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

4326-Validators list - Page and widgets #4375

Merged
merged 47 commits into from
Jul 25, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
269099f
Add Validators Module to the side menu and add tabs to validators page
eshark9312 May 2, 2023
4bcb114
Add widgets
eshark9312 May 3, 2023
fe54303
fix widgets
eshark9312 May 4, 2023
3a2a812
display info modal on first open the page
eshark9312 May 4, 2023
6eefcff
get the staking informations using polkadot api
eshark9312 May 9, 2023
9a6a799
add validators list filter
eshark9312 May 12, 2023
fcd9a14
fix widgets component and hook, add last reward
eshark9312 May 23, 2023
2b87f8f
add validators' list- draft
eshark9312 May 23, 2023
796a230
add 'Total rewards', but not beyond history depth
eshark9312 May 24, 2023
15ce7ef
remove filter and search box
eshark9312 Jun 1, 2023
f972f42
fix validator page notification modal
eshark9312 Jun 13, 2023
08bb363
lint:fix
eshark9312 Jun 13, 2023
bec3a5c
Update packages/ui/src/validators/components/widgets/Era.tsx
eshark9312 Jun 14, 2023
ae82669
Update packages/ui/src/validators/components/widgets/Era.tsx
eshark9312 Jun 14, 2023
5880a41
Update packages/ui/src/validators/components/widgets/Rewards.tsx
eshark9312 Jun 14, 2023
c0c5e9a
Update packages/ui/src/validators/components/widgets/Rewards.tsx
eshark9312 Jun 15, 2023
f0374df
rename 'widgets' to 'statistics','validators.tsx' to 'validatorlist.tsx'
eshark9312 Jun 15, 2023
22f9602
add 'nominators' to the widget
eshark9312 Jun 16, 2023
b4c7c46
add staking percentage to the widget
eshark9312 Jun 16, 2023
e264e1e
add blocks and points to the widget
eshark9312 Jun 16, 2023
5d09ef6
fix validators page notification modal
eshark9312 Jun 16, 2023
d5f34f2
fix the counter for active nominators
eshark9312 Jun 19, 2023
e225bb6
fix the format of staking value
eshark9312 Jun 19, 2023
484a510
yarn lint:fix
eshark9312 Jun 19, 2023
480cd09
remove route, sidebar item, tab, dashboard, modal
eshark9312 Jun 22, 2023
94fd84f
add storybook for validator list page statistics
eshark9312 Jun 26, 2023
970824a
fix storybook, remove unused variables
eshark9312 Jun 27, 2023
44b3f4a
Update packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
eshark9312 Jun 28, 2023
97f5b58
Update packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
eshark9312 Jun 28, 2023
b027c79
Update packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
eshark9312 Jun 28, 2023
3f38195
Make story values more readable
thesan Jun 29, 2023
0b24a80
Add a special case for `unwrap` methods
thesan Jun 29, 2023
bde8bb7
Assign an object to unwrap
thesan Jun 29, 2023
384c159
Update packages/ui/src/common/components/charts/PercentageChart.tsx
eshark9312 Jun 30, 2023
889dd70
Update packages/ui/src/validators/constants/constant.ts
eshark9312 Jun 30, 2023
59de400
Update packages/ui/src/validators/hooks/useStakingStatistics.tsx
eshark9312 Jun 30, 2023
4f77503
Update packages/ui/src/validators/hooks/useStakingStatistics.tsx
eshark9312 Jun 30, 2023
18809bc
Update packages/ui/src/validators/hooks/useStakingStatistics.tsx
eshark9312 Jun 30, 2023
79214f2
fix rewardPoints
eshark9312 Jun 30, 2023
b757b1e
remove InfoModal
eshark9312 Jun 30, 2023
7cf3349
fix asChainData helper
eshark9312 Jul 21, 2023
e0d19fb
Simplify chain unwrapped mocks
thesan Jul 24, 2023
25ce568
move ERA_DRATION to common/constant/number
eshark9312 Jul 24, 2023
ab8a2dd
remove the default value for activeEra, assign undefined instead
eshark9312 Jul 24, 2023
afd3e5a
pass the statistic values as props
eshark9312 Jul 24, 2023
4a11d92
fix some code to make it clear
eshark9312 Jul 24, 2023
43c3824
fix some issue in Era widget
eshark9312 Jul 24, 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
3 changes: 1 addition & 2 deletions packages/ui/src/validators/components/statistics/Era.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ interface EraProps {

export const Era = ({ eraStartedOn, eraDuration, now, eraRewardPoints }: EraProps) => {
const { nextReward, percentage } = useMemo(() => {
const nextReward =
eraDuration && now && eraStartedOn ? Number(eraDuration) - (now.toNumber() - Number(eraStartedOn)) : undefined
const nextReward = now && eraStartedOn && eraDuration - Number(now) - Number(eraStartedOn)
const totalDuration = Number(eraDuration)
const percentage = nextReward ? Math.floor(100 - (nextReward / totalDuration) * 100) : 0
return {
Expand Down
5 changes: 2 additions & 3 deletions packages/ui/src/validators/components/statistics/Rewards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import React from 'react'
import { StatisticItem, StatisticItemSpacedContent, StatisticLabel } from '@/common/components/statistics'
import { TokenValue } from '@/common/components/typography'

interface RewardsProps{
totalRewards: BN | undefined,
interface RewardsProps {
totalRewards: BN | undefined
lastRewards: BN | undefined
}

export const Rewards = ({ totalRewards, lastRewards }: RewardsProps) => {

return (
<StatisticItem
title="Rewards"
Expand Down
14 changes: 10 additions & 4 deletions packages/ui/src/validators/hooks/useStakingStatistics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,17 @@ export const useStakingStatistics = () => {

const now = useObservable(() => api?.query.timestamp.now(), [api?.isConnected])
const totalIssuance = useObservable(() => api?.query.balances.totalIssuance(), [api?.isConnected])
const currentStaking = useObservable(() => activeEra ? api?.query.staking.erasTotalStake(activeEra.eraIndex):undefined, [activeEra, api?.isConnected])
const currentStaking = useObservable(
() => activeEra && api?.query.staking.erasTotalStake(activeEra.eraIndex),
[activeEra, api?.isConnected]
)
const activeValidators = useObservable(() => api?.query.session.validators(), [api?.isConnected])
const stakers = useObservable(() => {
if (activeValidators && api)
return activeEra ? combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address))): undefined
return (
activeEra &&
Copy link
Member

Choose a reason for hiding this comment

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

Last really small detail but this code is mixing an if statement and a js type coercion/short-circuit evaluation (I'm not sure what to call it actually 😅). To keep the code clearer please chose one of these 2

Either the if statement:

const stakers = useObservable(() => {
  if (activeValidators && api && activeEra)
    return combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address)))
...

Or:

const stakers = useObservable(() =>
  activeValidators && api && activeEra &&
    combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address)))
...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have modified the code according to your review so that the storybook seems to be good now.
And in the Piechart, 100% is never displayed in any case.

combineLatest(activeValidators.map((address) => api.query.staking.erasStakers(activeEra.eraIndex, address)))
)
}, [api?.isConnected, activeValidators, activeEra])
const acitveNominators = useMemo(() => {
const nominators = stakers?.map((validator) => validator.others.map((nominator) => nominator.who.toString()))
Expand All @@ -35,7 +41,7 @@ export const useStakingStatistics = () => {
const allValidatorsCount = useObservable(() => api?.query.staking.counterForValidators(), [api?.isConnected])
const allNominatorsCount = useObservable(() => api?.query.staking.counterForNominators(), [api?.isConnected])
const lastValidatorRewards = useObservable(
() => activeEra ? api?.query.staking.erasValidatorReward(activeEra.eraIndex.subn(1)) :undefined,
() => activeEra && api?.query.staking.erasValidatorReward(activeEra.eraIndex.subn(1)),
[activeEra, api?.isConnected]
)
const totalRewards = useObservable(() => api?.derive.staking.erasRewards(), [api?.isConnected])
Expand All @@ -44,7 +50,7 @@ export const useStakingStatistics = () => {
[currentStaking, totalIssuance]
)
const eraRewardPoints = useObservable(
() => activeEra ? api?.query.staking.erasRewardPoints(activeEra.eraIndex): undefined,
() => activeEra && api?.query.staking.erasRewardPoints(activeEra.eraIndex),
[activeEra, api?.isConnected]
)
return {
Expand Down