Add initialized checks for first time flow routes

mascara/src/app/first-time/confirm-seed-screen.js

@@ -12,10 +12,10 @@ import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
 
 class ConfirmSeedScreen extends Component {
   static propTypes = {
-    isLoading: PropTypes.bool.isRequired,
-    address: PropTypes.string.isRequired,
+    isLoading: PropTypes.bool,
+    address: PropTypes.string,
     seedWords: PropTypes.string,
-    confirmSeedWords: PropTypes.func.isRequired,
+    confirmSeedWords: PropTypes.func,
     history: PropTypes.object,
   };
 
@@ -28,7 +28,7 @@ class ConfirmSeedScreen extends Component {
     const { seedWords } = props
     this.state = {
       selectedSeeds: [],
-      shuffledSeeds: seedWords && shuffle(seedWords.split(' ')),
+      shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [],
     }
   }
 

ui/app/app.js

@@ -24,10 +24,10 @@ const WalletView = require('./components/wallet-view')
 
 // other views
 const Authenticated = require('./components/pages/authenticated')
-const Unauthenticated = require('./components/pages/unauthenticated')
+const Initialized = require('./components/pages/initialized')
 const MetamaskRoute = require('./components/pages/metamask-route')
 const Settings = require('./components/pages/settings')
-const UnlockPage = require('./components/pages/unauthenticated/unlock')
+const UnlockPage = require('./components/pages/unlock')
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
 const RevealSeedPage = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
@@ -88,21 +88,21 @@ class App extends Component {
           component: InitializeMenuScreen,
           mascaraComponent: MascaraCreatePassword,
         }),
-        h(MetamaskRoute, {
+        h(Initialized, {
           path: REVEAL_SEED_ROUTE,
           exact,
           component: RevealSeedPage,
           mascaraComponent: MascaraSeedScreen,
         }),
-        h(MetamaskRoute, {
+        h(Initialized, {
           path: CONFIRM_SEED_ROUTE,
           exact,
           mascaraComponent: MascaraConfirmSeedScreen,
         }),
-        h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
-        h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }),
-        h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
-        h(Unauthenticated, {
+        h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
+        h(Initialized, { path: SETTINGS_ROUTE, component: Settings }),
+        h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
+        h(Initialized, {
           path: NOTICE_ROUTE,
           exact,
           component: NoticeScreen,

ui/app/components/pages/authenticated.js

@@ -5,11 +5,12 @@ const h = require('react-hyperscript')
 const MetamaskRoute = require('./metamask-route')
 const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes')
 
-const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => {
-  const component = renderProps => {
+const Authenticated = props => {
+  const { isUnlocked, isInitialized } = props
+
   switch (true) {
-      case isUnlocked:
-        return h(Component, { ...renderProps })
+    case isUnlocked && isInitialized:
+      return h(MetamaskRoute, { ...props })
     case !isInitialized:
       return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
     default:
@@ -17,16 +18,7 @@ const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...pro
   }
 }
 
-  return (
-    h(MetamaskRoute, {
-      ...props,
-      component,
-    })
-  )
-}
-
 Authenticated.propTypes = {
-  component: PropTypes.func,
   isUnlocked: PropTypes.bool,
   isInitialized: PropTypes.bool,
 }

ui/app/components/pages/initialized.js

@@ -0,0 +1,25 @@
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const { Redirect } = require('react-router-dom')
+const h = require('react-hyperscript')
+const { INITIALIZE_ROUTE } = require('../../routes')
+const MetamaskRoute = require('./metamask-route')
+
+const Initialized = props => {
+  return props.isInitialized
+    ? h(MetamaskRoute, { ...props })
+    : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
+}
+
+Initialized.propTypes = {
+  isInitialized: PropTypes.bool,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { isInitialized } } = state
+  return {
+    isInitialized,
+  }
+}
+
+module.exports = connect(mapStateToProps)(Initialized)

ui/app/components/pages/unauthenticated/index.js

@@ -1,38 +0,0 @@
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const { Redirect } = require('react-router-dom')
-const h = require('react-hyperscript')
-const { INITIALIZE_ROUTE } = require('../../../routes')
-const MetamaskRoute = require('../metamask-route')
-
-const Unauthenticated = ({ component: Component, isInitialized, ...props }) => {
-  const component = renderProps => {
-    return isInitialized
-      ? h(Component, { ...renderProps })
-      : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
-  }
-
-  return (
-    h(MetamaskRoute, {
-      ...props,
-      component,
-    })
-  )
-}
-
-Unauthenticated.propTypes = {
-  component: PropTypes.func,
-  isInitialized: PropTypes.bool,
-  isMascara: PropTypes.bool,
-  mascaraComponent: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  const { metamask: { isInitialized, isMascara } } = state
-  return {
-    isInitialized,
-    isMascara,
-  }
-}
-
-module.exports = connect(mapStateToProps)(Unauthenticated)

ui/app/components/pages/unlock.js

@@ -2,13 +2,13 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const { connect } = require('react-redux')
 const h = require('react-hyperscript')
-const { Redirect, withRouter } = require('react-router-dom')
+const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const { tryUnlockMetamask, forgotPassword } = require('../../../actions')
+const { tryUnlockMetamask, forgotPassword } = require('../../actions')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
-const Mascot = require('../../mascot')
-const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes')
+const Mascot = require('../mascot')
+const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes')
 
 class UnlockScreen extends Component {
   constructor (props) {
@@ -21,6 +21,14 @@ class UnlockScreen extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
+  componentWillMount () {
+    const { isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
   componentDidMount () {
     const passwordBox = document.getElementById('password-box')
 
@@ -69,17 +77,7 @@ class UnlockScreen extends Component {
 
   render () {
     const { error } = this.state
-    const { isUnlocked, history } = this.props
-
-    if (isUnlocked) {
-      return (
-        h(Redirect, {
-          to: {
-            pathname: DEFAULT_ROUTE,
-          },
-        })
-      )
-    }
+    const { history } = this.props
 
     return (
       h('.unlock-page.main-container', [