Extracting general Provider info layout into a common shared local component

src/components/Header/component/Provider.jsx

@@ -0,0 +1,73 @@
+// @flow
+import * as React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import IconButton from '@material-ui/core/IconButton'
+import ExpandLess from '@material-ui/icons/ExpandLess'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import Col from '~/components/layout/Col'
+import { type Open } from '~/components/hoc/OpenHoc'
+import { sm, md } from '~/theme/variables'
+
+type Props = Open & {
+  classes: Object,
+  popupDetails: React$Node,
+  info: React$Node,
+  children: Function,
+}
+
+const styles = () => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  provider: {
+    padding: `${sm} ${md}`,
+    alignItems: 'center',
+    flex: '0 1 auto',
+    display: 'flex',
+    cursor: 'pointer',
+  },
+  expand: {
+    width: '30px',
+    height: '30px',
+  },
+})
+
+type ProviderRef = { current: null | HTMLDivElement }
+
+class Provider extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props)
+
+    this.myRef = React.createRef()
+  }
+
+  myRef: ProviderRef
+
+  render() {
+    const {
+      open, toggle, children, classes, info,
+    } = this.props
+
+    return (
+      <React.Fragment>
+        <div ref={this.myRef} className={classes.root}>
+          <Col end="sm" middle="xs" className={classes.provider}>
+            { info }
+            <IconButton
+              onClick={toggle}
+              disableRipple
+              className={classes.expand}
+            >
+              { open ? <ExpandLess /> : <ExpandMore />}
+            </IconButton>
+          </Col>
+        </div>
+        { children(this.myRef) }
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(Provider)

src/components/Header/component/Provider/index.jsx

@@ -1,49 +0,0 @@
-// @flow
-import * as React from 'react'
-import openHoc, { type Open } from '~/components/hoc/OpenHoc'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Grow from '@material-ui/core/Grow'
-import Popper from '@material-ui/core/Popper'
-import Connected from './Connected'
-import UserDetails from './UserDetails'
-
-type Props = Open & {
-  provider: string,
-  network: string,
-  userAddress: string,
-  connected: boolean,
-}
-
-const Provider = ({
-  open, toggle, provider, network, userAddress, connected,
-}: Props) => (
-  <Connected
-    provider={provider}
-    network={network}
-    userAddress={userAddress}
-    connected={connected}
-    open={open}
-    toggle={toggle}
-  >
-    {providerRef => (
-      <Popper open={open} anchorEl={providerRef.current} placement="bottom-end">
-        {({ TransitionProps }) => (
-          <Grow
-            {...TransitionProps}
-          >
-            <ClickAwayListener onClickAway={toggle}>
-              <UserDetails
-                provider={provider}
-                network={network}
-                userAddress={userAddress}
-                connected={connected}
-              />
-            </ClickAwayListener>
-          </Grow>
-        )}
-      </Popper>
-    )}
-  </Connected>
-)
-
-export default openHoc(Provider)