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 connectedLogo = require('../../assets/connected.svg')
const connectedWarning = require('../../assets/connected-error.svg')
const dot = require('../../assets/dotRinkeby.svg')
type Props = {
@ -78,6 +79,8 @@ const UserDetails = ({
}: Props) => {
const status = connected ? 'Connected' : 'Not connected'
const address = shortVersionOf(userAddress, 6)
const connectionLogo = connected ? connectedLogo : connectedWarning
const color = connected ? 'primary' : 'warning'
return (
<React.Fragment>
@ -94,8 +97,8 @@ const UserDetails = ({
<Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Status </Paragraph>
<Spacer />
<Img className={classes.logo} src={connectedLogo} height={16} alt="Status connected" />
<Paragraph size="sm" noMargin align="right">
<Img className={classes.logo} src={connectionLogo} height={16} alt="Conection Status" />
<Paragraph size="sm" noMargin align="right" color={color}>
<Bold>
{status}
</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'
const connectedLogo = require('../../assets/connected.svg')
const connectedWarning = require('../../assets/connected-error.svg')
type Props = {
provider: string,
@ -42,16 +43,18 @@ const styles = () => ({
const ProviderInfo = ({
provider, network, userAddress, connected, classes,
}: Props) => {
const providerText = connected ? `${provider} [${network}]` : 'Not connected'
const cutAddress = connected ? shortVersionOf(userAddress, 6) : ''
const providerText = `${provider} [${network}]`
const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
const color = connected ? 'primary' : 'warning'
const logo = connected ? connectedLogo : connectedWarning
return (
<React.Fragment>
<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}>
<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>
</React.Fragment>
)