Relace MUI Progress with Oasis UI Library component

Author: buberdds

.changelog/2235.internal.md

@@ -0,0 +1 @@
+Relace MUI Progress with Oasis UI Library component

src/app/components/Blocks/RuntimeBlocks.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next'
 import { RuntimeBlock } from '../../../oasis-nexus/api'
-import { VerticalProgressBar } from '../../components/ProgressBar'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { paraTimesConfig } from '../../../config'
 import { TablePaginationProps } from '../Table/TablePagination'
@@ -10,6 +9,7 @@ import { FC } from 'react'
 import { BlocksTableType } from './index'
 import { TableHeaderAge } from '../TableHeaderAge'
 import { TableCellAge } from '../TableCellAge'
+import { Progress } from '@oasisprotocol/ui-library/src/components/progress'
 
 export type TableRuntimeBlock = RuntimeBlock & {
   markAsNew?: boolean
@@ -77,7 +77,7 @@ export const RuntimeBlocks: FC<RuntimeBlocksProps> = ({
         ...(type === BlocksTableType.Desktop
           ? [
               {
-                content: <VerticalProgressBar value={(100 * block.gas_used) / blockGasLimit} />,
+                content: <Progress className="w-6" value={(100 * block.gas_used) / blockGasLimit} />,
                 key: 'fill',
               },
             ]

src/app/components/ProgressBar/index.tsx

@@ -1,49 +1,6 @@
 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
-  height?: number
-  width?: number
-  barWithBorder?: boolean
-  barBackgroundColor?: string
-}
-
-const barSize = 36
-
-export const VerticalProgressBar: FC<VerticalProgressBarProps> = ({
-  value,
-  height = barSize,
-  width = barSize,
-  barWithBorder = true,
-  barBackgroundColor,
-}) => {
-  return (
-    <Box sx={{ height: width, width: height, transform: 'rotate(-90deg)' }}>
-      <StyledLinearProgress
-        sx={{ height: width, width: height }}
-        barWithBorder={barWithBorder}
-        barBackgroundColor={barBackgroundColor}
-        variant="determinate"
-        value={value}
-      />
-    </Box>
-  )
-}
-const StyledLinearProgress = styled(LinearProgress, {
-  shouldForwardProp: prop => prop !== 'barWithBorder' && prop !== 'barBackgroundColor',
-})<{ barWithBorder?: boolean; barBackgroundColor?: string }>(({ barWithBorder, barBackgroundColor }) => ({
-  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
-    backgroundColor: COLORS.brandDark,
-  },
-  ...(!barWithBorder && { border: '0' }),
-  ...(barBackgroundColor && { backgroundColor: barBackgroundColor }),
-}))
-
 type CustomProgressProps = {
   value?: number
   max?: number

src/app/pages/ValidatorDetailsPage/VotingPowerCard.tsx

@@ -1,10 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { Validator, ValidatorAggStats } from '../../../oasis-nexus/api'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from 'styles/theme/colors'
-import { VerticalProgressBar } from 'app/components/ProgressBar'
+import { CustomProgress } from 'app/components/ProgressBar'
 import { PercentageValue } from '../../components/PercentageValue'
 
 type VotingPowerCardProps = {
@@ -20,31 +19,33 @@ export const VotingPowerCard: FC<VotingPowerCardProps> = ({ validator, stats })
       title={t('validator.votingPower')}
       label={
         typeof validator?.voting_power === 'number' && (
-          <Typography sx={{ fontSize: 18, color: COLORS.grayMedium }}>
-            ({validator?.voting_power.toLocaleString()})
-          </Typography>
+          <Typography>({validator?.voting_power.toLocaleString()})</Typography>
         )
       }
       withContentPadding={false}
     >
       {typeof validator?.voting_power === 'number' && stats?.total_voting_power && (
-        <div className="flex justify-between">
-          <div className="flex flex-col">
-            <Typography sx={{ fontSize: 12, color: COLORS.grayMedium, textAlign: 'left', paddingBottom: 3 }}>
-              {t('validator.votingPowerOverall')}
-            </Typography>
-            <PercentageValue value={validator.voting_power} total={stats.total_voting_power} />
-          </div>
+        <>
+          <Typography className="font-normal text-xs text-muted-foreground text-left pb-2">
+            {t('validator.votingPowerOverall')}
+          </Typography>
           <div className="pt-4">
-            <VerticalProgressBar
-              height={80}
-              width={50}
-              value={(100 * validator.voting_power) / stats.total_voting_power}
-              barWithBorder={false}
-              barBackgroundColor={COLORS.grayMediumLight}
+            <CustomProgress
+              value={validator.voting_power}
+              max={stats.total_voting_power}
+              label={
+                <span className="font-bold">
+                  <PercentageValue
+                    adaptMaximumFractionDigits
+                    value={validator.voting_power}
+                    total={stats.total_voting_power}
+                    maximumFractionDigits={2}
+                  />
+                </span>
+              }
             />
           </div>
-        </div>
+        </>
       )}
     </SnapshotTextCard>
   )