Network Selector

.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/lib/utils/ChainService.ts

@@ -4,15 +4,11 @@ import config from '~app/common/config';
 export enum EChain {
     Holesky = 'holesky',
     Ethereum = 'mainnet', // ethereum
-    Goerli = 'goerli',
-    Prater = 'prater',
 }
 
 export const CHAIN = {
     HOLESKY: EChain.Holesky,
     ETHEREUM: EChain.Ethereum,
-    PRATER: EChain.Prater, // Goerli was merged with Prater. The combined network retained the Goerli name post-merge.
-    GOERLI: EChain.Goerli,
 };
 
 function extractChain(apiUrl: string): string {