Merge 8ed76b3 into 8619430

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,26 @@
+import React, { Component } from 'react'
+import classNames from 'classnames'
+import logdown from 'logdown'
+
+const logger = logdown('TW:ButtonContinue')
+
+export class ButtonContinue extends Component {
+  /**
+   * Render method for ButtonContinue component
+   * @returns {*}
+   */
+  render() {
+    const { status } = this.props
+
+    logger.log('Button continue disabled status:', status)
+    const submitButtonClass = classNames('button', 'button_fill', 'button_no_border', {
+      button_disabled: !status
+    })
+
+    return (
+      <button disabled={!status} className={submitButtonClass}>
+        Continue
+      </button>
+    )
+  }
+}

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>

src/components/stepOne/index.js

@@ -1,44 +1,72 @@
-import React from 'react'
+import React, { Component } from 'react'
 import '../../assets/stylesheets/application.css'
 import { Link } from 'react-router-dom'
 import { StepNavigation } from '../Common/StepNavigation'
+import { inject, observer } from 'mobx-react'
+import { ButtonContinue } from '../Common/ButtonContinue'
+import { checkWeb3 } from '../../utils/blockchainHelpers'
 import {
   NAVIGATION_STEPS,
   CROWDSALE_STRATEGIES,
   CROWDSALE_STRATEGIES_DISPLAYNAMES,
   DOWNLOAD_STATUS
 } from '../../utils/constants'
-import { inject, observer } from 'mobx-react'
-import classNames from 'classnames'
 import logdown from 'logdown'
+import { Loader } from '../Common/Loader'
 
-const logger = logdown('TW:components:stepOne')
+const logger = logdown('TW:stepOne')
 const { CROWDSALE_STRATEGY } = NAVIGATION_STEPS
+const { MINTED_CAPPED_CROWDSALE, DUTCH_AUCTION } = CROWDSALE_STRATEGIES
 
-@inject('crowdsaleStore', 'contractStore')
+@inject('crowdsaleStore', 'contractStore', 'web3Store')
 @observer
-export class stepOne extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.setStrategy(null, CROWDSALE_STRATEGIES.MINTED_CAPPED_CROWDSALE)
+export class stepOne extends Component {
+  state = {
+    loading: false,
+    strategy: null
   }
 
-  setStrategy = (event, strategy) => {
-    if (!strategy) {
-      strategy = event.target.id
+  async componentDidMount() {
+    const { crowdsaleStore, web3Store } = this.props
+    await checkWeb3(web3Store.web3)
+
+    this.setState({ loading: true })
+    logger.log('CrowdsaleStore strategy', crowdsaleStore.strategy)
+
+    // Set default value
+    if (crowdsaleStore && !crowdsaleStore.strategy) {
+      crowdsaleStore.setProperty('strategy', MINTED_CAPPED_CROWDSALE)
     }
-    this.props.crowdsaleStore.setProperty('strategy', strategy)
+
+    this.setState({
+      loading: false,
+      strategy: crowdsaleStore.strategy
+    })
+  }
+
+  /**
+   * Handle radio input and set value for strategy
+   * @param e
+   */
+  handleChange = e => {
+    const { crowdsaleStore } = this.props
+    const strategy = e.currentTarget.value
+
+    crowdsaleStore.setProperty('strategy', strategy)
+    this.setState({
+      strategy: crowdsaleStore.strategy
+    })
+    logger.log('CrowdsaleStore strategy selected:', strategy)
   }
 
+  /**
+   * Render method for stepOne component
+   * @returns {*}
+   */
   render() {
     const { contractStore } = this.props
 
-    let status = contractStore.downloadStatus === DOWNLOAD_STATUS.SUCCESS && localStorage.length > 0
-    logger.log('Contract store status', status)
-    const submitButtonClass = classNames('button', 'button_fill', 'button_no_border', {
-      button_disabled: !status
-    })
+    let status = (contractStore && contractStore.downloadStatus === DOWNLOAD_STATUS.SUCCESS) || localStorage.length > 0
 
     return (
       <section className="steps steps_crowdsale-contract">
@@ -49,33 +77,41 @@ export class stepOne extends React.Component {
             <p className="title">{CROWDSALE_STRATEGY}</p>
             <p className="description">Select a strategy for your crowdsale.</p>
           </div>
-          <div className="radios" onChange={this.setStrategy}>
+          <div className="radios">
             <label className="radio">
               <input
-                type="radio"
-                defaultChecked={true}
+                id={MINTED_CAPPED_CROWDSALE}
+                value={MINTED_CAPPED_CROWDSALE}
                 name="contract-type"
-                id={CROWDSALE_STRATEGIES.MINTED_CAPPED_CROWDSALE}
+                type="radio"
+                checked={this.state.strategy === MINTED_CAPPED_CROWDSALE}
+                onChange={this.handleChange}
               />
               <span className="title">{CROWDSALE_STRATEGIES_DISPLAYNAMES.MINTED_CAPPED_CROWDSALE}</span>
               <span className="description">
                 Modern crowdsale strategy with multiple tiers, whitelists, and limits. Recommended for every crowdsale.
               </span>
             </label>
             <label className="radio">
-              <input type="radio" defaultChecked={false} name="contract-type" id={CROWDSALE_STRATEGIES.DUTCH_AUCTION} />
+              <input
+                id={DUTCH_AUCTION}
+                value={DUTCH_AUCTION}
+                name="contract-type"
+                type="radio"
+                checked={this.state.strategy === DUTCH_AUCTION}
+                onChange={this.handleChange}
+              />
               <span className="title">{CROWDSALE_STRATEGIES_DISPLAYNAMES.DUTCH_AUCTION}</span>
               <span className="description">An auction with descending price.</span>
             </label>
           </div>
         </div>
         <div className="button-container">
           <Link to="/2">
-            <button disabled={!status} className={submitButtonClass}>
-              Continue
-            </button>
+            <ButtonContinue status={status} />
           </Link>
         </div>
+        <Loader show={this.state.loading} />
       </section>
     )
   }