Add Web3Provider

package.json

@@ -75,6 +75,7 @@
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.6",
     "promise": "7.1.1",
+    "prop-types": "^15.6.1",
     "qrcode.react": "^0.7.2",
     "query-string": "^5.0.1",
     "react": "^15.6.1",

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react'
 import './assets/stylesheets/application.css';
 import { Header, Footer, Home, Manage, stepOne, stepTwo, stepThree, stepFour, Crowdsale, Invest } from './components/index'
+import NoWeb3 from './components/Common/NoWeb3'
 import IncompleteDeploy from './components/IncompleteDeploy'
 import { getQueryVariable } from './utils/utils'
 import {
@@ -12,6 +13,7 @@ import {
 import AlertContainer from 'react-alert'
 import { TOAST } from './utils/constants'
 import { toast } from './utils/utils'
+import { Web3Provider } from './react-web3'
 
 @inject('deploymentStore')
 @observer
@@ -25,26 +27,31 @@ class App extends Component {
         <div>
           <Header/>
 
-          <Switch>
-            {/* The route to /4 must be first for the incomplete deploy redirect to work */}
-            <Route path="/4" component={stepFour}/>
+          <Web3Provider
+            passive={true}
+            web3UnavailableScreen={NoWeb3}
+          >
+            <Switch>
+              {/* The route to /4 must be first for the incomplete deploy redirect to work */}
+              <Route path="/4" component={stepFour}/>
 
-            {
-              deploymentStore.deploymentStep !== null ? (
-                <IncompleteDeploy />
-              ) : (
-                <Switch>
-                  <Route exact path="/" component={crowdsaleAddr ? Crowdsale : Home}/>
-                  <Route exact path="/crowdsale" component={Crowdsale}/>
-                  <Route exact path="/invest" component={Invest}/>
-                  <Route exact path="/manage/:crowdsaleAddress" component={Manage}/>
-                  <Route path="/1" component={stepOne}/>
-                  <Route path="/2" component={stepTwo}/>
-                  <Route path="/3" component={stepThree}/>
-                </Switch>
-              )
-            }
-          </Switch>
+              {
+                deploymentStore.deploymentStep !== null ? (
+                  <IncompleteDeploy />
+                ) : (
+                  <Switch>
+                    <Route exact path="/" component={crowdsaleAddr ? Crowdsale : Home}/>
+                    <Route exact path="/crowdsale" component={Crowdsale}/>
+                    <Route exact path="/invest" component={Invest}/>
+                    <Route exact path="/manage/:crowdsaleAddress" component={Manage}/>
+                    <Route path="/1" component={stepOne}/>
+                    <Route path="/2" component={stepTwo}/>
+                    <Route path="/3" component={stepThree}/>
+                  </Switch>
+                )
+              }
+            </Switch>
+          </Web3Provider>
 
           <Footer/>
           <AlertContainer ref={a => toast.msg = a} {...TOAST.DEFAULT_OPTIONS} />

src/components/Common/NoWeb3.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+export default class NoWeb3 extends Component {
+  render () {
+    return (
+      <div>
+        <section className="home">
+          <div className="crowdsale">
+            <div className="container">
+              <h1 className="title">MetaMask Not Found</h1>
+              <p className="description">
+              You don't have MetaMask installed. Check Token Wizard GitHub for <a href='https://github.com/poanetwork/token-wizard' target='blank'>the instruction</a>.
+              </p>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+}

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Web3 from 'web3'
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import { useStrict } from 'mobx';
@@ -13,6 +14,11 @@ if (!process.env['REACT_APP_REGISTRY_ADDRESS']) {
   throw new Error('REACT_APP_REGISTRY_ADDRESS env variable is not present')
 }
 
+const devEnvironment = process.env.NODE_ENV === 'development';
+if (devEnvironment) {
+  window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
+}
+
 ReactDOM.render(
   <Provider { ...stores }>
     <App />

src/react-web3/Web3Provider.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+
+class Web3Provider extends Component {
+  render() {
+    if (window.web3) {
+      return this.props.children
+    }
+
+    return <this.props.web3UnavailableScreen />
+  }
+
+  getChildContext() {
+    return {
+      web3: window.web3
+    }
+  }
+}
+
+Web3Provider.childContextTypes = {
+  web3: PropTypes.object
+}
+
+export default Web3Provider;

src/react-web3/index.js

@@ -0,0 +1,3 @@
+import Web3Provider from './Web3Provider'
+
+export { Web3Provider }