Merge 385cf4f into 8e67f77

package.json

@@ -75,6 +75,7 @@
     "final-form": "^4.3.1",
     "final-form-arrays": "^1.0.4",
     "final-form-calculate": "^1.1.0",
+    "final-form-set-field-touched": "^1.0.0",
     "font-awesome": "^4.7.0",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",

src/App.js

@@ -16,19 +16,18 @@ import {
 } from './components/index'
 import NoWeb3 from './components/Common/NoWeb3'
 import IncompleteDeploy from './components/IncompleteDeploy'
-import { getQueryVariable } from './utils/utils'
+import { getAddr, toast } from './utils/utils'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import AlertContainer from 'react-alert'
 import { TOAST } from './utils/constants'
-import { toast } from './utils/utils'
 import { Web3Provider } from './react-web3'
 
 @inject('deploymentStore')
 @observer
 class App extends Component {
   render() {
     const { deploymentStore } = this.props
-    var crowdsaleAddr = getQueryVariable('addr')
+    let crowdsaleAddr = getAddr()
 
     return (
       <Router>

src/components/Common/ButtonContinue.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import classNames from 'classnames'
+
+export class ButtonContinue extends Component {
+  /**
+   * Render method for ButtonContinue component
+   * @returns {*}
+   */
+  render() {
+    const { status, type, onClick } = this.props
+    const submitButtonClass = classNames('button', 'button_fill', 'button_no_border', {
+      button_disabled: !status
+    })
+
+    return (
+      <button onClick={onClick} type={type} disabled={!status} className={submitButtonClass}>
+        Continue
+      </button>
+    )
+  }
+}

src/components/Common/DutchAuctionBlock.js

@@ -69,6 +69,14 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
       return composeValidators(...listOfValidations)(value)
     }
 
+    const onChangeWhitelisted = (value, input, index) => {
+      //Clear whitelist
+      if (tierStore) {
+        tierStore.emptyWhitelist(index)
+      }
+      return input.onChange(value)
+    }
+
     return (
       <div>
         {fields.map((name, index) => (
@@ -153,7 +161,10 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
                   side="left"
                   label={SUPPLY_SHORT}
                   description={DESCRIPTION.SUPPLY}
-                  disabled={tierStore && tierStore.tiers[index].whitelist.length}
+                  disabled={
+                    (tierStore && tierStore.tiers[index].whitelistEnabled === 'yes') ||
+                    (tierStore && tierStore.tiers[index].whitelist.length)
+                  }
                 />
                 <Field
                   name={`${name}.whitelistEnabled`}
@@ -166,7 +177,7 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
                             type="radio"
                             checked={input.value === 'yes'}
                             value="yes"
-                            onChange={() => input.onChange('yes')}
+                            onChange={() => onChangeWhitelisted('yes', input, index)}
                           />
                           <span className="title">yes</span>
                         </label>
@@ -175,7 +186,7 @@ export const DutchAuctionBlock = inject('tierStore', 'tokenStore')(
                             type="radio"
                             checked={input.value === 'no'}
                             value="no"
-                            onChange={() => input.onChange('no')}
+                            onChange={() => onChangeWhitelisted('no', input, index)}
                           />
                           <span className="title">no</span>
                         </label>

src/components/Common/TierBlock.js

@@ -21,6 +21,14 @@ const inputErrorStyle = {
 }
 
 export const TierBlock = ({ fields, ...props }) => {
+  const onChangeWhitelisted = (value, input, index) => {
+    //Clear whitelist
+    if (props.tierStore) {
+      props.tierStore.emptyWhitelist(index)
+    }
+    return input.onChange(value)
+  }
+
   return (
     <div>
       {fields.map((name, index) => (
@@ -90,7 +98,7 @@ export const TierBlock = ({ fields, ...props }) => {
                           type="radio"
                           checked={input.value === 'yes'}
                           value="yes"
-                          onChange={() => input.onChange('yes')}
+                          onChange={() => onChangeWhitelisted('yes', input, index)}
                         />
                         <span className="title">yes</span>
                       </label>
@@ -100,7 +108,7 @@ export const TierBlock = ({ fields, ...props }) => {
                           type="radio"
                           checked={input.value === 'no'}
                           value="no"
-                          onChange={() => input.onChange('no')}
+                          onChange={() => onChangeWhitelisted('no', input, index)}
                         />
                         <span className="title">no</span>
                       </label>
@@ -128,7 +136,10 @@ export const TierBlock = ({ fields, ...props }) => {
                 name={`${name}.supply`}
                 errorStyle={inputErrorStyle}
                 side="right"
-                disabled={props.tierStore && props.tierStore.tiers[index].whitelist.length}
+                disabled={
+                  (props.tierStore && props.tierStore.tiers[index].whitelistEnabled === 'yes') ||
+                  (props.tierStore && props.tierStore.tiers[index].whitelist.length)
+                }
               />
             </div>
             <div className="input-block-container">

src/components/Home/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import '../../assets/stylesheets/application.css'
-import { Link } from 'react-router-dom'
 import CrowdsalesList from '../Common/CrowdsalesList'
 import { Loader } from '../Common/Loader'
 import { loadRegistryAddresses } from '../../utils/blockchainHelpers'
@@ -11,74 +10,132 @@ import { inject, observer } from 'mobx-react'
 import { checkWeb3, getNetworkVersion } from '../../utils/blockchainHelpers'
 import { getCrowdsaleAssets } from '../../stores/utils'
 import logdown from 'logdown'
+import storage from 'store2'
 
 const logger = logdown('TW:home')
 
 const { CROWDSALE_STRATEGY, TOKEN_SETUP, CROWDSALE_SETUP, PUBLISH, CROWDSALE_PAGE } = NAVIGATION_STEPS
 
-@inject('web3Store', 'generalStore', 'contractStore')
+@inject(
+  'web3Store',
+  'generalStore',
+  'contractStore',
+  'crowdsaleStore',
+  'gasPriceStore',
+  'deploymentStore',
+  'reservedTokenStore',
+  'stepTwoValidationStore',
+  'tierStore',
+  'tokenStore'
+)
 @observer
 export class Home extends Component {
+  state = {
+    showModal: false,
+    loading: false
+  }
+
   constructor(props) {
     super(props)
-    this.state = {
-      showModal: false,
-      loading: false
-    }
 
     let { contractStore } = this.props
     contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.PENDING)
   }
 
-  componentDidMount() {
-    let { generalStore, web3Store, contractStore } = this.props
-    checkWeb3(web3Store.web3)
-
-    getNetworkVersion()
-      .then(networkID => {
-        generalStore.setProperty('networkID', networkID)
-        getCrowdsaleAssets(networkID)
-      })
-      .then(
-        () => {
-          contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.SUCCESS)
-        },
-        e => {
-          logger.error('Error downloading contracts', e)
-          toast.showToaster({
-            type: TOAST.TYPE.ERROR,
-            message:
-              'The contracts could not be downloaded.Please try to refresh the page. If the problem persists, try again later.'
-          })
-
-          contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.FAILURE)
-        }
-      )
+  async componentDidMount() {
+    let { web3Store } = this.props
+    await checkWeb3(web3Store.web3)
   }
 
-  chooseContract = () => {
+  chooseContract = async () => {
     this.setState({
       loading: true
     })
 
-    loadRegistryAddresses().then(
-      () => {
-        this.setState({
-          loading: false,
-          showModal: true
-        })
-      },
-      e => {
-        logger.error('There was a problem loading the crowdsale addresses from the registry', e)
-        this.setState({
-          loading: false
-        })
+    try {
+      await loadRegistryAddresses()
+      this.setState({
+        loading: false,
+        showModal: true
+      })
+    } catch (e) {
+      logger.error('There was a problem loading the crowdsale addresses from the registry', e)
+      this.setState({
+        loading: false
+      })
+    }
+  }
+
+  goNextStep = async () => {
+    // Clear local storage if there is no incomplete deployment, and reload
+    if (storage.has('DeploymentStore') && storage.get('DeploymentStore').deploymentStep) {
+      this.props.history.push('/')
+    } else {
+      this.clearStorage()
+      await this.reloadStorage()
+      this.props.history.push('1')
+    }
+  }
+
+  async reloadStorage() {
+    let { generalStore, contractStore } = this.props
+
+    try {
+      // General store, check network
+      let networkID = await getNetworkVersion()
+      generalStore.setProperty('networkID', networkID)
+
+      // Contract store, get contract and abi
+      await getCrowdsaleAssets(networkID)
+      contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.SUCCESS)
+    } catch (e) {
+      logger.error('Error downloading contracts', e)
+      toast.showToaster({
+        type: TOAST.TYPE.ERROR,
+        message:
+          'The contracts could not be downloaded.Please try to refresh the page. If the problem persists, try again later.'
+      })
+      contractStore.setProperty('downloadStatus', DOWNLOAD_STATUS.FAILURE)
+    }
+  }
+
+  clearStorage() {
+    // Generate of stores to clear
+    const toArray = ({
+      generalStore,
+      contractStore,
+      crowdsaleStore,
+      gasPriceStore,
+      deploymentStore,
+      reservedTokenStore,
+      stepTwoValidationStore,
+      tierStore,
+      tokenStore
+    }) => {
+      return [
+        generalStore,
+        contractStore,
+        crowdsaleStore,
+        gasPriceStore,
+        deploymentStore,
+        reservedTokenStore,
+        stepTwoValidationStore,
+        tierStore,
+        tokenStore
+      ]
+    }
+
+    const storesToClear = toArray(this.props)
+    for (let storeToClear of storesToClear) {
+      if (typeof storeToClear.reset === 'function') {
+        logger.log('Store to be cleared:', storeToClear.constructor.name)
+        storeToClear.reset()
       }
-    )
+    }
   }
 
   onClick = crowdsaleAddress => {
-    this.props.history.push('/manage/' + crowdsaleAddress)
+    this.props.history.push(`manage/${crowdsaleAddress}`)
   }
 
   hideModal = () => {
@@ -99,9 +156,9 @@ export class Home extends Component {
                 <br />Token Wizard is powered by <a href="https://github.com/auth-os/beta">Auth-os</a>.
               </p>
               <div className="buttons">
-                <Link to="/1">
-                  <span className="button button_fill">New crowdsale</span>
-                </Link>
+                <button onClick={() => this.goNextStep()} className="button button_fill button_no_border">
+                  New crowdsale
+                </button>
                 <div onClick={() => this.chooseContract()} className="button button_outline">
                   Choose Crowdsale
                 </div>