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

Logic extension to ProviderConnected component to support not available proivder

This commit is contained in:
apanizo 2018-09-06 10:56:44 +02:00
parent 3040c6d6ea
commit 4029f23c90
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Header/component/ProviderInfo/UserDetails.jsx
View File

@ -17,6 +17,7 @@ import { shortVersionOf } from '~/logic/wallets/ethAddresses'
const metamask = require('../../assets/metamask.svg') const metamask = require('../../assets/metamask.svg')
const connectedLogo = require('../../assets/connected.svg') const connectedLogo = require('../../assets/connected.svg')
const connectedWarning = require('../../assets/connected-error.svg')
const dot = require('../../assets/dotRinkeby.svg') const dot = require('../../assets/dotRinkeby.svg')
type Props = { type Props = {
@ -78,6 +79,8 @@ const UserDetails = ({
}: Props) => { }: Props) => {
const status = connected ? 'Connected' : 'Not connected' const status = connected ? 'Connected' : 'Not connected'
const address = shortVersionOf(userAddress, 6) const address = shortVersionOf(userAddress, 6)
const connectionLogo = connected ? connectedLogo : connectedWarning
const color = connected ? 'primary' : 'warning'
return ( return (
<React.Fragment> <React.Fragment>
@ -94,8 +97,8 @@ const UserDetails = ({
<Row className={classes.details}> <Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Status </Paragraph> <Paragraph size="sm" noMargin align="right">Status </Paragraph>
<Spacer /> <Spacer />
<Img className={classes.logo} src={connectedLogo} height={16} alt="Status connected" /> <Img className={classes.logo} src={connectionLogo} height={16} alt="Conection Status" />
<Paragraph size="sm" noMargin align="right"> <Paragraph size="sm" noMargin align="right" color={color}>
<Bold> <Bold>
{status} {status}
</Bold> </Bold>

11
src/components/Header/component/ProviderInfo/index.jsx
View File

@ -9,6 +9,7 @@ import Identicon from '~/components/Identicon'
import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { shortVersionOf } from '~/logic/wallets/ethAddresses'
const connectedLogo = require('../../assets/connected.svg') const connectedLogo = require('../../assets/connected.svg')
const connectedWarning = require('../../assets/connected-error.svg')
type Props = { type Props = {
provider: string, provider: string,
@ -42,16 +43,18 @@ const styles = () => ({
const ProviderInfo = ({ const ProviderInfo = ({
provider, network, userAddress, connected, classes, provider, network, userAddress, connected, classes,
}: Props) => { }: Props) => {
const providerText = connected ? `${provider} [${network}]` : 'Not connected' const providerText = `${provider} [${network}]`
const cutAddress = connected ? shortVersionOf(userAddress, 6) : '' const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
const color = connected ? 'primary' : 'warning'
const logo = connected ? connectedLogo : connectedWarning
return ( return (
<React.Fragment> <React.Fragment>
<Identicon address={userAddress} diameter={30} /> <Identicon address={userAddress} diameter={30} />
<Img className={classes.logo} src={connectedLogo} height={20} alt="Status connected" /> <Img className={classes.logo} src={logo} height={20} alt="Connection status" />
<Col end="sm" middle="xs" layout="column" className={classes.account}> <Col end="sm" middle="xs" layout="column" className={classes.account}>
<Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">{providerText}</Paragraph> <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">{providerText}</Paragraph>
<Paragraph size="sm" className={classes.address} noMargin>{cutAddress}</Paragraph> <Paragraph size="sm" className={classes.address} noMargin color={color}>{cutAddress}</Paragraph>
</Col> </Col>
</React.Fragment> </React.Fragment>
) )