add web3 provider indicator

app/components/assets/ethereum-logo.svg

@@ -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>

app/components/standard/NoConnection.js

@@ -0,0 +1,96 @@
+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;

app/components/standard/Web3Render.js

@@ -0,0 +1,10 @@
+import React, { Fragment } from 'react';
+import NoConnection from './NoConnection';
+
+const Web3Render = ({ ready, children, network }) => (
+  <Fragment>
+    {ready ? <Fragment>{children}</Fragment> : <NoConnection network={network} />}
+  </Fragment>
+);
+
+export default Web3Render;

app/components/standard/style.js

@@ -0,0 +1,68 @@
+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'
+  }
+
+}

app/dapp.js

@@ -20,6 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import Welcome from './components/ens/welcome';
 import Fade from '@material-ui/core/Fade';
 import Hidden from '@material-ui/core/Hidden';
+import Web3Render from './components/standard/Web3Render';
 
 import './dapp.css';
 
@@ -47,6 +48,7 @@ class App extends React.Component {
   render() {
     const { admin, network, searching } = this.state;
     const toggleSearch = () => { this.setState({ searching: !searching }) };
+    const isRopsten = network === 'ropsten';
     return (
       <div>
         <CssBaseline />
@@ -59,21 +61,23 @@ class App extends React.Component {
           </div>
         </Fade>}
         {searching && <Fade in={searching}>
-          <div>
+          <Web3Render ready={isRopsten} network="ropsten">
-            <NameLookup />
+            <div>
-            <Hidden mdDown>
+              <NameLookup />
-              <div style={{ textAlign: 'center', margin: '0px 40px' }}>
+              <Hidden mdDown>
-                <TokenPermissions
+                <div style={{ textAlign: 'center', margin: '0px 40px' }}>
-                  symbol={symbols[network] || 'SNT'}
+                  <TokenPermissions
-                  spender={ENSSubdomainRegistry._address}
+                    symbol={symbols[network] || 'SNT'}
-                  methods={TestToken.methods} />
+                    spender={ENSSubdomainRegistry._address}
-                <hr/>
+                    methods={TestToken.methods} />
-                <Toggle onChange={() => { this.setState({ admin: !admin })}} />
+                  <hr/>
-                <br/>
+                  <Toggle onChange={() => { this.setState({ admin: !admin })}} />
-                <span>Admin Mode</span>
+                  <br/>
-              </div>
+                  <span>Admin Mode</span>
-            </Hidden>
+                </div>
-          </div>
+              </Hidden>
+            </div>
+          </Web3Render>
         </Fade>}
       </div>
     );