Replace BrandProgressBar with custom Oasis UI Library component

Author: buberdds

src/app/components/ProgressBar/index.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import Box from '@mui/material/Box'
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
 import { styled } from '@mui/material/styles'
 import { COLORS } from 'styles/theme/colors'
+import { Progress } from '@oasisprotocol/ui-library/src/components/progress'
 
 type VerticalProgressBarProps = {
   value: number
@@ -43,11 +44,23 @@ const StyledLinearProgress = styled(LinearProgress, {
   ...(barBackgroundColor && { backgroundColor: barBackgroundColor }),
 }))
 
-export const BrandProgressBar = styled(LinearProgress)(() => ({
-  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
-    backgroundColor: COLORS.brandDark,
-  },
-  borderColor: COLORS.grayLight,
-  backgroundColor: COLORS.grayLight,
-  height: '12px',
-}))
+type CustomProgressProps = {
+  value?: number
+  max?: number
+  label: ReactNode
+}
+
+export const CustomProgress: FC<CustomProgressProps> = ({ value, max, label }) => {
+  if (!value || !max) {
+    return null
+  }
+
+  return (
+    <div className="w-full relative">
+      <Progress value={(value / max) * 100} 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>
+    </div>
+  )
+}

src/app/pages/ConsensusDashboardPage/SnapshotEpoch.tsx

@@ -5,7 +5,8 @@ import { useGetConsensusEpochs } from '../../../oasis-nexus/api'
 import { useGetStatus } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
-import { BrandProgressBar } from '../../components/ProgressBar'
+import { PercentageValue } from '../../components/PercentageValue'
+import { CustomProgress } from '../../components/ProgressBar'
 
 // We need to get the previous epoch to compute end_height for the current one
 // This may not be precise during abnormal network conditions, but such conditions never happened so far
@@ -18,17 +19,17 @@ export const SnapshotEpoch: FC<{ scope: SearchScope }> = ({ scope }) => {
   const epochsQuery = useGetConsensusEpochs(scope.network, { limit: epochsLimit })
   const epochs = epochsQuery.data?.data.epochs
   const epoch = epochs?.length && epochs[0].id
-  let percentageValue = undefined
+  let epochDiffHeight = undefined
+  let completedBlocksInCurrentEpoch = undefined
 
   if (epochs && epochs[1]?.end_height && blockHeight) {
-    const epochDiffHeight = epochs[1]?.end_height - epochs[1]?.start_height
-    const completedBlocksInCurrentEpoch = blockHeight - epochs[0]?.start_height
-    percentageValue = completedBlocksInCurrentEpoch / epochDiffHeight
+    epochDiffHeight = epochs[1]?.end_height - epochs[1]?.start_height + 1
+    completedBlocksInCurrentEpoch = blockHeight - epochs[0]?.start_height
   }
 
   return (
     <SnapshotTextCard
-      title={t('currentEpoch')}
+      title={t('snapshotEpochTitle')}
       label={
         blockHeight !== undefined && (
           <Typography className="font-normal flex gap-2 items-center">
@@ -46,30 +47,21 @@ export const SnapshotEpoch: FC<{ scope: SearchScope }> = ({ scope }) => {
       }
     >
       {epoch !== undefined && (
-        <>
-          {percentageValue !== undefined && (
-            <div className="-mt-2 mb-2">
-              <BrandProgressBar value={percentageValue * 100} variant="determinate" />
-            </div>
-          )}
-          <div className="flex items-baseline gap-2">
-            {epoch.toLocaleString()}
-            {percentageValue !== undefined && (
-              <Typography variant="xsmall" textColor="muted">
-                (
-                {t('common.valuePair', {
-                  value: percentageValue,
-                  formatParams: {
-                    value: {
-                      style: 'percent',
-                    } satisfies Intl.NumberFormatOptions,
-                  },
-                })}
-                )
-              </Typography>
-            )}
-          </div>
-        </>
+        <CustomProgress
+          value={completedBlocksInCurrentEpoch}
+          max={epochDiffHeight}
+          label={
+            <>
+              <span className="font-bold">{completedBlocksInCurrentEpoch}</span>/{epochDiffHeight} (
+              <PercentageValue
+                value={completedBlocksInCurrentEpoch}
+                total={epochDiffHeight}
+                maximumFractionDigits={1}
+              />
+              )
+            </>
+          }
+        />
       )}
     </SnapshotTextCard>
   )

src/locales/en/translation.json

@@ -200,11 +200,11 @@
     }
   },
   "consensusSnapshot": {
-    "blockHeight": "Block Height <BlockHeight />",
+    "blockHeight": "Current block height <BlockHeight />",
     "title": "Consensus Snapshot",
     "totalCirculation": "This is <StakedPercentage /> of the total circulation"
   },
-  "currentEpoch": "Current Epoch",
+  "snapshotEpochTitle": "Current epoch & block height",
   "networkProposal": {
     "close": "Closed",
     "closeTooltip": "Voting ended on epoch shown.",