Merge pull request #1518 from oasisprotocol/mz/stats

Sync with validators API changes and provide data to snapshot cards

.changelog/1518.trivial.md

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

src/app/components/Validators/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
-import { Validator } from '../../../oasis-nexus/api'
+import { Validator, ValidatorAggStats } from '../../../oasis-nexus/api'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { StatusIcon } from '../StatusIcon'
 import { RoundedBalance } from '../RoundedBalance'
@@ -18,9 +18,10 @@ type ValidatorsProps = {
   isLoading: boolean
   limit: number
   pagination: false | TablePaginationProps
+  stats: ValidatorAggStats | undefined
 }
 
-export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination, validators }) => {
+export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination, validators, stats }) => {
   const { t } = useTranslation()
   const { network } = useRequiredScopeParam()
 
@@ -71,9 +72,9 @@ export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination,
         align: TableCellAlign.Right,
         content: (
           <>
-            {typeof validator?.voting_power === 'number' && validator?.voting_power_total > 0
+            {typeof validator?.voting_power === 'number' && stats?.total_voting_power
               ? t('common.valuePair', {
-                  value: validator.voting_power / validator.voting_power_total,
+                  value: validator.voting_power / stats.total_voting_power,
                   formatParams: {
                     value: {
                       style: 'percent',

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/app/pages/ConsensusDashboardPage/Validators.tsx

@@ -47,6 +47,7 @@ export const ValidatorsCard: FC<{ scope: SearchScope }> = ({ scope }) => {
       <CardContent>
         <Validators
           validators={validatorsQuery.data?.data.validators}
+          stats={validatorsQuery.data?.data.stats}
           isLoading={validatorsQuery.isLoading}
           limit={limit}
           pagination={false}

src/app/pages/ProposalDetailsPage/index.tsx

@@ -70,7 +70,7 @@ const VoteLoadingProblemIndicator: FC = () => {
 }
 
 export const ProposalDetailView: FC<{
-  proposal: Proposal
+  proposal: Proposal | undefined
   highlightedPart?: string
   isLoading?: boolean
   totalVotesLoading?: boolean
@@ -91,6 +91,7 @@ export const ProposalDetailView: FC<{
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   if (isLoading) return <TextSkeleton numberOfRows={7} />
+  if (!proposal) return null
 
   const proposalType = getTypeNameForProposal(t, proposal)
 

src/app/pages/ProposalsPage/index.tsx

@@ -13,7 +13,6 @@ import { LoadMoreButton } from '../../components/LoadMoreButton'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { NetworkProposalsList } from '../../components/NetworkProposalsList'
 import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
-import { ValidatorDetailsView } from '../ValidatorDetailsPage'
 import { VerticalList } from '../../components/VerticalList'
 import { ProposalDetailView } from '../ProposalDetailsPage'
 
@@ -81,7 +80,7 @@ export const ProposalsPage: FC = () => {
           <VerticalList>
             {isLoading &&
               [...Array(PAGE_SIZE).keys()].map(key => (
-                <ValidatorDetailsView key={key} isLoading={true} validator={undefined} standalone />
+                <ProposalDetailView key={key} isLoading={true} proposal={undefined} standalone />
               ))}
             {!isLoading &&
               proposalsData?.proposals.map(proposal => (

src/app/pages/ValidatorDetailsPage/ValidatorSnapshot.tsx

@@ -11,15 +11,16 @@ import { SearchScope } from '../../../types/searchScope'
 import { UptimeCard } from './UptimeCard'
 import { VotingPowerCard } from './VotingPowerCard'
 import { BalanceDistributionCard } from './BalanceDistributionCard'
-import { Validator } from '../../../oasis-nexus/api'
+import { Validator, ValidatorAggStats } from '../../../oasis-nexus/api'
 import { StyledGrid } from '../../components/Snapshots/Snapshot'
 
 type ValidatorSnapshotProps = {
   scope: SearchScope
-  validator?: Validator
+  validator: Validator | undefined
+  stats: ValidatorAggStats | undefined
 }
 
-export const ValidatorSnapshot: FC<ValidatorSnapshotProps> = ({ scope, validator }) => {
+export const ValidatorSnapshot: FC<ValidatorSnapshotProps> = ({ scope, validator, stats }) => {
   const { t } = useTranslation()
 
   const theme = useTheme()
@@ -44,7 +45,7 @@ export const ValidatorSnapshot: FC<ValidatorSnapshotProps> = ({ scope, validator
           <BalanceDistributionCard validator={validator} />
         </StyledGrid>
         <StyledGrid item xs={22} md={6}>
-          <VotingPowerCard validator={validator} />
+          <VotingPowerCard validator={validator} stats={stats} />
         </StyledGrid>
         <StyledGrid item xs={22} md={5}>
           <UptimeCard />

src/app/pages/ValidatorDetailsPage/VotingPowerCard.tsx

@@ -2,16 +2,17 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import { Validator } from '../../../oasis-nexus/api'
+import { Validator, ValidatorAggStats } from '../../../oasis-nexus/api'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { COLORS } from 'styles/theme/colors'
 import { VerticalProgressBar } from 'app/components/ProgressBar'
 
 type VotingPowerCardProps = {
-  validator?: Validator
+  validator: Validator | undefined
+  stats: ValidatorAggStats | undefined
 }
 
-export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator }) => {
+export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator, stats }) => {
   const { t } = useTranslation()
 
   return (
@@ -26,14 +27,14 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator }) => {
       }
       withContentPadding={false}
     >
-      {typeof validator?.voting_power === 'number' && validator?.voting_power_total > 0 && (
+      {typeof validator?.voting_power === 'number' && stats?.total_voting_power && (
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             <Typography sx={{ fontSize: 12, color: COLORS.grayMedium, textAlign: 'left', paddingBottom: 3 }}>
               {t('validator.votingPowerOverall')}
             </Typography>
             {t('common.valuePair', {
-              value: validator.voting_power / validator.voting_power_total,
+              value: validator.voting_power / stats.total_voting_power,
               formatParams: {
                 value: {
                   style: 'percent',
@@ -46,7 +47,7 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator }) => {
             <VerticalProgressBar
               height={80}
               width={50}
-              value={(100 * validator.voting_power) / validator.voting_power_total}
+              value={(100 * validator.voting_power) / stats.total_voting_power}
               barWithBorder={false}
               barBackgroundColor={COLORS.grayMediumLight}
             />

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -6,7 +6,7 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
-import { Validator, useGetConsensusValidatorsAddress } from '../../../oasis-nexus/api'
+import { Validator, ValidatorAggStats, useGetConsensusValidatorsAddress } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp'
 import { RouterTabs } from '../../components/RouterTabs'
@@ -42,7 +42,8 @@ export const ValidatorDetailsPage: FC = () => {
   const { address } = useLoaderData() as AddressLoaderData
   const validatorQuery = useGetConsensusValidatorsAddress(scope.network, address)
   const { isLoading, data } = validatorQuery
-  const validator = data?.data
+  const validator = data?.data.validators[0]
+  const stats = data?.data.stats
   const transactionsLink = useHref('')
   const eventsLink = useHref(`events#${eventsContainerId}`)
   const delegatorsLink = useHref(`delegators#${delegatorsContainerId}`)
@@ -52,9 +53,9 @@ export const ValidatorDetailsPage: FC = () => {
   return (
     <PageLayout>
       <ValidatorTitleCard isLoading={isLoading} network={scope.network} validator={validator} />
-      <ValidatorSnapshot scope={scope} validator={validator} />
+      <ValidatorSnapshot scope={scope} validator={validator} stats={stats} />
       <Divider variant="layout" sx={{ mt: isMobile ? 4 : 0 }} />
-      <ValidatorDetailsCard isLoading={isLoading} validator={validator} />
+      <ValidatorDetailsCard isLoading={isLoading} validator={validator} stats={stats} />
       <Grid container spacing={4}>
         <StyledGrid item xs={12} md={6}>
           <StakingTrend address={address} scope={scope} />
@@ -80,13 +81,14 @@ export const ValidatorDetailsPage: FC = () => {
 type ValidatorDetailsCardProps = {
   isLoading: boolean
   validator: Validator | undefined
+  stats: ValidatorAggStats | undefined
 }
 
-const ValidatorDetailsCard: FC<ValidatorDetailsCardProps> = ({ isLoading, validator }) => {
+const ValidatorDetailsCard: FC<ValidatorDetailsCardProps> = ({ isLoading, validator, stats }) => {
   return (
     <Card>
       <CardContent>
-        <ValidatorDetailsView detailsPage isLoading={isLoading} validator={validator} />
+        <ValidatorDetailsView detailsPage isLoading={isLoading} validator={validator} stats={stats} />
       </CardContent>
     </Card>
   )
@@ -97,7 +99,8 @@ export const ValidatorDetailsView: FC<{
   isLoading?: boolean
   validator: Validator | undefined
   standalone?: boolean
-}> = ({ detailsPage, isLoading, validator, standalone = false }) => {
+  stats: ValidatorAggStats | undefined
+}> = ({ detailsPage, isLoading, validator, standalone = false, stats }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const formattedTime = useFormattedTimestampStringWithDistance(validator?.start_date)
@@ -140,12 +143,12 @@ export const ValidatorDetailsView: FC<{
               <dd>{validator.voting_power.toLocaleString()}</dd>
             </>
           )}
-          {typeof validator.voting_power === 'number' && validator.voting_power_total > 0 && (
+          {typeof validator.voting_power === 'number' && stats?.total_voting_power && (
             <>
               <dt>{t('validator.totalShare')}</dt>
               <dd>
                 {t('common.valuePair', {
-                  value: validator.voting_power / validator.voting_power_total,
+                  value: validator.voting_power / stats.total_voting_power,
                   formatParams: {
                     value: {
                       style: 'percent',

src/app/pages/ValidatorsPage/index.tsx

@@ -63,6 +63,7 @@ export const ValidatorsPage: FC = () => {
       >
         {tableView === TableLayout.Horizontal && (
           <Validators
+            stats={validatorsQuery.data?.data.stats}
             validators={validatorsQuery.data?.data.validators}
             isLoading={validatorsQuery.isLoading}
             limit={PAGE_SIZE}
@@ -79,11 +80,22 @@ export const ValidatorsPage: FC = () => {
           <VerticalList>
             {isLoading &&
               [...Array(PAGE_SIZE).keys()].map(key => (
-                <ValidatorDetailsView key={key} isLoading={true} validator={undefined} standalone />
+                <ValidatorDetailsView
+                  key={key}
+                  isLoading={true}
+                  validator={undefined}
+                  stats={undefined}
+                  standalone
+                />
               ))}
             {!isLoading &&
               validatorsData?.validators.map(validator => (
-                <ValidatorDetailsView key={validator.entity_address} validator={validator} standalone />
+                <ValidatorDetailsView
+                  key={validator.entity_address}
+                  validator={validator}
+                  stats={validatorsQuery.data?.data.stats}
+                  standalone
+                />
               ))}
           </VerticalList>
         )}