Merge pull request #105 from ssvlabs/INTERFACES-674-invalid-status-handling

Handling of invalid status

Author: IlyaVi

src/app/common/components/Status/Status.tsx

@@ -6,28 +6,43 @@ import { Skeleton } from '@material-ui/lab';
 import { StatusProps, useStyles } from './Status.styles';
 
 const Status = (props: StatusProps) => {
-    const [showTooltip, setShowTooltip] = useState(false);
-    const classes = useStyles(props);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const classes = useStyles(props);
 
-    const handleMouseEnter = () => {
-        setShowTooltip(true);
-    };
+  const handleMouseEnter = () => {
+    setShowTooltip(true);
+  };
 
-    const handleMouseLeave = () => {
-        setShowTooltip(false);
-    };
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
 
-    if (!props.entry) return <Skeleton style={{ width: 50 }} />;
-    return (
-      <Tooltip className={props.extendClass} open={showTooltip && props.size === 'big'} title={'Is the validator performing duties in the last 2 consecutive epochs'}>
-        <Grid
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          className={classes.Status}>
-          {props.entry.is_deleted ? 'Deleted' : props.entry.status}
-        </Grid>
-      </Tooltip>
-    );
+  if (!props.entry) return <Skeleton style={{ width: 50 }} />;
+
+  let statusText = props.entry.status;
+  if (props.entry.is_deleted) {
+    statusText = 'Deleted';
+  } else if (!props.entry.is_valid) {
+    statusText = 'Invalid';
+  }
+
+  return (
+    <Tooltip
+      className={props.extendClass}
+      open={showTooltip && props.size === 'big'}
+      title={
+        'Is the validator performing duties in the last 2 consecutive epochs'
+      }
+    >
+      <Grid
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={classes.Status}
+      >
+        {statusText}
+      </Grid>
+    </Tooltip>
+  );
 };
 
 export default observer(Status);

src/app/components/Operator/Operator.tsx

@@ -56,7 +56,7 @@ const Operator = () => {
   const socialIcon = (url: string, imageSrc: string, className: string) => {
     return (url && (
     <Link href={url} target="_blank" className={className}>
-      <img src={imageSrc} className={className} />
+      <img alt="social" src={imageSrc} className={className} />
     </Link>
     ));
   };
@@ -168,7 +168,7 @@ const Operator = () => {
           <NotFoundScreen notFound={notFound}>
             <Grid container className={classes.OperatorWrapper}>
               <Grid xs={12} sm={12} md={12} lg={3} xl={3} item className={classes.OperatorInfoWrapper}>
-                <OperatorStatus status={operator.status} is_deleted={operator.is_deleted} />
+                <OperatorStatus status={operator.status} is_deleted={operator.is_deleted} is_valid={operator.is_valid} />
                 <ValidatorCount validatorCount={operator.validators_count} />
                 <OperatorPerformance operator={operator} isLoading={isLoading} />
               </Grid>

src/app/components/Operator/components/OperatorStatus.tsx

@@ -12,7 +12,7 @@ const OperatorPerformanceContainer = styled.div`
   border-radius: 16px;
   flex-direction: column;
   padding: 32px 20px 46px 32px;
-  background-color: ${props => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.white};
   @media (max-width: 576px) {
     width: 100%;
   },
@@ -27,7 +27,7 @@ const DataHeader = styled.div`
   font-style: normal;
   margin-bottom: auto;
   font-stretch: normal;
-  color: ${props => props.theme.colors.gray40};
+  color: ${(props) => props.theme.colors.gray40};
 `;
 
 const ValueContent = styled.div`
@@ -37,43 +37,58 @@ const ValueContent = styled.div`
   font-style: normal;
   font-stretch: normal;
   letter-spacing: -0.5px;
-  color: ${props => props.theme.colors.gray100};
+  color: ${(props) => props.theme.colors.gray100};
 `;
 
-const OperatorStatus = ({ status, is_deleted }: { status: string, is_deleted?: boolean }) => {
-    const headerTooltipStyle = { fontSize: '14px', color: 'rgb(161, 172, 190)', marginBottom: '-2px' };
-    let textColor: string;
-    let statusText: JSX.Element | string;
+const OperatorStatus = ({
+  status,
+  is_deleted,
+  is_valid,
+}: {
+  status: string;
+  is_deleted?: boolean;
+  is_valid?: boolean;
+}) => {
+  const headerTooltipStyle = {
+    fontSize: '14px',
+    color: 'rgb(161, 172, 190)',
+    marginBottom: '-2px',
+  };
+  let textColor: string;
+  let statusText: JSX.Element | string;
 
-    if (is_deleted) {
-        statusText = 'Deleted';
+  if (is_deleted) {
+    statusText = 'Deleted';
+    textColor = '#ec1c26';
+  } else if (!is_valid) {
+    statusText = 'Invalid';
+    textColor = '#ec1c26';
+  } else {
+    switch (status) {
+      case 'Active':
+        textColor = '#08c858';
+        break;
+      case 'Inactive':
         textColor = '#ec1c26';
-    } else {
-        switch (status) {
-            case 'Active':
-                textColor = '#08c858';
-                break;
-            case 'Inactive':
-                textColor = '#ec1c26';
-                break;
-            default:
-                textColor = '#808080';
-        }
-        statusText = !status ? <Skeleton style={{ width: 100 }} /> : status;
+        break;
+      default:
+        textColor = '#808080';
     }
+    statusText = !status ? <Skeleton style={{ width: 100 }} /> : status;
+  }
 
-    return (
-      <OperatorPerformanceContainer>
-        <DataHeader>
-          Status
-          <InfoTooltip
-            style={headerTooltipStyle}
-            message="Is the operator performing duties for the majority of its validators in the last 2 epochs."
-          />
-        </DataHeader>
-        <ValueContent style={{ color: textColor }}>{statusText}</ValueContent>
-      </OperatorPerformanceContainer>
-    );
+  return (
+    <OperatorPerformanceContainer>
+      <DataHeader>
+        Status
+        <InfoTooltip
+          style={headerTooltipStyle}
+          message="Is the operator performing duties for the majority of its validators in the last 2 epochs."
+        />
+      </DataHeader>
+      <ValueContent style={{ color: textColor }}>{statusText}</ValueContent>
+    </OperatorPerformanceContainer>
+  );
 };
 
 export default observer(OperatorStatus);