Moving Popper into Header's Layout and reusing openHoc attrs from there

src/components/Header/component/Layout.jsx

@@ -6,14 +6,19 @@ import openHoc, { type Open } from '~/components/hoc/OpenHoc'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Popper from '@material-ui/core/Popper'
 import Spacer from '~/components/Spacer'
 import { border, sm, md } from '~/theme/variables'
+import Provider from './Provider'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
 type Props = Open & {
   classes: Object,
-  children: React$Node,
+  providerDetails: React$Node,
+  providerInfo: React$Node,
 }
 
 const styles = () => ({
@@ -29,7 +34,9 @@ const styles = () => ({
   },
 })
 
-const Header = openHoc(({ classes, children }: Props) => (
+const Layout = openHoc(({
+  open, toggle, classes, providerInfo, providerDetails,
+}: Props) => (
   <React.Fragment>
     <Row className={classes.summary}>
       <Col start="xs" middle="xs" className={classes.logo}>
@@ -38,9 +45,23 @@ const Header = openHoc(({ classes, children }: Props) => (
       <Divider />
       <Spacer />
       <Divider />
-      { children }
+      <Provider open={open} toggle={toggle} info={providerInfo}>
+        {providerRef => (
+          <Popper open={open} anchorEl={providerRef.current} placement="bottom-end">
+            {({ TransitionProps }) => (
+              <Grow
+                {...TransitionProps}
+              >
+                <ClickAwayListener onClickAway={toggle}>
+                  {providerDetails}
+                </ClickAwayListener>
+              </Grow>
+            )}
+          </Popper>
+        )}
+      </Provider>
     </Row>
   </React.Fragment>
 ))
 
-export default withStyles(styles)(Header)
+export default withStyles(styles)(Layout)

src/components/Header/component/Layout.stories.js

@@ -1,9 +1,12 @@
 // @flow
-import { select } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import * as React from 'react'
 import styles from '~/components/layout/PageFrame/index.scss'
-import Component from './Layout'
+import Layout from './Layout'
+import ProviderInfo from './ProviderInfo'
+import ProviderDetails from './ProviderInfo/UserDetails'
+import ProviderDisconnected from './ProviderDisconnected'
+import ConnectDetails from './ProviderDisconnected/ConnectDetails'
 
 const FrameDecorator = story => (
   <div className={styles.frame}>
@@ -13,8 +16,18 @@ const FrameDecorator = story => (
 
 storiesOf('Components', module)
   .addDecorator(FrameDecorator)
-  .add('Header', () => {
+  .add('Connected Header', () => {
-    // https://github.com/storybooks/storybook/tree/master/addons/knobs#select
+    const provider = 'METAMASK'
-    const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'METAMASK')
+    const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
-    return <Component provider={provider} reloadWallet={() => {}} />
+    const network = 'RINKEBY'
+    const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected />
+    const details = <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected />
+
+    return <Layout providerInfo={info} providerDetails={details} />
+  })
+  .add('Disconnected Header', () => {
+    const info = <ProviderDisconnected />
+    const details = <ConnectDetails />
+
+    return <Layout providerInfo={info} providerDetails={details} />
   })