From 0da90818974eb92c68830a53184637b2fb49df78 Mon Sep 17 00:00:00 2001
From: Dima Axelrod <axelrod@ssvlabs.io>
Date: Sun, 15 Sep 2024 13:38:19 +0300
Subject: [PATCH] added not deposited status for validator page, added status
 for validators on operator dashboard

---
 src/app/common/components/Status/Status.styles.ts           | 5 +++--
 src/app/common/components/Status/Status.tsx                 | 2 ++
 .../Operator/components/ValidatorsInOperatorTable.tsx       | 4 +++-
 src/app/components/Validator/Validator.tsx                  | 6 +++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/common/components/Status/Status.styles.ts b/src/app/common/components/Status/Status.styles.ts
index ba61737..2857120 100644
--- a/src/app/common/components/Status/Status.styles.ts
+++ b/src/app/common/components/Status/Status.styles.ts
@@ -5,6 +5,7 @@ interface StatusEntry {
     is_deleted?: boolean;
     is_valid?: boolean;
     status?: string;
+    isNotDepositedValidator?: boolean;
 }
 
 export interface StatusProps {
@@ -43,8 +44,8 @@ export const useStyles = makeStyles(() => ({
             color = 'rgb(236, 28, 38)';
             backgroundColor = 'rgba(236, 28, 38, 0.12)';
 
-        // Not validators (for operator status only)
-        } else if (props.entry?.is_active === -1) {
+        // Not validators or Not deposited
+        } else if (props.entry?.is_active === -1 || props.entry?.isNotDepositedValidator) {
             color = '#34455a';
             backgroundColor = '#e6eaf7';
         } else {
diff --git a/src/app/common/components/Status/Status.tsx b/src/app/common/components/Status/Status.tsx
index d1f3bfc..1a018e5 100644
--- a/src/app/common/components/Status/Status.tsx
+++ b/src/app/common/components/Status/Status.tsx
@@ -22,6 +22,8 @@ const Status = (props: StatusProps) => {
   let statusText = props.entry.status;
   if (props.entry.is_deleted) {
     statusText = 'Deleted';
+  } else if (props.entry.isNotDepositedValidator) {
+    statusText = 'Not Deposited';
   } else if (!props.entry.is_valid) {
     statusText = 'Invalid';
   }
diff --git a/src/app/components/Operator/components/ValidatorsInOperatorTable.tsx b/src/app/components/Operator/components/ValidatorsInOperatorTable.tsx
index 37da2e0..351f3fa 100644
--- a/src/app/components/Operator/components/ValidatorsInOperatorTable.tsx
+++ b/src/app/components/Operator/components/ValidatorsInOperatorTable.tsx
@@ -8,6 +8,7 @@ import { longStringShorten } from '~lib/utils/strings';
 import BeaconchaLink from '~app/common/components/BeaconchaLink';
 import DataTable from '~app/common/components/DataTable/DataTable';
 import CopyToClipboardIcon from '~app/common/components/CopyToClipboardIcon';
+import Status from '~app/common/components/Status';
 
 type ValidatorsInOperatorTableProps = {
   validators: any[],
@@ -43,10 +44,11 @@ const ValidatorsInOperatorTable = (props: ValidatorsInOperatorTableProps) => {
                 0x{longStringShorten(validator.public_key, 20)}
               </Box>
               <Box className={classes.blackLinkColor} component="div" display={{ xs: 'none', sm: 'none', md: 'none', lg: 'block' }}>
-                0x{validator.public_key}
+                0x{longStringShorten(validator.public_key, 30)}
               </Box>
             </Typography>
           </Link>,
+          <Status entry={validator} />,
           <div style={{ marginTop: 3, whiteSpace: 'nowrap' }}>
             <CopyToClipboardIcon data={validator.public_key} />
             <BeaconchaLink height={24} width={24} address={`validator/${validator.public_key}`} />
diff --git a/src/app/components/Validator/Validator.tsx b/src/app/components/Validator/Validator.tsx
index f4520b7..57d146f 100644
--- a/src/app/components/Validator/Validator.tsx
+++ b/src/app/components/Validator/Validator.tsx
@@ -21,6 +21,7 @@ import BeaconchaLink from '~app/common/components/BeaconchaLink/BeaconchaLink';
 import ValidatorDuties from '~app/components/Validator/components/ValidatorDuties';
 import ValidatorOperators from '~app/components/Validator/components/ValidatorOperators';
 import { BreadCrumb, BreadCrumbDivider } from '~app/common/components/Breadcrumbs';
+import chainService, { EChain } from '~lib/utils/ChainService';
 
 const StatsBlock = styled.div<({ maxWidth?: any })>`
   max-width: ${({ maxWidth }) => `${Number.isNaN(maxWidth ?? 200) ? (maxWidth) : `${(maxWidth ?? 200)}px`}`};
@@ -48,6 +49,9 @@ const Validator = () => {
   const [notFound, setNotFound] = useState(false);
   const [validator, setValidator] = useState(defaultValidator);
   const [loadingValidator, setLoadingValidator] = useState(false);
+  const currentNetwork = chainService().getNetwork();
+  const isHoleskyTestnet = currentNetwork === EChain.Holesky;
+  const isNotDepositedValidator = !validator.validatorInfo && isHoleskyTestnet;
 
   /**
    * Fetch one operator by it's address
@@ -86,7 +90,7 @@ const Validator = () => {
               </StatsBlock>
             </Grid>
             <Grid item>
-              {!_.isEmpty(validator) && <Status size="big" entry={validator} />}
+              {!_.isEmpty(validator) && <Status size="big" entry={{ ...validator, isNotDepositedValidator }} />}
             </Grid>
             <Grid item>
               {!_.isEmpty(validator) && <IsValidBadge size="big" entry={validator} />}