Merge pull request #106 from ssvlabs/stage

Stage to Stage

Author: IlyaVi

.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=

public/images/networks/holesky_dark.svg

@@ -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,
-        },
-    },
 }));

public/images/networks/holesky_light.svg

@@ -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>

public/images/networks/mainnet_dark.svg

@@ -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;