Move percentage logic to number utils

Author: buberdds

src/app/components/LabeledProgress/index.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { Progress } from '@oasisprotocol/ui-library/src/components/progress'
-import BigNumber from 'bignumber.js'
+import { calculatePercentage } from '../../utils/number-utils'
 
 type LabeledProgresssProps = {
   value?: number | string
@@ -9,19 +9,12 @@ type LabeledProgresssProps = {
 }
 
 export const LabeledProgress: FC<LabeledProgresssProps> = ({ value, max, label }) => {
-  if (!value || !max) {
-    return null
-  }
+  const percentage = calculatePercentage(value, max)
 
-  const progressValue = new BigNumber(value)
-  const progressMax = new BigNumber(max)
-
-  if (!progressValue || !progressMax || progressMax.lte(0)) {
+  if (percentage === null) {
     return null
   }
 
-  const percentage = progressValue.div(progressMax).multipliedBy(100).toNumber()
-
   return (
     <div className="w-full relative">
       <Progress value={percentage} className="h-8 bg-muted-foreground rounded-[8px]" />

src/app/components/PercentageValue/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import BigNumber from 'bignumber.js'
+import { calculatePercentage } from '../../utils/number-utils'
 
 type PercentageValueProps = {
   adaptMaximumFractionDigits?: boolean
@@ -17,19 +17,12 @@ export const PercentageValue: FC<PercentageValueProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  if (value === undefined || value === null || total === undefined || total === null) {
-    return null
-  }
+  const percentageValue = calculatePercentage(value, total, false)
 
-  const votes = new BigNumber(value)
-  const totalVotes = new BigNumber(total)
-
-  if (!votes || !totalVotes || totalVotes.lte(0)) {
+  if (percentageValue === null) {
     return null
   }
 
-  const percentageValue = votes.div(totalVotes).toNumber()
-
   return (
     <>
       {t('common.valuePair', {

src/app/components/Validators/ValidatorCumulativeVoting.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { PercentageValue } from '../PercentageValue'
-import BigNumber from 'bignumber.js'
+import { calculatePercentage } from '../../utils/number-utils'
 
 type ValidatorCumulativeVotingProps = {
   containerMarginThemeSpacing: number
@@ -13,19 +13,12 @@ export const ValidatorCumulativeVoting: FC<ValidatorCumulativeVotingProps> = ({
   value,
   total,
 }) => {
-  if (value === undefined || value === null || total === undefined || total === null) {
-    return null
-  }
+  const percentage = calculatePercentage(value, total)
 
-  const votes = new BigNumber(value)
-  const totalVotes = new BigNumber(total)
-
-  if (!votes || !totalVotes || totalVotes.lte(0)) {
+  if (percentage === null) {
     return null
   }
 
-  const percentage = votes.div(totalVotes).multipliedBy(100).toNumber()
-
   return (
     <div className="flex-1 relative text-center">
       <div

src/app/utils/number-utils.ts

@@ -17,3 +17,23 @@ export const getGasPrice = ({ fee = '', gasUsed = '' }): string | null => {
 }
 
 export const convertToNano = (value: string): string => fromBaseUnits(value, -9)
+
+export const calculatePercentage = (
+  value: number | string | undefined,
+  total: number | string | undefined,
+  asPercentage: boolean = true,
+): number | null => {
+  if (value === undefined || value === null || total === undefined || total === null) {
+    return null
+  }
+
+  const valueBN = new BigNumber(value)
+  const totalBN = new BigNumber(total)
+
+  if (!valueBN || !totalBN || totalBN.lte(0)) {
+    return null
+  }
+
+  const result = valueBN.div(totalBN)
+  return asPercentage ? result.multipliedBy(100).toNumber() : result.toNumber()
+}