Merge branch 'uat-next' of https://github.com/MetaMask/metamask-extension into cb-254

17 files changed, 432 insertions, 102 deletions

diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
index 60293de77..03101d37a 100644
--- a/ui/app/account-and-transaction-details.js
+++ b/ui/app/account-and-transaction-details.js
@@ -13,12 +13,7 @@ function AccountAndTransactionDetails () {
 }
 
 AccountAndTransactionDetails.prototype.render = function () {
-  return h('div', {
-    style: {
-      display: 'flex',
-      flex: '1 0 auto',
-    },
-  }, [
+  return h('div.account-and-transaction-details', [
     // wallet
     h(WalletView, {
       style: {
diff --git a/ui/app/actions.js b/ui/app/actions.js
index e5b35daaa..138479ca4 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -47,6 +47,8 @@ var actions = {
   SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
   FORGOT_PASSWORD: 'FORGOT_PASSWORD',
   forgotPassword: forgotPassword,
+  markPasswordForgotten,
+  unMarkPasswordForgotten,
   SHOW_INIT_MENU: 'SHOW_INIT_MENU',
   SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED',
   SHOW_INFO_PAGE: 'SHOW_INFO_PAGE',
@@ -70,12 +72,14 @@ var actions = {
   addNewAccount,
   NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
   navigateToNewAccountScreen,
+  resetAccount,
   showNewVaultSeed: showNewVaultSeed,
   showInfoPage: showInfoPage,
   // seed recovery actions
   REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
   revealSeedConfirmation: revealSeedConfirmation,
   requestRevealSeed: requestRevealSeed,
+
   // unlock screen
   UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
   UNLOCK_FAILED: 'UNLOCK_FAILED',
@@ -404,6 +408,20 @@ function requestRevealSeed (password) {
   }
 }
 
+function resetAccount () {
+    return (dispatch) => {
+        background.resetAccount((err, account) => {
+            dispatch(actions.hideLoadingIndication())
+            if (err) {
+                dispatch(actions.displayWarning(err.message))
+            }
+
+            log.info('Transaction history reset for ' + account)
+            dispatch(actions.showAccountsPage())
+        })
+    }
+}
+
 function addNewKeyring (type, opts) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
@@ -897,6 +915,28 @@ function showRestoreVault () {
   }
 }
 
+function markPasswordForgotten () {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return background.markPasswordForgotten(() => {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.forgotPassword())
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
+function unMarkPasswordForgotten () {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return background.unMarkPasswordForgotten(() => {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.forgotPassword())
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
 function forgotPassword () {
   return {
     type: actions.FORGOT_PASSWORD,
diff --git a/ui/app/app.js b/ui/app/app.js
index 09af2db2c..0ecfd0dde 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -352,7 +352,6 @@ class App extends Component {
     const {
       noActiveNotices,
       lostAccounts,
-      isInitialized,
       forgottenPassword,
       currentView,
       activeAddress,
@@ -373,6 +372,15 @@ class App extends Component {
       })
     }
 
+    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, {
@@ -422,20 +430,20 @@ class App extends Component {
     // }
 
     // 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(InitializeMenuScreen, {key: 'menuScreenInit'})
-      // }
-    }
+    // 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(InitializeMenuScreen, {key: 'menuScreenInit'})
+    //   // }
+    // }
 
     // // show unlock screen
     // if (!props.isUnlocked) {
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index e9ae61735..2b371eedf 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -90,7 +90,7 @@ AccountMenu.prototype.render = function () {
         toggleAccountMenu()
         history.push(NEW_ACCOUNT_ROUTE)
       },
-      icon: h('img', { src: 'images/plus-btn-white.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
       text: 'Create Account',
     }),
     h(Item, {
@@ -98,7 +98,7 @@ AccountMenu.prototype.render = function () {
         toggleAccountMenu()
         history.push(IMPORT_ACCOUNT_ROUTE)
       },
-      icon: h('img', { src: 'images/import-account.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
       text: 'Import Account',
     }),
     h(Divider),
@@ -107,7 +107,7 @@ AccountMenu.prototype.render = function () {
         toggleAccountMenu()
         history.push(INFO_ROUTE)
       },
-      icon: h('img', { src: 'images/mm-info-icon.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }),
       text: 'Info & Help',
     }),
     h(Item, {
@@ -115,7 +115,7 @@ AccountMenu.prototype.render = function () {
         toggleAccountMenu()
         history.push(SETTINGS_ROUTE)
       },
-      icon: h('img', { src: 'images/settings.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
       text: 'Settings',
     }),
   ])
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index 36644f1a0..703dbc1f4 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -87,6 +87,12 @@ JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
 
 JsonImportSubview.prototype.createNewKeychain = function () {
   const state = this.state
+
+  if (!state) {
+    const message = 'You must select a valid file to import.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
   const { fileContents } = state
 
   if (!fileContents) {
diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js
index 27e093a29..3d7a9091c 100644
--- a/ui/app/components/pages/unlock.js
+++ b/ui/app/components/pages/unlock.js
@@ -4,11 +4,11 @@ const { connect } = require('react-redux')
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const { tryUnlockMetamask, forgotPassword } = require('../../actions')
+const { tryUnlockMetamask, forgotPassword, markPasswordForgotten } = 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 { DEFAULT_ROUTE } = require('../../routes')
 
 class UnlockScreen extends Component {
   constructor (props) {
@@ -77,7 +77,7 @@ class UnlockScreen extends Component {
 
   render () {
     const { error } = this.state
-    const { history } = this.props
+    const { markPasswordForgotten } = this.props
 
     return (
       h('.unlock-page.main-container', [
@@ -128,7 +128,10 @@ class UnlockScreen extends Component {
 
             h('.flex-row.flex-center.flex-grow', [
               h('p.pointer', {
-                onClick: () => history.push(RESTORE_VAULT_ROUTE),
+                onClick: () => {
+                  markPasswordForgotten()
+                  global.platform.openExtensionInBrowser()
+                },
                 style: {
                   fontSize: '0.8em',
                   color: 'rgb(247, 134, 28)',
@@ -146,6 +149,7 @@ class UnlockScreen extends Component {
 UnlockScreen.propTypes = {
   forgotPassword: PropTypes.func,
   tryUnlockMetamask: PropTypes.func,
+  markPasswordForgotten: PropTypes.func,
   history: PropTypes.object,
   isUnlocked: PropTypes.bool,
 }
@@ -161,6 +165,7 @@ const mapDispatchToProps = dispatch => {
   return {
     forgotPassword: () => dispatch(forgotPassword()),
     tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
+    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
   }
 }
 
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 59552f4a0..0332fde88 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,20 +111,24 @@ TokenCell.prototype.render = function () {
         network,
       }),
 
-      h('h.token-list-item__balance-wrapper', null, [
-        h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+      h('div.token-list-item__balance-ellipsis', null, [
+        h('div.token-list-item__balance-wrapper', null, [
+          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+
+          showFiat && h('div.token-list-item__fiat-amount', {
+            style: {},
+          }, formattedFiat),
+        ]),
+
+        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+          onClick: (e) => {
+            e.stopPropagation()
+            this.setState({ tokenMenuOpen: true })
+          },
+        }),
 
-        showFiat && h('div.token-list-item__fiat-amount', {
-          style: {},
-        }, formattedFiat),
       ]),
 
-      h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
-        onClick: (e) => {
-          e.stopPropagation()
-          this.setState({ tokenMenuOpen: true })
-        },
-      }),
 
       tokenMenuOpen && h(TokenMenuDropdown, {
         onClose: () => this.setState({ tokenMenuOpen: false }),
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index e16d2e024..8ad7481c7 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -43,7 +43,7 @@
     font-weight: 300;
   }
 
-  img {
+  &__item-icon {
     width: 16px;
     height: 16px;
   }
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index ccc9a0118..4af0c2c55 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -71,6 +71,22 @@
         font-size: 105%;
       }
     }
+
+    @media #{$sub-mid-size-breakpoint-range} {
+      margin-left: .4em;
+      margin-right: .4em;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .token-amount {
+        font-size: 1rem;
+      }
+
+      .fiat-amount {
+        margin-top: .25%;
+        font-size: 1rem;
+      }
+    }
   }
 
   .hero-balance-buttons {
@@ -91,4 +107,12 @@
 
 .hero-balance-button {
   width: 6rem;
+
+  @media #{$sub-mid-size-breakpoint-range} {
+    padding: 0.4rem;
+    width: 4rem;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
 }
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 37fabf254..73faebe8b 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -1,3 +1,6 @@
+$sub-mid-size-breakpoint: 667px;
+$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
+
 /*
   NewUI Container Elements
  */
@@ -20,6 +23,12 @@ $wallet-view-bg: $alabaster;
   display: none;
 }
 
+//Account and transaction details
+.account-and-transaction-details {
+  display: flex;
+  flex: 1 0 auto;
+}
+
 // tx view
 
 .tx-view {
@@ -60,6 +69,10 @@ $wallet-view-bg: $alabaster;
     overflow-x: hidden;
   }
 
+  @media #{$sub-mid-size-breakpoint-range} {
+    min-width: 160px;
+  }
+
   .wallet-view-account-details {
     flex: 0 0 auto;
   }
@@ -92,6 +105,7 @@ $wallet-view-bg: $alabaster;
   &__tooltip {
     display: flex;
     justify-content: center;
+    align-items: center;
     padding: 24px;
   }
 
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 7a6e2823b..fd73275e0 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -533,7 +533,6 @@
     @media screen and (max-width: $break-small) {
       padding: 13px 0;
       margin: 0;
-      height: 0;
       overflow-y: auto;
       flex: 1 1 auto;
     }
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index e24bf812b..9dc4f1055 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -15,7 +15,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     font-size: 1.5rem;
 
     @media #{$wallet-balance-breakpoint-range} {
-      font-size: 105%;
+      font-size: 95%;
     }
   }
 
@@ -41,17 +41,22 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   &__identicon {
     margin-right: 15px;
     border: '1px solid #dedede';
+    min-width: 50px;
 
     @media #{$wallet-balance-breakpoint-range} {
       margin-right: 4%;
     }
   }
 
+  &__balance-ellipsis {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
   &__ellipsis {
-    // position: absolute;
-    // top: 20px;
-    // right: 24px;
     line-height: 45px;
+    margin-left: 5px;
   }
 
   &__balance-wrapper {
@@ -61,7 +66,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
 .token-menu-dropdown {
   height: 55px;
-  width: 191px;
+  width: 80%;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, .82);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
@@ -70,6 +75,10 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   right: 25px;
   z-index: 2000;
 
+  @media #{$wallet-balance-breakpoint-range} {
+    right: 18px;
+  }
+
   &__close-area {
     position: fixed;
     top: 0;
@@ -81,7 +90,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   }
 
   &__container {
-    padding: 16px 34px 32px;
+    padding: 16px;
     z-index: 2200;
     position: relative;
   }
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9d55324e3..75f823320 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -69,3 +69,117 @@ textarea.large-input {
 input.large-input {
   height: 36px;
 }
+
+.page-container {
+  width: 400px;
+  background-color: $white;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  z-index: 25;
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+    padding: 1.6rem 1rem;
+    flex: 0 0 auto;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid $geyser;
+    padding: 1.6rem;
+    flex: 0 0 auto;
+  }
+
+  &__footer-button {
+    width: 165px;
+    height: 60px;
+    font-size: 1rem;
+    text-transform: uppercase;
+    margin-right: 1rem;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__title {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: initial;
+  }
+
+  &__subtitle {
+    padding-top: .5rem;
+    line-height: initial;
+    font-size: .9rem;
+  }
+
+  &__tabs {
+    padding: 0 1.3rem;
+    display: flex;
+  }
+
+  &__tab {
+    min-width: 5rem;
+    padding: .2rem .8rem .9rem;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 1.1rem;
+    line-height: initial;
+    text-align: center;
+    cursor: pointer;
+    border-bottom: none;
+    margin-right: 1rem;
+
+    &:hover {
+      color: $black;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &--selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+
+      &:hover {
+        color: $curious-blue;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 250px) {
+  .page-container {
+    &__footer {
+      flex-flow: column-reverse;
+    }
+
+    &__footer-button {
+      width: 100%;
+      margin-bottom: 1rem;
+      margin-right: 0;
+
+      &:first-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .page-container {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background-color: $white;
+  }
+}
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index 24b37a83d..a4ed137f9 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -107,6 +107,7 @@ RestoreVaultScreen.prototype.render = function () {
 }
 
 RestoreVaultScreen.prototype.showInitializeMenu = function () {
+  this.props.dispatch(actions.unMarkPasswordForgotten())
   if (this.props.forgottenPassword) {
     this.props.dispatch(actions.backToUnlockView())
   } else {
@@ -149,6 +150,9 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   this.warning = null
   this.props.dispatch(actions.displayWarning(this.warning))
   this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
+  .then(() => {
+    this.props.dispatch(actions.unMarkPasswordForgotten())
+  })
   .catch((err) => {
     log.error(err.message)
   })
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index fabf4e563..4fea3a6d1 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -2,6 +2,8 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountAndTransactionDetails = require('./account-and-transaction-details')
+const Settings = require('./components/pages/settings')
+const UnlockScreen = require('./components/pages/unlock')
 
 module.exports = MainContainer
 
@@ -23,6 +25,29 @@ MainContainer.prototype.render = function () {
     style: {},
   }
 
+  if (this.props.isUnlocked === false) {
+    switch (this.props.currentViewName) {
+      case 'config':
+        log.debug('rendering config screen from unlock screen.')
+        return h(Settings, {key: 'config'})
+      default:
+        log.debug('rendering locked screen')
+        contents = {
+          component: UnlockScreen,
+          style: {
+            boxShadow: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#F7F7F7',
+            // must force 100%, because lock screen is full-width
+            width: '100%',
+          },
+          key: 'locked',
+        }
+    }
+  }
+
   return h('div.main-container', {
     style: contents.style,
   }, [
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 7cee46c9c..4230e8a22 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -5,7 +5,6 @@ const h = require('react-hyperscript')
 const ethAbi = require('ethereumjs-abi')
 const ethUtil = require('ethereumjs-util')
 
-const Identicon = require('./components/identicon')
 const FromDropdown = require('./components/send/from-dropdown')
 const ToAutoComplete = require('./components/send/to-autocomplete')
 const CurrencyDisplay = require('./components/send/currency-display')
@@ -180,53 +179,20 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
   }
 }
 
-SendTransactionScreen.prototype.renderHeaderIcon = function () {
-  const { selectedToken } = this.props
-
-  return h('div.send-v2__send-header-icon-container', [
-    selectedToken
-      ? h(Identicon, {
-        diameter: 40,
-        address: selectedToken.address,
-      })
-      : h('img.send-v2__send-header-icon', { src: '../images/eth_logo.svg' }),
-  ])
-}
-
-SendTransactionScreen.prototype.renderTitle = function () {
-  const { selectedToken } = this.props
-
-  return h('div.send-v2__title', [selectedToken ? 'Send Tokens' : 'Send Funds'])
-}
-
-SendTransactionScreen.prototype.renderCopy = function () {
+SendTransactionScreen.prototype.renderHeader = function () {
   const { selectedToken } = this.props
-
   const tokenText = selectedToken ? 'tokens' : 'ETH'
 
-  return h('div.send-v2__form-header-copy', [
-
-    h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`),
+  return h('div.page-container__header', [
 
-    h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
+    h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
 
-  ])
-}
-
-SendTransactionScreen.prototype.renderHeader = function () {
-  return h('div', [
-    h('div.send-v2__header', {}, [
-
-      this.renderHeaderIcon(),
-
-      h('div.send-v2__arrow-background', [
-        h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
-      ]),
-
-      h('div.send-v2__header-tip'),
-
-    ]),
+    h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
 
+    h(
+      'div.page-container__subtitle',
+      'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'
+    ),
   ])
 }
 
@@ -505,14 +471,6 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 SendTransactionScreen.prototype.renderForm = function () {
   return h('div.send-v2__form', {}, [
 
-    h('div.sendV2__form-header', [
-
-      this.renderTitle(),
-
-      this.renderCopy(),
-
-    ]),
-
     this.renderFromRow(),
 
     this.renderToRow(),
@@ -536,14 +494,14 @@ SendTransactionScreen.prototype.renderFooter = function () {
 
   const noErrors = !amountError && toError === null
 
-  return h('div.send-v2__footer', [
-    h('button.btn-cancel.send-v2__cancel-btn', {
+  return h('div.page-container__footer', [
+    h('button.btn-cancel.page-container__footer-button', {
       onClick: () => {
         clearSend()
         history.goBack()
       },
     }, 'Cancel'),
-    h('button.btn-clear.send-v2__next-btn', {
+    h('button.btn-clear.page-container__footer-button', {
       disabled: !noErrors || !gasTotal,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
@@ -553,7 +511,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
 SendTransactionScreen.prototype.render = function () {
   return (
 
-    h('div.send-v2__container', [
+    h('div.page-container', [
 
       this.renderHeader(),
 
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
new file mode 100644
index 000000000..e77d17d7b
--- /dev/null
+++ b/ui/app/unlock.js
@@ -0,0 +1,125 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+const getCaretCoordinates = require('textarea-caret')
+const EventEmitter = require('events').EventEmitter
+
+const Mascot = require('./components/mascot')
+
+module.exports = connect(mapStateToProps)(UnlockScreen)
+
+inherits(UnlockScreen, Component)
+function UnlockScreen () {
+  Component.call(this)
+  this.animationEventEmitter = new EventEmitter()
+}
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+UnlockScreen.prototype.render = function () {
+  const state = this.props
+  const warning = state.warning
+  return (
+    h('.flex-column', {
+      style: {
+        width: 'inherit',
+      },
+    }, [
+      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: warning ? 'block' : 'none',
+            padding: '0 20px',
+            textAlign: 'center',
+          },
+        }, warning),
+
+        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: () => {
+            this.props.dispatch(actions.markPasswordForgotten())
+            global.platform.openExtensionInBrowser()
+          },
+          style: {
+            fontSize: '0.8em',
+            color: 'rgb(247, 134, 28)',
+            textDecoration: 'underline',
+          },
+        }, 'Restore from seed phrase'),
+      ]),
+    ])
+  )
+}
+
+UnlockScreen.prototype.componentDidMount = function () {
+  document.getElementById('password-box').focus()
+}
+
+UnlockScreen.prototype.onSubmit = function (event) {
+  const input = document.getElementById('password-box')
+  const password = input.value
+  this.props.dispatch(actions.tryUnlockMetamask(password))
+}
+
+UnlockScreen.prototype.onKeyPress = function (event) {
+  if (event.key === 'Enter') {
+    this.submitPassword(event)
+  }
+}
+
+UnlockScreen.prototype.submitPassword = function (event) {
+  var element = event.target
+  var password = element.value
+  // reset input
+  element.value = ''
+  this.props.dispatch(actions.tryUnlockMetamask(password))
+}
+
+UnlockScreen.prototype.inputChanged = function (event) {
+  // tell mascot to look at page action
+  var element = event.target
+  var boundingRect = element.getBoundingClientRect()
+  var coordinates = getCaretCoordinates(element, element.selectionEnd)
+  this.animationEventEmitter.emit('point', {
+    x: boundingRect.left + coordinates.left - element.scrollLeft,
+    y: boundingRect.top + coordinates.top - element.scrollTop,
+  })
+}