Merge pull request #106 from ssvlabs/stage

Stage to Stage

.env.development

@@ -1,5 +1,5 @@
 REACT_APP_DEBUG=true
-REACT_APP_API_BASE_URL=https://api.stage.ssv.network/api/v4/prater
+REACT_APP_API_BASE_URL=https://api.stage.ssv.network/api/v4/holesky
 REACT_APP_LINK_SSV_WEBAPP=https://app.stage.ssv.network/
 REACT_APP_GOOGLE_TAG_SECRET=
 REACT_APP_GOOGLE_TAG_URL=

src/app/common/components/AppBar/AppBar.styles.ts

@@ -132,6 +132,9 @@ export const useStyles = makeStyles((theme) => ({
             textDecoration: 'none',
         },
     },
+    networkSwitchWrapper: {
+        paddingRight: 12,
+    },
     drawer: {
         '& > .MuiDrawer-paper': {
             backgroundColor: '#A1ABBE',
@@ -167,14 +170,4 @@ export const useStyles = makeStyles((theme) => ({
             backgroundColor: 'lightgreen',
         },
     },
-    PraterButton: {
-       backgroundColor: theme.colors.tint80,
-       color: theme.colors.primary,
-        '&:hover': {
-           cursor: 'default',
-        },
-        '&:active': {
-            backgroundColor: theme.colors.tint80,
-        },
-    },
 }));

src/app/common/components/AppBar/AppBar.tsx

@@ -25,6 +25,7 @@ import { useStyles as useAppStyles } from '~app/components/Styles';
 import ApplicationStore from '~app/common/stores/Application.store';
 import DarkModeSwitcher from '~app/common/components/DarkModeSwitcher';
 import Grid from '@material-ui/core/Grid';
+import NetworkSelect from '~app/common/components/NetworkSelect';
 
 const DrawerButtonsContainers = styled.div`
   font-size: 12px;
@@ -165,11 +166,12 @@ const AppBarComponent = () => {
                         display={{ xs: 'none', sm: 'none', md: 'none', lg: 'block' }}>
                         <div className={classes.toolbarButtons}>
                           {!isOverviewPage() && <SmartSearch placeholder={'Search...'} inAppBar />}
+                          <div className={classes.networkSwitchWrapper}>
+                            <NetworkSelect />
+                          </div>
                           <Link href={joinSsvLink} target="_blank">
                             <Button disable={false} type={'primary'} text={'Join SSV Network'} />
                           </Link>
-                          <Button disable={false} extendClass={classes.PraterButton} type={'secondary'}
-                            text={`${capitalize(currentNetwork)}`} />
                           <DarkModeSwitcher style={{ marginLeft: 'auto', marginRight: 0, minWidth: 'auto', width: 70 }} />
                         </div>
                       </Box>

src/app/common/components/NetworkIcon/NetworkIcon.tsx

@@ -0,0 +1,16 @@
+import React, { ImgHTMLAttributes } from 'react';
+import { useStores } from '~app/hooks/useStores';
+import ApplicationStore from '~app/common/stores/Application.store';
+import { EChain } from '~lib/utils/ChainService';
+
+const NetworkIcon = (props: { network: EChain } & ImgHTMLAttributes<unknown>) => {
+  const stores = useStores();
+  const applicationStore: ApplicationStore = stores.Application;
+  const imgSrc = `/images/networks/${props.network}${applicationStore.isDarkMode ? '_light' : '_dark'}.svg`;
+
+  return (
+    <img width="24" height="24" src={imgSrc} alt={props.network} {...props} />
+  );
+};
+
+export default NetworkIcon;

src/app/common/components/NetworkIcon/index.ts

@@ -0,0 +1 @@
+export { default } from './NetworkIcon';

src/app/common/components/NetworkSelect/NetworkSelect.tsx

@@ -0,0 +1,77 @@
+import React, { ChangeEvent } from 'react';
+import Box from '@material-ui/core/Box';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import chainService, { EChain } from '~lib/utils/ChainService';
+import NetworkIcon from '~app/common/components/NetworkIcon';
+import { useStyles } from './NeworkSelect.styles';
+import { KeyboardArrowDown } from '@material-ui/icons';
+
+const availableNetworks = [EChain.Ethereum, EChain.Holesky];
+
+const networkToConfigMap = {
+  [EChain.Ethereum]: {
+    url: 'https://explorer.ssv.network',
+    label: 'Ethereum Mainnet',
+  },
+  [EChain.Holesky]: {
+    url: 'https://holesky.explorer.ssv.network',
+    label: 'Holesky Testnet',
+  },
+};
+
+export default function NetworkSelect() {
+  const currentNetwork: EChain = chainService().getNetwork() as EChain;
+
+  const classes = useStyles();
+
+  const handleChange = (
+    event: ChangeEvent<{ name?: string; value: unknown }>,
+  ) => {
+    const urlToGo = networkToConfigMap[event.target.value as EChain].url;
+    if (urlToGo) {
+      window.open(urlToGo, '_self');
+    }
+  };
+
+  return (
+    <Box className={classes.Wrapper}>
+      <Select
+        variant="standard"
+        autoWidth
+        value={currentNetwork}
+        onChange={handleChange}
+        IconComponent={KeyboardArrowDown}
+        className={classes.Root}
+        classes={{
+          select: classes.Select,
+          icon: classes.Icon,
+        }}
+        MenuProps={{
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: -16,
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+          },
+          getContentAnchorEl: null,
+          classes: {
+            paper: classes.ItemListWrapper,
+            list: classes.ItemList,
+          },
+        }}
+      >
+        {availableNetworks.map((net) => (
+          <MenuItem value={net}>
+            <div className={classes.ItemWrapper}>
+              <NetworkIcon network={net} className={classes.ItemIcon} />
+              {networkToConfigMap[net].label}
+            </div>
+          </MenuItem>
+        ))}
+      </Select>
+    </Box>
+  );
+}

src/app/common/components/NetworkSelect/NeworkSelect.styles.ts

@@ -0,0 +1,57 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  Wrapper: {
+    borderRadius: 8,
+    background: theme.colors.gray0,
+    padding: '0 16px',
+  },
+  Root: {
+    minWidth: 205,
+    '&:after, &:before': {
+      display: 'none !important',
+    },
+  },
+  Select: {
+    backgroundColor: 'initial !important',
+  },
+  Icon: {
+    boxSizing: 'content-box',
+    width: 24,
+    height: 24,
+  },
+
+  ItemListWrapper: {
+    width: 240,
+    boxShadow: 'none',
+    border: `1px solid ${theme.colors.gray20}`,
+  },
+
+  ItemList: {
+    backgroundColor: `${theme.colors.white}`,
+    padding: 0,
+    '& li:hover': {
+      backgroundColor: `${theme.colors.gray20} !important`,
+    },
+    '& li': {
+      backgroundColor: `${theme.colors.white} !important`,
+    },
+    '& li:not(:last-child)': {
+      borderBottom: `1px solid ${theme.colors.gray20}`,
+    },
+  },
+
+  ItemWrapper: {
+    display: 'flex',
+    'align-items': 'center',
+    padding: '6px 0',
+    paddingRight: '6px',
+
+    fontSize: 16,
+    fontWeight: 600,
+  },
+  ItemIcon: {
+    boxSizing: 'content-box',
+    paddingRight: '12px',
+  },
+}));

src/app/common/components/NetworkSelect/index.tsx

@@ -0,0 +1 @@
+export { default } from './NetworkSelect';

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>