Align components with API changes and keep backward compatibility

Author: buberdds

.changelog/2399.bugfix.md

@@ -0,0 +1 @@
+Prepare Explorer for incoming breaking changes in Nexus API

src/app/components/LabeledProgress/index.tsx

@@ -1,9 +1,10 @@
 import { FC, ReactNode } from 'react'
 import { Progress } from '@oasisprotocol/ui-library/src/components/progress'
+import BigNumber from 'bignumber.js'
 
 type LabeledProgresssProps = {
-  value?: number
-  max?: number
+  value?: number | string
+  max?: number | string
   label: ReactNode
 }
 
@@ -12,9 +13,18 @@ export const LabeledProgress: FC<LabeledProgresssProps> = ({ value, max, label }
     return null
   }
 
+  const progressValue = new BigNumber(value)
+  const progressMax = new BigNumber(max)
+
+  if (!progressValue || !progressMax || progressMax.lte(0)) {
+    return null
+  }
+
+  const percentage = progressValue.div(progressMax).multipliedBy(100).toNumber()
+
   return (
     <div className="w-full relative">
-      <Progress value={(value / max) * 100} className="h-8 bg-muted-foreground rounded-[8px]" />
+      <Progress value={percentage} className="h-8 bg-muted-foreground rounded-[8px]" />
       <span className="absolute inset-y-0 left-3 flex items-center text-white text-xs font-normal">
         {label}
       </span>

src/app/components/PercentageValue/index.tsx

@@ -1,10 +1,11 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import BigNumber from 'bignumber.js'
 
 type PercentageValueProps = {
   adaptMaximumFractionDigits?: boolean
-  total?: number
-  value: number | undefined
+  total?: number | string
+  value: number | string | undefined
   maximumFractionDigits?: number
 }
 
@@ -16,11 +17,18 @@ export const PercentageValue: FC<PercentageValueProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {
+  if (value === undefined || value === null || total === undefined || total === null) {
     return null
   }
 
-  const percentageValue = value / total
+  const votes = new BigNumber(value)
+  const totalVotes = new BigNumber(total)
+
+  if (!votes || !totalVotes || totalVotes.lte(0)) {
+    return null
+  }
+
+  const percentageValue = votes.div(totalVotes).toNumber()
 
   return (
     <>

src/app/components/Validators/ValidatorCumulativeVoting.tsx

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

src/app/pages/ValidatorDetailsPage/VotingPowerCard.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
+import BigNumber from 'bignumber.js'
 import { Validator, ValidatorAggStats } from '../../../oasis-nexus/api'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { LabeledProgress } from 'app/components/LabeledProgress'
@@ -18,13 +19,13 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator, stats })
     <SnapshotTextCard
       title={t('validator.votingPower')}
       label={
-        typeof validator?.voting_power === 'number' && (
-          <Typography>({validator?.voting_power.toLocaleString()})</Typography>
+        validator?.voting_power !== undefined && (
+          <Typography>({new BigNumber(validator?.voting_power).toFormat()})</Typography>
         )
       }
       withContentPadding={false}
     >
-      {typeof validator?.voting_power === 'number' && stats?.total_voting_power && (
+      {validator?.voting_power !== undefined && stats?.total_voting_power && (
         <>
           <Typography className="font-normal text-xs text-muted-foreground text-left pb-2">
             {t('validator.votingPowerOverall')}

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData } from 'react-router-dom'
 import { Card, CardContent } from '@oasisprotocol/ui-library/src/components/cards'
+import BigNumber from 'bignumber.js'
 import {
   Validator,
   ValidatorAggStats,
@@ -229,17 +230,17 @@ export const ValidatorDetailsView: FC<{
               <dd>{formattedTime}</dd>
             </>
           )}
-          {typeof validator.voting_power === 'number' && (
+          {validator.voting_power !== undefined && (
             <>
               <dt>{t('validator.votingPower')}</dt>
               <dd>
                 {stats?.total_voting_power ? (
                   <>
                     <PercentageValue value={validator.voting_power} total={stats.total_voting_power} />
-                    &nbsp; ({validator.voting_power.toLocaleString()})
+                    &nbsp; ({new BigNumber(validator.voting_power).toFormat()})
                   </>
                 ) : (
-                  validator.voting_power.toLocaleString()
+                  new BigNumber(validator.voting_power).toFormat()
                 )}
               </dd>
             </>