Merge ee07df5 into ffa90d6

package.json

@@ -78,6 +78,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
+            onChangeAccount={deploymentStore.handleAccountChange}
+            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.deployInProgress ? (
+                  <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/components/IncompleteDeploy.js

@@ -1,16 +1,10 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom'
-import { cancellingIncompleteDeploy } from '../utils/alerts'
+import cancelDeploy from '../utils/cancelDeploy'
 
 class CheckIncompleteDeploy extends Component {
   cancel() {
-    return cancellingIncompleteDeploy()
-      .then(result => {
-        if (result.value) {
-          localStorage.clear()
-          window.location.reload()
-        }
-      })
+    cancelDeploy()
   }
 
   render() {

src/components/stepFour/index.js

@@ -31,20 +31,30 @@ import { isObservableArray } from 'mobx'
 import JSZip from 'jszip'
 import executeSequentially from '../../utils/executeSequentially'
 import { PreventRefresh } from '../Common/PreventRefresh'
+import cancelDeploy from '../../utils/cancelDeploy'
+import PropTypes from 'prop-types'
 
 const { PUBLISH } = NAVIGATION_STEPS
 
 @inject('contractStore', 'reservedTokenStore', 'tierStore', 'tokenStore', 'web3Store', 'deploymentStore')
 @observer
 export class stepFour extends React.Component {
-  constructor (props) {
+  constructor (props, context) {
     super(props)
     this.state = {
       contractDownloaded: false,
       modal: false,
+      preventRefresh: true,
       transactionFailed: false
     }
+
     this.props.deploymentStore.setDeploymentStep(0)
+    this.props.deploymentStore.setDeployerAccount(context.selectedAccount)
+  }
+
+  static contextTypes = {
+    web3: PropTypes.object,
+    selectedAccount: PropTypes.string
   }
 
   contractDownloadSuccess = options => {
@@ -64,12 +74,13 @@ export class stepFour extends React.Component {
 
   deployCrowdsale = () => {
     const { contractStore, deploymentStore } = this.props
+    const { web3 } = this.context
     const isWhitelistWithCap = contractStore.contractType === CONTRACT_TYPES.whitelistwithcap
     const firstRun = deploymentStore.deploymentStep === null
 
     if (isWhitelistWithCap) {
       if (firstRun) {
-        setupContractDeployment()
+        setupContractDeployment(web3)
           .then(this.resumeContractDeployment)
       } else {
         this.resumeContractDeployment()
@@ -79,8 +90,9 @@ export class stepFour extends React.Component {
 
   resumeContractDeployment = () => {
     const { deploymentStore } = this.props
+    const { web3 } = this.context
     const startAt = deploymentStore.deploymentStep ? deploymentStore.deploymentStep : 0
-    const deploymentSteps = buildDeploymentSteps()
+    const deploymentSteps = buildDeploymentSteps(web3)
 
     executeSequentially(deploymentSteps, startAt, (index) => {
       deploymentStore.setDeploymentStep(index)
@@ -239,6 +251,30 @@ export class stepFour extends React.Component {
     this.props.history.push(newHistory)
   }
 
+  cancelDeploy = (e) => {
+    e.preventDefault();
+
+    this.hideModal(); // hide modal, otherwise the warning doesn't show up
+
+    // avoid the beforeunload alert when user cancels the deploy
+    this.setState({
+      preventRefresh: false
+    })
+
+    cancelDeploy()
+      .then(
+        (cancelled) => {
+          if (!cancelled) {
+            this.setState({
+              preventRefresh: true
+            })
+            this.showModal()
+          }
+        },
+        () => this.showModal()
+      )
+  }
+
   render() {
     const { tierStore, contractStore, tokenStore, deploymentStore } = this.props
     const crowdsaleSetups = tierStore.tiers.map((tier, index) => {
@@ -391,6 +427,21 @@ export class stepFour extends React.Component {
         />
       </div>
     )
+
+    const modalContent = deploymentStore.invalidAccount ? (
+      <div>
+        This deploy was started with account <b>{deploymentStore.deployerAccount}</b> but the current account is <b>{this.context.selectedAccount}</b>.
+        Please select the original account to continue with the deploy.
+        If you don't want to continue with that deploy, <a href="#" onClick={this.cancelDeploy}>click here</a>.
+      </div>
+    ) : (
+      <TxProgressStatus
+        txMap={deploymentStore.txMap}
+        deployCrowdsale={this.deployCrowdsale}
+        onSkip={this.state.transactionFailed ? this.skipTransaction : null}
+      />
+    )
+
     return (
       <section className="steps steps_publish">
         <StepNavigation activeStep={PUBLISH} />
@@ -491,13 +542,9 @@ export class stepFour extends React.Component {
           title={'Tx Status'}
           showModal={this.state.modal}
         >
-          <TxProgressStatus
-            txMap={deploymentStore.txMap}
-            deployCrowdsale={this.deployCrowdsale}
-            onSkip={this.state.transactionFailed ? this.skipTransaction : null}
-          />
+          { modalContent }
         </ModalContainer>
-        <PreventRefresh/>
+        { this.state.preventRefresh ? <PreventRefresh /> : null }
       </section>
     )}
 }

src/components/stepFour/utils.js

@@ -23,7 +23,7 @@ import {
 import { getEncodedABIClientSide } from '../../utils/microservices'
 import { BigNumber } from 'bignumber.js'
 
-export const setupContractDeployment = () => {
+export const setupContractDeployment = (web3) => {
   if (!contractStore.safeMathLib) {
     noContractDataAlert()
     return Promise.reject('no contract data')
@@ -36,7 +36,7 @@ export const setupContractDeployment = () => {
   const whenTokenABIConstructor = Promise.resolve(tokenAddr)
     .then(tokenAddr => {
       if (!tokenAddr) {
-        return getEncodedABIClientSide(tokenABI, [], 0)
+        return getEncodedABIClientSide(web3, tokenABI, [], 0)
           .then(ABIEncoded => {
             console.log('token ABI Encoded params constructor:', ABIEncoded)
             contractStore.setContractProperty('token', 'abiConstructor', ABIEncoded)
@@ -45,7 +45,7 @@ export const setupContractDeployment = () => {
     })
 
   const whenPricingStrategyContract = tierStore.tiers.map((value, index) => {
-    return getEncodedABIClientSide(pricingStrategyABI, [], index)
+    return getEncodedABIClientSide(web3, pricingStrategyABI, [], index)
       .then(ABIEncoded => {
         console.log('pricingStrategy ABI Encoded params constructor:', ABIEncoded)
         const newContract = contractStore.pricingStrategy.abiConstructor.concat(ABIEncoded)
@@ -56,14 +56,14 @@ export const setupContractDeployment = () => {
   return Promise.all([whenTokenABIConstructor, ...whenPricingStrategyContract])
 }
 
-export const buildDeploymentSteps = () => {
+export const buildDeploymentSteps = (web3) => {
   const stepFnCorrelation = {
     safeMathLibrary: deploySafeMathLibrary,
     token: deployToken,
-    pricingStrategy: deployPricingStrategy,
+    pricingStrategy: deployPricingStrategy(web3),
     crowdsale: deployCrowdsale,
     registerCrowdsaleAddress: registerCrowdsaleAddress,
-    finalizeAgent: deployFinalizeAgent,
+    finalizeAgent: deployFinalizeAgent(web3),
     tier: setTier,
     setReservedTokens: setReservedTokensListMultiple,
     updateJoinedCrowdsales: updateJoinedCrowdsales,
@@ -157,7 +157,7 @@ const getPricingStrategyParams = tier => {
   ]
 }
 
-export const deployPricingStrategy = () => {
+export const deployPricingStrategy = (web3) => () => {
   return tierStore.tiers.map((tier, index) => {
     return () => {
       const abiPricingStrategy = contractStore.pricingStrategy.abi || []
@@ -169,7 +169,7 @@ export const deployPricingStrategy = () => {
       return deployContract(abiPricingStrategy, binPricingStrategy, paramsPricingStrategy)
         .then(pricingStrategyAddr => contractStore.pricingStrategy.addr.concat(pricingStrategyAddr))
         .then(newPricingStrategy => contractStore.setContractProperty('pricingStrategy', 'addr', newPricingStrategy))
-        .then(() => getEncodedABIClientSide(abiCrowdsale, [], index, true))
+        .then(() => getEncodedABIClientSide(web3, abiCrowdsale, [], index, true))
         .then(ABIEncoded => contractStore.crowdsale.abiConstructor.concat(ABIEncoded))
         .then(newContract => contractStore.setContractProperty('crowdsale', 'abiConstructor', newContract))
         .then(() => deploymentStore.setAsSuccessful('pricingStrategy'))
@@ -267,7 +267,7 @@ const getFinalizeAgentParams = index => {
   ]
 }
 
-export const deployFinalizeAgent = () => {
+export const deployFinalizeAgent = (web3) => () => {
   return tierStore.tiers.map((tier, index, tiers) => {
     return () => {
       let abi, bin, paramsFinalizeAgent
@@ -282,7 +282,7 @@ export const deployFinalizeAgent = () => {
         bin = contractStore.nullFinalizeAgent.bin || ''
       }
 
-      return getEncodedABIClientSide(abi, [], index)
+      return getEncodedABIClientSide(web3, abi, [], index)
         .then(ABIEncoded => {
           console.log('finalizeAgent ABI encoded params constructor:', ABIEncoded)
 

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) {
+  window.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
+}
+
 ReactDOM.render(
   <Provider { ...stores }>
     <App />