Merge pull request #1524 from oasisprotocol/mz/cumulativeVoting

Provide data to render cumulative voting

Author: buberdds

.changelog/1524.trivial.md

@@ -0,0 +1 @@
+Provide data to render cumulative voting

src/app/components/PercentageValue/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type PercentageValueProps = {
+  adaptMaximumFractionDigits?: boolean
+  total: number | undefined
+  value: number | undefined
+}
+
+export const PercentageValue: FC<PercentageValueProps> = ({ adaptMaximumFractionDigits, value, total }) => {
+  const { t } = useTranslation()
+
+  if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {
+    return null
+  }
+
+  const percentageValue = value / total
+
+  return (
+    <>
+      {t('common.valuePair', {
+        value: percentageValue,
+        formatParams: {
+          value: {
+            style: 'percent',
+            maximumFractionDigits: adaptMaximumFractionDigits && percentageValue < 0.001 ? 3 : 2,
+          } satisfies Intl.NumberFormatOptions,
+        },
+      })}
+    </>
+  )
+}

src/app/components/Validators/ValidatorCommission.tsx

@@ -1,24 +1,10 @@
 import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
+import { PercentageValue } from '../PercentageValue'
 
 type ValidatorCommissionProps = {
   commission: number
 }
 
 export const ValidatorCommission: FC<ValidatorCommissionProps> = ({ commission }) => {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      {t('common.valuePair', {
-        value: commission / 100000,
-        formatParams: {
-          value: {
-            style: 'percent',
-            maximumFractionDigits: 2,
-          } satisfies Intl.NumberFormatOptions,
-        },
-      })}
-    </>
-  )
+  return <PercentageValue value={commission} total={100000} />
 }

src/app/components/Validators/ValidatorCumulativeVoting.tsx

@@ -2,10 +2,11 @@ import { FC } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
+import { PercentageValue } from '../PercentageValue'
 
 const StyledBox = styled(Box, {
   shouldForwardProp: prop => prop !== 'value' && prop !== 'containerMarginThemeSpacing',
-})<ValidatorCumulativeVotingProps>(({ containerMarginThemeSpacing, value, theme }) => ({
+})<Omit<ValidatorCumulativeVotingProps, 'total'>>(({ containerMarginThemeSpacing, value, theme }) => ({
   position: 'relative',
   textAlign: 'center',
   '&::before': {
@@ -22,18 +23,24 @@ const StyledBox = styled(Box, {
 
 type ValidatorCumulativeVotingProps = {
   containerMarginThemeSpacing: number
-  value: number
+  value: number | undefined
+  total: number | undefined
 }
 
 export const ValidatorCumulativeVoting: FC<ValidatorCumulativeVotingProps> = ({
   containerMarginThemeSpacing,
   value,
+  total,
 }) => {
+  if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {
+    return null
+  }
+
   return (
     <Box sx={{ flex: 1 }}>
-      <StyledBox value={value} containerMarginThemeSpacing={containerMarginThemeSpacing}>
+      <StyledBox value={(value / total) * 100} containerMarginThemeSpacing={containerMarginThemeSpacing}>
         <Typography component="span" sx={{ position: 'relative', zIndex: 2 }}>
-          {value ? value : '-'}
+          <PercentageValue value={value} total={total} />
         </Typography>
       </StyledBox>
     </Box>

src/app/components/Validators/index.tsx

@@ -12,6 +12,7 @@ import { ValidatorCumulativeVoting } from './ValidatorCumulativeVoting'
 import { ValidatorLink } from './ValidatorLink'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { BalancesDiff } from '../BalancesDiff'
+import { PercentageValue } from '../PercentageValue'
 
 type ValidatorsProps = {
   validators?: Validator[]
@@ -64,26 +65,23 @@ export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination,
       },
       {
         align: TableCellAlign.Right,
-        // TODO: provide cumulative voting when it is implemented in the API
-        content: <ValidatorCumulativeVoting containerMarginThemeSpacing={5} value={0} />,
+        content: (
+          <ValidatorCumulativeVoting
+            containerMarginThemeSpacing={5}
+            value={validator.voting_power_cumulative}
+            total={stats?.total_voting_power}
+          />
+        ),
         key: 'cumulativeVoting',
       },
       {
         align: TableCellAlign.Right,
         content: (
-          <>
-            {typeof validator?.voting_power === 'number' && stats?.total_voting_power
-              ? t('common.valuePair', {
-                  value: validator.voting_power / stats.total_voting_power,
-                  formatParams: {
-                    value: {
-                      style: 'percent',
-                      maximumFractionDigits: 2,
-                    } satisfies Intl.NumberFormatOptions,
-                  },
-                })
-              : t('common.missing')}
-          </>
+          <PercentageValue
+            value={validator.voting_power}
+            total={stats?.total_voting_power}
+            adaptMaximumFractionDigits
+          />
         ),
 
         key: 'voting',

src/app/pages/ValidatorDetailsPage/VotingPowerCard.tsx

@@ -6,6 +6,7 @@ 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'
+import { PercentageValue } from '../../components/PercentageValue'
 
 type VotingPowerCardProps = {
   validator: Validator | undefined
@@ -33,15 +34,7 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator, stats })
             <Typography sx={{ fontSize: 12, color: COLORS.grayMedium, textAlign: 'left', paddingBottom: 3 }}>
               {t('validator.votingPowerOverall')}
             </Typography>
-            {t('common.valuePair', {
-              value: validator.voting_power / stats.total_voting_power,
-              formatParams: {
-                value: {
-                  style: 'percent',
-                  maximumFractionDigits: 2,
-                } satisfies Intl.NumberFormatOptions,
-              },
-            })}
+            <PercentageValue value={validator.voting_power} total={stats.total_voting_power} />
           </Box>
           <Box sx={{ paddingTop: 4 }}>
             <VerticalProgressBar

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -28,6 +28,7 @@ import { ValidatorDetailsContext } from './hooks'
 import { debondingContainerId, delegatorsContainerId } from './tabAnchors'
 import { ValidatorStatusBadge } from './ValidatorStatusBadge'
 import { eventsContainerId } from './../../pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard'
+import { PercentageValue } from '../../components/PercentageValue'
 
 export const StyledGrid = styled(Grid)(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
@@ -147,15 +148,7 @@ export const ValidatorDetailsView: FC<{
             <>
               <dt>{t('validator.totalShare')}</dt>
               <dd>
-                {t('common.valuePair', {
-                  value: validator.voting_power / stats.total_voting_power,
-                  formatParams: {
-                    value: {
-                      style: 'percent',
-                      maximumFractionDigits: 2,
-                    } satisfies Intl.NumberFormatOptions,
-                  },
-                })}
+                <PercentageValue value={validator.voting_power} total={stats.total_voting_power} />
               </dd>
             </>
           )}
@@ -194,7 +187,11 @@ export const ValidatorDetailsView: FC<{
           </dd>
           <dt>{t('validator.cumulativeVoting')}</dt>
           <dd>
-            <ValidatorCumulativeVoting containerMarginThemeSpacing={4} value={0} />
+            <ValidatorCumulativeVoting
+              containerMarginThemeSpacing={5}
+              value={validator.voting_power_cumulative}
+              total={stats?.total_voting_power}
+            />
           </dd>
           <dt>{t('validator.voting')}</dt>
           <dd>-</dd>