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,33 +90,31 @@ const openIconStyle = {
 
 const Header = openHoc(({
   open, toggle, provider, network, connected, classes, userAddress,
-}: Props) => {
+}: Props) => (
-  const providerText = connected ? `${provider} [${network}]` : 'Not connected'
-  const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : ''
-
-  return (
   <React.Fragment>
-      <Row onClick={toggle} className={classes.summary}>
+    <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 />
-        <Col end="sm" middle="xs" className={classes.provider}>
+      <Provider
-          { connected && <Identicon address={userAddress} diameter={25} /> }
+        provider={provider}
-          <Col end="sm" middle="xs" layout="column" className={classes.account}>
+        network={network}
-            <Paragraph size="sm" transform="capitalize" noMargin bold>{providerText}</Paragraph>
+        userAddress={userAddress}
-            <Paragraph size="sm" noMargin>{cutAddress}</Paragraph>
+        connected={connected}
-          </Col>
+        open={open}
-          <IconButton disableRipple className={classes.expand}>
+        toggle={toggle}
-            { open ? <ExpandLess /> : <ExpandMore />}
+      >
-          </IconButton>
+        {myRef => (
-        </Col>
+          <Popper open={open} anchorEl={myRef.current} placement="bottom-end">
-      </Row>
+            {({ TransitionProps }) => (
-      { connected &&
+              <Grow
+                {...TransitionProps}
+              >
+                <ClickAwayListener onClickAway={toggle} className={classes.details}>
                   <React.Fragment>
-          <ExpansionPanelDetails className={classes.details}>
                     <Row grow margin="md">
                       <Details provider={provider} connected={connected} network={network} />
                       <Spacer />
@@ -146,11 +127,15 @@ const Header = openHoc(({
                     <Col align="center" margin="md">
                       <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
                     </Col>
-          </ExpansionPanelDetails>
                   </React.Fragment>
-      }
+                </ClickAwayListener>
+              </Grow>
+            )}
+          </Popper>
+        )}
+      </Provider>
+    </Row>
   </React.Fragment>
-  )
+))
-})
 
-export default withStyles(styles)(Header)
+export default withStyles(styles)(openHoc(Header))