From 2b0b7329d46ccd99cf937b7dd1cbbf945fc3b6e3 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 10 Oct 2024 10:18:16 +0200
Subject: [PATCH] Render UptimeStatus with fake data

---
 src/app/components/PercentageValue/index.tsx      |  8 ++++++--
 src/app/components/Validators/index.tsx           |  3 ++-
 src/app/pages/ValidatorDetailsPage/UptimeCard.tsx | 15 +++++++++++++--
 src/locales/en/translation.json                   |  1 +
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/components/PercentageValue/index.tsx b/src/app/components/PercentageValue/index.tsx
index a4bce6022..919905730 100644
--- a/src/app/components/PercentageValue/index.tsx
+++ b/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) {
diff --git a/src/app/components/Validators/index.tsx b/src/app/components/Validators/index.tsx
index 8f2b66755..1de9a7e86 100644
--- a/src/app/components/Validators/index.tsx
+++ b/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',
       },
     ],
diff --git a/src/app/pages/ValidatorDetailsPage/UptimeCard.tsx b/src/app/pages/ValidatorDetailsPage/UptimeCard.tsx
index 6a913770f..1094fa4d9 100644
--- a/src/app/pages/ValidatorDetailsPage/UptimeCard.tsx
+++ b/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>
   )
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ea15c9a49..d76c8d596 100644
--- a/src/locales/en/translation.json
+++ b/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",