Add routes for mascara

9 files changed, 123 insertions, 56 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 168ec6559..68384f30d 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -5,8 +5,10 @@ const { compose } = require('recompose')
 const h = require('react-hyperscript')
 const actions = require('./actions')
 // mascara
-const MascaraFirstTime = require('../../mascara/src/app/first-time').default
+const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default
 const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
+const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default
+const MascaraBackupPhraseScreen = require('../../mascara/src/app/first-time/backup-phrase-screen').default
 // init
 const InitializeMenuScreen = require('./first-time/init-menu')
 const NewKeyChainScreen = require('./new-keychain')
@@ -22,6 +24,8 @@ const WalletView = require('./components/wallet-view')
 
 // other views
 const Authenticated = require('./components/pages/authenticated')
+const Unauthenticated = require('./components/pages/unauthenticated')
+const MetamaskRoute = require('./components/pages/metamask-route')
 const Settings = require('./components/pages/settings')
 const UnlockPage = require('./components/pages/unauthenticated/unlock')
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
@@ -53,7 +57,7 @@ const {
   IMPORT_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  INITIALIZE_MENU_ROUTE,
+  INITIALIZE_ROUTE,
   NOTICE_ROUTE,
 } = require('./routes')
 
@@ -65,7 +69,7 @@ class App extends Component {
   }
 
   componentWillMount () {
-    const { currentCurrency, setCurrentCurrency } = this.props
+    const { currentCurrency, setCurrentCurrencyToUSD } = this.props
 
     if (!currentCurrency) {
       setCurrentCurrencyToUSD()
@@ -77,14 +81,29 @@ class App extends Component {
 
     return (
       h(Switch, [
-        h(Route, { path: INITIALIZE_MENU_ROUTE, exact, component: InitializeMenuScreen }),
-        h(Route, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
-        h(Route, { path: SETTINGS_ROUTE, component: Settings }),
-        h(Route, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
-        h(Route, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
+        h(MetamaskRoute, {
+          path: INITIALIZE_ROUTE,
+          exact,
+          component: InitializeMenuScreen,
+          mascaraComponent: MascaraCreatePassword,
+        }),
+        h(MetamaskRoute, {
+          path: REVEAL_SEED_ROUTE,
+          exact,
+          component: RevealSeedPage,
+          mascaraComponent: MascaraBackupPhraseScreen,
+        }),
+        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, {
+          path: NOTICE_ROUTE,
+          exact,
+          component: NoticeScreen,
+          mascaraComponent: MascaraNoticeScreen,
+        }),
         h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
         h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
-        h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage }),
         h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
         h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }),
         h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }),
@@ -327,10 +346,17 @@ class App extends Component {
       currentView,
       activeAddress,
       unapprovedTxs = {},
+      seedWords,
     } = this.props
 
-    if (isMascara && isOnboarding) {
-      return h(MascaraFirstTime)
+    // seed words
+    if (seedWords) {
+      log.debug('rendering seed words')
+      return h(Redirect, {
+        to: {
+          pathname: REVEAL_SEED_ROUTE,
+        },
+      })
     }
 
     // notices
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 0965cba38..0d3b43ae9 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -8,7 +8,7 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../routes')
+const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes')
 
 module.exports = compose(
   withRouter,
@@ -40,22 +40,10 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.displayWarning(null))
       dispatch(actions.toggleAccountMenu())
     },
-    showConfigPage: () => {
-      dispatch(actions.showConfigPage())
-      dispatch(actions.toggleAccountMenu())
-    },
     showNewAccountModal: () => {
       dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       dispatch(actions.toggleAccountMenu())
     },
-    showImportPage: () => {
-      dispatch(actions.showImportPage())
-      dispatch(actions.toggleAccountMenu())
-    },
-    showInfoPage: () => {
-      dispatch(actions.showInfoPage())
-      dispatch(actions.toggleAccountMenu())
-    },
   }
 }
 
@@ -64,10 +52,7 @@ AccountMenu.prototype.render = function () {
     isAccountMenuOpen,
     toggleAccountMenu,
     showNewAccountModal,
-    showImportPage,
     lockMetamask,
-    showConfigPage,
-    showInfoPage,
     history,
   } = this.props
 
@@ -78,7 +63,10 @@ AccountMenu.prototype.render = function () {
     }, [
       'My Accounts',
       h('button.account-menu__logout-button', {
-        onClick: lockMetamask,
+        onClick: () => {
+          lockMetamask()
+          history.push(DEFAULT_ROUTE)
+        },
       }, 'Log out'),
     ]),
     h(Divider),
diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js
index 78f3a4225..89bd238d2 100644
--- a/ui/app/components/pages/authenticated.js
+++ b/ui/app/components/pages/authenticated.js
@@ -1,26 +1,26 @@
 const { connect } = require('react-redux')
 const PropTypes = require('prop-types')
-const { Redirect, Route } = require('react-router-dom')
+const { Redirect } = require('react-router-dom')
 const h = require('react-hyperscript')
