pass the statistic values as props

Joystream · Jul 24, 2023 · afd3e5a · afd3e5a
1 parent ab8a2dd
commit afd3e5a
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 18 deletions.
diff --git a/packages/ui/src/app/pages/Validators/ValidatorList.tsx b/packages/ui/src/app/pages/Validators/ValidatorList.tsx
@@ -7,17 +7,43 @@ import { Era } from '@/validators/components/statistics/Era'
 import { Rewards } from '@/validators/components/statistics/Rewards'
 import { Staking } from '@/validators/components/statistics/Staking'
 import { ValidatorsState } from '@/validators/components/statistics/ValidatorsState'
+import { useStakingStatistics } from '@/validators/hooks/useStakingStatistics'
 
 export const ValidatorList = () => {
+ const {
+ eraStartedOn,
+ eraDuration,
+ now,
+ eraRewardPoints,
+ totalRewards,
+ lastRewards,
+ idealStaking,
+ currentStaking,
+ stakingPercentage,
+ activeValidatorsCount,
+ allValidatorsCount,
+ acitveNominatorsCount,
+ allNominatorsCount,
+ } = useStakingStatistics()
+
  return (
  <PageLayout
  header={
  <RowGapBlock gap={24}>
  <Statistics>
- <ValidatorsState />
- <Staking />
- <Era />
- <Rewards />
+ <ValidatorsState
+ activeValidatorsCount={activeValidatorsCount}
+ allValidatorsCount={allValidatorsCount}
+ acitveNominatorsCount={acitveNominatorsCount}
+ allNominatorsCount={allNominatorsCount}
+ />
+ <Staking
+ idealStaking={idealStaking}
+ currentStaking={currentStaking}
+ stakingPercentage={stakingPercentage}
+ />
+ <Era eraStartedOn={eraStartedOn} eraDuration={eraDuration} now={now} eraRewardPoints={eraRewardPoints} />
+ <Rewards totalRewards={totalRewards} lastRewards={lastRewards} />
  </Statistics>
  </RowGapBlock>
  }

diff --git a/packages/ui/src/validators/components/statistics/Era.tsx b/packages/ui/src/validators/components/statistics/Era.tsx
@@ -1,3 +1,5 @@
+import { Option, u64 } from '@polkadot/types'
+import { PalletStakingEraRewardPoints } from '@polkadot/types/lookup'
 import React, { useMemo } from 'react'
 
 import { PercentageChart } from '@/common/components/charts/PercentageChart'
@@ -10,9 +12,15 @@ import {
  formatDurationDate,
 } from '@/common/components/statistics'
 import { DurationValue } from '@/common/components/typography/DurationValue'
-import { useStakingStatistics } from '@/validators/hooks/useStakingStatistics'
-export const Era = () => {
- const { eraStartedOn, eraDuration, now, eraRewardPoints } = useStakingStatistics()
+
+interface EraProps {
+ eraStartedOn: Option<u64> | undefined
+ eraDuration: number
+ now: u64 | undefined
+ eraRewardPoints: PalletStakingEraRewardPoints | undefined
+}
+
+export const Era = ({ eraStartedOn, eraDuration, now, eraRewardPoints }: EraProps) => {
  const { nextReward, percentage } = useMemo(() => {
  const nextReward =
  eraDuration && now && eraStartedOn ? Number(eraDuration) - (now.toNumber() - Number(eraStartedOn)) : undefined

diff --git a/packages/ui/src/validators/components/statistics/Rewards.tsx b/packages/ui/src/validators/components/statistics/Rewards.tsx
@@ -3,10 +3,13 @@ import React from 'react'
 
 import { StatisticItem, StatisticItemSpacedContent, StatisticLabel } from '@/common/components/statistics'
 import { TokenValue } from '@/common/components/typography'
-import { useStakingStatistics } from '@/validators/hooks/useStakingStatistics'
 
-export const Rewards = () => {
- const { totalRewards, lastRewards } = useStakingStatistics()
+interface RewardsProps{
+ totalRewards: BN | undefined,
+ lastRewards: BN | undefined
+}
+
+export const Rewards = ({ totalRewards, lastRewards }: RewardsProps) => {
 
  return (
  <StatisticItem
@@ -18,7 +21,7 @@ export const Rewards = () => {
  >
  <StatisticItemSpacedContent>
  <StatisticLabel>Month</StatisticLabel>
- <TokenValue size="l" value={new BN(totalRewards ?? 0)} />
+ <TokenValue size="l" value={totalRewards} />
  </StatisticItemSpacedContent>
  <StatisticItemSpacedContent>
  <StatisticLabel> Last </StatisticLabel>

diff --git a/packages/ui/src/validators/components/statistics/Staking.tsx b/packages/ui/src/validators/components/statistics/Staking.tsx
@@ -1,12 +1,17 @@
+import { BN } from '@polkadot/util'
 import React from 'react'
 
 import { StatisticItem, StatisticItemSpacedContent, StatisticLabel } from '@/common/components/statistics'
 import { TokenValue } from '@/common/components/typography'
 import { Colors } from '@/common/constants'
-import { useStakingStatistics } from '@/validators/hooks/useStakingStatistics'
 
-export const Staking = () => {
- const { idealStaking, currentStaking, stakingPercentage } = useStakingStatistics()
+interface StakingProps {
+ idealStaking: BN
+ currentStaking: BN
+ stakingPercentage: number
+}
+
+export const Staking = ({ idealStaking, currentStaking, stakingPercentage }: StakingProps) => {
  const Percentage = (
  <StatisticLabel>
  Percentage <span style={{ color: Colors.Blue[400], fontSize: 16 }}> {stakingPercentage} </span>%

diff --git a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx
@@ -1,11 +1,20 @@
 import React from 'react'
 
 import { NumericValue, StatisticItem, StatisticItemSpacedContent, StatisticLabel } from '@/common/components/statistics'
-import { useStakingStatistics } from '@/validators/hooks/useStakingStatistics'
 
-export const ValidatorsState = () => {
- const { activeValidatorsCount, allValidatorsCount, acitveNominatorsCount, allNominatorsCount } =
- useStakingStatistics()
+interface ValidatorsStateProps {
+ activeValidatorsCount: number
+ allValidatorsCount: number
+ acitveNominatorsCount: number
+ allNominatorsCount: number
+}
+
+export const ValidatorsState = ({
+ activeValidatorsCount,
+ allValidatorsCount,
+ acitveNominatorsCount,
+ allNominatorsCount,
+}: ValidatorsStateProps) => {
  return (
  <StatisticItem
  title="validators and Nominators"