Refactor PercentageValue component

Author: buberdds

.changelog/2404.bugfix.md

@@ -1 +1 @@
-Fix voting power percentage value formatting
+Refactor PercentageValue component

src/app/components/PercentageValue/index.tsx

@@ -3,21 +3,17 @@ import { useTranslation } from 'react-i18next'
 import { calculatePercentage } from '../../utils/number-utils'
 
 type PercentageValueProps = {
-  adaptMaximumFractionDigits?: boolean
-  total?: number | string
   value: number | string | undefined
-  maximumFractionDigits?: number
-  threshold?: number
-  fractionDigitsForSmallValues?: number
+  total?: number | string
+  fractionDigits?: number
+  adaptive?: boolean
 }
 
 export const PercentageValue: FC<PercentageValueProps> = ({
-  maximumFractionDigits = 0,
-  adaptMaximumFractionDigits = false,
   value,
   total = 100,
-  threshold = 0.001,
-  fractionDigitsForSmallValues = 3,
+  fractionDigits = 2,
+  adaptive = false,
 }) => {
   const { t } = useTranslation()
 
@@ -27,17 +23,17 @@ export const PercentageValue: FC<PercentageValueProps> = ({
     return null
   }
 
+  // Show 3 fraction digits for very small percentages (< 0.01%)
+  const maximumFractionDigits = adaptive && percentageValue < 0.0001 ? 3 : fractionDigits
+
   return (
     <>
       {t('common.valuePair', {
         value: percentageValue,
         formatParams: {
           value: {
             style: 'percent',
-            maximumFractionDigits:
-              adaptMaximumFractionDigits && percentageValue < threshold
-                ? fractionDigitsForSmallValues
-                : maximumFractionDigits,
+            maximumFractionDigits,
           } satisfies Intl.NumberFormatOptions,
         },
       })}

src/app/components/UptimeStatus/index.tsx

@@ -55,10 +55,7 @@ export const UptimeStatus: FC<UptimeStatusProps> = ({ uptime, small }) => {
         ))}
       </div>
       {uptime?.window_uptime && uptime?.window_length && (
-        <PercentageValue
-          value={(uptime.window_uptime / uptime.window_length) * 100}
-          maximumFractionDigits={1}
-        />
+        <PercentageValue value={(uptime.window_uptime / uptime.window_length) * 100} fractionDigits={1} />
       )}
     </div>
   )

src/app/components/Validators/ValidatorCommission.tsx

@@ -6,5 +6,5 @@ type ValidatorCommissionProps = {
 }
 
 export const ValidatorCommission: FC<ValidatorCommissionProps> = ({ commission }) => {
-  return <PercentageValue value={commission} total={100000} />
+  return <PercentageValue value={commission} total={100000} fractionDigits={0} />
 }

src/app/components/Validators/ValidatorCumulativeVoting.tsx

@@ -30,7 +30,7 @@ export const ValidatorCumulativeVoting: FC<ValidatorCumulativeVotingProps> = ({
         }}
       />
       <span className="relative z-10">
-        <PercentageValue value={value} total={total} />
+        <PercentageValue value={value} total={total} fractionDigits={0} />
       </span>
     </div>
   )

src/app/components/Validators/index.tsx

@@ -77,15 +77,8 @@ export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination,
       {
         align: TableCellAlign.Right,
         content: (
-          <PercentageValue
-            value={validator.voting_power}
-            total={stats?.total_voting_power}
-            adaptMaximumFractionDigits
-            threshold={0.01}
-            fractionDigitsForSmallValues={2}
-          />
+          <PercentageValue value={validator.voting_power} total={stats?.total_voting_power} adaptive />
         ),
-
         key: 'voting',
       },
       {

src/app/pages/ConsensusDashboardPage/SnapshotEpoch.tsx

@@ -68,7 +68,7 @@ export const SnapshotEpoch: FC<{ scope: SearchScope }> = ({ scope }) => {
               <PercentageValue
                 value={completedBlocksInCurrentEpoch}
                 total={epochDiffHeight}
-                maximumFractionDigits={1}
+                fractionDigits={1}
               />
               )
             </>

src/app/pages/ValidatorDetailsPage/VotingPowerCard.tsx

@@ -36,12 +36,7 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator, stats })
               max={stats.total_voting_power}
               label={
                 <span className="font-bold">
-                  <PercentageValue
-                    adaptMaximumFractionDigits
-                    value={validator.voting_power}
-                    total={stats.total_voting_power}
-                    maximumFractionDigits={2}
-                  />
+                  <PercentageValue value={validator.voting_power} total={stats.total_voting_power} adaptive />
                 </span>
               }
             />

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -239,8 +239,7 @@ export const ValidatorDetailsView: FC<{
                     <PercentageValue
                       value={validator.voting_power}
                       total={stats.total_voting_power}
-                      adaptMaximumFractionDigits
-                      threshold={0.01}
+                      adaptive
                     />
                     &nbsp; ({new BigNumber(validator.voting_power).toFormat()})
                   </>
@@ -311,11 +310,7 @@ export const ValidatorDetailsView: FC<{
           </dd>
           <dt>{t('validator.voting')}</dt>
           <dd>
-            <PercentageValue
-              value={validator.voting_power}
-              total={stats?.total_voting_power}
-              adaptMaximumFractionDigits
-            />
+            <PercentageValue value={validator.voting_power} total={stats?.total_voting_power} adaptive />
           </dd>
           <dt>{t('common.staked')}</dt>
           <dd>