read networknames from contants

src/components/AppLayout/Header/components/Layout.tsx

@@ -19,6 +19,7 @@ import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
+import { NETWORKSNAMES } from 'src/utils/constants'
 
 const styles = () => ({
   root: {
@@ -69,6 +70,15 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
   const { clickAway, open, toggle } = useStateHandler()
   const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler()
 
+  const networkList = NETWORKSNAMES.map((network) => {
+    return (
+      <>
+        <NetworkLabel networkName={network} />
+        <Divider />
+      </>
+    )
+  })
+
   return (
     <Row className={classes.summary}>
       <Col className={classes.logo} middle="xs" start="xs">
@@ -119,13 +129,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                 <>
                   <ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
                     <List className={classes.network} component="div">
-                      <NetworkLabel />
-                      <Divider />
-                      <NetworkLabel />
-                      <Divider />
-                      <NetworkLabel />
-                      <Divider />
-                      <NetworkLabel />
+                      {networkList}
                     </List>
                   </ClickAwayListener>
                 </>

src/components/AppLayout/Header/components/NetworkLabel.tsx

@@ -5,7 +5,6 @@ import Col from 'src/components/layout/Col'
 import Paragraph from 'src/components/layout/Paragraph'
 import { getNetworkInfo } from 'src/config'
 import { border, md, screenSm, sm, xs, fontColor } from 'src/theme/variables'
-/* import { NETWORKSNAMES } from 'src/utils/constants' */
 
 const networkInfo = getNetworkInfo()
 
@@ -29,13 +28,13 @@ const useStyles = makeStyles({
   },
 })
 
-const NetworkLabel = (): React.ReactElement => {
+const NetworkLabel = ({ networkName }): React.ReactElement => {
   const classes = useStyles()
 
   return (
     <Col className={classes.container} middle="xs" start="xs">
       <Paragraph className={classes.text} size="xs">
-        {networkInfo.label}
+        {networkName}
       </Paragraph>
     </Col>
   )

src/components/AppLayout/Header/components/NetworkSelector.tsx

@@ -53,7 +53,8 @@ class NetworkSelector extends React.Component<any> {
       <>
         <div className={classes.root} ref={this.myRef}>
           <Col className={classes.networkList} end="sm" middle="xs" onClick={toggle}>
-            <NetworkLabel />
+            {/* ToDo read the networkname from the current wallet */}
+            <NetworkLabel networkName="Ethereum" />
             <IconButton className={classes.expand} disableRipple>
               {open ? <ExpandLess /> : <ExpandMore />}
             </IconButton>