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

Updated the connected component

This commit is contained in:
apanizo 2018-08-27 18:10:47 +02:00
parent 67e07c8387
commit ff79ca958a
1 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +1,34 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
import Img from '~/components/layout/Img' import Col from '~/components/layout/Col'
import Span from '~/components/layout/Span' import Bold from '~/components/layout/Bold'
import { upperFirst } from '~/utils/css' import Paragraph from '~/components/layout/Paragraph'
const IconParity = require('~/components/Header/assets/icon_parity.svg')
const IconMetamask = require('~/components/Header/assets/icon_metamask.svg')
type Props = { type Props = {
provider: string, provider: string,
} }
const PROVIDER_METAMASK = 'METAMASK' const leftColumnStyle = {
const PROVIDER_PARITY = 'PARITY' maxWidth: '80px',
const PROVIDER_ICONS = {
[PROVIDER_METAMASK]: IconMetamask,
[PROVIDER_PARITY]: IconParity,
} }
const Connected = ({ provider }: Props) => { const paragraphStyle = {
const msg = `You are using ${upperFirst(provider.toLowerCase())} to connect to your Safe` margin: '2px',
return (
<React.Fragment>
{ PROVIDER_ICONS[provider] &&
<Img
height={40}
src={PROVIDER_ICONS[provider]}
title={msg}
alt={msg}
/>
}
<Span>Connected</Span>
</React.Fragment>
)
} }
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 export default Connected