Fix merge conflicts. Refactor renderPrimary into Home component

6 files changed, 448 insertions, 361 deletions

diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index b33373c19..61c245c32 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const classnames = require('classnames')
 const h = require('react-hyperscript')
-const connect = require('./metamask-connect')
+const connect = require('../../metamask-connect')
 const R = require('ramda')
 const Fuse = require('fuse.js')
 const contractMap = require('eth-contract-metadata')
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
new file mode 100644
index 000000000..4f8c00768
--- /dev/null
+++ b/ui/app/components/pages/home.js
@@ -0,0 +1,333 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const connect = require('../../metamask-connect')
+const { Redirect, withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const h = require('react-hyperscript')
+const actions = require('../../actions')
+
+// init
+const NewKeyChainScreen = require('../../new-keychain')
+// mascara
+const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default
+
+// accounts
+const MainContainer = require('../../main-container')
+
+// other views
+const BuyView = require('../../components/buy-button-subview')
+const QrView = require('../../components/qr-code')
+
+// Routes
+const {
+  REVEAL_SEED_ROUTE,
+  RESTORE_VAULT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  NOTICE_ROUTE,
+} = require('../../routes')
+
+class Home extends Component {
+  componentDidMount () {
+    const {
+      unapprovedTxs = {},
+      unapprovedMsgCount = 0,
+      unapprovedPersonalMsgCount = 0,
+      unapprovedTypedMessagesCount = 0,
+    } = this.props
+
+    console.log('IN HOME COMPONENDIMOUNT')
+    // unapprovedTxs and unapproved messages
+    if (Object.keys(unapprovedTxs).length ||
+    unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
+      console.log('IN HOME SHOULD REDIRECT')
+      this.props.history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
+  }
+
+  render () {
+    log.debug('rendering primary')
+    const {
+      noActiveNotices,
+      lostAccounts,
+      forgottenPassword,
+      currentView,
+      activeAddress,
+      seedWords,
+    } = this.props
+
+    // seed words
+    if (seedWords) {
+      log.debug('rendering seed words')
+      return h(Redirect, {
+        to: {
+          pathname: REVEAL_SEED_ROUTE,
+        },
+      })
+    }
+
+    if (forgottenPassword) {
+      log.debug('rendering restore vault screen')
+      return h(Redirect, {
+        to: {
+          pathname: RESTORE_VAULT_ROUTE,
+        },
+      })
+    }
+
+    // notices
+    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
+      return h(Redirect, {
+        to: {
+          pathname: NOTICE_ROUTE,
+        },
+      })
+    }
+
+    // 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()),
+    //   })
+    // }
+
+    // if (props.seedWords) {
+    //   log.debug('rendering seed words')
+    //   return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
+    // }
+
+    // show initialize screen
+    // if (!isInitialized || forgottenPassword) {
+    //   // show current view
+    //   log.debug('rendering an initialize screen')
+    //   // switch (props.currentView.name) {
+
+    //     // case 'restoreVault':
+    //     //   log.debug('rendering restore vault screen')
+    //     //   return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
+
+    //   //   default:
+    //   //     log.debug('rendering menu screen')
+    //   //     return h(InitializeScreen, {key: 'menuScreenInit'})
+    //   // }
+    // }
+
+    // // show unlock screen
+    // if (!props.isUnlocked) {
+    //   return h(MainContainer, {
+    //     currentViewName: props.currentView.name,
+    //     isUnlocked: props.isUnlocked,
+    //   })
+    // }
+
+    // show current view
+    switch (currentView.name) {
+
+      case 'accountDetail':
+        log.debug('rendering main container')
+        return h(MainContainer, {key: 'account-detail'})
+
+      // case 'sendTransaction':
+      //   log.debug('rendering send tx screen')
+
+      //   // Going to leave this here until we are ready to delete SendTransactionScreen v1
+      //   // const SendComponentToRender = checkFeatureToggle('send-v2')
+      //   //   ? SendTransactionScreen2
+      //   //   : SendTransactionScreen
+
+      //   return h(SendTransactionScreen2, {key: 'send-transaction'})
+
+      // case 'sendToken':
+      //   log.debug('rendering send token screen')
+
+      //   // Going to leave this here until we are ready to delete SendTransactionScreen v1
+      //   // const SendTokenComponentToRender = checkFeatureToggle('send-v2')
+      //   //   ? SendTransactionScreen2
+      //   //   : SendTokenScreen
+
+      //   return h(SendTransactionScreen2, {key: 'sendToken'})
+
+      case 'newKeychain':
+        log.debug('rendering new keychain screen')
+        return h(NewKeyChainScreen, {key: 'new-keychain'})
+
+      // case 'confTx':
+      //   log.debug('rendering confirm tx screen')
+      //   return h(Redirect, {
+      //     to: {
+      //       pathname: CONFIRM_TRANSACTION_ROUTE,
+      //     },
+      //   })
+        // return h(ConfirmTxScreen, {key: 'confirm-tx'})
+
+      // case 'add-token':
+      //   log.debug('rendering add-token screen from unlock screen.')
+      //   return h(AddTokenScreen, {key: 'add-token'})
+
+      // case 'config':
+      //   log.debug('rendering config screen')
+      //   return h(Settings, {key: 'config'})
+
+      // case 'import-menu':
+      //   log.debug('rendering import screen')
+      //   return h(Import, {key: 'import-menu'})
+
+      // case 'reveal-seed-conf':
+      //   log.debug('rendering reveal seed confirmation screen')
+      //   return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
+
+      // case 'info':
+      //   log.debug('rendering info screen')
+      //   return h(Settings, {key: 'info', tab: 'info'})
+
+      case 'buyEth':
+        log.debug('rendering buy ether screen')
+        return h(BuyView, {key: 'buyEthView'})
+
+      case 'onboardingBuyEth':
+        log.debug('rendering onboarding buy ether screen')
+        return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
+
+      case 'qr':
+        log.debug('rendering show qr screen')
+        return h('div', {
+          style: {
+            position: 'absolute',
+            height: '100%',
+            top: '0px',
+            left: '0px',
+          },
+        }, [
+          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+            onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)),
+            style: {
+              marginLeft: '10px',
+              marginTop: '50px',
+            },
+          }),
+          h('div', {
+            style: {
+              position: 'absolute',
+              left: '44px',
+              width: '285px',
+            },
+          }, [
+            h(QrView, {key: 'qr'}),
+          ]),
+        ])
+
+      default:
+        log.debug('rendering default, account detail screen')
+        return h(MainContainer, {key: 'account-detail'})
+    }
+  }
+}
+
+Home.propTypes = {
+  currentCurrency: PropTypes.string,
+  isLoading: PropTypes.bool,
+  loadingMessage: PropTypes.string,
+  network: PropTypes.string,
+  provider: PropTypes.object,
+  frequentRpcList: PropTypes.array,
+  currentView: PropTypes.object,
+  sidebarOpen: PropTypes.bool,
+  isMascara: PropTypes.bool,
+  isOnboarding: PropTypes.bool,
+  isUnlocked: PropTypes.bool,
+  networkDropdownOpen: PropTypes.bool,
+  history: PropTypes.object,
+  dispatch: PropTypes.func,
+  selectedAddress: PropTypes.string,
+  noActiveNotices: PropTypes.bool,
+  lostAccounts: PropTypes.array,
+  isInitialized: PropTypes.bool,
+  forgottenPassword: PropTypes.bool,
+  activeAddress: PropTypes.string,
+  unapprovedTxs: PropTypes.object,
+  seedWords: PropTypes.string,
+  unapprovedMsgCount: PropTypes.number,
+  unapprovedPersonalMsgCount: PropTypes.number,
+  unapprovedTypedMessagesCount: PropTypes.number,
+  welcomeScreenSeen: PropTypes.bool,
+  isPopup: PropTypes.bool,
+  isMouseUser: PropTypes.bool,
+  t: PropTypes.func,
+}
+
+function mapStateToProps (state) {
+  const { appState, metamask } = state
+  const {
+    networkDropdownOpen,
+    sidebarOpen,
+    isLoading,
+    loadingMessage,
+  } = appState
+
+  const {
+    accounts,
+    address,
+    isInitialized,
+    noActiveNotices,
+    seedWords,
+    unapprovedTxs,
+    lastUnreadNotice,
+    lostAccounts,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+  } = metamask
+  const selected = address || Object.keys(accounts)[0]
+
+  return {
+    // state from plugin
+    networkDropdownOpen,
+    sidebarOpen,
+    isLoading,
+    loadingMessage,
+    noActiveNotices,
+    isInitialized,
+    isUnlocked: state.metamask.isUnlocked,
+    selectedAddress: state.metamask.selectedAddress,
+    currentView: state.appState.currentView,
+    activeAddress: state.appState.activeAddress,
+    transForward: state.appState.transForward,
+    isMascara: state.metamask.isMascara,
+    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
+    isPopup: state.metamask.isPopup,
+    seedWords: state.metamask.seedWords,
+    unapprovedTxs,
+    unapprovedMsgs: state.metamask.unapprovedMsgs,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+    menuOpen: state.appState.menuOpen,
+    network: state.metamask.network,
+    provider: state.metamask.provider,
+    forgottenPassword: state.appState.forgottenPassword,
+    lastUnreadNotice,
+    lostAccounts,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    currentCurrency: state.metamask.currentCurrency,
+    isMouseUser: state.appState.isMouseUser,
+    isRevealingSeedWords: state.metamask.isRevealingSeedWords,
+    Qr: state.appState.Qr,
+    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
+
+    // state needed to get account dropdown temporarily rendering from app bar
+    selected,
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(Home)
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
index 749da9758..24ebf89e3 100644
--- a/ui/app/components/pages/keychains/restore-vault.js
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -2,9 +2,9 @@ const { withRouter } = require('react-router-dom')
 const PropTypes = require('prop-types')
 const { compose } = require('recompose')
 const PersistentForm = require('../../../../lib/persistent-form')
-const { connect } = require('react-redux')
+const connect = require('../../../metamask-connect')
 const h = require('react-hyperscript')
-const { createNewVaultAndRestore } = require('../../../actions')
+const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
 
 class RestoreVaultPage extends PersistentForm {
@@ -22,6 +22,11 @@ class RestoreVaultPage extends PersistentForm {
     }
   }
 
+  cancel () {
+    this.props.unMarkPasswordForgotten()
+      .then(this.props.history.goBack())
+  }
+
   createNewVaultAndRestore () {
     this.setState({ error: null })
 
@@ -51,7 +56,7 @@ class RestoreVaultPage extends PersistentForm {
 
     // submit
     this.props.createNewVaultAndRestore(password, seed)
-      .then(() => history.push(DEFAULT_ROUTE))
+      .then(() => this.props.history.push(DEFAULT_ROUTE))
       .catch(({ message }) => {
         this.setState({ error: message })
         log.error(message)
@@ -76,7 +81,7 @@ class RestoreVaultPage extends PersistentForm {
             padding: 6,
           },
         }, [
-          'Restore Vault',
+          this.props.t('restoreVault'),
         ]),
 
         // wallet seed entry
@@ -85,14 +90,14 @@ class RestoreVaultPage extends PersistentForm {
           dataset: {
             persistentFormId: 'wallet-seed',
           },
-          placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
+          placeholder: this.props.t('secretPhrase'),
         }),
 
         // password
         h('input.large-input.letter-spacey', {
           type: 'password',
           id: 'password-box',
-          placeholder: 'New Password (min 8 chars)',
+          placeholder: this.props.t('newPassword8Chars'),
           dataset: {
             persistentFormId: 'password',
           },
@@ -106,7 +111,7 @@ class RestoreVaultPage extends PersistentForm {
         h('input.large-input.letter-spacey', {
           type: 'password',
           id: 'password-box-confirm',
-          placeholder: 'Confirm Password',
+          placeholder: this.props.t('confirmPassword'),
           onKeyPress: this.createOnEnter.bind(this),
           dataset: {
             persistentFormId: 'password-confirmation',
@@ -130,12 +135,14 @@ class RestoreVaultPage extends PersistentForm {
         }, [
 
           // cancel
-          h('button.primary', { onClick: () => history.goBack() }, 'CANCEL'),
+          h('button.primary', {
+            onClick: () => this.cancel(),
+          }, this.props.t('cancel')),
 
           // submit
           h('button.primary', {
             onClick: this.createNewVaultAndRestore.bind(this),
-          }, 'OK'),
+          }, this.props.t('ok')),
 
         ]),
       ])
@@ -161,6 +168,7 @@ const mapDispatchToProps = dispatch => {
     createNewVaultAndRestore: (password, seed) => {
       return dispatch(createNewVaultAndRestore(password, seed))
     },
+    unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
   }
 }
 
diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js
deleted file mode 100644
index e9271fce1..000000000
--- a/ui/app/components/pages/signature-request.js
+++ /dev/null
@@ -1,284 +0,0 @@
-const { Component } = require('react')
-const h = require('react-hyperscript')
-const PropTypes = require('prop-types')
-const Identicon = require('../identicon')
-const { connect } = require('react-redux')
-const ethUtil = require('ethereumjs-util')
-const classnames = require('classnames')
-
-const AccountDropdownMini = require('../dropdowns/account-dropdown-mini')
-
-const t = require('../../../i18n')
-const { conversionUtil } = require('../../conversion-util')
-const { DEFAULT_ROUTE } = require('../../routes')
-
-const {
-  getSelectedAccount,
-  getCurrentAccountWithSendEtherInfo,
-  getSelectedAddress,
-  accountsWithSendEtherInfoSelector,
-  conversionRateSelector,
-} = require('../../selectors.js')
-
-class SignatureRequest extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      selectedAccount: props.selectedAccount,
-      accountDropdownOpen: false,
-    }
-  }
-
-  componentWillMount () {
-    const {
-      unapprovedMsgCount = 0,
-      unapprovedPersonalMsgCount = 0,
-      unapprovedTypedMessagesCount = 0,
-    } = this.props
-
-    if (unapprovedMsgCount + unapprovedPersonalMsgCount + unapprovedTypedMessagesCount < 1) {
-      this.props.history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  renderHeader () {
-    return h('div.request-signature__header', [
-
-      h('div.request-signature__header-background'),
-
-      h('div.request-signature__header__text', t('sigRequest')),
-
-      h('div.request-signature__header__tip-container', [
-        h('div.request-signature__header__tip'),
-      ]),
-
-    ])
-  }
-
-  renderAccountDropdown () {
-    const {
-      selectedAccount,
-      accountDropdownOpen,
-    } = this.state
-
-    const { accounts } = this.props
-
-    return h('div.request-signature__account', [
-
-      h('div.request-signature__account-text', [t('account') + ':']),
-
-      h(AccountDropdownMini, {
-        selectedAccount,
-        accounts,
-        onSelect: selectedAccount => this.setState({ selectedAccount }),
-        dropdownOpen: accountDropdownOpen,
-        openDropdown: () => this.setState({ accountDropdownOpen: true }),
-        closeDropdown: () => this.setState({ accountDropdownOpen: false }),
-      }),
-
-    ])
-  }
-
-  renderBalance () {
-    const { balance, conversionRate } = this.props
-
-    const balanceInEther = conversionUtil(balance, {
-      fromNumericBase: 'hex',
-      toNumericBase: 'dec',
-      fromDenomination: 'WEI',
-      numberOfDecimals: 6,
-      conversionRate,
-    })
-
-    return h('div.request-signature__balance', [
-
-      h('div.request-signature__balance-text', [t('balance')]),
-
-      h('div.request-signature__balance-value', `${balanceInEther} ETH`),
-
-    ])
-  }
-
-  renderAccountInfo () {
-    return h('div.request-signature__account-info', [
-
-      this.renderAccountDropdown(),
-
-      this.renderRequestIcon(),
-
-      this.renderBalance(),
-
-    ])
-  }
-
-  renderRequestIcon () {
-    const { requesterAddress } = this.props
-
-    return h('div.request-signature__request-icon', [
-      h(Identicon, {
-        diameter: 40,
-        address: requesterAddress,
-      }),
-    ])
-  }
-
-  renderRequestInfo () {
-    return h('div.request-signature__request-info', [
-
-      h('div.request-signature__headline', [
-        t('yourSigRequested'),
-      ]),
-
-    ])
-  }
-
-  msgHexToText (hex) {
-    try {
-      const stripped = ethUtil.stripHexPrefix(hex)
-      const buff = Buffer.from(stripped, 'hex')
-      return buff.toString('utf8')
-    } catch (e) {
-      return hex
-    }
-  }
-
-  renderBody () {
-    let rows
-    let notice = t('youSign') + ':'
-
-    const { txData } = this.props
-    const { type, msgParams: { data } } = txData
-
-    if (type === 'personal_sign') {
-      rows = [{ name: t('message'), value: this.msgHexToText(data) }]
-    } else if (type === 'eth_signTypedData') {
-      rows = data
-    } else if (type === 'eth_sign') {
-      rows = [{ name: t('message'), value: data }]
-      notice = t('signNotice')
-    }
-
-    return h('div.request-signature__body', {}, [
-
-      this.renderAccountInfo(),
-
-      this.renderRequestInfo(),
-
-      h('div.request-signature__notice', {
-        className: classnames({
-          'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData',
-          'request-signature__warning': type === 'eth_sign',
-        }),
-      }, [notice]),
-
-      h('div.request-signature__rows', [
-
-        ...rows.map(({ name, value }) => {
-          return h('div.request-signature__row', [
-            h('div.request-signature__row-title', [`${name}:`]),
-            h('div.request-signature__row-value', value),
-          ])
-        }),
-
-      ]),
-
-    ])
-  }
-
-  renderFooter () {
-    const {
-      txData = {},
-      signPersonalMessage,
-      signTypedMessage,
-      cancelPersonalMessage,
-      cancelTypedMessage,
-      signMessage,
-      cancelMessage,
-      history,
-    } = this.props
-
-    const { type } = txData
-
-    let cancel = () => Promise.resolve()
-    let sign = () => Promise.resolve()
-    const { msgParams: params = {}, id } = txData
-    params.id = id
-    params.metamaskId = id
-
-    switch (type) {
-      case 'personal_sign':
-        cancel = () => cancelPersonalMessage(params)
-        sign = () => signPersonalMessage(params)
-        break
-      case 'eth_signTypedData':
-        cancel = () => cancelTypedMessage(params)
-        sign = () => signTypedMessage(params)
-        break
-      case 'eth_sign':
-        cancel = () => cancelMessage(params)
-        sign = () => signMessage(params)
-        break
-    }
-
-    return h('div.request-signature__footer', [
-      h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
-        onClick: () => {
-          cancel().then(() => history.push(DEFAULT_ROUTE))
-        },
-      }, t('cancel')),
-      h('button.btn-primary--lg', {
-        onClick: () => {
-          sign().then(() => history.push(DEFAULT_ROUTE))
-        },
-      }, t('sign')),
-    ])
-  }
-
-  render () {
-    return (
-      h('div.request-signature__container', [
-
-        this.renderHeader(),
-
-        this.renderBody(),
-
-        this.renderFooter(),
-
-      ])
-    )
-  }
-}
-
-SignatureRequest.propTypes = {
-  txData: PropTypes.object,
-  signPersonalMessage: PropTypes.func,
-  cancelPersonalMessage: PropTypes.func,
-  signTypedMessage: PropTypes.func,
-  cancelTypedMessage: PropTypes.func,
-  signMessage: PropTypes.func,
-  cancelMessage: PropTypes.func,
-  requesterAddress: PropTypes.string,
-  accounts: PropTypes.array,
-  conversionRate: PropTypes.number,
-  balance: PropTypes.string,
-  selectedAccount: PropTypes.object,
-  history: PropTypes.object,
-  unapprovedMsgCount: PropTypes.number,
-  unapprovedPersonalMsgCount: PropTypes.number,
-  unapprovedTypedMessagesCount: PropTypes.number,
-}
-
-const mapStateToProps = state => {
-  return {
-    balance: getSelectedAccount(state).balance,
-    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
-    selectedAddress: getSelectedAddress(state),
-    requester: null,
-    requesterAddress: null,
-    accounts: accountsWithSendEtherInfoSelector(state),
-    conversionRate: conversionRateSelector(state),
-  }
-}
-
-module.exports = connect(mapStateToProps)(SignatureRequest)
diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js
index 3d7a9091c..ed4b9ded7 100644
--- a/ui/app/components/pages/unlock.js
+++ b/ui/app/components/pages/unlock.js
@@ -1,14 +1,22 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
-const { connect } = require('react-redux')
+const connect = require('../../metamask-connect')
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const { tryUnlockMetamask, forgotPassword, markPasswordForgotten } = require('../../actions')
+const {
+  tryUnlockMetamask,
+  forgotPassword,
+  markPasswordForgotten,
+  setNetworkEndpoints,
+  setFeatureFlag,
+} = require('../../actions')
+const environmentType = require('../../../../app/scripts/lib/environment-type')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
 const Mascot = require('../mascot')
