[NewUI] Adds the mascara first time flow to betaUI extension (#3257)

* Adds the mascara first time flow to the extension when opened in browser.

* Fix tests after addition of mascara first time flow to new ui.

development/states/first-time.json

@@ -8,7 +8,7 @@
     "frequentRpcList": [],
     "unapprovedTxs": {},
     "currentCurrency": "USD",
-    "featureFlags": {"betaUI": true},
+    "featureFlags": {"betaUI": false},
     "conversionRate": 12.7527416,
     "conversionDate": 1487624341,
     "noActiveNotices": false,

test/integration/lib/first-time.js

@@ -22,7 +22,6 @@ async function runFirstTimeUsageTest(assert, done) {
   reactTriggerChange(selectState[0])
 
   await timeout(2000)
-
   const app = $('#app-content')
 
   // recurse notices
@@ -46,7 +45,7 @@ async function runFirstTimeUsageTest(assert, done) {
   await timeout()
 
   // Scroll through terms
-  const title = app.find('h1')[1]
+  const title = app.find('h1')[0]
   assert.equal(title.textContent, 'MetaMask', 'title screen')
 
   // enter password

ui/app/app.js

@@ -9,7 +9,7 @@ const classnames = require('classnames')
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
 const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
 // init
-const InitializeMenuScreen = require('./first-time/init-menu')
+const InitializeMenuScreen = MascaraFirstTime
 const NewKeyChainScreen = require('./new-keychain')
 // accounts
 const MainContainer = require('./main-container')
@@ -74,6 +74,7 @@ function mapStateToProps (state) {
     transForward: state.appState.transForward,
     isMascara: state.metamask.isMascara,
     isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
+    isPopup: state.metamask.isPopup,
     seedWords: state.metamask.seedWords,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
@@ -86,6 +87,7 @@ function mapStateToProps (state) {
     frequentRpcList: state.metamask.frequentRpcList || [],
     currentCurrency: state.metamask.currentCurrency,
     isMouseUser: state.appState.isMouseUser,
+    betaUI: state.metamask.featureFlags.betaUI,
 
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
@@ -351,9 +353,9 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
 App.prototype.renderPrimary = function () {
   log.debug('rendering primary')
   var props = this.props
-  const {isMascara, isOnboarding} = props
+  const {isMascara, isOnboarding, betaUI} = props
 
-  if (isMascara && isOnboarding) {
+  if ((isMascara || betaUI) && isOnboarding && !props.isPopup) {
     return h(MascaraFirstTime)
   }
 

ui/app/reducers/metamask.js

@@ -1,6 +1,7 @@
 const extend = require('xtend')
 const actions = require('../actions')
 const MetamascaraPlatform = require('../../../app/scripts/platforms/window')
+const environmentType = require('../../../app/scripts/lib/environment-type')
 const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
 
 module.exports = reduceMetamask
@@ -14,6 +15,7 @@ function reduceMetamask (state, action) {
     isUnlocked: false,
     isAccountMenuOpen: false,
     isMascara: window.platform instanceof MetamascaraPlatform,
+    isPopup: environmentType() === 'popup',
     rpcTarget: 'https://rawtestrpc.metamask.io/',
     identities: {},
     unapprovedTxs: {},