Some refactor to the code

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

@@ -5,12 +5,9 @@ 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'
 import NetworkSelector from './NetworkSelector'
-import NetworkLabel from './NetworkLabel'
 
 import Spacer from 'src/components/Spacer'
 import Col from 'src/components/layout/Col'
@@ -21,22 +18,6 @@ import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 import { getNetworkName, getNetworks } from 'src/config'
-import { sameString } from 'src/utils/strings'
-
-const StyledDivider = styled(Divider)`
-  margin: 0;
-`
-const StyledLink = styled.a`
-  margin: 0;
-  text-decoration: none;
-  display: flex;
-  justify-content: space-between;
-  padding: 14px 16px 14px 0;
-
-  :hover {
-    background-color: ${({ theme }) => theme.colors.background};
-  }
-`
 
 const styles = () => ({
   root: {
@@ -123,39 +104,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
       />
       <NetworkSelector
         open={openNetworks}
+        networks={networks}
         selected={networkName}
         toggle={toggleNetworks}
-        render={(networkRef) => (
+        clickAway={clickAwayNetworks}
-          <Popper
-            anchorEl={networkRef.current}
-            className={classes.popper}
-            open={openNetworks}
-            placement="bottom"
-            popperOptions={{ positionFixed: true }}
-          >
-            {({ TransitionProps }) => (
-              <Grow {...TransitionProps}>
-                <>
-                  <ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
-                    <List className={classes.network} component="div">
-                      {networks.map((network) => (
-                        <React.Fragment key={network.id}>
-                          <StyledLink href={network.safeUrl}>
-                            <NetworkLabel networkInfo={network} networkName={network.label} />
-                            {sameString(networkName, network.label.toLowerCase()) && (
-                              <Icon type="check" size="md" color="primary" />
-                            )}
-                          </StyledLink>
-                          <StyledDivider />
-                        </React.Fragment>
-                      ))}
-                    </List>
-                  </ClickAwayListener>
-                </>
-              </Grow>
-            )}
-          </Popper>
-        )}
       />
     </Row>
   )

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

@@ -32,7 +32,7 @@ const NetworkLabel = ({
   networkName,
   networkInfo,
 }: {
-  networkName: string
+  networkName?: string
   networkInfo?: Partial<NetworkSettings>
 }): React.ReactElement => {
   const selectedNetwork = networkInfo || currentNetworkInfo

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

@@ -1,15 +1,25 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { makeStyles } from '@material-ui/core/styles'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import List from '@material-ui/core/List'
+import Popper from '@material-ui/core/Popper'
 import IconButton from '@material-ui/core/IconButton'
 import { withStyles } from '@material-ui/core/styles'
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
-import * as React from 'react'
+import { Divider, Icon } from '@gnosis.pm/safe-react-components'
 
 import NetworkLabel from './NetworkLabel'
 import Col from 'src/components/layout/Col'
-import Divider from 'src/components/layout/Divider'
 import { screenSm, sm } from 'src/theme/variables'
 
-const styles = () => ({
+import { sameString } from 'src/utils/strings'
+import { ReturnValue } from 'src/logic/hooks/useStateHandler'
+import { NetworkSettings } from 'src/config/networks/network'
+
+const styles = {
   root: {
     alignItems: 'center',
     display: 'flex',
@@ -34,23 +44,47 @@ const styles = () => ({
     height: '30px',
     width: '30px',
   },
-})
+  popper: {
+    zIndex: 2000,
+  },
+  network: {
+    backgroundColor: 'white',
+    borderRadius: sm,
+    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
+    marginTop: '11px',
+    minWidth: '180px',
+    padding: '0',
+  },
+}
 
-class NetworkSelector extends React.Component<any> {
+const useStyles = makeStyles(styles)
-  myRef
 
-  constructor(props) {
+const StyledLink = styled.a`
-    super(props)
+  margin: 0;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 16px 14px 0;
 
-    this.myRef = React.createRef()
+  :hover {
+    background-color: ${({ theme }) => theme.colors.background};
   }
+`
+const StyledDivider = styled(Divider)`
+  margin: 0;
+`
 
-  render() {
+type NetworkSelectorProps = ReturnValue & {
-    const { render, classes, open, toggle, selected } = this.props
+  selected: string
+  networks: (Partial<NetworkSettings> & { safeUrl: string })[]
+}
 
+const NetworkSelector = ({ open, toggle, selected, networks, clickAway }: NetworkSelectorProps): React.ReactElement => {
+  const networkRef = React.useRef(null)
+  const classes = useStyles()
   return (
     <>
-        <div className={classes.root} ref={this.myRef}>
+      <div className={classes.root} ref={networkRef}>
         <Col className={classes.networkList} end="sm" middle="xs" onClick={toggle}>
           <NetworkLabel networkName={selected} />
           <IconButton className={classes.expand} disableRipple>
@@ -59,10 +93,37 @@ class NetworkSelector extends React.Component<any> {
         </Col>
         <Divider />
       </div>
-        {render(this.myRef)}
+      <Popper
+        anchorEl={networkRef.current}
+        className={classes.popper}
+        open={open}
+        placement="bottom"
+        popperOptions={{ positionFixed: true }}
+      >
+        {({ TransitionProps }) => (
+          <Grow {...TransitionProps}>
+            <>
+              <ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
+                <List className={classes.network} component="div">
+                  {networks.map((network) => (
+                    <React.Fragment key={network.id}>
+                      <StyledLink href={network.safeUrl}>
+                        <NetworkLabel networkInfo={network} networkName={network.label} />
+                        {sameString(selected, network.label?.toLowerCase()) && (
+                          <Icon type="check" size="md" color="primary" />
+                        )}
+                      </StyledLink>
+                      <StyledDivider />
+                    </React.Fragment>
+                  ))}
+                </List>
+              </ClickAwayListener>
+            </>
+          </Grow>
+        )}
+      </Popper>
     </>
   )
-  }
 }
 
 export default withStyles(styles as any)(NetworkSelector)

src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -1,10 +1,10 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import classNames from 'classnames'
 import { makeStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
-import classNames from 'classnames'
-import * as React from 'react'
 import { EthHashInfo, Identicon, Card } from '@gnosis.pm/safe-react-components'
 import { createStyles } from '@material-ui/core'
-import styled from 'styled-components'
 
 import Spacer from 'src/components/Spacer'
 import Block from 'src/components/layout/Block'

src/config/index.ts

@@ -67,7 +67,7 @@ const configuration = (): NetworkSpecificConfiguration => {
 
 const getConfig: () => NetworkSpecificConfiguration = ensureOnce(configuration)
 
-export const getNetworks = (): { id: number; label: string; backgroundColor: string; safeUrl: string }[] => {
+export const getNetworks = (): Partial<NetworkSettings> & { safeUrl: string }[] => {
   const { local, ...usefulNetworks } = networks
   return Object.values(usefulNetworks).map((networkObj) => ({
     id: networkObj.network.id,

src/logic/hooks/useStateHandler.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-type ReturnValue = {
+export type ReturnValue = {
   open: boolean
   toggle: () => void
   clickAway: () => void