Merge pull request #3680 from danjm/i3517-popup-newui-onboarding

Popup uses new ui onboarding when in beta.

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

@@ -122,6 +122,10 @@
     width: calc(100vw - 80px);
   }
 
+  .unique-image {
+    width: auto;
+  }
+
   .create-password__title,
   .unique-image__title,
   .tou__title,
@@ -221,10 +225,6 @@
   max-width: 46rem;
 }
 
-.backup-phrase {
-  width: 100%;
-}
-
 .create-password__title,
 .unique-image__title,
 .tou__title,
@@ -674,7 +674,6 @@ button.backup-phrase__confirm-seed-option:hover {
 }
 
 .buy-ether__action-content-wrapper {
-  width: 360px;
   display: flex;
   flex-flow: column nowrap;
 }

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

@@ -10,6 +10,7 @@ import ImportSeedPhraseScreen from './import-seed-phrase-screen'
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
+  showModal,
 } from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
@@ -80,7 +81,7 @@ class FirstTimeFlow extends Component {
   renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
     const {
-      goToBuyEtherView,
+      openBuyEtherModal,
       address,
       restoreCreatePasswordScreen,
       forgottenPassword,
@@ -131,7 +132,7 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.BACK_UP_PHRASE:
         return (
           <BackupPhraseScreen
-            next={() => goToBuyEtherView(address)}
+            next={() => openBuyEtherModal()}
           />
         )
       default:
@@ -167,7 +168,7 @@ export default connect(
   }),
   dispatch => ({
     leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
-    goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
+    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
   })
 )(FirstTimeFlow)
 

test/integration/lib/mascara-first-time.js

@@ -57,9 +57,9 @@ async function runFirstTimeUsageTest (assert, done) {
   ;(await findAsync(app, '.first-time-flow__button')).click()
 
   // Deposit Ether Screen
-  const buyEthTitle = (await findAsync(app, '.buy-ether__title'))[0]
-  assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
-  ;(await findAsync(app, '.buy-ether__do-it-later')).click()
+  const depositEthTitle = (await findAsync(app, '.page-container__title'))[0]
+  assert.equal(depositEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
+  ;(await findAsync(app, '.page-container__header-close')).click()
 
   const menu = (await findAsync(app, '.account-menu__icon'))[0]
   menu.click()

ui/app/app.js

@@ -386,7 +386,7 @@ App.prototype.renderPrimary = function () {
     isUnlocked,
   } = props
   const isMascaraOnboarding = isMascara && isOnboarding
-  const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords
+  const isBetaUIOnboarding = betaUI && isOnboarding
 
   if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) {
     return h(WelcomeScreen)
@@ -397,7 +397,7 @@ App.prototype.renderPrimary = function () {
   }
 
   // notices
-  if (!props.noActiveNotices) {
+  if (!props.noActiveNotices && !betaUI) {
     log.debug('rendering notice screen for unread notices.')
     return h(NoticeScreen, {
       notice: props.lastUnreadNotice,
@@ -418,7 +418,7 @@ App.prototype.renderPrimary = function () {
     return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
   } else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) {
     log.debug('rendering menu screen')
-    return props.isPopup
+    return !betaUI
       ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'})
       : h(InitializeMenuScreen, {key: 'menuScreenInit'})
   }