Merge pull request #3296 from danjm/MM-806-new-ui-first-time-import-seed-in-popup

[NewUI] Fix Import Existing DEN in popup New UI first time flow.

app/scripts/lib/nonce-tracker.js

@@ -56,7 +56,7 @@ class NonceTracker {
     const blockTracker = this._getBlockTracker()
     const currentBlock = blockTracker.getCurrentBlock()
     if (currentBlock) return currentBlock
-    return await Promise((reject, resolve) => {
+    return await new Promise((reject, resolve) => {
       blockTracker.once('latest', resolve)
     })
   }

mascara/src/app/first-time/import-seed-phrase-screen.js

@@ -2,7 +2,13 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
+import {
+  createNewVaultAndRestore,
+  hideWarning,
+  displayWarning,
+  unMarkPasswordForgotten,
+  clearNotices,
+} from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
@@ -23,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -43,6 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
+    leaveImportSeedScreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -113,6 +120,9 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
     displayWarning: (warning) => dispatch(displayWarning(warning)),
     hideWarning: () => dispatch(hideWarning()),

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

@@ -7,7 +7,10 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-import {onboardingBuyEthView} from '../../../../ui/app/actions'
+import {
+  onboardingBuyEthView,
+  unMarkPasswordForgotten,
+} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
@@ -33,6 +36,7 @@ class FirstTimeFlow extends Component {
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+    LOADING: 'loading',
   };
 
   constructor (props) {
@@ -51,11 +55,15 @@ class FirstTimeFlow extends Component {
       isInitialized,
       seedWords,
       noActiveNotices,
+      forgottenPassword,
     } = this.props
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.NOTICE
 
+    if (forgottenPassword) {
+      return SCREEN_TYPE.IMPORT_SEED_PHRASE
+    }
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
@@ -71,7 +79,13 @@ class FirstTimeFlow extends Component {
 
   renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
-    const {goToBuyEtherView, address} = this.props
+    const {
+      goToBuyEtherView,
+      address,
+      restoreCreatePasswordScreen,
+      forgottenPassword,
+      leaveImportSeedScreenState,
+    } = this.props
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
@@ -92,8 +106,14 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.IMPORT_SEED_PHRASE:
         return (
           <ImportSeedPhraseScreen
-            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
-            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+            back={() => {
+              leaveImportSeedScreenState()
+              this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
+            }}
+            next={() => {
+              const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE
+              this.setScreenType(newScreenType)
+            }}
           />
         )
       case SCREEN_TYPE.UNIQUE_IMAGE:
@@ -130,13 +150,23 @@ class FirstTimeFlow extends Component {
 }
 
 export default connect(
-  ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
+  ({
+    metamask: {
+      isInitialized,
+      seedWords,
+      noActiveNotices,
+      selectedAddress,
+      forgottenPassword,
+    }
+  }) => ({
     isInitialized,
     seedWords,
     noActiveNotices,
     address: selectedAddress,
+    forgottenPassword,
   }),
   dispatch => ({
+    leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
     goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)

mascara/src/app/first-time/notice-screen.js

@@ -6,6 +6,7 @@ import debounce from 'lodash.debounce'
 import {markNoticeRead} from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
 
 class NoticeScreen extends Component {
   static propTypes = {
@@ -55,36 +56,39 @@ class NoticeScreen extends Component {
     const {
       address,
       lastUnreadNotice: { title, body },
+      isLoading,
     } = this.props
     const { atBottom } = this.state
 
     return (
-      <div
-        className="tou"
-        onScroll={this.onScroll}
-      >
-        <Identicon address={address} diameter={70} />
-        <div className="tou__title">{title}</div>
-        <Markdown
-          className="tou__body markdown"
-          source={body}
-          skipHtml
-        />
-        <button
-          className="first-time-flow__button"
-          onClick={atBottom && this.acceptTerms}
-          disabled={!atBottom}
+      isLoading
+        ? <LoadingScreen />
+        : <div
+          className="tou"
+          onScroll={this.onScroll}
         >
-          Accept
-        </button>
-        <Breadcrumbs total={3} currentIndex={2} />
-      </div>
+          <Identicon address={address} diameter={70} />
+          <div className="tou__title">{title}</div>
+          <Markdown
+            className="tou__body markdown"
+            source={body}
+            skipHtml
+          />
+          <button
+            className="first-time-flow__button"
+            onClick={atBottom && this.acceptTerms}
+            disabled={!atBottom}
+          >
+            Accept
+          </button>
+          <Breadcrumbs total={3} currentIndex={2} />
+        </div>
     )
   }
 }
 
 export default connect(
-  ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
+  ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({
     lastUnreadNotice,
     address: selectedAddress,
   }),

old-ui/app/app.js

@@ -456,7 +456,9 @@ App.prototype.renderPrimary = function () {
   // notices
   if (!props.noActiveNotices) {
     log.debug('rendering notice screen for unread notices.')
-    return h('div', [
+    return h('div', {
+      style: { width: '100%' },
+    }, [
 
       h(NoticeScreen, {
         notice: props.lastUnreadNotice,

old-ui/app/components/pending-tx.js

@@ -60,7 +60,8 @@ PendingTx.prototype.render = function () {
   // Gas
   const gas = txParams.gas
   const gasBn = hexToBn(gas)
-  const gasLimit = new BN(parseInt(blockGasLimit))
+  // default to 8MM gas limit
+  const gasLimit = new BN(parseInt(blockGasLimit) || '8000000')
   const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
   const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
   const safeGasLimit = safeGasLimitBN.toString(10)

ui/app/actions.js

@@ -853,7 +853,6 @@ function markPasswordForgotten () {
 function unMarkPasswordForgotten () {
   return (dispatch) => {
     return background.unMarkPasswordForgotten(() => {
-      dispatch(actions.hideLoadingIndication())
       dispatch(actions.forgotPassword())
       forceUpdateMetamaskState(dispatch)
     })

ui/app/app.js

@@ -380,7 +380,7 @@ App.prototype.renderPrimary = function () {
   if (props.isInitialized && props.forgottenPassword) {
     log.debug('rendering restore vault screen')
     return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
-  } else if (!props.isInitialized) {
+  } else if (!props.isInitialized && !props.isUnlocked) {
     log.debug('rendering menu screen')
     return props.isPopup
       ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'})

ui/app/components/notice.js

@@ -105,8 +105,7 @@ Notice.prototype.render = function () {
       h('button.primary', {
         disabled,
         onClick: () => {
-          this.setState({disclaimerDisabled: true})
-          onConfirm()
+          this.setState({disclaimerDisabled: true}, () => onConfirm())
         },
         style: {
           marginTop: '18px',

ui/app/first-time/init-menu.js

@@ -7,6 +7,8 @@ const Mascot = require('../components/mascot')
 const actions = require('../actions')
 const Tooltip = require('../components/tooltip')
 const getCaretCoordinates = require('textarea-caret')
+const environmentType = require('../../../app/scripts/lib/environment-type')
+const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
 
 let isSubmitting = false
 
@@ -130,6 +132,18 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
         }, 'Import Existing DEN'),
       ]),
 
+      h('.flex-row.flex-center.flex-grow', [
+        h('p.pointer', {
+          onClick: this.showOldUI.bind(this),
+          style: {
+            fontSize: '0.8em',
+            color: '#aeaeae',
+            textDecoration: 'underline',
+            marginTop: '32px',
+          },
+        }, 'Use classic interface'),
+      ]),
+
     ])
   )
 }
@@ -146,7 +160,15 @@ InitializeMenuScreen.prototype.componentDidMount = function () {
 }
 
 InitializeMenuScreen.prototype.showRestoreVault = function () {
-  this.props.dispatch(actions.showRestoreVault())
+  this.props.dispatch(actions.markPasswordForgotten())
+  if (environmentType() === 'popup') {
+    global.platform.openExtensionInBrowser()
+  }
+}
+
+InitializeMenuScreen.prototype.showOldUI = function () {
+  this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+    .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
 }
 
 InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {

ui/app/settings.js

@@ -201,7 +201,13 @@ class Settings extends Component {
           h('div.settings__content-item-col', [
             h('button.settings__clear-button', {
               onClick (event) {
-                exportAsFile('MetaMask State Logs', window.logState())
+                window.logStateString((err, result) => {
+                  if (err) {
+                    this.state.dispatch(actions.displayWarning('Error in retrieving state logs.'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
               },
             }, 'Download State Logs'),
           ]),