Fix merge conflict; separate onboarding buy screen

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2017,
@@ -10,7 +11,9 @@
       "arrowFunctions": true,
       "objectLiteralShorthandMethods": true,
       "objectLiteralShorthandProperties": true,
-      "templateStrings": true
+      "templateStrings": true,
+      "classes": true,
+      "jsx": true
     },
   },
 
@@ -23,7 +26,8 @@
 
   "plugins": [
     "mocha",
-    "chai"
+    "chai",
+    "react"
   ],
 
   "globals": {

mascara/src/app/first-time/backup-phrase-screen.js

@@ -219,10 +219,10 @@ class BackupPhraseScreen extends Component {
   renderContent () {
     switch (this.state.page) {
       case BackupPhraseScreen.PAGE.CONFIRM:
-        return this.renderConfirmationScreen();
+        return this.renderConfirmationScreen()
       case BackupPhraseScreen.PAGE.SECRET:
       default:
-        return this.renderSecretScreen();
+        return this.renderSecretScreen()
     }
   }
 
@@ -245,10 +245,10 @@ export default compose(
     ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
       seedWords,
       isLoading,
-      address: selectedAddress
+      address: selectedAddress,
     }),
     dispatch => ({
-      confirmSeedWords: () => dispatch(confirmSeedWords())
+      confirmSeedWords: () => dispatch(confirmSeedWords()),
     })
   )
 )(BackupPhraseScreen)

mascara/src/app/first-time/index.js

@@ -1,12 +1,12 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import BuyEtherScreen from './buy-ether-screen'
-import {buyEthView} from '../../../../ui/app/actions'
+import {onboardingBuyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
@@ -34,9 +34,9 @@ class FirstTimeFlow extends Component {
   };
 
   constructor (props) {
-    super(props);
+    super(props)
     this.state = {
-      screenType: this.getScreenType()
+      screenType: this.getScreenType(),
     }
   }
 
@@ -49,7 +49,7 @@ class FirstTimeFlow extends Component {
       isInitialized,
       seedWords,
       noActiveNotices,
-    } = this.props;
+    } = this.props
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.NOTICE
@@ -127,7 +127,7 @@ export default connect(
     address: selectedAddress,
   }),
   dispatch => ({
-    goToBuyEtherView: address => dispatch(buyEthView(address))
+    goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
 

package.json

@@ -67,6 +67,7 @@
     "dnode": "^1.2.2",
     "end-of-stream": "^1.1.0",
     "ensnare": "^1.0.0",
+    "eslint-plugin-react": "^7.3.0",
     "eth-bin-to-ops": "^1.0.1",
     "eth-block-tracker": "^2.2.0",
     "eth-contract-metadata": "^1.1.4",

ui/app/actions.js

@@ -133,6 +133,8 @@ var actions = {
   showLoadingIndication: showLoadingIndication,
   hideLoadingIndication: hideLoadingIndication,
   // buy Eth with coinbase
+  onboardingBuyEthView,
+  ONBOARDING_BUY_ETH_VIEW: 'ONBOARDING_BUY_ETH_VIEW',
   BUY_ETH: 'BUY_ETH',
   buyEth: buyEth,
   buyEthView: buyEthView,
@@ -903,6 +905,13 @@ function buyEth (opts) {
   }
 }
 
+function onboardingBuyEthView (address) {
+  return {
+    type: actions.ONBOARDING_BUY_ETH_VIEW,
+    value: address,
+  }
+}
+
 function buyEthView (address) {
   return {
     type: actions.BUY_ETH_VIEW,

ui/app/app.js

@@ -46,10 +46,9 @@ function mapStateToProps (state) {
     accounts,
     address,
     keyrings,
-    isMascara,
     isInitialized,
     noActiveNotices,
-    seedWords
+    seedWords,
   } = state.metamask
   const selected = address || Object.keys(accounts)[0]
 
@@ -406,7 +405,7 @@ App.prototype.renderDropdown = function () {
 }
 
 App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
-  const { isMascara } = this.props;
+  const { isMascara } = this.props
 
   return isMascara
     ? null
@@ -541,9 +540,11 @@ App.prototype.renderPrimary = function () {
 
     case 'buyEth':
       log.debug('rendering buy ether screen')
-      return isMascara
-        ? h(MascaraBuyEtherScreen, {key: 'buyEthView'})
-        : h(BuyView, {key: 'buyEthView'})
+      return h(BuyView, {key: 'buyEthView'})
+
+    case 'onboardingBuyEth':
+      log.debug('rendering onboarding buy ether screen')
+      return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
 
     case 'qr':
       log.debug('rendering show qr screen')

ui/app/reducers/app.js

@@ -494,6 +494,17 @@ function reduceApp (state, action) {
         },
       })
 
+
+    case actions.ONBOARDING_BUY_ETH_VIEW:
+      return extend(appState, {
+        transForward: true,
+        currentView: {
+          name: 'onboardingBuyEth',
+          context: appState.currentView.name,
+        },
+        identity: state.metamask.identities[action.value],
+      })
+
     case actions.COINBASE_SUBVIEW:
       return extend(appState, {
         buyView: {