Refactor Header component using Provider and Popover

src/components/Header/component/Layout.jsx

@@ -1,11 +1,10 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import OpenInNew from '@material-ui/icons/OpenInNew'
-import IconButton from '@material-ui/core/IconButton'
+import Grow from '@material-ui/core/Grow'
-import ExpandLess from '@material-ui/icons/ExpandLess'
+import Popper from '@material-ui/core/Popper'
-import ExpandMore from '@material-ui/icons/ExpandMore'
 import Divider from '~/components/layout/Divider'
 import Paragraph from '~/components/layout/Paragraph'
 import openHoc, { type Open } from '~/components/hoc/OpenHoc'
@@ -17,6 +16,7 @@ import Identicon from '~/components/Identicon'
 import Spacer from '~/components/Spacer'
 import { border, sm, md } from '~/theme/variables'
 import Details from './Details'
+import Provider from './Provider'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
@@ -30,7 +30,7 @@ type Props = Open & {
 
 const styles = theme => ({
   summary: {
-    border: `solid 2px ${border}`,
+    borderBottom: `solid 2px ${border}`,
     alignItems: 'center',
     height: '52px',
   },
@@ -38,23 +38,6 @@ const styles = theme => ({
     padding: `${sm} ${md}`,
     flexBasis: '95px',
   },
-  provider: {
-    padding: `${sm} ${md}`,
-    alignItems: 'center',
-    flex: '0 1 auto',
-    display: 'flex',
-    cursor: 'pointer',
-  },
-  account: {
-    padding: `0 ${md} 0 ${sm}`,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-  expand: {
-    width: '20px',
-    height: '20px',
-  },
   user: {
     alignItems: 'center',
     border: '1px solid grey',
@@ -74,8 +57,8 @@ const styles = theme => ({
   },
   icon: {
     verticalAlign: 'bottom',
-    height: 20,
+    height: 30,
-    width: 20,
+    width: 30,
   },
   details: {
     alignItems: 'center',
@@ -107,50 +90,52 @@ const openIconStyle = {
 
 const Header = openHoc(({
   open, toggle, provider, network, connected, classes, userAddress,
-}: Props) => {
+}: Props) => (
-  const providerText = connected ? `${provider} [${network}]` : 'Not connected'
+  <React.Fragment>
-  const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : ''
+    <Row className={classes.summary}>
+      <Col start="xs" middle="xs" className={classes.logo}>
+        <Img src={logo} height={32} alt="Gnosis Team Safe" />
+      </Col>
+      <Divider />
+      <Spacer />
+      <Divider />
+      <Provider
+        provider={provider}
+        network={network}
+        userAddress={userAddress}
+        connected={connected}
+        open={open}
+        toggle={toggle}
+      >
+        {myRef => (
+          <Popper open={open} anchorEl={myRef.current} placement="bottom-end">
+            {({ TransitionProps }) => (
+              <Grow
+                {...TransitionProps}
+              >
+                <ClickAwayListener onClickAway={toggle} className={classes.details}>
+                  <React.Fragment>
+                    <Row grow margin="md">
+                      <Details provider={provider} connected={connected} network={network} />
+                      <Spacer />
+                    </Row>
+                    <Row className={classes.user} margin="md" grow >
+                      <Identicon address={userAddress} diameter={25} />
+                      <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
+                      <OpenInNew style={openIconStyle} />
+                    </Row>
+                    <Col align="center" margin="md">
+                      <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
+                    </Col>
+                  </React.Fragment>
+                </ClickAwayListener>
+              </Grow>
+            )}
+          </Popper>
+        )}
+      </Provider>
+    </Row>
+  </React.Fragment>
+))
 
-  return (
+export default withStyles(styles)(openHoc(Header))
-    <React.Fragment>
-      <Row onClick={toggle} className={classes.summary}>
-        <Col start="xs" middle="xs" className={classes.logo}>
-          <Img src={logo} height={32} alt="Gnosis Team Safe" />
-        </Col>
-        <Divider />
-        <Spacer />
-        <Divider />
-        <Col end="sm" middle="xs" className={classes.provider}>
-          { connected && <Identicon address={userAddress} diameter={25} /> }
-          <Col end="sm" middle="xs" layout="column" className={classes.account}>
-            <Paragraph size="sm" transform="capitalize" noMargin bold>{providerText}</Paragraph>
-            <Paragraph size="sm" noMargin>{cutAddress}</Paragraph>
-          </Col>
-          <IconButton disableRipple className={classes.expand}>
-            { open ? <ExpandLess /> : <ExpandMore />}
-          </IconButton>
-        </Col>
-      </Row>
-      { connected &&
-        <React.Fragment>
-          <ExpansionPanelDetails className={classes.details}>
-            <Row grow margin="md">
-              <Details provider={provider} connected={connected} network={network} />
-              <Spacer />
-            </Row>
-            <Row className={classes.user} margin="md" grow >
-              <Identicon address={userAddress} diameter={25} />
-              <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
-              <OpenInNew style={openIconStyle} />
-            </Row>
-            <Col align="center" margin="md">
-              <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
-            </Col>
-          </ExpansionPanelDetails>
-        </React.Fragment>
-      }
-    </React.Fragment>
-  )
-})
-
-export default withStyles(styles)(Header)