Render UptimeStatus with fake data

src/app/components/PercentageValue/index.tsx

@@ -3,11 +3,15 @@ import { useTranslation } from 'react-i18next'
 
 type PercentageValueProps = {
   adaptMaximumFractionDigits?: boolean
-  total: number | undefined
+  total?: number
   value: number | undefined
 }
 
-export const PercentageValue: FC<PercentageValueProps> = ({ adaptMaximumFractionDigits, value, total }) => {
+export const PercentageValue: FC<PercentageValueProps> = ({
+  adaptMaximumFractionDigits,
+  value,
+  total = 100,
+}) => {
   const { t } = useTranslation()
 
   if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {

src/app/components/Validators/index.tsx

@@ -13,6 +13,7 @@ import { ValidatorLink } from './ValidatorLink'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { BalancesDiff } from '../BalancesDiff'
 import { PercentageValue } from '../PercentageValue'
+import { UptimeStatus } from '../UptimeStatus'
 
 type ValidatorsProps = {
   validators?: Validator[]
@@ -129,7 +130,7 @@ export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination,
       {
         // TODO: provide uptime when it is implemented in the API
         align: TableCellAlign.Right,
-        content: <>-</>,
+        content: <UptimeStatus small percentage={94} status={[100, 100, 100, 50]} />,
         key: 'uptime',
       },
     ],

src/app/pages/ValidatorDetailsPage/UptimeCard.tsx

@@ -1,13 +1,24 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
+import { UptimeStatus } from '../../components/UptimeStatus'
 
 export const UptimeCard: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <SnapshotTextCard title={t('validator.uptime')}>
-      {/* TODO: provide uptime stats when API is ready */}-
+    <SnapshotTextCard
+      title={t('validator.uptime')}
+      label={
+        <Typography sx={{ fontSize: 12, color: COLORS.grayMedium }}>
+          {t('validator.signedBlocksPercentage')}
+        </Typography>
+      }
+    >
+      {/* TODO: provide data when API is ready  */}
+      <UptimeStatus percentage={94} status={[100, 100, 100, 50]} />
     </SnapshotTextCard>
   )
 }

src/locales/en/translation.json

@@ -680,6 +680,7 @@
     "signed": "Signed",
     "signedBlocks": "Signed Blocks",
     "signedBlocksDescription": "Last 100 blocks",
+    "signedBlocksPercentage": "Percentage of blocks signed in the past 24h",
     "proposedBlocks": "Proposed Blocks",
     "snapshot": "Validator Snapshot",
     "self": "Self",