Provide missing data to validator snapshot cards

.changelog/1518.trivial.md

@@ -0,0 +1 @@
+Provide missing data to validator snapshot cards

src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx

@@ -1,28 +1,33 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchScope } from '../../../types/searchScope'
+import { useGetConsensusValidators } from '../../../oasis-nexus/api'
 import { Snapshot, StyledGrid } from '../../components/Snapshots/Snapshot'
+import { API_MAX_TOTAL_COUNT } from '../../config'
 import { SnapshotEpoch } from './SnapshotEpoch'
 import { SnapshotDelegators } from './SnapshotDelegators'
 import { SnapshotValidators } from './SnapshotValidators'
 import { SnapshotStaked } from './SnapshotStaked'
 
 export const ConsensusSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
+  const validatorsQuery = useGetConsensusValidators(scope.network, { limit: API_MAX_TOTAL_COUNT })
+  const validators = validatorsQuery.data?.data.validators
+  const stats = validatorsQuery.data?.data.stats
 
   return (
     <Snapshot title={t('consensusSnapshot.title')} scope={scope}>
       <StyledGrid item xs={22} md={5}>
         <SnapshotEpoch scope={scope} />
       </StyledGrid>
       <StyledGrid item xs={22} md={6}>
-        <SnapshotValidators scope={scope} />
+        <SnapshotValidators validators={validators} />
       </StyledGrid>
       <StyledGrid item xs={22} md={5}>
-        <SnapshotDelegators />
+        <SnapshotDelegators totalDelegators={stats?.total_delegators} />
       </StyledGrid>
       <StyledGrid item xs={22} md={6}>
-        <SnapshotStaked />
+        <SnapshotStaked totalStaked={stats?.total_staked_balance} ticker={stats?.ticker} />
       </StyledGrid>
     </Snapshot>
   )

src/app/pages/ConsensusDashboardPage/SnapshotDelegators.tsx

@@ -4,15 +4,17 @@ import Box from '@mui/material/Box'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { useScreenSize } from '../../hooks/useScreensize'
 
-export const SnapshotDelegators: FC = () => {
+type SnapshotDelegatorsProps = {
+  totalDelegators: number | undefined
+}
+
+export const SnapshotDelegators: FC<SnapshotDelegatorsProps> = ({ totalDelegators }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
-  // TODO: provide delegators number when API is ready
-  const delegators = undefined
 
   return (
     <SnapshotTextCard title={t('validator.delegators')}>
-      <Box sx={{ pb: isMobile ? 3 : 5 }}>{delegators}</Box>
+      {totalDelegators && <Box sx={{ pb: isMobile ? 3 : 5 }}>{totalDelegators.toLocaleString()}</Box>}
     </SnapshotTextCard>
   )
 }

src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx

@@ -3,13 +3,18 @@ import { Trans, useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
+import { Ticker } from '../../../types/ticker'
 import { RoundedBalance } from '../../components/RoundedBalance'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 
-export const SnapshotStaked: FC = () => {
+type SnapshotStakedProps = {
+  ticker: Ticker | undefined
+  totalStaked: string | undefined
+}
+
+export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker }) => {
   const { t } = useTranslation()
-  //  TODO: provide label and staked values when API is ready, validate percentageValue formatting
-  const staked = undefined
+  //  TODO: provide totalCirculation
   const percentageValue = undefined
 
   return (
@@ -43,9 +48,9 @@ export const SnapshotStaked: FC = () => {
         )
       }
     >
-      {staked && (
+      {totalStaked && (
         <Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
-          <RoundedBalance value={staked} />
+          <RoundedBalance value={totalStaked} ticker={ticker} compactLargeNumbers />
         </Box>
       )}
     </SnapshotTextCard>

src/app/pages/ConsensusDashboardPage/SnapshotValidators.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
-import { useGetConsensusValidators, Validator } from '../../../oasis-nexus/api'
-import { SearchScope } from '../../../types/searchScope'
+import { Validator } from '../../../oasis-nexus/api'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { PieChart } from '../../components/charts/PieChart'
-import { API_MAX_TOTAL_COUNT } from '../../config'
 
 type ValidatorsStats = {
   label: string
@@ -22,12 +20,12 @@ function countValidatorsState(t: TFunction, validators: Validator[] | undefined)
   ]
 }
 
-export const SnapshotValidators: FC<{ scope: SearchScope }> = ({ scope }) => {
-  const { t } = useTranslation()
-  const { network } = scope
+type SnapshotValidatorsProps = {
+  validators: Validator[] | undefined
+}
 
-  const validatorsQuery = useGetConsensusValidators(network, { limit: API_MAX_TOTAL_COUNT })
-  const validators = validatorsQuery.data?.data.validators
+export const SnapshotValidators: FC<SnapshotValidatorsProps> = ({ validators }) => {
+  const { t } = useTranslation()
 
   return (
     <SnapshotCard title={t('validator.listTitle')}>

src/oasis-nexus/api.ts

@@ -117,6 +117,10 @@ declare module './generated/api' {
   export interface Validator {
     ticker: Ticker
   }
+
+  export interface ValidatorAggStats {
+    ticker: Ticker
+  }
 }
 
 export const isAccountEmpty = (account: RuntimeAccount | Account) => {
@@ -1047,6 +1051,11 @@ export const useGetConsensusValidators: typeof generated.useGetConsensusValidato
           validators.forEach(validator => map.set(validator.entity_address, validator))
           return {
             ...data,
+            stats: {
+              ...data.stats,
+              total_staked_balance: fromBaseUnits(data.stats.total_staked_balance, consensusDecimals),
+              ticker,
+            },
             validators,
             map,
           }
@@ -1126,6 +1135,11 @@ export const useGetConsensusValidatorsAddress: typeof generated.useGetConsensusV
           return {
             ...data,
             validators,
+            stats: {
+              ...data.stats,
+              total_staked_balance: fromBaseUnits(data.stats.total_staked_balance, consensusDecimals),
+              ticker,
+            },
           }
         },
         ...arrayify(options?.request?.transformResponse),