diff --git a/app/components/assets/ethereum-logo.svg b/app/components/assets/ethereum-logo.svg new file mode 100644 index 0000000..c675f46 --- /dev/null +++ b/app/components/assets/ethereum-logo.svg @@ -0,0 +1,36 @@ + + + + Group + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/components/assets/metamask-logo.svg b/app/components/assets/metamask-logo.svg new file mode 100644 index 0000000..a6506e7 --- /dev/null +++ b/app/components/assets/metamask-logo.svg @@ -0,0 +1,11 @@ + + + diff --git a/app/components/assets/mist-logo.svg b/app/components/assets/mist-logo.svg new file mode 100644 index 0000000..d86c1be --- /dev/null +++ b/app/components/assets/mist-logo.svg @@ -0,0 +1,18 @@ + + + + mist + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/components/standard/NoConnection.js b/app/components/standard/NoConnection.js new file mode 100644 index 0000000..2b3df17 --- /dev/null +++ b/app/components/standard/NoConnection.js @@ -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 ( +
+ Status +
+ Ethereum +

NOT CONNECTED TO ETHEREUM MAINNET

+

+ 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. +

+

+ Please use one of the following clients to connect to Ethereum: +

+
+
+ Metamask +

METAMASK

+

+ + 1 + Install + + {" "} + Metamask + +

+

+ + 2 + Use Chrome to browse + + {" "} + https://vote.status.im + +

+
+
+ Mist +

MIST

+

+ + 1 + Install and run + + {" "} + Mist + +

+

+ + 2 + + Use Mist to browse + + {" "} + https://vote.status.im + +

+
+
+
+ ); +}; + +NoConnection.displayName = "NoConnection"; + +export default NoConnection diff --git a/app/components/standard/Web3Render.js b/app/components/standard/Web3Render.js index 7aa5e78..8f4160f 100644 --- a/app/components/standard/Web3Render.js +++ b/app/components/standard/Web3Render.js @@ -1,4 +1,5 @@ import React, { Fragment } from 'react'; +import NoConnection from './NoConnection'; const NoWeb3 = () => (
@@ -8,7 +9,7 @@ const NoWeb3 = () => ( const Web3Render = ({ ready, children }) => ( - {ready ? {children} : } + {ready ? {children} : } ); diff --git a/app/components/standard/style.js b/app/components/standard/style.js new file mode 100644 index 0000000..1d6ad57 --- /dev/null +++ b/app/components/standard/style.js @@ -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' + } + +} + diff --git a/app/images/mist.png b/app/images/mist.png new file mode 100644 index 0000000..6b59c9b Binary files /dev/null and b/app/images/mist.png differ