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

[#22]: Redesign error screen for user not on mainnet

This commit is contained in:
Aleksandr Pantiukhov 2018-10-04 13:26:22 +03:00
parent 3181e0f120
commit 63668ba232
5 changed files with 26 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/ens/nameLookup.js
View File

@ -23,7 +23,7 @@ import StatusLogo from '../../ui/icons/components/StatusLogo'
import EnsLogo from '../../ui/icons/logos/ens.png';
import { formatPrice } from '../ens/utils';
import CheckCircle from '../../ui/icons/components/baseline_check_circle_outline.png';
import WarningIcon from '../../ui/icons/svg/warning.svg';
import Warning from '../../ui/components/Warning';
const { getPrice, getExpirationTime, release } = UsernameRegistrar.methods;
import NotInterested from '@material-ui/icons/NotInterested';
import Face from '@material-ui/icons/Face';
@ -297,12 +297,7 @@ const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
onChange={handleChange}
required
wide />
{!justSearch &&
<div style={{ textAlign: 'center', marginTop: '40vh' }}>
<img style={{ display: 'block', margin: '0 auto 15px' }} src={WarningIcon} />
Names are made with<br/>letters and numbers only
</div>
}
{!justSearch && <Warning>Names are made with<br/>letters and numbers only</Warning>}
</Hidden>
<Hidden mdDown>
<Button mode="strong" type="submit" style={{ marginLeft: '3%', maxWidth: '95%' }} wide>

96
app/components/standard/NoConnection.js
View File

@ -1,96 +0,0 @@
import React from 'react';
import styles from './style.js';
import EthereumLogo from './../assets/ethereum-logo.svg';
import MetamaskLogo from './../assets/metamask-logo.svg';
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const NoConnection = ({ network }) => console.log(network) || (
<div style={styles.NoEthereumSection}>
<img style={styles.ImgHeaderLogo} alt="Status" src="images/logo.png" />
<hr />
<img
style={styles.ImgEthereumLogo}
alt="Ethereum"
src={EthereumLogo}
/>
<h2>NOT CONNECTED TO ETHEREUM {network.toUpperCase()}</h2>
<p style={styles.PNotFound}>
This application requires an Ethereum client to be running and connected to {capitalize(network)}. A client
could not be detected which probably means it&#39;s not
installed, running or is misconfigured.
</p>
<p style={styles.PUseClients}>
Please use one of the following clients to connect to Ethereum:
</p>
<div style={styles.DivClients}>
<div style={styles.DivSubClients}>
<img style={styles.ImgLogo} alt="Metamask" src={MetamaskLogo} />
<h2>METAMASK</h2>
<p>
<span style={styles.AlignNumber}>
<span style={styles.NumberCircle}>1</span>
</span>Install
<a
href="https://metamask.io/"
rel="noopener noreferrer"
target="_blank"
>
{" "}
Metamask
</a>
</p>
<p>
<span style={styles.AlignNumber}>
<span style={styles.NumberCircle}>2</span>
</span>Use Chrome to browse
<a
rel="noopener noreferrer"
href="https://vote.status.im"
target="_blank"
>
{" "}
https://vote.status.im
</a>
</p>
</div>
<div style={styles.DivSubClients}>
<img style={styles.ImgLogo} alt="Mist" src="images/mist.png" />
<h2>MIST</h2>
<p>
<span style={styles.AlignNumber}>
<span style={styles.NumberCircle}>1</span>
</span>Install and run
<a
rel="noopener noreferrer"
href="https://github.com/ethereum/mist/releases"
target="_blank"
>
{" "}
Mist
</a>
</p>
<p>
<span style={styles.AlignNumber}>
<span style={styles.NumberCircle}>2</span>
</span>
Use Mist to browse
<a
rel="noopener noreferrer"
href="https://vote.status.im"
target="_blank"
>
{" "}
https://vote.status.im
</a>
</p>
</div>
</div>
</div>
);
NoConnection.displayName = 'NoConnection';
export default NoConnection;

4
app/components/standard/Web3Render.js
View File

@ -1,9 +1,9 @@
import React, { Fragment } from 'react';
import NoConnection from './NoConnection';
import Warning from '../../ui/components/Warning';
const Web3Render = ({ ready, children, network }) => (
<Fragment>
{ready ? <Fragment>{children}</Fragment> : <NoConnection network={network} />}
{ready ? <Fragment>{children}</Fragment> : <Warning>Please connect to Ethereum {network}<br />to continue.</Warning>}
</Fragment>
);

68
app/components/standard/style.js
View File

@ -1,68 +0,0 @@
export default {
NoEthereumSection: {
maxWidth: '980px',
margin: '0 auto',
textAlign: 'center',
fontSize: '24px'
},
ImgHeaderLogo: {
width: '264px',
paddingBottom: '30px'
},
ImgEthereumLogo: {
width: '61px',
paddingTop: '30px',
marginBottom: '40px'
},
PNotFound: {
opacity: 0.50,
display: 'inline-block',
letterSpacing: '0.6px',
margin: 10
},
PUseClients: {
display: 'inline-block',
color: '#546979',
fontWeight: 700
},
DivClients: {
height: '360px',
display: 'flex',
justifyContent: 'center',
fontSize: '21px',
marginBottom: '50px',
marginTop: '50px'
},
ImgLogo: {
width: '85px'
},
AlignNumber: {
display: 'table-cell',
verticalAlign: 'middle',
paddingRight: '20px'
},
NumberCircle: {
display: 'inline-block',
borderRadius: '50%',
height: '28px',
width: '28px',
lineHeight: '28px',
textAlign: 'center',
border: 'solid 1px #CFD8DC',
fontSize: '18px',
color: '#222228',
opacity: 0.68
},
DivSubClients: {
backgroundColor: 'white',
width: '340px',
height: '360px',
padding: '33px 10px 33px 27px',
opacity: 0.89,
border: '2px solid #EFF1F3',
boxShadow: '0px 2px 6px 0px rgba(0, 0, 0, 0.13)',
borderRadius: '4px',
margin: '0 20px'
}
}

22
app/ui/components/Warning.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import WarningIcon from '../../ui/icons/svg/warning.svg';
import styled from "styled-components";
const StyledContainer = styled.div`
text-align: center;
margin-top: 40vh;
`
const StyledIcon = styled.img`
display: block;
margin: 0 auto 15px;
`
const Warning = ({ text, ...props }) => (
<StyledContainer>
<StyledIcon src={WarningIcon} />
{props.children}
</StyledContainer>
)
export default Warning;