From 9a03fa6702bf8f0038a41a452376828e0be96394 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 31 May 2021 10:03:54 -0300
Subject: [PATCH] read networknames from contants

---
 .../AppLayout/Header/components/Layout.tsx     | 18 +++++++++++-------
 .../Header/components/NetworkLabel.tsx         |  5 ++---
 .../Header/components/NetworkSelector.tsx      |  3 ++-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index db91b909..01c7a978 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/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>
                 </>
diff --git a/src/components/AppLayout/Header/components/NetworkLabel.tsx b/src/components/AppLayout/Header/components/NetworkLabel.tsx
index 974b8e2d..94d135bf 100644
--- a/src/components/AppLayout/Header/components/NetworkLabel.tsx
+++ b/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>
   )
diff --git a/src/components/AppLayout/Header/components/NetworkSelector.tsx b/src/components/AppLayout/Header/components/NetworkSelector.tsx
index b564b3b8..afee105c 100644
--- a/src/components/AppLayout/Header/components/NetworkSelector.tsx
+++ b/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>