-const { UNLOCK_ROUTE, INITIALIZE_MENU_ROUTE } = require('../../routes')
+const MetamaskRoute = require('./metamask-route')
+const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes')
 
 const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => {
-
-  const render = props => {
+  const component = renderProps => {
     switch (true) {
       case isUnlocked:
-        return h(Component, { ...props })
+        return h(Component, { ...renderProps })
       case !isInitialized:
-        return h(Redirect, { to: { pathname: INITIALIZE_MENU_ROUTE } })
+        return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
       default:
         return h(Redirect, { to: { pathname: UNLOCK_ROUTE } })
     }
   }
 
   return (
-    h(Route, {
+    h(MetamaskRoute, {
       ...props,
-      render,
+      component,
     })
   )
 }
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index dc2cfc23e..029eb7d8e 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,7 +8,10 @@ const { DEFAULT_ROUTE } = require('../../../routes')
 
 class RevealSeedPage extends Component {
   componentDidMount () {
-    document.getElementById('password-box').focus()
+    const passwordBox = document.getElementById('password-box')
+    if (passwordBox) {
+      passwordBox.focus()
+    }
   }
 
   checkConfirmation (event) {
diff --git a/ui/app/components/pages/metamask-route.js b/ui/app/components/pages/metamask-route.js
new file mode 100644
index 000000000..23c5b5199
--- /dev/null
+++ b/ui/app/components/pages/metamask-route.js
@@ -0,0 +1,28 @@
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const { Route } = require('react-router-dom')
+const h = require('react-hyperscript')
+
+const MetamaskRoute = ({ component, mascaraComponent, isMascara, ...props }) => {
+  return (
+    h(Route, {
+      ...props,
+      component: isMascara && mascaraComponent ? mascaraComponent : component,
+    })
+  )
+}
+
+MetamaskRoute.propTypes = {
+  component: PropTypes.func,
+  mascaraComponent: PropTypes.func,
+  isMascara: PropTypes.bool,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { isMascara } } = state
+  return {
+    isMascara,
+  }
+}
+
+module.exports = connect(mapStateToProps)(MetamaskRoute)
diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js
index 8e68cd52b..2329a9147 100644
--- a/ui/app/components/pages/notice.js
+++ b/ui/app/components/pages/notice.js
@@ -53,7 +53,6 @@ class Notice extends Component {
   render () {
     const { notice = {} } = this.props
     const { title, date, body } = notice
-    // const state = this.state || { disclaimerDisabled: true }
     const { disclaimerDisabled } = this.state
 
     return (
@@ -156,21 +155,6 @@ class Notice extends Component {
 const mapStateToProps = state => {
   const { metamask } = state
   const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask
-  // if (!props.noActiveNotices) {
-  //   log.debug('rendering notice screen for unread notices.')
-  //   return h(NoticeScreen, {
-  //     notice: props.lastUnreadNotice,
-  //     key: 'NoticeScreen',
-  //     onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)),
-  //   })
-  // } else if (props.lostAccounts && props.lostAccounts.length > 0) {
-  //   log.debug('rendering notice screen for lost accounts view.')
-  //   return h(NoticeScreen, {
-  //     notice: generateLostAccountsNotice(props.lostAccounts),
-  //     key: 'LostAccountsNotice',
-  //     onConfirm: () => props.dispatch(actions.markAccountsFound()),
-  //   })
-  // }
 
   return {
     noActiveNotices,
diff --git a/ui/app/components/pages/unauthenticated/index.js b/ui/app/components/pages/unauthenticated/index.js
new file mode 100644
index 000000000..f8b5fa172
--- /dev/null
+++ b/ui/app/components/pages/unauthenticated/index.js
@@ -0,0 +1,38 @@
+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)
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index 6832f5ddf..addcedc77 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -35,7 +35,7 @@ class InitializeMenuScreen extends Component {
     const { warning } = this.state
 
     return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', [
+      h('.initialize-screen.flex-column.flex-center', [
 
         h(Mascot, {
           animationEventEmitter: this.animationEventEmitter,
diff --git a/ui/app/routes.js b/ui/app/routes.js
index 1305d6b1e..72be616a7 100644
--- a/ui/app/routes.js
+++ b/ui/app/routes.js
@@ -8,7 +8,7 @@ const ADD_TOKEN_ROUTE = '/add-token'
 const IMPORT_ACCOUNT_ROUTE = '/import-account'
 const SEND_ROUTE = '/send'
 const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
-const INITIALIZE_MENU_ROUTE = '/initialize-menu'
+const INITIALIZE_ROUTE = '/initialize'
 const NOTICE_ROUTE = '/notice'
 
 module.exports = {
@@ -22,6 +22,6 @@ module.exports = {
   IMPORT_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  INITIALIZE_MENU_ROUTE,
+  INITIALIZE_ROUTE,
   NOTICE_ROUTE,
 }