Show warning when switching accounts during deploy

src/App.js

@@ -28,7 +28,7 @@ class App extends Component {
           <Header/>
 
           <Web3Provider
-            passive={true}
+            onChangeAccount={deploymentStore.handleAccountChange}
             web3UnavailableScreen={NoWeb3}
           >
             <Switch>

src/components/stepFour/index.js

@@ -31,24 +31,29 @@ 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.setDeployerAccount(context.selectedAccount)
   }
 
   static contextTypes = {
-    web3: PropTypes.object
+    web3: PropTypes.object,
+    selectedAccount: PropTypes.string
   }
 
   contractDownloadSuccess = options => {
@@ -245,6 +250,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) => {
@@ -397,6 +426,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} />
@@ -497,13 +541,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/stores/DeploymentStore.js

@@ -5,6 +5,8 @@ class DeploymentStore {
   @observable txMap = new Map()
   @observable deploymentStep = null
   @observable hasEnded = false
+  @observable deployerAccount = null
+  @observable invalidAccount = false
 
   constructor() {
     autosave(this, 'DeploymentStore', (store) => {
@@ -72,6 +74,21 @@ class DeploymentStore {
     this.deploymentStep = index
   }
 
+  @action setDeployerAccount = (account) => {
+    if (!this.deployInProgress) {
+      this.deployerAccount = account
+    }
+  }
+
+  @action handleAccountChange = (account) => {
+    if (!this.deployerAccount) {
+      // If there is no deployment in progress, do nothing
+      return
+    }
+
+    this.invalidAccount = account !== this.deployerAccount
+  }
+
   @action resetDeploymentStep = () => {
     this.deploymentStep = null
   }

src/stores/index.js

@@ -38,6 +38,25 @@ const crowdsaleStore = new CrowdsaleStore()
 const gasPriceStore = new GasPriceStore()
 const deploymentStore = new DeploymentStore()
 
+window.stores = {
+  generalStore,
+  crowdsalePageStore,
+  tierCrowdsaleListStore,
+  crowdsaleBlockListStore,
+  contractStore,
+  pricingStrategyStore,
+  reservedTokenStore,
+  stepThreeValidationStore,
+  stepTwoValidationStore,
+  tierStore,
+  tokenStore,
+  web3Store,
+  investStore,
+  crowdsaleStore,
+  gasPriceStore,
+  deploymentStore
+};
+
 export {
   generalStore,
   crowdsalePageStore,

src/utils/cancelDeploy.js

@@ -7,6 +7,8 @@ const cancelDeploy = () => {
         localStorage.clear()
         window.location = '/' // go to home
       }
+
+      return result.value
     })
 }