Prepare Explorer for incoming breaking changes in Nexus API

.changelog/2399.bugfix.md

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

src/app/components/LabeledProgress/index.tsx

@@ -1,20 +1,23 @@
 import { FC, ReactNode } from 'react'
 import { Progress } from '@oasisprotocol/ui-library/src/components/progress'
+import { calculatePercentage } from '../../utils/number-utils'
 
 type LabeledProgresssProps = {
-  value?: number
-  max?: number
+  value?: number | string
+  max?: number | string
   label: ReactNode
 }
 
 export const LabeledProgress: FC<LabeledProgresssProps> = ({ value, max, label }) => {
-  if (!value || !max) {
+  const percentage = calculatePercentage(value, max)
+
+  if (percentage === null) {
     return null
   }
 
   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 { calculatePercentage } from '../../utils/number-utils'
 
 type PercentageValueProps = {
   adaptMaximumFractionDigits?: boolean
-  total?: number
-  value: number | undefined
+  total?: number | string
+  value: number | string | undefined
   maximumFractionDigits?: number
 }
 
@@ -16,12 +17,12 @@ export const PercentageValue: FC<PercentageValueProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {
+  const percentageValue = calculatePercentage(value, total, false)
+
+  if (percentageValue === null) {
     return null
   }
 
-  const percentageValue = value / total
-
   return (
     <>
       {t('common.valuePair', {

src/app/components/Validators/ValidatorCumulativeVoting.tsx

@@ -1,23 +1,24 @@
 import { FC } from 'react'
 import { PercentageValue } from '../PercentageValue'
+import { calculatePercentage } from '../../utils/number-utils'
 
 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) {
+  const percentage = calculatePercentage(value, total)
+
+  if (percentage === null) {
     return null
   }
 
-  const percentage = (value / total) * 100
-
   return (
     <div className="flex-1 relative text-center">
       <div

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>
             </>

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()
+}