-const { DEFAULT_ROUTE } = require('../../routes')
+const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/config').enums
+const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes')
 
 class UnlockScreen extends Component {
   constructor (props) {
@@ -77,70 +85,76 @@ class UnlockScreen extends Component {
 
   render () {
     const { error } = this.state
-    const { markPasswordForgotten } = this.props
-
     return (
-      h('.unlock-page.main-container', [
-        h('.flex-column', {
+      h('.unlock-screen', [
+
+        h(Mascot, {
+          animationEventEmitter: this.animationEventEmitter,
+        }),
+
+        h('h1', {
+          style: {
+            fontSize: '1.4em',
+            textTransform: 'uppercase',
+            color: '#7F8082',
+          },
+        }, this.props.t('appName')),
+
+        h('input.large-input', {
+          type: 'password',
+          id: 'password-box',
+          placeholder: 'enter password',
+          style: {
+            background: 'white',
+          },
+          onKeyPress: this.onKeyPress.bind(this),
+          onInput: this.inputChanged.bind(this),
+        }),
+
+        h('.error', {
+          style: {
+            display: error ? 'block' : 'none',
+            padding: '0 20px',
+            textAlign: 'center',
+          },
+        }, error),
+
+        h('button.primary.cursor-pointer', {
+          onClick: this.onSubmit.bind(this),
+          style: {
+            margin: 10,
+          },
+        }, this.props.t('login')),
+
+        h('p.pointer', {
+          onClick: () => {
+            this.props.markPasswordForgotten()
+            this.props.history.push(RESTORE_VAULT_ROUTE)
+
+            console.log('typeeee', environmentType())
+            if (environmentType() === 'popup') {
+              global.platform.openExtensionInBrowser()
+            }
+          },
+          style: {
+            fontSize: '0.8em',
+            color: 'rgb(247, 134, 28)',
+            textDecoration: 'underline',
+          },
+        }, this.props.t('restoreFromSeed')),
+
+        h('p.pointer', {
+          onClick: () => {
+            this.props.useOldInterface()
+              .then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))
+          },
           style: {
-            width: 'inherit',
+            fontSize: '0.8em',
+            color: '#aeaeae',
+            textDecoration: 'underline',
+            marginTop: '32px',
           },
-        }, [
-          h('.unlock-screen.flex-column.flex-center.flex-grow', [
-
-            h(Mascot, {
-              animationEventEmitter: this.animationEventEmitter,
-            }),
-
-            h('h1', {
-              style: {
-                fontSize: '1.4em',
-                textTransform: 'uppercase',
-                color: '#7F8082',
-              },
-            }, 'MetaMask'),
-
-            h('input.large-input', {
-              type: 'password',
-              id: 'password-box',
-              placeholder: 'enter password',
-              style: {
-                background: 'white',
-              },
-              onKeyPress: this.onKeyPress.bind(this),
-              onInput: this.inputChanged.bind(this),
-            }),
-
-            h('.error', {
-              style: {
-                display: error ? 'block' : 'none',
-                padding: '0 20px',
-                textAlign: 'center',
-              },
-            }, error),
-
-            h('button.primary.cursor-pointer', {
-              onClick: this.onSubmit.bind(this),
-              style: {
-                margin: 10,
-              },
-            }, 'Unlock'),
-
-            h('.flex-row.flex-center.flex-grow', [
-              h('p.pointer', {
-                onClick: () => {
-                  markPasswordForgotten()
-                  global.platform.openExtensionInBrowser()
-                },
-                style: {
-                  fontSize: '0.8em',
-                  color: 'rgb(247, 134, 28)',
-                  textDecoration: 'underline',
-                },
-              }, 'Restore from seed phrase'),
-            ]),
-          ]),
-        ]),
+        }, this.props.t('classicInterface')),
       ])
     )
   }
@@ -152,6 +166,9 @@ UnlockScreen.propTypes = {
   markPasswordForgotten: PropTypes.func,
   history: PropTypes.object,
   isUnlocked: PropTypes.bool,
+  t: PropTypes.func,
+  useOldInterface: PropTypes.func,
+  setNetworkEndpoints: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -166,6 +183,8 @@ const mapDispatchToProps = dispatch => {
     forgotPassword: () => dispatch(forgotPassword()),
     tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
     markPasswordForgotten: () => dispatch(markPasswordForgotten()),
+    useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')),
+    setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)),
   }
 }
 
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index b76c1e60f..92feb70ba 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -5,6 +5,8 @@ const Identicon = require('./identicon')
 const connect = require('../metamask-connect')
 const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
+const { compose } = require('recompose')
+const { withRouter } = require('react-router-dom')
 
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 
@@ -19,6 +21,8 @@ const {
   conversionRateSelector,
 } = require('../selectors.js')
 
+const { DEFAULT_ROUTE } = require('../routes')
+
 function mapStateToProps (state) {
   return {
     balance: getSelectedAccount(state).balance,
@@ -37,7 +41,10 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SignatureRequest)
 
 inherits(SignatureRequest, Component)
 function SignatureRequest (props) {
@@ -223,10 +230,14 @@ SignatureRequest.prototype.renderFooter = function () {
 
   return h('div.request-signature__footer', [
     h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
-      onClick: cancel,
+      onClick: event => {
+        cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE))
+      },
     }, this.props.t('cancel')),
     h('button.btn-primary--lg', {
-      onClick: sign,
+      onClick: event => {
+        sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
+      },
     }, this.props.t('sign')),
   ])
 }