mirror of
https://github.com/status-im/snt-voting.git
synced 2025-02-23 07:38:07 +00:00
add no connection page
This commit is contained in:
Barry Gitarts
parent
44bbf31aa3
commit
d3590a52ce
36
app/components/assets/ethereum-logo.svg
Normal file
36
app/components/assets/ethereum-logo.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="62px" height="98px" viewBox="0 0 62 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0.453356748 55.2658632 30.5000004 72.7014496 60.5810903 55.1361244 30.5000009 97.240191"></polygon>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.337254902 0 0 0 0 0.337254902 0 0 0 0 0.337254902 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-3" points="0 49.4579439 30.5000008 0 60.706916 49.4579439 30.5 67.7757009"></polygon>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Maker_LANDING_PAGE" transform="translate(-689.000000, -491.000000)">
|
||||
<g id="Group" transform="translate(689.500000, 491.000000)">
|
||||
<g id="Rectangle-3">
|
||||
<use fill="#8C8C8E" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<g id="Rectangle-4">
|
||||
<use fill="#4C4C51" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
11
app/components/assets/metamask-logo.svg
Normal file
11
app/components/assets/metamask-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
18
app/components/assets/mist-logo.svg
Normal file
18
app/components/assets/mist-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 123 KiB |
94
app/components/standard/NoConnection.js
Normal file
94
app/components/standard/NoConnection.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import styles from "./style.js";
|
||||
import EthereumLogo from "./../assets/ethereum-logo.svg";
|
||||
import MetamaskLogo from "./../assets/metamask-logo.svg";
|
||||
|
||||
const NoConnection = () => {
|
||||
return (
|
||||
<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 MAINNET</h2>
|
||||
<p style={styles.PNotFound}>
|
||||
This application requires an Ethereum client to be running and connected to Mainnet. A client
|
||||
could not be detected which probably means it'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
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import NoConnection from './NoConnection';
|
||||
|
||||
const NoWeb3 = () => (
|
||||
<div>
|
||||
@ -8,7 +9,7 @@ const NoWeb3 = () => (
|
||||
|
||||
const Web3Render = ({ ready, children }) => (
|
||||
<Fragment>
|
||||
{ready ? <Fragment>{children}</Fragment> : <NoWeb3 />}
|
||||
{ready ? <Fragment>{children}</Fragment> : <NoConnection />}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
|
||||
71
app/components/standard/style.js
Normal file
71
app/components/standard/style.js
Normal file
@ -0,0 +1,71 @@
|
||||
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,
|
||||
width: '925px',
|
||||
display: 'inline-block',
|
||||
marginTop: '50px',
|
||||
marginBottom: '70px',
|
||||
letterSpacing: '0.6px'
|
||||
},
|
||||
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'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
BIN
app/images/mist.png
Normal file
BIN
app/images/mist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Loading…
x
Reference in New Issue
Block a user