Sent information to Details component

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

@@ -1,34 +0,0 @@
-// @flow
-import * as React from 'react'
-import Col from '~/components/layout/Col'
-import Bold from '~/components/layout/Bold'
-import Paragraph from '~/components/layout/Paragraph'
-
-type Props = {
-  provider: string,
-}
-
-const leftColumnStyle = {
-  maxWidth: '80px',
-}
-
-const paragraphStyle = {
-  margin: '2px',
-}
-
-const Connected = ({ provider }: Props) => (
-  <React.Fragment>
-    <Col style={leftColumnStyle} layout="column">
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Status: </Paragraph>
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Client: </Paragraph>
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Network: </Paragraph>
-    </Col>
-    <Col style={leftColumnStyle} layout="column">
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>Connected</Bold></Paragraph>
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>{provider}</Bold></Paragraph>
-      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>Rinkeby</Bold></Paragraph>
-    </Col>
-  </React.Fragment>
-)
-
-export default Connected

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

@@ -0,0 +1,40 @@
+// @flow
+import * as React from 'react'
+import Col from '~/components/layout/Col'
+import Bold from '~/components/layout/Bold'
+import Paragraph from '~/components/layout/Paragraph'
+
+type Props = {
+  provider: string,
+  network: string,
+  connected: boolean,
+}
+
+const leftColumnStyle = {
+  maxWidth: '80px',
+}
+
+const paragraphStyle = {
+  margin: '2px',
+}
+
+const Details = ({ provider, network, connected }: Props) => {
+  const status = connected ? 'Connected' : 'Not connected'
+
+  return (
+    <React.Fragment>
+      <Col style={leftColumnStyle} layout="column">
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Status: </Paragraph>
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Client: </Paragraph>
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Network: </Paragraph>
+      </Col>
+      <Col style={leftColumnStyle} layout="column">
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>{status}</Bold></Paragraph>
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>{provider}</Bold></Paragraph>
+        <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>{network}</Bold></Paragraph>
+      </Col>
+    </React.Fragment>
+  )
+}
+
+export default Details

src/components/Header/component/Layout.jsx

@@ -14,13 +14,16 @@ import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import Identicon from '~/components/Identicon'
 import Spacer from '~/components/Spacer'
-import Connected from './Connected'
+import Details from './Details'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
 type Props = {
   provider: string,
   classes: Object,
+  network: string,
+  userAddress: string,
+  connected: boolean,
 }
 
 const styles = theme => ({
@@ -86,8 +89,15 @@ const styles = theme => ({
   },
 })
 
-const Header = ({ provider, classes }: Props) => {
+const openIconStyle = {
-  const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected'
+  height: '14px',
+}
+
+const Header = ({
+  provider, network, connected, classes, userAddress,
+}: Props) => {
+  const providerText = connected ? `${provider} [${network}]` : 'Not connected'
+  const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : ''
 
   return (
     <Block margin="md">
@@ -100,21 +110,21 @@ const Header = ({ provider, classes }: Props) => {
             <Spacer />
             <Col end="sm" middle="xs" layout="column" className={classes.provider}>
               <Paragraph size="sm" transform="capitalize" noMargin bold>{providerText}</Paragraph>
-              <Paragraph size="sm" noMargin>0x873faa....d30aaa</Paragraph>
+              <Paragraph size="sm" noMargin>{cutAddress}</Paragraph>
             </Col>
           </Row>
         </ExpansionPanelSummary>
-        { provider &&
+        { connected &&
           <React.Fragment>
             <ExpansionPanelDetails className={classes.details}>
               <Row grow margin="md">
-                <Connected provider={provider} />
+                <Details provider={provider} connected={connected} network={network} />
                 <Spacer />
               </Row>
               <Row className={classes.user} margin="md" grow >
-                <Identicon address="0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b" diameter={25} />
+                <Identicon address={userAddress} diameter={25} />
-                <Paragraph className={classes.address} size="sm" noMargin>0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b</Paragraph>
+                <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
-                <OpenInNew style={{ height: '14px' }} />
+                <OpenInNew style={openIconStyle} />
               </Row>
               <Col align="center" margin="md" grow>
                 <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>