status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Sent information to Details component

This commit is contained in:
apanizo 2018-08-28 11:17:45 +02:00
parent f069ca82a6
commit bb7b7ff421
3 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Header/component/Connected/index.jsx
View File

@ -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

40
src/components/Header/component/Details/index.jsx Normal file
View File

@ -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

28
src/components/Header/component/Layout.jsx
View File

@ -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 providerText = provider ? `${provider} [Rinkeby]` : 'Not connected'
const openIconStyle = {
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} />
<Paragraph className={classes.address} size="sm" noMargin>0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b</Paragraph>
<OpenInNew style={{ height: '14px' }} />
<Identicon address={userAddress} diameter={25} />
<Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
<OpenInNew style={openIconStyle} />
</Row>
<Col align="center" margin="md" grow>
<Button size="small" variant="raised" color="secondary">DISCONNECT</Button>