select networks dynamically

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

@@ -5,6 +5,7 @@ import Popper from '@material-ui/core/Popper'
 import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { Divider, Icon } from '@gnosis.pm/safe-react-components'
 
 import Provider from './Provider'
@@ -20,7 +21,7 @@ import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 import { getNetworkName, getNetworks } from 'src/config'
-import styled from 'styled-components'
+import { sameString } from 'src/utils/strings'
 
 const StyledDivider = styled(Divider)`
   margin: 0;
@@ -84,10 +85,8 @@ const styles = () => ({
 const Layout = ({ classes, providerDetails, providerInfo }) => {
   const { clickAway, open, toggle } = useStateHandler()
   const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler()
-  const networkName = getNetworkName() // Network name to be use for comparision
+  const networkName = getNetworkName().toLowerCase()
   const networks = getNetworks()
-  console.log(networkName)
-
   return (
     <Row className={classes.summary}>
       <Col className={classes.logo} middle="xs" start="xs">
@@ -124,6 +123,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
       />
       <NetworkSelector
         open={openNetworks}
+        selected={networkName}
         toggle={toggleNetworks}
         render={(networkRef) => (
           <Popper
@@ -141,8 +141,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                       {networks.map((network) => (
                         <React.Fragment key={network.id}>
                           <StyledLink href={network.safeUrl}>
-                            <NetworkLabel networkName={network.label} />
-                            <Icon type="check" size="md" color="primary" />
+                            <NetworkLabel networkInfo={network} networkName={network.label} />
+                            {sameString(networkName, network.label.toLowerCase()) && (
+                              <Icon type="check" size="md" color="primary" />
+                            )}
                           </StyledLink>
                           <StyledDivider />
                         </React.Fragment>

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

@@ -1,43 +1,48 @@
-import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
-
+import styled from 'styled-components'
 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 { NetworkSettings } from 'src/config/networks/network'
 
-const networkInfo = getNetworkInfo()
+const currentNetworkInfo = getNetworkInfo()
 
-const useStyles = makeStyles({
-  container: {
-    flexGrow: 0,
-    padding: `0 ${sm}`,
-    [`@media (min-width: ${screenSm}px)`]: {
-      paddingLeft: md,
-      paddingRight: md,
-    },
-  },
-  text: {
-    backgroundColor: `${networkInfo?.backgroundColor ?? border}`,
-    color: `${networkInfo?.textColor ?? fontColor}`,
-    borderRadius: '3px',
-    lineHeight: 'normal',
-    margin: '0',
-    padding: `${xs} ${sm}`,
-    minWidth: '70px',
-    textAlign: 'center',
-  },
-})
+const StyledCol = styled(Col)`
+  flex-grow: 0;
+  padding: 0 ${sm};
+  @media (min-width: ${screenSm}px) {
+    padding-left: ${md};
+    padding-right: ${md};
+  }
+`
+const StyledParagraph = styled(Paragraph)<{ network: Partial<NetworkSettings> }>`
+  background-color: ${(props) => props.network?.backgroundColor ?? border};
+  color: ${(props) => props.network?.textColor ?? fontColor};
+  border-radius: 3px;
+  line-height: normal;
+  text-transform: capitalize;
+  margin: 0;
+  padding: ${xs} ${sm};
+  min-width: 70px;
+  text-align: center;
+`
 
-const NetworkLabel = ({ networkName }): React.ReactElement => {
-  const classes = useStyles()
+const NetworkLabel = ({
+  networkName,
+  networkInfo,
+}: {
+  networkName: string
+  networkInfo?: Partial<NetworkSettings>
+}): React.ReactElement => {
+  const selectedNetwork = networkInfo || currentNetworkInfo
 
   return (
-    <Col className={classes.container} middle="xs" start="xs">
-      <Paragraph className={classes.text} size="xs">
+    <StyledCol middle="xs" start="xs">
+      <StyledParagraph network={selectedNetwork} size="xs">
         {networkName}
-      </Paragraph>
-    </Col>
+      </StyledParagraph>
+    </StyledCol>
   )
 }
 

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

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

src/config/index.ts

@@ -73,6 +73,7 @@ export const getNetworks = (): { id: number; label: string; backgroundColor: str
     id: networkObj.network.id,
     label: networkObj.network.label,
     backgroundColor: networkObj.network.backgroundColor,
+    textColor: networkObj.network.textColor,
     safeUrl: networkObj.environment[getCurrentEnvironment()].safeUrl,
   }))
 }