Merge branch 'i3725-refactor-send-component-' into i3725-refactor-send-component-2

86 files changed, 4696 insertions, 434 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 03955e077..043008a36 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -7,8 +7,8 @@ const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
-const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
+const { checksumAddress } = require('../util')
 
 class AccountDropdowns extends Component {
   constructor (props) {
@@ -212,8 +212,7 @@ class AccountDropdowns extends Component {
             closeMenu: () => {},
             onClick: () => {
               const { selected } = this.props
-              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
-              copyToClipboard(checkSumAddress)
+              copyToClipboard(checksumAddress(selected))
             },
           },
           this.context.t('copyAddress'),
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 21de358d6..7638995ea 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -1,20 +1,31 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
+const { compose } = require('recompose')
+const { withRouter } = require('react-router-dom')
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 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,
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  DEFAULT_ROUTE,
+} = require('../../routes')
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AccountMenu)
 
 AccountMenu.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
-
-
 inherits(AccountMenu, Component)
 function AccountMenu () { Component.call(this) }
 
@@ -25,7 +36,6 @@ function mapStateToProps (state) {
     keyrings: state.metamask.keyrings,
     identities: state.metamask.identities,
     accounts: state.metamask.accounts,
-
   }
 }
 
@@ -48,11 +58,6 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.hideSidebar())
       dispatch(actions.toggleAccountMenu())
     },
-    showNewAccountPage: (formToSelect) => {
-      dispatch(actions.showNewAccountPage(formToSelect))
-      dispatch(actions.hideSidebar())
-      dispatch(actions.toggleAccountMenu())
-    },
     showInfoPage: () => {
       dispatch(actions.showInfoPage())
       dispatch(actions.hideSidebar())
@@ -65,10 +70,8 @@ AccountMenu.prototype.render = function () {
   const {
     isAccountMenuOpen,
     toggleAccountMenu,
-    showNewAccountPage,
     lockMetamask,
-    showConfigPage,
-    showInfoPage,
+    history,
   } = this.props
 
   return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
@@ -78,30 +81,45 @@ AccountMenu.prototype.render = function () {
     }, [
       this.context.t('myAccounts'),
       h('button.account-menu__logout-button', {
-        onClick: lockMetamask,
+        onClick: () => {
+          lockMetamask()
+          history.push(DEFAULT_ROUTE)
+        },
       }, this.context.t('logout')),
     ]),
     h(Divider),
     h('div.account-menu__accounts', this.renderAccounts()),
     h(Divider),
     h(Item, {
-      onClick: () => showNewAccountPage('CREATE'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(NEW_ACCOUNT_ROUTE)
+      },
       icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
       text: this.context.t('createAccount'),
     }),
     h(Item, {
-      onClick: () => showNewAccountPage('IMPORT'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(IMPORT_ACCOUNT_ROUTE)
+      },
       icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
       text: this.context.t('importAccount'),
     }),
     h(Divider),
     h(Item, {
-      onClick: showInfoPage,
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(INFO_ROUTE)
+      },
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
       text: this.context.t('infoHelp'),
     }),
     h(Item, {
-      onClick: showConfigPage,
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(SETTINGS_ROUTE)
+      },
       icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
       text: this.context.t('settings'),
     }),
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index d591ab455..e31552f2d 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -4,6 +4,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
 const Identicon = require('./identicon')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
@@ -97,9 +99,17 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS
   const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
   if (shouldNotRenderFiat) return null
 
+  const upperCaseFiatSuffix = fiatSuffix.toUpperCase()
+
+  const display = currencies.find(currency => currency.code === upperCaseFiatSuffix)
+    ? currencyFormatter.format(Number(fiatDisplayNumber), {
+      code: upperCaseFiatSuffix,
+    })
+    : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}`
+
   return h('div.fiat-amount', {
     style: {},
-  }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`)
+  }, display)
 }
 
 BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
@@ -117,5 +127,9 @@ BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, co
 
   const splitBalance = formattedBalance.split(' ')
 
-  return (Number(splitBalance[0]) * conversionRate).toFixed(2)
+  const convertedNumber = (Number(splitBalance[0]) * conversionRate)
+  const wholePart = Math.floor(convertedNumber)
+  const decimalPart = convertedNumber - wholePart
+
+  return wholePart + Number(decimalPart.toPrecision(2))
 }
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 9ac565cf4..fda7c3e17 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -9,7 +9,7 @@ const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
-const networkNames = require('../../../app/scripts/config.js').networkNames
+const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
 
 BuyButtonSubview.contextTypes = {
   t: PropTypes.func,
@@ -148,7 +148,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
     case '3':
     case '4':
     case '42':
-      const networkName = networkNames[network]
+      const networkName = getNetworkDisplayName(network)
       const label = `${networkName} ${this.context.t('testFaucet')}`
       return (
         h('div.flex-column', {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 4c693d1c3..0761faa99 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -8,6 +8,10 @@ const GasModalCard = require('./gas-modal-card')
 
 const ethUtil = require('ethereumjs-util')
 
+import {
+  updateSendErrors,
+} from '../../ducks/send'
+
 const {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
@@ -63,9 +67,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => dispatch(actions.hideModal()),
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
-    updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+    updateGasTotal: newGasTotal => dispatch(actions.setGasTotal(newGasTotal)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
-    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
+    updateSendErrors: error => dispatch(updateSendErrors(error)),
   }
 }
 
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index a133f0e29..179b6617f 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -7,7 +7,7 @@ const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
-const ethUtil = require('ethereumjs-util')
+const { checksumAddress } = require('../../../util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
 
@@ -311,8 +311,7 @@ class AccountDropdowns extends Component {
             closeMenu: () => {},
             onClick: () => {
               const { selected } = this.props
-              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
-              copyToClipboard(checkSumAddress)
+              copyToClipboard(checksumAddress(selected))
             },
             style: Object.assign(
               dropdownMenuItemStyle,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 9e47f38ef..dcd6b4370 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -3,12 +3,14 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 const R = require('ramda')
-
+const { SETTINGS_ROUTE } = require('../../routes')
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [
@@ -41,9 +43,6 @@ function mapDispatchToProps (dispatch) {
     setRpcTarget: (target) => {
       dispatch(actions.setRpcTarget(target))
     },
-    showConfigPage: () => {
-      dispatch(actions.showConfigPage())
-    },
     showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
@@ -59,7 +58,10 @@ NetworkDropdown.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(NetworkDropdown)
 
 
 // TODO: specify default props and proptypes
@@ -227,7 +229,7 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.props.showConfigPage(),
+        onClick: () => this.props.history.push(SETTINGS_ROUTE),
         style: dropdownMenuItemStyle,
       },
       [
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index feb0a7037..aff4b6ef6 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -11,6 +11,7 @@ const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const connect = require('react-redux').connect
 const ToAutoComplete = require('./send/to-autocomplete')
+const log = require('loglevel')
 
 EnsInput.contextTypes = {
   t: PropTypes.func,
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index cb6fa51fb..b9afc550f 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
+const classnames = require('classnames')
 
 class LoadingIndicator extends Component {
   renderMessage () {
@@ -10,14 +11,16 @@ class LoadingIndicator extends Component {
 
   render () {
     return (
-      h('.full-flex-height.loading-overlay', {}, [
-        h('img', {
-          src: 'images/loading.svg',
-        }),
+      h('.loading-overlay', {
+        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
+      }, [
+        h('.flex-center.flex-column', [
+          h('img', {
+            src: 'images/loading.svg',
+          }),
 
-        h('br'),
-
-        this.renderMessage(),
+          this.renderMessage(),
+        ]),
       ])
     )
   }
@@ -25,6 +28,7 @@ class LoadingIndicator extends Component {
 
 LoadingIndicator.propTypes = {
   loadingMessage: PropTypes.string,
+  fullScreen: PropTypes.bool,
 }
 
 module.exports = LoadingIndicator
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index d871e7516..c70510b5f 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const networkNames = require('../../../../app/scripts/config.js').networkNames
+const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
 
 function mapStateToProps (state) {
   return {
@@ -52,7 +52,7 @@ BuyOptions.prototype.renderModalContentOption = function (title, header, onClick
 BuyOptions.prototype.render = function () {
   const { network, toCoinbase, address, toFaucet } = this.props
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
-  const networkName = networkNames[network]
+  const networkName = getNetworkDisplayName(network)
 
   return h('div', {}, [
     h('div.buy-modal-content.transfers-subview', {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 0dc611f50..ad5f9b695 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const networkNames = require('../../../../app/scripts/config.js').networkNames
+const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
 const ShapeshiftForm = require('../shapeshift-form')
 
 let DIRECT_DEPOSIT_ROW_TITLE
@@ -122,7 +122,7 @@ DepositEtherModal.prototype.render = function () {
   const { buyingWithShapeshift } = this.state
 
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
-  const networkName = networkNames[network]
+  const networkName = getNetworkDisplayName(network)
 
   return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
 
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 1f80aed39..447e43b7a 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -3,12 +3,13 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const ethUtil = require('ethereumjs-util')
+const { stripHexPrefix } = require('ethereumjs-util')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
 const copyToClipboard = require('copy-to-clipboard')
+const { checksumAddress } = require('../../util')
 
 function mapStateToProps (state) {
   return {
@@ -60,7 +61,7 @@ ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
 }
 
 ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
-  const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey)
+  const plainKey = privateKey && stripHexPrefix(privateKey)
 
   return privateKey
     ? h(ReadOnlyInput, {
@@ -121,7 +122,7 @@ ExportPrivateKeyModal.prototype.render = function () {
       h(ReadOnlyInput, {
         wrapperClass: 'ellip-address-wrapper',
         inputClass: 'qr-ellip-address ellip-address',
-        value: address,
+        value: checksumAddress(address),
       }),
 
       h('div.account-modal-divider'),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 9250cc77e..43dcd20ae 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -5,7 +5,8 @@ const connect = require('react-redux').connect
 const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
-const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
+const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
@@ -162,7 +163,7 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
     },
     laptopModalStyle: {
       width: '449px',
@@ -179,7 +180,7 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
     },
     laptopModalStyle: {
       width: '449px',
@@ -196,7 +197,7 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
     },
     laptopModalStyle: {
       width: '449px',
@@ -208,7 +209,7 @@ const MODALS = {
     contents: h(ConfirmResetAccount),
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
     },
     laptopModalStyle: {
       width: '473px',
diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/page-container/page-container-content.component.js
new file mode 100644
index 000000000..a1d6988cc
--- /dev/null
+++ b/ui/app/components/page-container/page-container-content.component.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class PageContainerContent extends Component {
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  render () {
+    return (
+      <div className="page-container__content">
+        {this.props.children}
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/page-container/page-container-header.component.js b/ui/app/components/page-container/page-container-header.component.js
new file mode 100644
index 000000000..5c9d63221
--- /dev/null
+++ b/ui/app/components/page-container/page-container-header.component.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class PageContainerHeader extends Component {
+
+  static propTypes = {
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    onClose: PropTypes.func,
+  };
+
+  render () {
+    const { title, subtitle, onClose } = this.props
+
+    return (
+      <div className="page-container__header">
+
+        <div className="page-container__title">
+          {title}
+        </div>
+
+        <div className="page-container__subtitle">
+          {subtitle}
+        </div>
+
+        <div
+          className="page-container__header-close"
+          onClick={() => onClose()}
+        />
+
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
new file mode 100644
index 000000000..566e42450
--- /dev/null
+++ b/ui/app/components/pages/add-token.js
@@ -0,0 +1,431 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const classnames = require('classnames')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+const R = require('ramda')
+const Fuse = require('fuse.js')
+const contractMap = require('eth-contract-metadata')
+const TokenBalance = require('../../components/token-balance')
+const Identicon = require('../../components/identicon')
+const contractList = Object.entries(contractMap)
+  .map(([ _, tokenData]) => tokenData)
+  .filter(tokenData => Boolean(tokenData.erc20))
+const fuse = new Fuse(contractList, {
+    shouldSort: true,
+    threshold: 0.45,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [
+      { name: 'name', weight: 0.5 },
+      { name: 'symbol', weight: 0.5 },
+    ],
+})
+const actions = require('../../actions')
+const ethUtil = require('ethereumjs-util')
+const { tokenInfoGetter } = require('../../token-util')
+const { DEFAULT_ROUTE } = require('../../routes')
+
+const emptyAddr = '0x0000000000000000000000000000000000000000'
+
+AddTokenScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)
+
+
+function mapStateToProps (state) {
+  const { identities, tokens } = state.metamask
+  return {
+    identities,
+    tokens,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    addTokens: tokens => dispatch(actions.addTokens(tokens)),
+  }
+}
+
+inherits(AddTokenScreen, Component)
+function AddTokenScreen () {
+  this.state = {
+    isShowingConfirmation: false,
+    isShowingInfoBox: true,
+    customAddress: '',
+    customSymbol: '',
+    customDecimals: '',
+    searchQuery: '',
+    selectedTokens: {},
+    errors: {},
+    autoFilled: false,
+    displayedTab: 'SEARCH',
+  }
+  this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this)
+  this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this)
+  this.tokenDecimalsDidChange = this.tokenDecimalsDidChange.bind(this)
+  this.onNext = this.onNext.bind(this)
+  Component.call(this)
+}
+
+AddTokenScreen.prototype.componentWillMount = function () {
+  this.tokenInfoGetter = tokenInfoGetter()
+}
+
+AddTokenScreen.prototype.toggleToken = function (address, token) {
+  const { selectedTokens = {}, errors } = this.state
+  const selectedTokensCopy = { ...selectedTokens }
+
+  if (address in selectedTokensCopy) {
+    delete selectedTokensCopy[address]
+  } else {
+    selectedTokensCopy[address] = token
+  }
+
+  this.setState({
+    selectedTokens: selectedTokensCopy,
+    errors: {
+      ...errors,
+      tokenSelector: null,
+    },
+  })
+}
+
+AddTokenScreen.prototype.onNext = function () {
+  const { isValid, errors } = this.validate()
+
+  return !isValid
+    ? this.setState({ errors })
+    : this.setState({ isShowingConfirmation: true })
+}
+
+AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
+  const customAddress = e.target.value.trim()
+  this.setState({ customAddress })
+  if (ethUtil.isValidAddress(customAddress) && customAddress !== emptyAddr) {
+    this.attemptToAutoFillTokenParams(customAddress)
+  } else {
+    this.setState({
+      customSymbol: '',
+      customDecimals: 0,
+    })
+  }
+}
+
+AddTokenScreen.prototype.tokenSymbolDidChange = function (e) {
+  const customSymbol = e.target.value.trim()
+  this.setState({ customSymbol })
+}
+
+AddTokenScreen.prototype.tokenDecimalsDidChange = function (e) {
+  const customDecimals = e.target.value.trim()
+  this.setState({ customDecimals })
+}
+
+AddTokenScreen.prototype.checkExistingAddresses = function (address) {
+  if (!address) return false
+  const tokensList = this.props.tokens
+  const matchesAddress = existingToken => {
+    return existingToken.address.toLowerCase() === address.toLowerCase()
+  }
+
+  return R.any(matchesAddress)(tokensList)
+}
+
+AddTokenScreen.prototype.validate = function () {
+  const errors = {}
+  const identitiesList = Object.keys(this.props.identities)
+  const { customAddress, customSymbol, customDecimals, selectedTokens } = this.state
+  const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase()
+
+  if (customAddress) {
+    const validAddress = ethUtil.isValidAddress(customAddress)
+    if (!validAddress) {
+      errors.customAddress = this.context.t('invalidAddress')
+    }
+
+    const validDecimals = customDecimals !== null
+      && customDecimals !== ''
+      && customDecimals >= 0
+      && customDecimals < 36
+    if (!validDecimals) {
+      errors.customDecimals = this.context.t('decimalsMustZerotoTen')
+    }
+
+    const symbolLen = customSymbol.trim().length
+    const validSymbol = symbolLen > 0 && symbolLen < 10
+    if (!validSymbol) {
+      errors.customSymbol = this.context.t('symbolBetweenZeroTen')
+    }
+
+    const ownAddress = identitiesList.includes(standardAddress)
+    if (ownAddress) {
+      errors.customAddress = this.context.t('personalAddressDetected')
+    }
+
+    const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
+    if (tokenAlreadyAdded) {
+      errors.customAddress = this.context.t('tokenAlreadyAdded')
+    }
+  } else if (
+    Object.entries(selectedTokens)
+      .reduce((isEmpty, [ symbol, isSelected ]) => (
+        isEmpty && !isSelected
+      ), true)
+  ) {
+    errors.tokenSelector = this.context.t('mustSelectOne')
+  }
+
+  return {
+    isValid: !Object.keys(errors).length,
+    errors,
+  }
+}
+
+AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) {
+  const { symbol, decimals } = await this.tokenInfoGetter(address)
+  if (symbol && decimals) {
+    this.setState({
+      customSymbol: symbol,
+      customDecimals: decimals.toString(),
+      autoFilled: true,
+    })
+  }
+}
+
+AddTokenScreen.prototype.renderCustomForm = function () {
+  const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state
+
+  return (
+    h('div.add-token__add-custom-form', [
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customAddress,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', this.context.t('tokenAddress')),
+        h('input.add-token__add-custom-input', {
+          type: 'text',
+          onChange: this.tokenAddressDidChange,
+          value: customAddress,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customAddress),
+      ]),
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customSymbol,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', this.context.t('tokenSymbol')),
+        h('input.add-token__add-custom-input', {
+          type: 'text',
+          onChange: this.tokenSymbolDidChange,
+          value: customSymbol,
+          disabled: autoFilled,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customSymbol),
+      ]),
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customDecimals,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', this.context.t('decimal')),
+        h('input.add-token__add-custom-input', {
+          type: 'number',
+          onChange: this.tokenDecimalsDidChange,
+          value: customDecimals,
+          disabled: autoFilled,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customDecimals),
+      ]),
+    ])
+  )
+}
+
+AddTokenScreen.prototype.renderTokenList = function () {
+  const { searchQuery = '', selectedTokens } = this.state
+  const fuseSearchResult = fuse.search(searchQuery)
+  const addressSearchResult = contractList.filter(token => {
+    return token.address.toLowerCase() === searchQuery.toLowerCase()
+  })
+  const results = [...addressSearchResult, ...fuseSearchResult]
+
+  return h('div', [
+      results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')),
+      h('div.add-token__token-icons-container', Array(6).fill(undefined)
+        .map((_, i) => {
+          const { logo, symbol, name, address } = results[i] || {}
+          const tokenAlreadyAdded = this.checkExistingAddresses(address)
+          return Boolean(logo || symbol || name) && (
+            h('div.add-token__token-wrapper', {
+              className: classnames({
+                'add-token__token-wrapper--selected': selectedTokens[address],
+                'add-token__token-wrapper--disabled': tokenAlreadyAdded,
+              }),
+              onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
+            }, [
+              h('div.add-token__token-icon', {
+                style: {
+                  backgroundImage: logo && `url(images/contract/${logo})`,
+                },
+              }),
+              h('div.add-token__token-data', [
+                h('div.add-token__token-symbol', symbol),
+                h('div.add-token__token-name', name),
+              ]),
+              // tokenAlreadyAdded && (
+              //   h('div.add-token__token-message', 'Already added')
+              // ),
+            ])
+          )
+      })),
+    ])
+}
+
+AddTokenScreen.prototype.renderConfirmation = function () {
+  const {
+    customAddress: address,
+    customSymbol: symbol,
+    customDecimals: decimals,
+    selectedTokens,
+  } = this.state
+
+  const { addTokens, history } = this.props
+
+  const customToken = {
+    address,
+    symbol,
+    decimals,
+  }
+
+  const tokens = address && symbol && decimals
+    ? { ...selectedTokens, [address]: customToken }
+    : selectedTokens
+
+  return (
+    h('div.add-token', [
+      h('div.add-token__wrapper', [
+        h('div.add-token__content-container.add-token__confirmation-content', [
+          h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
+          h('div.add-token__confirmation-token-list',
+            Object.entries(tokens)
+              .map(([ address, token ]) => (
+                h('span.add-token__confirmation-token-list-item', [
+                  h(Identicon, {
+                    className: 'add-token__confirmation-token-icon',
+                    diameter: 75,
+                    address,
+                  }),
+                  h(TokenBalance, { token }),
+                ])
+              ))
+          ),
+        ]),
+      ]),
+      h('div.add-token__buttons', [
+        h('button.btn-secondary--lg.add-token__cancel-button', {
+          onClick: () => this.setState({ isShowingConfirmation: false }),
+        }, this.context.t('back')),
+        h('button.btn-primary--lg', {
+          onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
+        }, this.context.t('addTokens')),
+      ]),
+    ])
+  )
+}
+
+AddTokenScreen.prototype.displayTab = function (selectedTab) {
+  this.setState({ displayedTab: selectedTab })
+}
+
+AddTokenScreen.prototype.renderTabs = function () {
+  const { isShowingInfoBox, displayedTab, errors } = this.state
+
+  return displayedTab === 'CUSTOM_TOKEN'
+    ? this.renderCustomForm()
+    : h('div', [
+    h('div.add-token__wrapper', [
+      h('div.add-token__content-container', [
+        isShowingInfoBox && h('div.add-token__info-box', [
+          h('div.add-token__info-box__close', {
+            onClick: () => this.setState({ isShowingInfoBox: false }),
+          }),
+          h('div.add-token__info-box__title', this.context.t('whatsThis')),
+          h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
+          h('a.add-token__info-box__copy--blue', {
+            href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
+            target: '_blank',
+          }, this.context.t('learnMore')),
+        ]),
+        h('div.add-token__input-container', [
+          h('input.add-token__input', {
+            type: 'text',
+            placeholder: this.context.t('searchTokens'),
+            onChange: e => this.setState({ searchQuery: e.target.value }),
+          }),
+          h('div.add-token__search-input-error-message', errors.tokenSelector),
+        ]),
+        this.renderTokenList(),
+      ]),
+    ]),
+  ])
+}
+
+AddTokenScreen.prototype.render = function () {
+  const {
+    isShowingConfirmation,
+    displayedTab,
+  } = this.state
+  const { history } = this.props
+
+  return h('div.add-token', [
+    h('div.add-token__header', [
+      h('div.add-token__header__cancel', {
+        onClick: () => history.push(DEFAULT_ROUTE),
+      }, [
+        h('i.fa.fa-angle-left.fa-lg'),
+        h('span', this.context.t('cancel')),
+      ]),
+      h('div.add-token__header__title', this.context.t('addTokens')),
+      isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')),
+      !isShowingConfirmation && h('div.add-token__header__tabs', [
+
+        h('div.add-token__header__tabs__tab', {
+          className: classnames('add-token__header__tabs__tab', {
+            'add-token__header__tabs__selected': displayedTab === 'SEARCH',
+            'add-token__header__tabs__unselected': displayedTab !== 'SEARCH',
+          }),
+          onClick: () => this.displayTab('SEARCH'),
+        }, this.context.t('search')),
+
+        h('div.add-token__header__tabs__tab', {
+          className: classnames('add-token__header__tabs__tab', {
+            'add-token__header__tabs__selected': displayedTab === 'CUSTOM_TOKEN',
+            'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN',
+          }),
+          onClick: () => this.displayTab('CUSTOM_TOKEN'),
+        }, this.context.t('customToken')),
+
+      ]),
+    ]),
+
+    isShowingConfirmation
+      ? this.renderConfirmation()
+      : this.renderTabs(),
+
+    !isShowingConfirmation && h('div.add-token__buttons', [
+      h('button.btn-secondary--lg.add-token__cancel-button', {
+        onClick: () => history.push(DEFAULT_ROUTE),
+      }, this.context.t('cancel')),
+      h('button.btn-primary--lg.add-token__confirm-button', {
+        onClick: this.onNext,
+      }, this.context.t('next')),
+    ]),
+  ])
+}
diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js
new file mode 100644
index 000000000..1f6b0be49
--- /dev/null
+++ b/ui/app/components/pages/authenticated.js
@@ -0,0 +1,34 @@
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const { Redirect } = require('react-router-dom')
+const h = require('react-hyperscript')
+const MetamaskRoute = require('./metamask-route')
+const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes')
+
+const Authenticated = props => {
+  const { isUnlocked, isInitialized } = props
+
+  switch (true) {
+    case isUnlocked && isInitialized:
+      return h(MetamaskRoute, { ...props })
+    case !isInitialized:
+      return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
+    default:
+      return h(Redirect, { to: { pathname: UNLOCK_ROUTE } })
+  }
+}
+
+Authenticated.propTypes = {
+  isUnlocked: PropTypes.bool,
+  isInitialized: PropTypes.bool,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked, isInitialized } } = state
+  return {
+    isUnlocked,
+    isInitialized,
+  }
+}
+
+module.exports = connect(mapStateToProps)(Authenticated)
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
new file mode 100644
index 000000000..52d3dcde9
--- /dev/null
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -0,0 +1,96 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+import Select from 'react-select'
+
+// Subviews
+const JsonImportView = require('./json.js')
+const PrivateKeyImportView = require('./private-key.js')
+
+
+AccountImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(AccountImportSubview)
+
+
+inherits(AccountImportSubview, Component)
+function AccountImportSubview () {
+  Component.call(this)
+}
+
+AccountImportSubview.prototype.getMenuItemTexts = function () {
+  return [
+    this.context.t('privateKey'),
+    this.context.t('jsonFile'),
+  ]
+}
+
+AccountImportSubview.prototype.render = function () {
+  const state = this.state || {}
+  const menuItems = this.getMenuItemTexts()
+  const { type } = state
+
+  return (
+    h('div.new-account-import-form', [
+
+      h('.new-account-import-disclaimer', [
+        h('span', this.context.t('importAccountMsg')),
+        h('span', {
+          style: {
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+            })
+          },
+        }, this.context.t('here')),
+      ]),
+
+      h('div.new-account-import-form__select-section', [
+
+        h('div.new-account-import-form__select-label', this.context.t('selectType')),
+
+        h(Select, {
+          className: 'new-account-import-form__select',
+          name: 'import-type-select',
+          clearable: false,
+          value: type || menuItems[0],
+          options: menuItems.map((type) => {
+            return {
+              value: type,
+              label: type,
+            }
+          }),
+          onChange: (opt) => {
+            this.setState({ type: opt.value })
+          },
+        }),
+
+      ]),
+
+      this.renderImportView(),
+    ])
+  )
+}
+
+AccountImportSubview.prototype.renderImportView = function () {
+  const state = this.state || {}
+  const { type } = state
+  const menuItems = this.getMenuItemTexts()
+  const current = type || menuItems[0]
+
+  switch (current) {
+    case this.context.t('privateKey'):
+      return h(PrivateKeyImportView)
+    case this.context.t('jsonFile'):
+      return h(JsonImportView)
+    default:
+      return h(JsonImportView)
+  }
+}
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
new file mode 100644
index 000000000..946907a47
--- /dev/null
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -0,0 +1,141 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const connect = require('react-redux').connect
+const actions = require('../../../../actions')
+const FileInput = require('react-simple-file-input').default
+const { DEFAULT_ROUTE } = require('../../../../routes')
+const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
+  }
+
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', this.context.t('usedByClients')),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, this.context.t('fileImportFail')),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 34%',
+            fontSize: '15px',
+            display: 'flex',
+            justifyContent: 'center',
+          },
+        }),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          placeholder: this.context.t('enterPassword'),
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+        }),
+
+        h('div.new-account-create-form__buttons', {}, [
+
+          h('button.btn-secondary.new-account-create-form__button', {
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, [
+            this.context.t('cancel'),
+          ]),
+
+          h('button.btn-primary.new-account-create-form__button', {
+            onClick: () => this.createNewKeychain(),
+          }, [
+            this.context.t('import'),
+          ]),
+
+        ]),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
+
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
+
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  createNewKeychain () {
+    const state = this.state
+
+    if (!state) {
+      const message = this.context.t('validFileImport')
+      return this.props.displayWarning(message)
+    }
+
+    const { fileContents } = state
+
+    if (!fileContents) {
+      const message = this.context.t('needImportFile')
+      return this.props.displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
+
+    if (!password) {
+      const message = this.context.t('needImportPassword')
+      return this.props.displayWarning(message)
+    }
+
+    this.props.importNewJsonAccount([ fileContents, password ])
+  }
+}
+
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  importNewJsonAccount: PropTypes.func,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+  }
+}
+
+JsonImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(JsonImportSubview)
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
new file mode 100644
index 000000000..c77612ea4
--- /dev/null
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -0,0 +1,95 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+const actions = require('../../../../actions')
+const { DEFAULT_ROUTE } = require('../../../../routes')
+
+PrivateKeyImportView.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
+
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    importNewAccount: (strategy, [ privateKey ]) => {
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+    },
+    displayWarning: () => dispatch(actions.displayWarning(null)),
+  }
+}
+
+inherits(PrivateKeyImportView, Component)
+function PrivateKeyImportView () {
+  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
+  Component.call(this)
+}
+
+PrivateKeyImportView.prototype.render = function () {
+  const { error } = this.props
+
+  return (
+    h('div.new-account-import-form__private-key', [
+
+      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),
+
+      h('div.new-account-import-form__private-key-password-container', [
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: e => this.createKeyringOnEnter(e),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
+
+        h('button.btn-secondary--lg.new-account-create-form__button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, [
+          this.context.t('cancel'),
+        ]),
+
+        h('button.btn-primary--lg.new-account-create-form__button', {
+          onClick: () => this.createNewKeychain(),
+        }, [
+          this.context.t('import'),
+        ]),
+
+      ]),
+
+      error ? h('span.error', error) : null,
+    ])
+  )
+}
+
+PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+PrivateKeyImportView.prototype.createNewKeychain = function () {
+  const input = document.getElementById('private-key-box')
+  const privateKey = input.value
+  const { importNewAccount, history } = this.props
+
+  importNewAccount('Private Key', [ privateKey ])
+    .then(() => history.push(DEFAULT_ROUTE))
+}
diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js
new file mode 100644
index 000000000..d98909baa
--- /dev/null
+++ b/ui/app/components/pages/create-account/import-account/seed.js
@@ -0,0 +1,35 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+
+SeedImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps)(SeedImportSubview)
+
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(SeedImportSubview, Component)
+function SeedImportSubview () {
+  Component.call(this)
+}
+
+SeedImportSubview.prototype.render = function () {
+  return (
+    h('div', {
+      style: {
+      },
+    }, [
+      this.context.t('pasteSeed'),
+      h('textarea'),
+      h('br'),
+      h('button', this.context.t('submit')),
+    ])
+  )
+}
diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
new file mode 100644
index 000000000..0962477d8
--- /dev/null
+++ b/ui/app/components/pages/create-account/index.js
@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const { Switch, Route, matchPath } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const { getCurrentViewContext } = require('../../../selectors')
+const classnames = require('classnames')
+const NewAccountCreateForm = require('./new-account')
+const NewAccountImportForm = require('./import-account')
+const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')
+
+class CreateAccountPage extends Component {
+  renderTabs () {
+    const { history, location } = this.props
+
+    return h('div.new-account__tabs', [
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: NEW_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
+      }, 'Create'),
+
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: IMPORT_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
+      }, 'Import'),
+    ])
+  }
+
+  render () {
+    return h('div.new-account', {}, [
+      h('div.new-account__header', [
+        h('div.new-account__title', 'New Account'),
+        this.renderTabs(),
+      ]),
+      h('div.new-account__form', [
+        h(Switch, [
+          h(Route, {
+            exact: true,
+            path: NEW_ACCOUNT_ROUTE,
+            component: NewAccountCreateForm,
+          }),
+          h(Route, {
+            exact: true,
+            path: IMPORT_ACCOUNT_ROUTE,
+            component: NewAccountImportForm,
+          }),
+        ]),
+      ]),
+    ])
+  }
+}
+
+CreateAccountPage.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => ({
+  displayedForm: getCurrentViewContext(state),
+})
+
+const mapDispatchToProps = dispatch => ({
+  displayForm: form => dispatch(actions.setNewAccountForm(form)),
+  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+  showExportPrivateKeyModal: () => {
+    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+  },
+  hideModal: () => dispatch(actions.hideModal()),
+  saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+})
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
new file mode 100644
index 000000000..40fa584be
--- /dev/null
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -0,0 +1,103 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+
+class NewAccountCreateForm extends Component {
+  constructor (props, context) {
+    super(props)
+
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: '',
+      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
+    }
+  }
+
+  render () {
+    const { newAccountName, defaultAccountName } = this.state
+    const { history, createAccount } = this.props
+
+    return h('div.new-account-create-form', [
+
+      h('div.new-account-create-form__input-label', {}, [
+        this.context.t('accountName'),
+      ]),
+
+      h('div.new-account-create-form__input-wrapper', {}, [
+        h('input.new-account-create-form__input', {
+          value: newAccountName,
+          placeholder: defaultAccountName,
+          onChange: event => this.setState({ newAccountName: event.target.value }),
+        }, []),
+      ]),
+
+      h('div.new-account-create-form__buttons', {}, [
+
+        h('button.btn-secondary--lg.new-account-create-form__button', {
+          onClick: () => history.push(DEFAULT_ROUTE),
+        }, [
+          this.context.t('cancel'),
+        ]),
+
+        h('button.btn-primary--lg.new-account-create-form__button', {
+          onClick: () => {
+            createAccount(newAccountName || defaultAccountName)
+              .then(() => history.push(DEFAULT_ROUTE))
+          },
+        }, [
+          this.context.t('create'),
+        ]),
+
+      ]),
+
+    ])
+  }
+}
+
+NewAccountCreateForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
+    hideModal: () => dispatch(actions.hideModal()),
+    createAccount: newAccountName => {
+      return dispatch(actions.addNewAccount())
+        .then(newAccountAddress => {
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+  }
+}
+
+NewAccountCreateForm.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
+
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
new file mode 100644
index 000000000..90b8e1d37
--- /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')
+const log = require('loglevel')
+
+// 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 {
+      history,
+      unapprovedTxs = {},
+      unapprovedMsgCount = 0,
+      unapprovedPersonalMsgCount = 0,
+      unapprovedTypedMessagesCount = 0,
+    } = this.props
+
+    // unapprovedTxs and unapproved messages
+    if (Object.keys(unapprovedTxs).length ||
+      unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
+  }
+
+  render () {
+    log.debug('rendering primary')
+    const {
+      noActiveNotices,
+      lostAccounts,
+      forgottenPassword,
+      currentView,
+      activeAddress,
+      seedWords,
+    } = this.props
+
+    // notices
+    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
+      return h(Redirect, {
+        to: {
+          pathname: NOTICE_ROUTE,
+        },
+      })
+    }
+
+    // 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,
+        },
+      })
+    }
+
+    // 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/initialized.js b/ui/app/components/pages/initialized.js
new file mode 100644
index 000000000..3adf67b28
--- /dev/null
+++ b/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)
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
new file mode 100644
index 000000000..33575bfbb
--- /dev/null
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -0,0 +1,178 @@
+const { withRouter } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const { compose } = require('recompose')
+const PersistentForm = require('../../../../lib/persistent-form')
+const connect = require('../../../metamask-connect')
+const h = require('react-hyperscript')
+const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+const log = require('loglevel')
+
+class RestoreVaultPage extends PersistentForm {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      error: null,
+    }
+  }
+
+  createOnEnter (event) {
+    if (event.key === 'Enter') {
+      this.createNewVaultAndRestore()
+    }
+  }
+
+  cancel () {
+    this.props.unMarkPasswordForgotten()
+      .then(this.props.history.push(DEFAULT_ROUTE))
+  }
+
+  createNewVaultAndRestore () {
+    this.setState({ error: null })
+
+    // check password
+    var passwordBox = document.getElementById('password-box')
+    var password = passwordBox.value
+    var passwordConfirmBox = document.getElementById('password-box-confirm')
+    var passwordConfirm = passwordConfirmBox.value
+
+    if (password.length < 8) {
+      this.setState({ error: 'Password not long enough' })
+      return
+    }
+
+    if (password !== passwordConfirm) {
+      this.setState({ error: 'Passwords don\'t match' })
+      return
+    }
+
+    // check seed
+    var seedBox = document.querySelector('textarea.twelve-word-phrase')
+    var seed = seedBox.value.trim()
+    if (seed.split(' ').length !== 12) {
+      this.setState({ error: 'Seed phrases are 12 words long' })
+      return
+    }
+
+    // submit
+    this.props.createNewVaultAndRestore(password, seed)
+      .then(() => this.props.history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => {
+        this.setState({ error: message })
+        log.error(message)
+      })
+  }
+
+  render () {
+    const { error } = this.state
+    this.persistentFormParentId = 'restore-vault-form'
+
+    return (
+      h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+        h('h3.flex-center.text-transform-uppercase', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginBottom: 24,
+            width: '100%',
+            fontSize: '20px',
+            padding: 6,
+          },
+        }, [
+          this.props.t('restoreVault'),
+        ]),
+
+        // wallet seed entry
+        h('h3', 'Wallet Seed'),
+        h('textarea.twelve-word-phrase.letter-spacey', {
+          dataset: {
+            persistentFormId: 'wallet-seed',
+          },
+          placeholder: this.props.t('secretPhrase'),
+        }),
+
+        // password
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          id: 'password-box',
+          placeholder: this.props.t('newPassword8Chars'),
+          dataset: {
+            persistentFormId: 'password',
+          },
+          style: {
+            width: 260,
+            marginTop: 12,
+          },
+        }),
+
+        // confirm password
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          id: 'password-box-confirm',
+          placeholder: this.props.t('confirmPassword'),
+          onKeyPress: this.createOnEnter.bind(this),
+          dataset: {
+            persistentFormId: 'password-confirmation',
+          },
+          style: {
+            width: 260,
+            marginTop: 16,
+          },
+        }),
+
+        error && (
+          h('span.error.in-progress-notification', error)
+        ),
+
+        // submit
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 30,
+            width: '50%',
+          },
+        }, [
+
+          // cancel
+          h('button.primary', {
+            onClick: () => this.cancel(),
+          }, this.props.t('cancel')),
+
+          // submit
+          h('button.primary', {
+            onClick: this.createNewVaultAndRestore.bind(this),
+          }, this.props.t('ok')),
+
+        ]),
+      ])
+    )
+  }
+}
+
+RestoreVaultPage.propTypes = {
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const { appState: { warning, forgottenPassword } } = state
+
+  return {
+    warning,
+    forgottenPassword,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    createNewVaultAndRestore: (password, seed) => {
+      return dispatch(createNewVaultAndRestore(password, seed))
+    },
+    unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(RestoreVaultPage)
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
new file mode 100644
index 000000000..247f3c8e2
--- /dev/null
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -0,0 +1,195 @@
+const { Component } = require('react')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { exportAsFile } = require('../../../util')
+const { requestRevealSeed, confirmSeedWords } = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+
+class RevealSeedPage extends Component {
+  componentDidMount () {
+    const passwordBox = document.getElementById('password-box')
+    if (passwordBox) {
+      passwordBox.focus()
+    }
+  }
+
+  checkConfirmation (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.revealSeedWords()
+    }
+  }
+
+  revealSeedWords () {
+    const password = document.getElementById('password-box').value
+    this.props.requestRevealSeed(password)
+  }
+
+  renderSeed () {
+    const { seedWords, confirmSeedWords, history } = this.props
+
+    return (
+      h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+        h('h3.flex-center.text-transform-uppercase', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginTop: 36,
+            marginBottom: 8,
+            width: '100%',
+            fontSize: '20px',
+            padding: 6,
+          },
+        }, [
+          'Vault Created',
+        ]),
+
+        h('div', {
+          style: {
+            fontSize: '1em',
+            marginTop: '10px',
+            textAlign: 'center',
+          },
+        }, [
+          h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
+        ]),
+
+        h('textarea.twelve-word-phrase', {
+          readOnly: true,
+          value: seedWords,
+        }),
+
+        h('button.primary', {
+          onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)),
+          style: {
+            margin: '24px',
+            fontSize: '0.9em',
+            marginBottom: '10px',
+          },
+        }, 'I\'ve copied it somewhere safe'),
+
+        h('button.primary', {
+          onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords),
+          style: {
+            margin: '10px',
+            fontSize: '0.9em',
+          },
+        }, 'Save Seed Words As File'),
+      ])
+    )
+  }
+
+  renderConfirmation () {
+    const { history, warning, inProgress } = this.props
+
+    return (
+      h('.initialize-screen.flex-column.flex-center.flex-grow', {
+        style: { maxWidth: '420px' },
+      }, [
+
+        h('h3.flex-center.text-transform-uppercase', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginBottom: 24,
+            width: '100%',
+            fontSize: '20px',
+            padding: 6,
+          },
+        }, [
+          'Reveal Seed Words',
+        ]),
+
+        h('.div', {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '20px',
+            justifyContent: 'center',
+          },
+        }, [
+
+          h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
+
+          // confirmation
+          h('input.large-input.letter-spacey', {
+            type: 'password',
+            id: 'password-box',
+            placeholder: 'Enter your password to confirm',
+            onKeyPress: this.checkConfirmation.bind(this),
+            style: {
+              width: 260,
+              marginTop: '12px',
+            },
+          }),
+
+          h('.flex-row.flex-start', {
+            style: {
+              marginTop: 30,
+              width: '50%',
+            },
+          }, [
+            // cancel
+            h('button.primary', {
+              onClick: () => history.push(DEFAULT_ROUTE),
+            }, 'CANCEL'),
+
+            // submit
+            h('button.primary', {
+              style: { marginLeft: '10px' },
+              onClick: this.revealSeedWords.bind(this),
+            }, 'OK'),
+
+          ]),
+
+          warning && (
+            h('span.error', {
+              style: {
+                margin: '20px',
+              },
+            }, warning.split('-'))
+          ),
+
+          inProgress && (
+            h('span.in-progress-notification', 'Generating Seed...')
+          ),
+        ]),
+      ])
+    )
+  }
+
+  render () {
+    return this.props.seedWords
+      ? this.renderSeed()
+      : this.renderConfirmation()
+  }
+}
+
+RevealSeedPage.propTypes = {
+  requestRevealSeed: PropTypes.func,
+  confirmSeedWords: PropTypes.func,
+  seedWords: PropTypes.string,
+  inProgress: PropTypes.bool,
+  history: PropTypes.object,
+  warning: PropTypes.string,
+}
+
+const mapStateToProps = state => {
+  const { appState: { warning }, metamask: { seedWords } } = state
+
+  return {
+    warning,
+    seedWords,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    requestRevealSeed: password => dispatch(requestRevealSeed(password)),
+    confirmSeedWords: () => dispatch(confirmSeedWords()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage)
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
new file mode 100644
index 000000000..2329a9147
--- /dev/null
+++ b/ui/app/components/pages/notice.js
@@ -0,0 +1,203 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const ReactMarkdown = require('react-markdown')
+const linker = require('extension-link-enabler')
+const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice')
+const findDOMNode = require('react-dom').findDOMNode
+const actions = require('../../actions')
+const { DEFAULT_ROUTE } = require('../../routes')
+
+class Notice extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      disclaimerDisabled: true,
+    }
+  }
+
+  componentWillMount () {
+    if (!this.props.notice) {
+      this.props.history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  componentDidMount () {
+    // eslint-disable-next-line react/no-find-dom-node
+    var node = findDOMNode(this)
+    linker.setupListener(node)
+    if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
+      this.setState({ disclaimerDisabled: false })
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.notice) {
+      this.props.history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  componentWillUnmount () {
+    // eslint-disable-next-line react/no-find-dom-node
+    var node = findDOMNode(this)
+    linker.teardownListener(node)
+  }
+
+  handleAccept () {
+    this.setState({ disclaimerDisabled: true })
+    this.props.onConfirm()
+  }
+
+  render () {
+    const { notice = {} } = this.props
+    const { title, date, body } = notice
+    const { disclaimerDisabled } = this.state
+
+    return (
+      h('.flex-column.flex-center.flex-grow', {
+        style: {
+          width: '100%',
+        },
+      }, [
+        h('h3.flex-center.text-transform-uppercase.terms-header', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            width: '100%',
+            fontSize: '20px',
+            textAlign: 'center',
+            padding: 6,
+          },
+        }, [
+          title,
+        ]),
+
+        h('h5.flex-center.text-transform-uppercase.terms-header', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginBottom: 24,
+            width: '100%',
+            fontSize: '20px',
+            textAlign: 'center',
+            padding: 6,
+          },
+        }, [
+          date,
+        ]),
+
+        h('style', `
+
+          .markdown {
+            overflow-x: hidden;
+          }
+
+          .markdown h1, .markdown h2, .markdown h3 {
+            margin: 10px 0;
+            font-weight: bold;
+          }
+
+          .markdown strong {
+            font-weight: bold;
+          }
+          .markdown em {
+            font-style: italic;
+          }
+
+          .markdown p {
+            margin: 10px 0;
+          }
+
+          .markdown a {
+            color: #df6b0e;
+          }
+
+        `),
+
+        h('div.markdown', {
+          onScroll: (e) => {
+            var object = e.currentTarget
+            if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
+              this.setState({ disclaimerDisabled: false })
+            }
+          },
+          style: {
+            background: 'rgb(235, 235, 235)',
+            height: '310px',
+            padding: '6px',
+            width: '90%',
+            overflowY: 'scroll',
+            scroll: 'auto',
+          },
+        }, [
+          h(ReactMarkdown, {
+            className: 'notice-box',
+            source: body,
+            skipHtml: true,
+          }),
+        ]),
+
+        h('button.primary', {
+          disabled: disclaimerDisabled,
+          onClick: () => this.handleAccept(),
+          style: {
+            marginTop: '18px',
+          },
+        }, 'Accept'),
+      ])
+    )
+  }
+
+}
+
+const mapStateToProps = state => {
+  const { metamask } = state
+  const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask
+
+  return {
+    noActiveNotices,
+    lastUnreadNotice,
+    lostAccounts,
+  }
+}
+
+Notice.propTypes = {
+  notice: PropTypes.object,
+  onConfirm: PropTypes.func,
+  history: PropTypes.object,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    markNoticeRead: lastUnreadNotice => dispatch(actions.markNoticeRead(lastUnreadNotice)),
+    markAccountsFound: () => dispatch(actions.markAccountsFound()),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { noActiveNotices, lastUnreadNotice, lostAccounts } = stateProps
+  const { markNoticeRead, markAccountsFound } = dispatchProps
+
+  let notice
+  let onConfirm
+
+  if (!noActiveNotices) {
+    notice = lastUnreadNotice
+    onConfirm = () => markNoticeRead(lastUnreadNotice)
+  } else if (lostAccounts && lostAccounts.length > 0) {
+    notice = generateLostAccountsNotice(lostAccounts)
+    onConfirm = () => markAccountsFound()
+  }
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    notice,
+    onConfirm,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice)
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js
new file mode 100644
index 000000000..384ae4b41
--- /dev/null
+++ b/ui/app/components/pages/settings/index.js
@@ -0,0 +1,59 @@
+const { Component } = require('react')
+const { Switch, Route, matchPath } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const TabBar = require('../../tab-bar')
+const Settings = require('./settings')
+const Info = require('./info')
+const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
+
+class Config extends Component {
+  renderTabs () {
+    const { history, location } = this.props
+
+    return h('div.settings__tabs', [
+      h(TabBar, {
+        tabs: [
+          { content: 'Settings', key: SETTINGS_ROUTE },
+          { content: 'Info', key: INFO_ROUTE },
+        ],
+        isActive: key => matchPath(location.pathname, { path: key, exact: true }),
+        onSelect: key => history.push(key),
+      }),
+    ])
+  }
+
+  render () {
+    const { history } = this.props
+
+    return (
+      h('.main-container.settings', {}, [
+        h('.settings__header', [
+          h('div.settings__close-button', {
+            onClick: () => history.push(DEFAULT_ROUTE),
+          }),
+          this.renderTabs(),
+        ]),
+        h(Switch, [
+          h(Route, {
+            exact: true,
+            path: INFO_ROUTE,
+            component: Info,
+          }),
+          h(Route, {
+            exact: true,
+            path: SETTINGS_ROUTE,
+            component: Settings,
+          }),
+        ]),
+      ])
+    )
+  }
+}
+
+Config.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+}
+
+module.exports = Config
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
new file mode 100644
index 000000000..bd9040499
--- /dev/null
+++ b/ui/app/components/pages/settings/info.js
@@ -0,0 +1,120 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+
+class Info extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      version: global.platform.getVersion(),
+    }
+  }
+
+  renderLogo () {
+    return (
+      h('div.settings__info-logo-wrapper', [
+        h('img.settings__info-logo', { src: 'images/info-logo.png' }),
+      ])
+    )
+  }
+
+  renderInfoLinks () {
+    return (
+      h('div.settings__content-item.settings__content-item--without-height', [
+        h('div.settings__info-link-header', this.context.t('links')),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/privacy.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', this.context.t('privacyMsg')),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/terms.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', this.context.t('terms')),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/attributions.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', this.context.t('attributions')),
+          ]),
+        ]),
+        h('hr.settings__info-separator'),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://support.metamask.io',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', this.context.t('supportCenter')),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', this.context.t('visitWebSite')),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            target: '_blank',
+            href: 'mailto:help@metamask.io?subject=Feedback',
+          }, [
+            h('span.settings__info-link', this.context.t('emailUs')),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  render () {
+    return (
+      h('div.settings__content', [
+        h('div.settings__content-row', [
+          h('div.settings__content-item.settings__content-item--without-height', [
+            this.renderLogo(),
+            h('div.settings__info-item', [
+              h('div.settings__info-version-header', 'MetaMask Version'),
+              h('div.settings__info-version-number', this.state.version),
+            ]),
+            h('div.settings__info-item', [
+              h(
+                'div.settings__info-about',
+                this.context.t('builtInCalifornia')
+              ),
+            ]),
+          ]),
+          this.renderInfoLinks(),
+        ]),
+      ])
+    )
+  }
+}
+
+Info.propTypes = {
+  tab: PropTypes.string,
+  metamask: PropTypes.object,
+  setCurrentCurrency: PropTypes.func,
+  setRpcTarget: PropTypes.func,
+  displayWarning: PropTypes.func,
+  revealSeedConfirmation: PropTypes.func,
+  warning: PropTypes.string,
+  location: PropTypes.object,
+  history: PropTypes.object,
+  t: PropTypes.func,
+}
+
+Info.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = Info
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
new file mode 100644
index 000000000..bdefe56f8
--- /dev/null
+++ b/ui/app/components/pages/settings/settings.js
@@ -0,0 +1,367 @@
+const { Component } = require('react')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const infuraCurrencies = require('../../../infura-conversion.json')
+const validUrl = require('valid-url')
+const { exportAsFile } = require('../../../util')
+const SimpleDropdown = require('../../dropdowns/simple-dropdown')
+const ToggleButton = require('react-toggle-button')
+const { REVEAL_SEED_ROUTE } = require('../../../routes')
+const locales = require('../../../../../app/_locales/index.json')
+const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/controllers/network/enums')
+
+const getInfuraCurrencyOptions = () => {
+  const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+    return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+  })
+
+  return sortedCurrencies.map(({ quote: { code, name } }) => {
+    return {
+      displayValue: `${code.toUpperCase()} - ${name}`,
+      key: code,
+      value: code,
+    }
+  })
+}
+
+const getLocaleOptions = () => {
+  return locales.map((locale) => {
+    return {
+      displayValue: `${locale.name}`,
+      key: locale.code,
+      value: locale.code,
+    }
+  })
+}
+
+class Settings extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      newRpc: '',
+    }
+  }
+
+  renderBlockieOptIn () {
+    const { metamask: { useBlockie }, setUseBlockie } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('blockiesIdenticon')),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(ToggleButton, {
+            value: useBlockie,
+            onToggle: (value) => setUseBlockie(!value),
+            activeLabel: '',
+            inactiveLabel: '',
+          }),
+        ]),
+      ]),
+    ])
+  }
+
+  renderCurrentConversion () {
+    const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('currentConversion')),
+        h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: this.context.t('selectCurrency'),
+            options: getInfuraCurrencyOptions(),
+            selectedOption: currentCurrency,
+            onSelect: newCurrency => setCurrentCurrency(newCurrency),
+          }),
+        ]),
+      ]),
+    ])
+  }
+
+  renderCurrentLocale () {
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Current Language'),
+        h('span.settings__content-description', `${currentLocaleName}`),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: 'Select Locale',
+            options: getLocaleOptions(),
+            selectedOption: currentLocale,
+            onSelect: async (newLocale) => {
+              updateCurrentLocale(newLocale)
+            },
+          }),
+        ]),
+      ]),
+    ])
+  }
+
+  renderCurrentProvider () {
+    const { metamask: { provider = {} } } = this.props
+    let title, value, color
+
+    switch (provider.type) {
+
+      case 'mainnet':
+        title = this.context.t('currentNetwork')
+        value = this.context.t('mainnet')
+        color = '#038789'
+        break
+
+      case 'ropsten':
+        title = this.context.t('currentNetwork')
+        value = this.context.t('ropsten')
+        color = '#e91550'
+        break
+
+      case 'kovan':
+        title = this.context.t('currentNetwork')
+        value = this.context.t('kovan')
+        color = '#690496'
+        break
+
+      case 'rinkeby':
+        title = this.context.t('currentNetwork')
+        value = this.context.t('rinkeby')
+        color = '#ebb33f'
+        break
+
+      default:
+        title = this.context.t('currentRpc')
+        value = provider.rpcTarget
+    }
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', title),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('div.settings__provider-wrapper', [
+            h('div.settings__provider-icon', { style: { background: color } }),
+            h('div', value),
+          ]),
+        ]),
+      ]),
+    ])
+  }
+
+  renderNewRpcUrl () {
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', [
+          h('span', this.context.t('newRPC')),
+        ]),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('input.settings__input', {
+              placeholder: this.context.t('newRPC'),
+              onChange: event => this.setState({ newRpc: event.target.value }),
+              onKeyPress: event => {
+                if (event.key === 'Enter') {
+                  this.validateRpc(this.state.newRpc)
+                }
+              },
+            }),
+            h('div.settings__rpc-save-button', {
+              onClick: event => {
+                event.preventDefault()
+                this.validateRpc(this.state.newRpc)
+              },
+            }, this.context.t('save')),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  validateRpc (newRpc) {
+    const { setRpcTarget, displayWarning } = this.props
+
+    if (validUrl.isWebUri(newRpc)) {
+      setRpcTarget(newRpc)
+    } else {
+      const appendedRpc = `http://${newRpc}`
+
+      if (validUrl.isWebUri(appendedRpc)) {
+        displayWarning(this.context.t('uriErrorMsg'))
+      } else {
+        displayWarning(this.context.t('invalidRPC'))
+      }
+    }
+  }
+
+  renderStateLogs () {
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', [
+          h('div', this.context.t('stateLogs')),
+          h(
+            'div.settings__content-description',
+            this.context.t('stateLogsDescription')
+          ),
+        ]),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.btn-primary--lg.settings__button', {
+              onClick (event) {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              },
+            }, this.context.t('downloadStateLogs')),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderSeedWords () {
+    const { history } = this.props
+
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', this.context.t('revealSeedWords')),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.btn-primary--lg.settings__button--red', {
+              onClick: event => {
+                event.preventDefault()
+                history.push(REVEAL_SEED_ROUTE)
+              },
+            }, this.context.t('revealSeedWords')),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderOldUI () {
+    const { setFeatureFlagToBeta } = this.props
+
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', this.context.t('useOldUI')),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.btn-primary--lg.settings__button--orange', {
+              onClick (event) {
+                event.preventDefault()
+                setFeatureFlagToBeta()
+              },
+            }, this.context.t('useOldUI')),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderResetAccount () {
+    const { showResetAccountConfirmationModal } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', this.context.t('resetAccount')),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('button.btn-primary--lg.settings__button--orange', {
+            onClick (event) {
+              event.preventDefault()
+              showResetAccountConfirmationModal()
+            },
+          }, this.context.t('resetAccount')),
+        ]),
+      ]),
+    ])
+  }
+
+  render () {
+    const { warning, isMascara } = this.props
+
+    return (
+      h('div.settings__content', [
+        warning && h('div.settings__error', warning),
+        this.renderCurrentConversion(),
+        this.renderCurrentLocale(),
+        // this.renderCurrentProvider(),
+        this.renderNewRpcUrl(),
+        this.renderStateLogs(),
+        this.renderSeedWords(),
+        !isMascara && this.renderOldUI(),
+        this.renderResetAccount(),
+        this.renderBlockieOptIn(),
+      ])
+    )
+  }
+}
+
+Settings.propTypes = {
+  metamask: PropTypes.object,
+  setUseBlockie: PropTypes.func,
+  setCurrentCurrency: PropTypes.func,
+  setRpcTarget: PropTypes.func,
+  displayWarning: PropTypes.func,
+  revealSeedConfirmation: PropTypes.func,
+  setFeatureFlagToBeta: PropTypes.func,
+  showResetAccountConfirmationModal: PropTypes.func,
+  warning: PropTypes.string,
+  history: PropTypes.object,
+  isMascara: PropTypes.bool,
+  updateCurrentLocale: PropTypes.func,
+  currentLocale: PropTypes.string,
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  return {
+    metamask: state.metamask,
+    warning: state.appState.warning,
+    isMascara: state.metamask.isMascara,
+    currentLocale: state.metamask.currentLocale,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
+    setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
+    setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
+    setFeatureFlagToBeta: () => {
+      return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+        .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+    },
+    showResetAccountConfirmationModal: () => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
+    },
+  }
+}
+
+Settings.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Settings)
diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js
new file mode 100644
index 000000000..30144b978
--- /dev/null
+++ b/ui/app/components/pages/unlock.js
@@ -0,0 +1,194 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const connect = require('../../metamask-connect')
+const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const {
+  tryUnlockMetamask,
+  forgotPassword,
+  markPasswordForgotten,
+  setNetworkEndpoints,
+  setFeatureFlag,
+} = require('../../actions')
+const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
+const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
+const getCaretCoordinates = require('textarea-caret')
+const EventEmitter = require('events').EventEmitter
+const Mascot = require('../mascot')
+const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/controllers/network/enums')
+const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes')
+
+class UnlockScreen extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      error: null,
+    }
+
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  componentWillMount () {
+    const { isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  componentDidMount () {
+    const passwordBox = document.getElementById('password-box')
+
+    if (passwordBox) {
+      passwordBox.focus()
+    }
+  }
+
+  tryUnlockMetamask (password) {
+    const { tryUnlockMetamask, history } = this.props
+    tryUnlockMetamask(password)
+      .then(() => history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => this.setState({ error: message }))
+  }
+
+  onSubmit (event) {
+    const input = document.getElementById('password-box')
+    const password = input.value
+    this.tryUnlockMetamask(password)
+  }
+
+  onKeyPress (event) {
+    if (event.key === 'Enter') {
+      this.submitPassword(event)
+    }
+  }
+
+  submitPassword (event) {
+    var element = event.target
+    var password = element.value
+    // reset input
+    element.value = ''
+    this.tryUnlockMetamask(password)
+  }
+
+  inputChanged (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,
+    })
+  }
+
+  render () {
+    const { error } = this.state
+    return (
+      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)
+
+            if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_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: {
+            fontSize: '0.8em',
+            color: '#aeaeae',
+            textDecoration: 'underline',
+            marginTop: '32px',
+          },
+        }, this.props.t('classicInterface')),
+      ])
+    )
+  }
+}
+
+UnlockScreen.propTypes = {
+  forgotPassword: PropTypes.func,
+  tryUnlockMetamask: PropTypes.func,
+  markPasswordForgotten: PropTypes.func,
+  history: PropTypes.object,
+  isUnlocked: PropTypes.bool,
+  t: PropTypes.func,
+  useOldInterface: PropTypes.func,
+  setNetworkEndpoints: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked } } = state
+  return {
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    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)),
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(UnlockScreen)
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 7bf20bced..ac1b15a4f 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -1,4 +1,6 @@
 const Component = require('react').Component
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
@@ -21,14 +23,24 @@ const {
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 const SenderToRecipient = require('../sender-to-recipient')
 const NetworkDisplay = require('../network-display')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
+const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+
+import {
+  updateSendErrors,
+} from '../../ducks/send'
 
 ConfirmSendEther.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmSendEther)
 
 
 function mapStateToProps (state) {
@@ -72,7 +84,6 @@ function mapDispatchToProps (dispatch) {
         errors: { to: null, amount: null },
         editingTransactionId: id,
       }))
-      dispatch(actions.showSendPage())
     },
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
     showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
@@ -98,7 +109,7 @@ function mapDispatchToProps (dispatch) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
-    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
+    updateSendErrors: error => dispatch(updateSendErrors(error)),
   }
 }
 
@@ -134,7 +145,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) {
   if (shouldUpdateBalanceSendErrors) {
     const balanceIsSufficient = this.isBalanceSufficient(txMeta)
     updateSendErrors({
-      insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'),
+      insufficientFunds: balanceIsSufficient ? false : 'insufficientFunds',
     })
   }
 
@@ -142,7 +153,7 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) {
 
   if (shouldUpdateSimulationSendError) {
     updateSendErrors({
-      simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'),
+      simulationFails: !txMeta.simulationFails ? false : 'transactionError',
     })
   }
 }
@@ -270,9 +281,24 @@ ConfirmSendEther.prototype.getData = function () {
   }
 }
 
+ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, currencyCode) {
+  const upperCaseCurrencyCode = currencyCode.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(value), {
+      code: upperCaseCurrencyCode,
+    })
+    : value
+}
+
+ConfirmSendEther.prototype.editTransaction = function (txMeta) {
+  const { editTransaction, history } = this.props
+  editTransaction(txMeta)
+  history.push(SEND_ROUTE)
+}
+
 ConfirmSendEther.prototype.render = function () {
   const {
-    editTransaction,
     currentCurrency,
     clearSend,
     conversionRate,
@@ -309,6 +335,9 @@ ConfirmSendEther.prototype.render = function () {
     ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
     : 'Please review your transaction.'
 
+  const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency)
+  const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
+
   // This is from the latest master
   // It handles some of the errors that we are not currently handling
   // Leaving as comments fo reference
@@ -328,7 +357,7 @@ ConfirmSendEther.prototype.render = function () {
       h('.page-container__header', [
         h('.page-container__header-row', [
           h('span.page-container__back-button', {
-            onClick: () => editTransaction(txMeta),
+            onClick: () => this.editTransaction(txMeta),
             style: {
               visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
             },
@@ -355,7 +384,7 @@ ConfirmSendEther.prototype.render = function () {
         //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
         // ]),
 
-        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+        h('h3.flex-center.confirm-screen-send-amount', [`${convertedAmountInFiat}`]),
         h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
         h('div.flex-center.confirm-memo-wrapper', [
           h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
@@ -402,7 +431,7 @@ ConfirmSendEther.prototype.render = function () {
             ]),
 
             h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+              h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency.toUpperCase()}`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
 
@@ -506,7 +535,9 @@ ConfirmSendEther.prototype.render = function () {
           }, this.context.t('cancel')),
 
           // Accept Button
-          h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
+          h('button.btn-confirm.page-container__footer-button.allcaps', {
+            onClick: event => this.onSubmit(event),
+          }, this.context.t('confirm')),
         ]),
       ]),
     ])
@@ -532,9 +563,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams() && balanceIsSufficient) {
     this.props.sendTransaction(txMeta, event)
   } else if (!balanceIsSufficient) {
-    updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') })
+    updateSendErrors({ insufficientFunds: 'insufficientFunds' })
   } else {
-    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
+    updateSendErrors({ invalidGasParams: 'invalidGasParams' })
     this.setState({ submitting: false })
   }
 }
@@ -544,6 +575,7 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   const { cancelTransaction } = this.props
 
   cancelTransaction(txMeta)
+    .then(() => this.props.history.push(DEFAULT_ROUTE))
 }
 
 ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) {
@@ -631,4 +663,4 @@ ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator,
   const numBN = new BN(numerator)
   const denomBN = new BN(denominator)
   return targetBN.mul(numBN).div(denomBN)
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 19e591fd6..e1abc6d3d 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -1,4 +1,6 @@
 const Component = require('react').Component
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
@@ -25,6 +27,8 @@ const {
   calcTokenAmount,
 } = require('../../token-util')
 const classnames = require('classnames')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -33,16 +37,24 @@ const {
   getSelectedAddress,
   getSelectedTokenContract,
 } = require('../../selectors')
+const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+
+import {
+  updateSendErrors,
+} from '../../ducks/send'
 
 ConfirmSendToken.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmSendToken)
 
 
 function mapStateToProps (state, ownProps) {
-  const { token: { symbol }, txData } = ownProps
+  const { token: { address }, txData } = ownProps
   const { txParams } = txData || {}
   const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
 
@@ -53,7 +65,7 @@ function mapStateToProps (state, ownProps) {
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = getSelectedAddress(state)
-  const tokenExchangeRate = getTokenExchangeRate(state, symbol)
+  const tokenExchangeRate = getTokenExchangeRate(state, address)
   const { balance } = accounts[selectedAddress]
   return {
     conversionRate,
@@ -69,12 +81,9 @@ function mapStateToProps (state, ownProps) {
 }
 
 function mapDispatchToProps (dispatch, ownProps) {
-  const { token: { symbol } } = ownProps
-
   return {
     backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
-    updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
     editTransaction: txMeta => {
       const { token: { address } } = ownProps
       const { txParams = {}, id } = txMeta
@@ -136,7 +145,7 @@ function mapDispatchToProps (dispatch, ownProps) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
-    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
+    updateSendErrors: error => dispatch(updateSendErrors(error)),
   }
 }
 
@@ -147,6 +156,12 @@ function ConfirmSendToken () {
   this.onSubmit = this.onSubmit.bind(this)
 }
 
+ConfirmSendToken.prototype.editTransaction = function (txMeta) {
+  const { editTransaction, history } = this.props
+  editTransaction(txMeta)
+  history.push(SEND_ROUTE)
+}
+
 ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) {
   const {
     balance: oldBalance,
@@ -191,7 +206,6 @@ ConfirmSendToken.prototype.componentWillMount = function () {
     .balanceOf(selectedAddress)
     .then(usersToken => {
     })
-  this.props.updateTokenExchangeRate()
   this.updateComponentSendErrors({})
 }
 
@@ -310,10 +324,12 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
   const txParams = txMeta.txParams || {}
   const { memo = '' } = txParams
 
+  const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency)
+
   return fiatAmount
     ? (
       h('div.confirm-send-token__hero-amount-wrapper', [
-        h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount', `${convertedAmountInFiat}`),
         h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency),
         h('div.flex-center.confirm-memo-wrapper', [
           h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
@@ -361,6 +377,9 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
   const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
   const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
 
+  const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas)
+  const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
+
   return fiatAmount && fiatGas
     ? (
       h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
@@ -370,7 +389,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
         ]),
 
         h('div.confirm-screen-section-column', [
-          h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`),
+          h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`),
           h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`),
         ]),
       ])
@@ -405,8 +424,17 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) {
     : null
 }
 
+ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) {
+  const upperCaseCurrencyCode = currencyCode.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(value), {
+      code: upperCaseCurrencyCode,
+    })
+    : value
+}
+
 ConfirmSendToken.prototype.render = function () {
-  const { editTransaction } = this.props
   const txMeta = this.gatherTxMeta()
   const {
     from: {
@@ -433,7 +461,7 @@ ConfirmSendToken.prototype.render = function () {
       h('div.page-container', [
         h('div.page-container__header', [
           !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
-            onClick: () => editTransaction(txMeta),
+            onClick: () => this.editTransaction(txMeta),
           }, this.context.t('edit')),
           h('div.page-container__title', title),
           h('div.page-container__subtitle', subtitle),
@@ -513,7 +541,9 @@ ConfirmSendToken.prototype.render = function () {
             }, this.context.t('cancel')),
 
             // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
+            h('button.btn-confirm.page-container__footer-button.allcaps', {
+              onClick: event => this.onSubmit(event),
+            }, [this.context.t('confirm')]),
           ]),
         ]),
       ]),
@@ -532,9 +562,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams() && balanceIsSufficient) {
     this.props.sendTransaction(txMeta, event)
   } else if (!balanceIsSufficient) {
-    updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') })
+    updateSendErrors({ insufficientFunds: 'insufficientFunds' })
   } else {
-    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
+    updateSendErrors({ invalidGasParams: 'invalidGasParams' })
     this.setState({ submitting: false })
   }
 }
@@ -566,6 +596,7 @@ ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   const { cancelTransaction } = this.props
 
   cancelTransaction(txMeta)
+    .then(() => this.props.history.push(DEFAULT_ROUTE))
 }
 
 ConfirmSendToken.prototype.checkValidity = function () {
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index acdd99364..6ee83ba7e 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const clone = require('clone')
 const abi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
@@ -11,6 +12,7 @@ const util = require('../../util')
 const ConfirmSendEther = require('./confirm-send-ether')
 const ConfirmSendToken = require('./confirm-send-token')
 const ConfirmDeployContract = require('./confirm-deploy-contract')
+const Loading = require('../loading')
 
 const TX_TYPES = {
   DEPLOY_CONTRACT: 'deploy_contract',
@@ -53,10 +55,24 @@ function PendingTx () {
   }
 }
 
-PendingTx.prototype.componentWillMount = async function () {
+PendingTx.prototype.componentDidMount = function () {
+  this.setTokenData()
+}
+
+PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) {
+  if (prevState.isFetching) {
+    this.setTokenData()
+  }
+}
+
+PendingTx.prototype.setTokenData = async function () {
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
+  if (txMeta.loadingDefaults) {
+    return
+  }
+
   if (!txParams.to) {
     return this.setState({
       transactionType: TX_TYPES.DEPLOY_CONTRACT,
@@ -125,7 +141,10 @@ PendingTx.prototype.render = function () {
   const { sendTransaction } = this.props
 
   if (isFetching) {
-    return h('noscript')
+    return h(Loading, {
+      fullScreen: true,
+      loadingMessage: this.context.t('generatingTransaction'),
+    })
   }
 
   switch (transactionType) {
@@ -150,6 +169,12 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h('noscript')
+      return h(Loading, {
+        fullScreen: true,
+      })
   }
 }
+
+PendingTx.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 83885539c..3b2c62f49 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -3,8 +3,9 @@ const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
+const { isHexPrefixed } = require('ethereumjs-util')
 const ReadOnlyInput = require('./readonly-input')
+const { checksumAddress } = require('../util')
 
 module.exports = connect(mapStateToProps)(QrCodeView)
 
@@ -24,16 +25,16 @@ function QrCodeView () {
 
 QrCodeView.prototype.render = function () {
   const props = this.props
-  const Qr = props.Qr
-  const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
+  const { message, data } = props.Qr
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}`
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
 
   return h('.div.flex-column.flex-center', [
-    Array.isArray(Qr.message)
+    Array.isArray(message)
       ? h('.message-container', this.renderMultiMessage())
-      : Qr.message && h('.qr-header', Qr.message),
+      : message && h('.qr-header', message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
@@ -50,7 +51,7 @@ QrCodeView.prototype.render = function () {
     h(ReadOnlyInput, {
       wrapperClass: 'ellip-address-wrapper',
       inputClass: 'qr-ellip-address',
-      value: Qr.data,
+      value: checksumAddress(data),
     }),
   ])
 }
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 1ad3f69c1..b5e604a6e 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
+const { checksumAddress } = require('../../util')
 const Identicon = require('../identicon')
 const CurrencyDisplay = require('./currency-display')
 const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
@@ -56,7 +57,7 @@ AccountListItem.prototype.render = function () {
 
     ]),
 
-    displayAddress && name && h('div.account-list-item__account-address', address),
+    displayAddress && name && h('div.account-list-item__account-address', checksumAddress(address)),
 
     displayBalance && h(CurrencyDisplay, {
       primaryCurrency: 'ETH',
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 819fee0a0..a7bd5d7ea 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -3,6 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyInput = require('../currency-input')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 module.exports = CurrencyDisplay
 
@@ -53,12 +55,32 @@ CurrencyDisplay.prototype.getValueToRender = function () {
     })
 }
 
+CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) {
+  const { primaryCurrency, convertedCurrency, conversionRate } = this.props
+
+  let convertedValue = conversionUtil(nonFormattedValue, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  convertedValue = Number(convertedValue).toFixed(2)
+
+  const upperCaseCurrencyCode = convertedCurrency.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(convertedValue), {
+      code: upperCaseCurrencyCode,
+    })
+    : convertedValue
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
     primaryBalanceClassName = 'currency-display__input',
     convertedBalanceClassName = 'currency-display__converted-value',
-    conversionRate,
     primaryCurrency,
     convertedCurrency,
     readOnly = false,
@@ -68,14 +90,7 @@ CurrencyDisplay.prototype.render = function () {
 
   const valueToRender = this.getValueToRender()
 
-  let convertedValue = conversionUtil(valueToRender, {
-    fromNumericBase: 'dec',
-    fromCurrency: primaryCurrency,
-    toCurrency: convertedCurrency,
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-  convertedValue = Number(convertedValue).toFixed(2)
+  const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
 
   return h('div', {
     className,
@@ -108,7 +123,7 @@ CurrencyDisplay.prototype.render = function () {
 
     h('div', {
       className: convertedBalanceClassName,
-    }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
+    }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`),
 
   ])
 
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index edd0657f7..cdbee0cdc 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -2,6 +2,8 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const abi = require('ethereumjs-abi')
 const SendEther = require('../../send-v2')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 
 const {
   accountsWithSendEtherInfoSelector,
@@ -16,7 +18,14 @@ const {
   getSelectedTokenContract,
 } = require('../../selectors')
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
+import {
+  updateSendErrors,
+} from '../../ducks/send'
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SendEther)
 
 function mapStateToProps (state) {
   const fromAccounts = accountsWithSendEtherInfoSelector(state)
@@ -62,7 +71,6 @@ function mapDispatchToProps (dispatch) {
     showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
     estimateGas: params => dispatch(actions.estimateGas(params)),
     getGasPrice: () => dispatch(actions.getGasPrice()),
-    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
     signTokenTx: (tokenAddress, toAddress, amount, txData) => (
       dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
     ),
@@ -71,7 +79,8 @@ function mapDispatchToProps (dispatch) {
     updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)),
-    updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    setGasTotal: newTotal => dispatch(actions.setGasTotal(newTotal)),
+    updateGasTotal: () => dispatch(actions.updateGasTotal()),
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
@@ -79,8 +88,7 @@ function mapDispatchToProps (dispatch) {
     updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
-    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
-    goHome: () => dispatch(actions.goHome()),
+    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
     clearSend: () => dispatch(actions.clearSend()),
     setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
diff --git a/ui/app/components/send_/account-list-item/account-list-item-README.md b/ui/app/components/send_/account-list-item/account-list-item-README.md
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/account-list-item/account-list-item-README.md
diff --git a/ui/app/components/send_/account-list-item/account-list-item.component.js b/ui/app/components/send_/account-list-item/account-list-item.component.js
new file mode 100644
index 000000000..b8407d147
--- /dev/null
+++ b/ui/app/components/send_/account-list-item/account-list-item.component.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { checksumAddress } from '../../../util'
+import Identicon from '../../identicon'
+import CurrencyDisplay from '../../send/currency-display'
+
+export default class AccountListItem extends Component {
+
+  static propTypes = {
+    account: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    displayAddress: PropTypes.bool,
+    displayBalance: PropTypes.bool,
+    handleClick: PropTypes.func,
+    icon: PropTypes.node,
+  };
+
+  render () {
+    const {
+      account,
+      className,
+      conversionRate,
+      currentCurrency,
+      displayAddress = false,
+      displayBalance = true,
+      handleClick,
+      icon = null,
+    } = this.props
+
+    const { name, address, balance } = account || {}
+
+    return (<div
+      className={`account-list-item ${className}`}
+      onClick={() => handleClick({ name, address, balance })}
+    >
+
+      <div className="account-list-item__top-row">
+        <Identicon
+          address={address}
+          className="account-list-item__identicon"
+          diameter={18}
+        />
+
+        <div className="account-list-item__account-name">{ name || address }</div>
+
+        {icon && <div className="account-list-item__icon">{ icon }</div>}
+
+      </div>
+
+      {displayAddress && name && <div className="account-list-item__account-address">
+        { checksumAddress(address) }
+      </div>}
+
+      {displayBalance && <CurrencyDisplay
+        className="account-list-item__account-balances"
+        conversionRate={conversionRate}
+        convertedBalanceClassName="account-list-item__account-secondary-balance"
+        convertedCurrency={currentCurrency}
+        primaryBalanceClassName="account-list-item__account-primary-balance"
+        primaryCurrency="ETH"
+        readOnly={true}
+        value={balance}
+      />}
+
+    </div>)
+  }
+}
+
+AccountListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
diff --git a/ui/app/components/send_/account-list-item/account-list-item.container.js b/ui/app/components/send_/account-list-item/account-list-item.container.js
new file mode 100644
index 000000000..3151b1f1d
--- /dev/null
+++ b/ui/app/components/send_/account-list-item/account-list-item.container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import {
+    getConversionRate,
+    getConvertedCurrency,
+} from '../send.selectors.js'
+import AccountListItem from './account-list-item.component'
+
+export default connect(mapStateToProps)(AccountListItem)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: getConversionRate(state),
+    currentCurrency: getConvertedCurrency(state),
+  }
+}
diff --git a/ui/app/components/send_/account-list-item/account-list-item.scss b/ui/app/components/send_/account-list-item/account-list-item.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/components/send_/account-list-item/account-list-item.scss
diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index e69de29bb..bdf12b738 100644
--- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class AmountMaxButton extends Component {
+
+  static propTypes = {
+    balance: PropTypes.string,
+    gasTotal: PropTypes.string,
+    maxModeOn: PropTypes.bool,
+    selectedToken: PropTypes.object,
+    setAmountToMax: PropTypes.func,
+    setMaxModeTo: PropTypes.func,
+    tokenBalance: PropTypes.string,
+  };
+
+  setMaxAmount () {
+    const {
+      balance,
+      gasTotal,
+      selectedToken,
+      setAmountToMax,
+      tokenBalance,
+    } = this.props
+
+    setAmountToMax({
+      balance,
+      gasTotal,
+      selectedToken,
+      tokenBalance,
+    })
+  }
+
+  render () {
+    const { setMaxModeTo, maxModeOn } = this.props
+
+    return (
+      <div
+        className="send-v2__amount-max"
+        onClick={(event) => {
+          event.preventDefault()
+          setMaxModeTo(true)
+          this.setMaxAmount()
+        }}
+      >
+        {!maxModeOn ? this.context.t('max') : ''}
+      </div>
+    )
+  }
+
+}
+
+AmountMaxButton.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
index e69de29bb..a72f41775 100644
--- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
@@ -0,0 +1,40 @@
+import { connect } from 'react-redux'
+import {
+  getGasTotal,
+  getSelectedToken,
+  getSendFromBalance,
+  getTokenBalance,
+} from '../../../send.selectors.js'
+import { getMaxModeOn } from './amount-max-button.selectors.js'
+import { calcMaxAmount } from './amount-max-button.utils.js'
+import {
+  updateSendAmount,
+  setMaxModeTo,
+} from '../../../../../actions'
+import AmountMaxButton from './amount-max-button.component'
+import {
+  updateSendErrors,
+} from '../../../../../ducks/send'
+
+export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton)
+
+function mapStateToProps (state) {
+
+  return {
+    balance: getSendFromBalance(state),
+    gasTotal: getGasTotal(state),
+    maxModeOn: getMaxModeOn(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setAmountToMax: maxAmountDataObject => {
+      dispatch(updateSendErrors({ amount: null }))
+      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)))
+    },
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+  }
+}
diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
index e69de29bb..69fec1994 100644
--- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  getMaxModeOn,
+}
+
+module.exports = selectors
+
+function getMaxModeOn (state) {
+  return state.metamask.send.maxModeOn
+}
diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
index e69de29bb..b490a7fd7 100644
--- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -0,0 +1,22 @@
+const {
+  multiplyCurrencies,
+  subtractCurrencies,
+} = require('../../../../../conversion-util')
+const ethUtil = require('ethereumjs-util')
+
+function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
+    const { decimals } = selectedToken || {}
+    const multiplier = Math.pow(10, Number(decimals || 0))
+
+    return selectedToken
+      ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
+      : subtractCurrencies(
+        ethUtil.addHexPrefix(balance),
+        ethUtil.addHexPrefix(gasTotal),
+        { toNumericBase: 'hex' }
+      )
+}
+
+module.exports = {
+  calcMaxAmount,
+}
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
index e69de29bb..8e201ae41 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component'
+import AmountMaxButton from './amount-max-button/amount-max-button.container'
+import CurrencyDisplay from '../../../send/currency-display'
+
+export default class SendAmountRow extends Component {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    balance: PropTypes.string,
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    gasTotal: PropTypes.string,
+    inError: PropTypes.bool,
+    primaryCurrency: PropTypes.string,
+    selectedToken: PropTypes.object,
+    setMaxModeTo: PropTypes.func,
+    tokenBalance: PropTypes.string,
+    updateSendAmount: PropTypes.func,
+    updateSendAmountError: PropTypes.func,
+  }
+
+  validateAmount (amount) {
+    const {
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateSendAmountError,
+    } = this.props
+
+    updateSendAmountError({
+      amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+    })
+  }
+
+  handleAmountChange (amount) {
+    const { updateSendAmount, setMaxModeTo } = this.props
+
+    setMaxModeTo(false)
+    this.validateAmount(amount)
+    updateSendAmount(amount)
+  }
+
+  render () {
+    const {
+      amount,
+      amountConversionRate,
+      convertedCurrency,
+      gasTotal,
+      inError,
+      primaryCurrency = 'ETH',
+      selectedToken,
+    } = this.props
+
+    return (
+      <SendRowWrapper
+        label={`${this.context.t('amount')}:`}
+        showError={inError}
+        errorType={'amount'}
+      >
+        {!inError && gasTotal && <AmountMaxButton />}
+        <CurrencyDisplay
+          conversionRate={amountConversionRate}
+          convertedCurrency={convertedCurrency}
+          handleChange={newAmount => this.handleAmountChange(newAmount)}
+          inError={inError}
+          primaryCurrency={primaryCurrency}
+          selectedToken={selectedToken}
+          value={amount || '0x0'}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
+
+SendAmountRow.contextTypes = {
+  t: PropTypes.func,
+}
+
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
index 6ae80e7f2..13888ec53 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
@@ -1,48 +1,51 @@
+import { connect } from 'react-redux'
 import {
-  getSelectedToken,
-  getPrimaryCurrency,
   getAmountConversionRate,
+  getConversionRate,
   getConvertedCurrency,
-  getSendAmount,
   getGasTotal,
-  getSelectedBalance,
+  getPrimaryCurrency,
+  getSelectedToken,
+  getSendAmount,
+  getSendFromBalance,
   getTokenBalance,
-} from '../../send.selectors.js'
+} from '../../send.selectors'
 import {
-  getMaxModeOn,
-  getSendAmountError,
-} from './send-amount-row.selectors.js'
-import { getAmountErrorObject } from './send-to-row.utils.js'
+  sendAmountIsInError,
+} from './send-amount-row.selectors'
+import { getAmountErrorObject } from '../../send.utils'
 import {
-  updateSendErrors,
-  updateSendTo,
-} from '../../../actions'
+  setMaxModeTo,
+  updateSendAmount,
+} from '../../../../actions'
 import {
-  openToDropdown,
-  closeToDropdown,
-} from '../../../ducks/send'
-import SendToRow from './send-to-row.component'
+  updateSendErrors,
+} from '../../../../ducks/send'
+import SendAmountRow from './send-amount-row.component'
 
-export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
+export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow)
 
 function mapStateToProps (state) {
-updateSendTo
-return {
-  to: getSendTo(state),
-  toAccounts: getSendToAccounts(state),
-  toDropdownOpen: getToDropdownOpen(state),
-  inError: sendToIsInError(state),
-  network: getCurrentNetwork(state),
-}
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    balance: getSendFromBalance(state),
+    conversionRate: getConversionRate(state),
+    convertedCurrency: getConvertedCurrency(state),
+    gasTotal: getGasTotal(state),
+    inError: sendAmountIsInError(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+  }
 }
 
 function mapDispatchToProps (dispatch) {
-return {
-  updateSendToError: (to) => {
-      dispatch(updateSendErrors(getToErrorObject(to)))
-  },
-  updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-  openToDropdown: () => dispatch(()),
-  closeToDropdown: () => dispatch(()),
+  return {
+    setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
+    updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
+    updateSendAmountError: (amountDataObject) => {
+        dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
+    },
+  }
 }
-}
\ No newline at end of file
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js
index e69de29bb..fb08c7ed7 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  sendAmountIsInError,
+}
+
+module.exports = selectors
+
+function sendAmountIsInError (state) {
+  return Boolean(state.send.errors.amount)
+}
diff --git a/ui/app/components/send_/send-content/send-content.component.js b/ui/app/components/send_/send-content/send-content.component.js
index e69de29bb..e213cfcf3 100644
--- a/ui/app/components/send_/send-content/send-content.component.js
+++ b/ui/app/components/send_/send-content/send-content.component.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import PageContainerContent from '../../page-container/page-container-content.component'
+import SendAmountRow from './send-amount-row/send-amount-row.container'
+import SendFromRow from './send-from-row/send-from-row.container'
+import SendGasRow from './send-gas-row/send-gas-row.container'
+import SendToRow from './send-to-row/send-to-row.container'
+
+export default class SendContent extends Component {
+
+  render () {
+    return (
+      <PageContainerContent>
+        <div className="send-v2__form">
+          <SendFromRow />
+          <SendToRow />
+          <SendAmountRow />
+          <SendGasRow />
+        </div>
+      </PageContainerContent>
+    )
+  }
+
+}
diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js
index e69de29bb..337228122 100644
--- a/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/from-dropdown.component.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../../account-list-item/account-list-item.container'
+
+export default class FromDropdown extends Component {
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    closeDropdown: PropTypes.func,
+    dropdownOpen: PropTypes.bool,
+    onSelect: PropTypes.func,
+    openDropdown: PropTypes.func,
+    selectedAccount: PropTypes.object,
+  };
+
+  renderListItemIcon (icon, color) {
+    return <i className={`fa ${icon} fa-lg`} style={ { color } }/>
+  }
+
+  getListItemIcon (currentAccount, selectedAccount) {
+    return currentAccount.address === selectedAccount.address
+      ? this.renderListItemIcon('fa-check', '#02c9b1')
+      : null
+  }
+
+  renderDropdown () {
+    const {
+      accounts,
+      closeDropdown,
+      onSelect,
+      selectedAccount,
+    } = this.props
+
+    return (<div>
+      <div
+        className="send-v2__from-dropdown__close-area"
+        onClick={() => closeDropdown}
+      />
+      <div className="send-v2__from-dropdown__list">
+        {accounts.map((account, index) => <AccountListItem
+          account={account}
+          className="account-list-item__dropdown"
+          handleClick={() => {
+            onSelect(account)
+            closeDropdown()
+          }}
+          icon={this.getListItemIcon(account, selectedAccount.address)}
+          key={`from-dropdown-account-#${index}`}
+        />)}
+      </div>
+    </div>)
+  }
+
+  render () {
+    const {
+      dropdownOpen,
+      openDropdown,
+      selectedAccount,
+    } = this.props
+
+    return <div className="send-v2__from-dropdown">
+      <AccountListItem
+        account={selectedAccount}
+        handleClick={openDropdown}
+        icon={this.renderListItemIcon('fa-caret-down', '#dedede')}
+      />
+      {dropdownOpen && this.renderDropdown()},
+    </div>
+  }
+
+}
+
+FromDropdown.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js
index 7582cb2e6..17e7f8e46 100644
--- a/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.component.js
@@ -1,60 +1,59 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import SendRowWrapper from '../../../send/from-dropdown'
-import FromDropdown from ''
+import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component'
+import FromDropdown from './from-dropdown/from-dropdown.component'
 
 export default class SendFromRow extends Component {
 
   static propTypes = {
     closeFromDropdown: PropTypes.func,
-    conversionRate: PropTypes.string,
-    from: PropTypes.string,
+    conversionRate: PropTypes.number,
+    from: PropTypes.object,
     fromAccounts: PropTypes.array,
     fromDropdownOpen: PropTypes.bool,
     openFromDropdown: PropTypes.func,
     tokenContract: PropTypes.object,
     updateSendFrom: PropTypes.func,
-    updateSendTokenBalance: PropTypes.func,
+    setSendTokenBalance: PropTypes.func,
   };
 
   async handleFromChange (newFrom) {
     const {
       updateSendFrom,
       tokenContract,
-      updateSendTokenBalance,
+      setSendTokenBalance,
     } = this.props
 
     if (tokenContract) {
       const usersToken = await tokenContract.balanceOf(newFrom.address)
-      updateSendTokenBalance(usersToken)
+      setSendTokenBalance(usersToken)
     }
     updateSendFrom(newFrom)
   }
 
   render () {
     const {
+      closeFromDropdown,
+      conversionRate,
       from,
       fromAccounts,
-      conversionRate,
       fromDropdownOpen,
-      tokenContract,
       openFromDropdown,
-      closeFromDropdown,
     } = this.props
 
     return (
       <SendRowWrapper label={`${this.context.t('from')}:`}>
         <FromDropdown
-          dropdownOpen={fromDropdownOpen}
           accounts={fromAccounts}
-          selectedAccount={from}
-          onSelect={newFrom => this.handleFromChange(newFrom)}
-          openDropdown={() => openFromDropdown()}
           closeDropdown={() => closeFromDropdown()}
           conversionRate={conversionRate}
+          dropdownOpen={fromDropdownOpen}
+          onSelect={newFrom => this.handleFromChange(newFrom)}
+          openDropdown={() => openFromDropdown()}
+          selectedAccount={from}
         />
       </SendRowWrapper>
-    );
+    )
   }
 
 }
diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js
index 2ff3f0ccd..9e366445d 100644
--- a/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.container.js
@@ -1,29 +1,31 @@
+import { connect } from 'react-redux'
 import {
-    getSendFrom,
-    conversionRateSelector,
-    getSelectedTokenContract,
-    getCurrentAccountWithSendEtherInfo,
     accountsWithSendEtherInfoSelector,
+    getConversionRate,
+    getSelectedTokenContract,
+    getSendFromObject,
 } from '../../send.selectors.js'
-import { getFromDropdownOpen } from './send-from-row.selectors.js'
+import {
+  getFromDropdownOpen,
+} from './send-from-row.selectors.js'
 import { calcTokenUpdateAmount } from './send-from-row.utils.js'
 import {
-    updateSendTokenBalance,
     updateSendFrom,
-} from '../../../actions'
+    setSendTokenBalance,
+} from '../../../../actions'
 import {
-    openFromDropdown,
     closeFromDropdown,
-} from '../../../ducks/send'
+    openFromDropdown,
+} from '../../../../ducks/send'
 import SendFromRow from './send-from-row.component'
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendFromRow)
 
 function mapStateToProps (state) {
   return {
-    from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
+    conversionRate: getConversionRate(state),
+    from: getSendFromObject(state),
     fromAccounts: accountsWithSendEtherInfoSelector(state),
-    conversionRate: conversionRateSelector(state),
     fromDropdownOpen: getFromDropdownOpen(state),
     tokenContract: getSelectedTokenContract(state),
   }
@@ -31,14 +33,14 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    updateSendTokenBalance: (usersToken, selectedToken) => {
+    closeFromDropdown: () => dispatch(closeFromDropdown()),
+    openFromDropdown: () => dispatch(openFromDropdown()),
+    updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
+    setSendTokenBalance: (usersToken, selectedToken) => {
         if (!usersToken) return
 
         const tokenBalance = calcTokenUpdateAmount(selectedToken, selectedToken)
-        dispatch(updateSendTokenBalance(tokenBalance))
+        dispatch(setSendTokenBalance(tokenBalance))
     },
-    updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
-    openFromDropdown: () => dispatch(()),
-    closeFromDropdown: () => dispatch(()),
   }
 }
diff --git a/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js
index 2be25816f..0aaaef793 100644
--- a/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js
+++ b/ui/app/components/send_/send-content/send-from-row/send-from-row.utils.js
@@ -1,6 +1,6 @@
 const {
   calcTokenAmount,
-} = require('../../token-util')
+} = require('../../../../token-util')
 
 function calcTokenUpdateAmount (usersToken, selectedToken) {
   const { decimals } = selectedToken || {}
@@ -8,5 +8,5 @@ function calcTokenUpdateAmount (usersToken, selectedToken) {
 }
 
 module.exports = {
-  calcTokenUpdateAmount
+  calcTokenUpdateAmount,
 }
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
index e69de29bb..c62c110e0 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component'
+import GasFeeDisplay from '../../../send/gas-fee-display-v2'
+
+export default class SendGasRow extends Component {
+
+  static propTypes = {
+    closeFromDropdown: PropTypes.func,
+    conversionRate: PropTypes.number,
+    convertedCurrency: PropTypes.string,
+    from: PropTypes.string,
+    fromAccounts: PropTypes.array,
+    fromDropdownOpen: PropTypes.bool,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    openFromDropdown: PropTypes.func,
+    showCustomizeGasModal: PropTypes.func,
+    tokenContract: PropTypes.object,
+    updateSendFrom: PropTypes.func,
+  };
+
+  render () {
+    const {
+      conversionRate,
+      convertedCurrency,
+      gasLoadingError,
+      gasTotal,
+      showCustomizeGasModal,
+    } = this.props
+
+    return (
+      <SendRowWrapper label={`${this.context.t('gasFee')}:`}>
+        <GasFeeDisplay
+          conversionRate={conversionRate}
+          convertedCurrency={convertedCurrency}
+          gasLoadingError={gasLoadingError}
+          gasTotal={gasTotal}
+          onClick={() => showCustomizeGasModal()}
+        />
+      </SendRowWrapper>
+    )
+  }
+
+}
+
+SendGasRow.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
index e69de29bb..20d3daa59 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import {
+    getConversionRate,
+    getConvertedCurrency,
+    getGasTotal,
+} from '../../send.selectors.js'
+import { sendGasIsInError } from './send-gas-row.selectors.js'
+import { showModal } from '../../../../actions'
+import SendGasRow from './send-gas-row.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: getConversionRate(state),
+    convertedCurrency: getConvertedCurrency(state),
+    gasTotal: getGasTotal(state),
+    gasLoadingError: sendGasIsInError(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS' })),
+  }
+}
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
index e69de29bb..ad4ef4877 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
@@ -0,0 +1,9 @@
+const selectors = {
+  sendGasIsInError,
+}
+
+module.exports = selectors
+
+function sendGasIsInError (state) {
+  return state.metamask.send.errors.gasLoading
+}
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
index 08f830cc5..0d314208b 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js
@@ -1,3 +1,6 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
 export default class SendRowErrorMessage extends Component {
 
   static propTypes = {
@@ -7,17 +10,18 @@ export default class SendRowErrorMessage extends Component {
 
   render () {
     const { errors, errorType } = this.props
+
     const errorMessage = errors[errorType]
 
     return (
       errorMessage
-        ? <div className='send-v2__error'>{errorMessage}</div>
+        ? <div className="send-v2__error">{this.context.t(errorMessage)}</div>
         : null
-    );
+    )
   }
 
 }
 
 SendRowErrorMessage.contextTypes = {
   t: PropTypes.func,
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
index 2278dbe63..59622047f 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
@@ -1,3 +1,4 @@
+import { connect } from 'react-redux'
 import { getSendErrors } from '../../../send.selectors'
 import SendRowErrorMessage from './send-row-error-message.component'
 
@@ -8,4 +9,4 @@ function mapStateToProps (state, ownProps) {
     errors: getSendErrors(state),
     errorType: ownProps.errorType,
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js
index a1ac591b9..707b3ae80 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-wrapper.component.js
@@ -5,31 +5,35 @@ import SendRowErrorMessage from './send-row-error-message/send-row-error-message
 export default class SendRowWrapper extends Component {
 
   static propTypes = {
-    label: PropTypes.string,
-    showError: PropTypes.bool,
     children: PropTypes.node,
     errorType: PropTypes.string,
+    label: PropTypes.string,
+    showError: PropTypes.bool,
   };
 
   render () {
     const {
-        label,
-        errorType = '',
-        showError = false,
-        children,
+      children,
+      errorType = '',
+      label,
+      showError = false,
     } = this.props
 
+    const formField = Array.isArray(children) ? children[1] || children[0] : children
+    const customLabelContent = children.length > 1 ? children[0] : null
+
     return (
       <div className="send-v2__form-row">
         <div className="send-v2__form-label">
             {label}
-            (showError && <SendRowErrorMessage errorType={errorType}/>)
+            {showError && <SendRowErrorMessage errorType={errorType}/>}
+            {customLabelContent}
         </div>
         <div className="send-v2__form-field">
-            {children}
+            {formField}
         </div>
       </div>
-    );
+    )
   }
 
 }
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
index abcb54efc..a6e4c1624 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
@@ -1,57 +1,59 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import SendRowWrapper from '../../../send/from-dropdown'
-import ToDropdown from '../../../ens-input'
+import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component'
+import EnsInput from '../../../ens-input'
 
 export default class SendToRow extends Component {
 
   static propTypes = {
+    closeToDropdown: PropTypes.func,
+    inError: PropTypes.bool,
+    network: PropTypes.string,
+    openToDropdown: PropTypes.func,
     to: PropTypes.string,
     toAccounts: PropTypes.array,
     toDropdownOpen: PropTypes.bool,
-    inError: PropTypes.bool,
     updateSendTo: PropTypes.func,
     updateSendToError: PropTypes.func,
-    openToDropdown: PropTypes.func,
-    closeToDropdown: PropTypes.func,
-    network: PropTypes.number,
   };
 
   handleToChange (to, nickname = '') {
     const { updateSendTo, updateSendToError } = this.props
     updateSendTo(to, nickname)
-    updateSendErrors(to)
+    updateSendToError(to)
   }
 
   render () {
     const {
-      from,
-      fromAccounts,
-      conversionRate,
-      fromDropdownOpen,
-      tokenContract,
-      openToDropdown,
       closeToDropdown,
-      network,
       inError,
+      network,
+      openToDropdown,
+      to,
+      toAccounts,
+      toDropdownOpen,
     } = this.props
 
     return (
-      <SendRowWrapper label={`${this.context.t('to')}:`}>
+      <SendRowWrapper
+        errorType={'to'}
+        label={`${this.context.t('to')}:`}
+        showError={inError}
+      >
         <EnsInput
-          name={'address'}
-          placeholder={this.context.t('recipient Address')}
-          network={network},
-          to={to},
           accounts={toAccounts}
-          dropdownOpen={toDropdownOpen}
-          openDropdown={() => openToDropdown()}
           closeDropdown={() => closeToDropdown()}
-          onChange={this.handleToChange}
+          dropdownOpen={toDropdownOpen}
           inError={inError}
+          name={'address'}
+          network={network}
+          onChange={(newTo, newNickname) => this.handleToChange(newTo, newNickname)}
+          openDropdown={() => openToDropdown()}
+          placeholder={this.context.t('recipientAddress')}
+          to={to}
         />
       </SendRowWrapper>
-    );
+    )
   }
 
 }
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js
index 1c446c168..bffdda49c 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.container.js
@@ -1,7 +1,8 @@
+import { connect } from 'react-redux'
 import {
-    getSendTo,
-    getToAccounts,
     getCurrentNetwork,
+    getSendTo,
+    getSendToAccounts,
 } from '../../send.selectors.js'
 import {
     getToDropdownOpen,
@@ -9,35 +10,34 @@ import {
 } from './send-to-row.selectors.js'
 import { getToErrorObject } from './send-to-row.utils.js'
 import {
-    updateSendErrors,
     updateSendTo,
-} from '../../../actions'
+} from '../../../../actions'
 import {
-    openToDropdown,
-    closeToDropdown,
-} from '../../../ducks/send'
+  updateSendErrors,
+  openToDropdown,
+  closeToDropdown,
+} from '../../../../ducks/send'
 import SendToRow from './send-to-row.component'
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
 
 function mapStateToProps (state) {
-  updateSendTo
   return {
+    inError: sendToIsInError(state),
+    network: getCurrentNetwork(state),
     to: getSendTo(state),
     toAccounts: getSendToAccounts(state),
     toDropdownOpen: getToDropdownOpen(state),
-    inError: sendToIsInError(state),
-    network: getCurrentNetwork(state),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
+    closeToDropdown: () => dispatch(closeToDropdown()),
+    openToDropdown: () => dispatch(openToDropdown()),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
     updateSendToError: (to) => {
         dispatch(updateSendErrors(getToErrorObject(to)))
     },
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    openToDropdown: () => dispatch(()),
-    closeToDropdown: () => dispatch(()),
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js
index 05bb65fa3..8919014be 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.selectors.js
@@ -10,5 +10,5 @@ function getToDropdownOpen (state) {
 }
 
 function sendToIsInError (state) {
-    return Boolean(state.metamask.send.to)
+    return Boolean(state.send.errors.to)
 }
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
index 52bfde009..22e2e1f34 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
@@ -1,17 +1,21 @@
+const {
+  REQUIRED_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+} = require('../../send.constants')
 const { isValidAddress } = require('../../../../util')
 
 function getToErrorObject (to) {
   let toError = null
 
   if (!to) {
-      toError = 'required'
+      toError = REQUIRED_ERROR
   } else if (!isValidAddress(to)) {
-      toError = 'invalidAddressRecipient'
+      toError = INVALID_RECIPIENT_ADDRESS_ERROR
   }
-  
+
   return { to: toError }
 }
 
 module.exports = {
-  getToErrorObject
+  getToErrorObject,
 }
diff --git a/ui/app/components/send_/send-footer/send-footer.component.js b/ui/app/components/send_/send-footer/send-footer.component.js
index e69de29bb..fc7a78a94 100644
--- a/ui/app/components/send_/send-footer/send-footer.component.js
+++ b/ui/app/components/send_/send-footer/send-footer.component.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../page-container/page-container-footer'
+import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../routes'
+
+export default class SendFooter extends Component {
+
+  static propTypes = {
+    addToAddressBookIfNew: PropTypes.func,
+    amount: PropTypes.string,
+    clearSend: PropTypes.func,
+    disabled: PropTypes.bool,
+    editingTransactionId: PropTypes.string,
+    errors: PropTypes.object,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    selectedToken: PropTypes.object,
+    sign: PropTypes.func,
+    to: PropTypes.string,
+    toAccounts: PropTypes.array,
+    tokenBalance: PropTypes.string,
+    unapprovedTxs: PropTypes.object,
+    update: PropTypes.func,
+  };
+
+  onSubmit (event) {
+    event.preventDefault()
+    const {
+      addToAddressBookIfNew,
+      amount,
+      editingTransactionId,
+      from: {address: from},
+      gasLimit: gas,
+      gasPrice,
+      selectedToken,
+      sign,
+      to,
+      unapprovedTxs,
+      // updateTx,
+      update,
+      toAccounts,
+    } = this.props
+
+    // Should not be needed because submit should be disabled if there are no errors.
+    // const noErrors = !amountError && toError === null
+
+    // if (!noErrors) {
+    //   return
+    // }
+
+    // TODO: add nickname functionality
+    addToAddressBookIfNew(to, toAccounts)
+
+    editingTransactionId
+      ? update({
+        amount,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+      : sign({ selectedToken, to, amount, from, gas, gasPrice })
+
+    this.props.history.push(CONFIRM_TRANSACTION_ROUTE)
+  }
+
+
+  render () {
+    const { clearSend, disabled, history } = this.props
+
+    return (
+      <PageContainerFooter
+        onCancel={() => {
+          clearSend()
+          history.push(DEFAULT_ROUTE)
+        }}
+        onSubmit={e => this.onSubmit(e)}
+        disabled={disabled}
+      />
+    )
+  }
+
+}
+
+SendFooter.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-footer/send-footer.container.js b/ui/app/components/send_/send-footer/send-footer.container.js
index e69de29bb..022b2db08 100644
--- a/ui/app/components/send_/send-footer/send-footer.container.js
+++ b/ui/app/components/send_/send-footer/send-footer.container.js
@@ -0,0 +1,106 @@
+import { connect } from 'react-redux'
+import ethUtil from 'ethereumjs-util'
+import {
+  addToAddressBook,
+  clearSend,
+  signTokenTx,
+  signTx,
+  updateTransaction,
+} from '../../../actions'
+import SendFooter from './send-footer.component'
+import {
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getSelectedToken,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendFromObject,
+  getSendTo,
+  getSendToAccounts,
+  getTokenBalance,
+  getUnapprovedTxs,
+} from '../send.selectors'
+import {
+  isSendFormInError,
+} from './send-footer.selectors'
+import {
+  addressIsNew,
+  constructTxParams,
+  constructUpdatedTx,
+  formShouldBeDisabled,
+} from './send-footer.utils'
+
+export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
+
+function mapStateToProps (state) {
+  return {
+    amount: getSendAmount(state),
+    disabled: formShouldBeDisabled({
+      inError: isSendFormInError(state),
+      selectedToken: getSelectedToken(state),
+      tokenBalance: getTokenBalance(state),
+      gasTotal: getGasTotal(state),
+    }),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    inError: isSendFormInError(state),
+    isToken: Boolean(getSelectedToken(state)),
+    selectedToken: getSelectedToken(state),
+    to: getSendTo(state),
+    toAccounts: getSendToAccounts(state),
+    unapprovedTxs: getUnapprovedTxs(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(clearSend()),
+    sign: ({ selectedToken, to, amount, from, gas, gasPrice }) => {
+      const txParams = constructTxParams({
+        amount,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+      })
+
+      selectedToken
+        ? dispatch(signTokenTx(selectedToken.address, to, amount, txParams))
+        : dispatch(signTx(txParams))
+    },
+    update: ({
+      amount,
+      editingTransactionId,
+      from,
+      gas,
+      gasPrice,
+      selectedToken,
+      to,
+      unapprovedTxs,
+    }) => {
+      const editingTx = constructUpdatedTx({
+        amount,
+        editingTransactionId,
+        from,
+        gas,
+        gasPrice,
+        selectedToken,
+        to,
+        unapprovedTxs,
+      })
+
+      dispatch(updateTransaction(editingTx))
+    },
+    addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => {
+      const hexPrefixedAddress = ethUtil.addHexPrefix(newAddress)
+      if (addressIsNew(toAccounts)) {
+        // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
+        dispatch(addToAddressBook(hexPrefixedAddress, nickname))
+      }
+    },
+  }
+}
diff --git a/ui/app/components/send_/send-footer/send-footer.selectors.js b/ui/app/components/send_/send-footer/send-footer.selectors.js
index e69de29bb..e8fef6be6 100644
--- a/ui/app/components/send_/send-footer/send-footer.selectors.js
+++ b/ui/app/components/send_/send-footer/send-footer.selectors.js
@@ -0,0 +1,12 @@
+import { getSendErrors } from '../send.selectors'
+
+const selectors = {
+  isSendFormInError,
+}
+
+module.exports = selectors
+
+function isSendFormInError (state) {
+  const { amount, to } = getSendErrors(state)
+  return Boolean(amount || to !== null)
+}
diff --git a/ui/app/components/send_/send-footer/send-footer.utils.js b/ui/app/components/send_/send-footer/send-footer.utils.js
index e69de29bb..353c0e347 100644
--- a/ui/app/components/send_/send-footer/send-footer.utils.js
+++ b/ui/app/components/send_/send-footer/send-footer.utils.js
@@ -0,0 +1,84 @@
+import ethAbi from 'ethereumjs-abi'
+import ethUtil from 'ethereumjs-util'
+import { TOKEN_TRANSFER_FUNCTION_SIGNATURE } from '../send.constants'
+
+function formShouldBeDisabled ({ inError, selectedToken, tokenBalance, gasTotal }) {
+  const missingTokenBalance = selectedToken && !tokenBalance
+  return inError || !gasTotal || missingTokenBalance
+}
+
+function addHexPrefixToObjectValues (obj) {
+  return Object.keys(obj).reduce((newObj, key) => {
+    return { ...newObj, [key]: ethUtil.addHexPrefix(obj[key]) }
+  }, {})
+}
+
+function constructTxParams ({ selectedToken, to, amount, from, gas, gasPrice }) {
+  const txParams = {
+    from,
+    value: '0',
+    gas,
+    gasPrice,
+  }
+
+  if (!selectedToken) {
+    txParams.value = amount
+    txParams.to = to
+  }
+
+  const hexPrefixedTxParams = addHexPrefixToObjectValues(txParams)
+
+  return hexPrefixedTxParams
+}
+
+function constructUpdatedTx ({
+  amount,
+  editingTransactionId,
+  from,
+  gas,
+  gasPrice,
+  selectedToken,
+  to,
+  unapprovedTxs,
+}) {
+  const editingTx = {
+    ...unapprovedTxs[editingTransactionId],
+    txParams: addHexPrefixToObjectValues({ from, gas, gasPrice }),
+  }
+
+  if (selectedToken) {
+    const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
+      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    Object.assign(editingTx.txParams, addHexPrefixToObjectValues({
+      value: '0',
+      to: selectedToken.address,
+      data,
+    }))
+  } else {
+    const { data } = unapprovedTxs[editingTransactionId].txParams
+
+    Object.assign(editingTx.txParams, addHexPrefixToObjectValues({
+      value: amount,
+      to,
+      data,
+    }))
+
+    if (typeof editingTx.txParams.data === 'undefined') {
+      delete editingTx.txParams.data
+    }
+  }
+}
+
+function addressIsNew (toAccounts, newAddress) {
+  return !toAccounts.find(({ address }) => newAddress === address)
+}
+
+module.exports = {
+  addressIsNew,
+  formShouldBeDisabled,
+  constructTxParams,
+  constructUpdatedTx,
+}
diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js
index 99adfc7e8..dc4190b93 100644
--- a/ui/app/components/send_/send-header/send-header.component.js
+++ b/ui/app/components/send_/send-header/send-header.component.js
@@ -1,28 +1,29 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import PageContainerHeader from '../../page-container/page-container-header.component'
+import PageContainerHeader from '../../page-container/page-container-header'
+import { DEFAULT_ROUTE } from '../../../routes'
 
 export default class SendHeader extends Component {
 
   static propTypes = {
-    isToken: PropTypes.bool,
     clearSend: PropTypes.func,
-    goHome: PropTypes.func,
+    history: PropTypes.object,
+    isToken: PropTypes.bool,
   };
 
   render () {
-    const { isToken, clearSend, goHome } = this.props
+    const { isToken, clearSend, history } = this.props
 
     return (
       <PageContainerHeader
-        title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')}
-        subtitle={this.context.t('onlySendToEtherAddress')}
         onClose={() => {
           clearSend()
-          goHome()
+          history.push(DEFAULT_ROUTE)
         }}
+        subtitle={this.context.t('onlySendToEtherAddress')}
+        title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')}
       />
-    );
+    )
   }
 
 }
diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js
index a4d3ac54f..0c92da3a6 100644
--- a/ui/app/components/send_/send-header/send-header.container.js
+++ b/ui/app/components/send_/send-header/send-header.container.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { goHome, clearSend } from '../../../actions'
+import { clearSend } from '../../../actions'
 import SendHeader from './send-header.component'
 import { getSelectedToken } from '../../../selectors'
 
@@ -7,13 +7,12 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
 
 function mapStateToProps (state) {
   return {
-    isToken: Boolean(getSelectedToken(state))
+    isToken: Boolean(getSelectedToken(state)),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    goHome: () => dispatch(goHome()),
     clearSend: () => dispatch(clearSend()),
   }
 }
diff --git a/ui/app/components/send_/send.component.js b/ui/app/components/send_/send.component.js
index e69de29bb..e14a97537 100644
--- a/ui/app/components/send_/send.component.js
+++ b/ui/app/components/send_/send.component.js
@@ -0,0 +1,142 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PersistentForm from '../../../lib/persistent-form'
+import {
+  getAmountErrorObject,
+  doesAmountErrorRequireUpdate,
+} from './send.utils'
+
+import SendHeader from './send-header/send-header.container'
+import SendContent from './send-content/send-content.component'
+import SendFooter from './send-footer/send-footer.container'
+
+export default class SendTransactionScreen extends PersistentForm {
+
+  static propTypes = {
+    amount: PropTypes.string,
+    amountConversionRate: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    conversionRate: PropTypes.number,
+    data: PropTypes.string,
+    editingTransactionId: PropTypes.string,
+    from: PropTypes.object,
+    gasLimit: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasTotal: PropTypes.string,
+    history: PropTypes.object,
+    network: PropTypes.string,
+    primaryCurrency: PropTypes.string,
+    selectedAddress: PropTypes.string,
+    selectedToken: PropTypes.object,
+    tokenBalance: PropTypes.string,
+    tokenContract: PropTypes.object,
+    updateAndSetGasTotal: PropTypes.func,
+    updateSendErrors: PropTypes.func,
+    updateSendTokenBalance: PropTypes.func,
+  };
+
+  updateGas () {
+    const {
+      data,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      selectedAddress,
+      selectedToken = {},
+      updateAndSetGasTotal,
+    } = this.props
+
+    updateAndSetGasTotal({
+      data,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      selectedAddress,
+      selectedToken,
+    })
+  }
+
+  componentDidUpdate (prevProps) {
+    const {
+      amount,
+      amountConversionRate,
+      conversionRate,
+      from: { address, balance },
+      gasTotal,
+      network,
+      primaryCurrency,
+      selectedToken,
+      tokenBalance,
+      updateSendErrors,
+      updateSendTokenBalance,
+      tokenContract,
+    } = this.props
+
+    const {
+      from: { balance: prevBalance },
+      gasTotal: prevGasTotal,
+      tokenBalance: prevTokenBalance,
+      network: prevNetwork,
+    } = prevProps
+
+    const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
+
+    if (!uninitialized) {
+      const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
+        balance,
+        gasTotal,
+        prevBalance,
+        prevGasTotal,
+        prevTokenBalance,
+        selectedToken,
+        tokenBalance,
+      })
+
+      if (amountErrorRequiresUpdate) {
+        const amountErrorObject = getAmountErrorObject({
+          amount,
+          amountConversionRate,
+          balance,
+          conversionRate,
+          gasTotal,
+          primaryCurrency,
+          selectedToken,
+          tokenBalance,
+        })
+        updateSendErrors(amountErrorObject)
+      }
+
+      if (network !== prevNetwork && network !== 'loading') {
+        updateSendTokenBalance({
+          selectedToken,
+          tokenContract,
+          address,
+        })
+        this.updateGas()
+      }
+    }
+  }
+
+  componentWillMount () {
+    this.updateGas()
+  }
+
+  render () {
+    const { history } = this.props
+
+    return (
+      <div className="page-container">
+        <SendHeader history={history}/>
+        <SendContent/>
+        <SendFooter history={history}/>
+      </div>
+    )
+  }
+
+}
+
+SendTransactionScreen.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send.constants.js b/ui/app/components/send_/send.constants.js
new file mode 100644
index 000000000..d047ed704
--- /dev/null
+++ b/ui/app/components/send_/send.constants.js
@@ -0,0 +1,44 @@
+const ethUtil = require('ethereumjs-util')
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_HEX = (100000000).toString(16)
+const MIN_GAS_PRICE_DEC = '100000000'
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
+
+const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
+  fromDenomination: 'WEI',
+  toDenomination: 'GWEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+  numberOfDecimals: 1,
+}))
+
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
+  toNumericBase: 'hex',
+  multiplicandBase: 16,
+  multiplierBase: 16,
+})
+
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
+const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'
+const INSUFFICIENT_TOKENS_ERROR = 'insufficientTokens'
+const NEGATIVE_ETH_ERROR = 'negativeETH'
+const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient'
+const REQUIRED_ERROR = 'required'
+
+module.exports = {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_LIMIT_HEX,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_PRICE_GWEI,
+  MIN_GAS_PRICE_HEX,
+  MIN_GAS_TOTAL,
+  NEGATIVE_ETH_ERROR,
+  REQUIRED_ERROR,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+}
diff --git a/ui/app/components/send_/send.container.js b/ui/app/components/send_/send.container.js
index e69de29bb..df605469a 100644
--- a/ui/app/components/send_/send.container.js
+++ b/ui/app/components/send_/send.container.js
@@ -0,0 +1,88 @@
+import { connect } from 'react-redux'
+import abi from 'ethereumjs-abi'
+import SendEther from './send.component'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import {
+  getAmountConversionRate,
+  getConversionRate,
+  getCurrentNetwork,
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getPrimaryCurrency,
+  getSelectedAddress,
+  getSelectedToken,
+  getSelectedTokenContract,
+  getSelectedTokenToFiatRate,
+  getSendAmount,
+  getSendEditingTransactionId,
+  getSendFromObject,
+  getTokenBalance,
+} from './send.selectors'
+import {
+  updateSendTokenBalance,
+  updateGasTotal,
+  setGasTotal,
+} from '../../actions'
+import {
+  updateSendErrors,
+} from '../../ducks/send'
+import {
+  calcGasTotal,
+  generateTokenTransferData,
+} from './send.utils.js'
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SendEther)
+
+function mapStateToProps (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const selectedToken = getSelectedToken(state)
+
+  return {
+    amount: getSendAmount(state),
+    amountConversionRate: getAmountConversionRate(state),
+    conversionRate: getConversionRate(state),
+    data: generateTokenTransferData(abi, selectedAddress, selectedToken),
+    editingTransactionId: getSendEditingTransactionId(state),
+    from: getSendFromObject(state),
+    gasLimit: getGasLimit(state),
+    gasPrice: getGasPrice(state),
+    gasTotal: getGasTotal(state),
+    network: getCurrentNetwork(state),
+    primaryCurrency: getPrimaryCurrency(state),
+    selectedAddress: getSelectedAddress(state),
+    selectedToken: getSelectedToken(state),
+    tokenBalance: getTokenBalance(state),
+    tokenContract: getSelectedTokenContract(state),
+    tokenToFiatRate: getSelectedTokenToFiatRate(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateAndSetGasTotal: ({
+      data,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      selectedAddress,
+      selectedToken,
+    }) => {
+      !editingTransactionId
+        ? dispatch(updateGasTotal({ selectedAddress, selectedToken, data }))
+        : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
+    },
+    updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
+      dispatch(updateSendTokenBalance({
+        selectedToken,
+        tokenContract,
+        address,
+      }))
+    },
+    updateSendErrors: newError => dispatch(updateSendErrors(newError)),
+  }
+}
diff --git a/ui/app/components/send_/send.selectors.js b/ui/app/components/send_/send.selectors.js
index 8c088098e..761b15182 100644
--- a/ui/app/components/send_/send.selectors.js
+++ b/ui/app/components/send_/send.selectors.js
@@ -2,105 +2,95 @@ import { valuesFor } from '../../util'
 import abi from 'human-standard-token-abi'
 import {
   multiplyCurrencies,
-} from './conversion-util'
+} from '../../conversion-util'
 
 const selectors = {
+  accountsWithSendEtherInfoSelector,
+  autoAddToBetaUI,
+  getAddressBook,
+  getAmountConversionRate,
+  getConversionRate,
+  getConvertedCurrency,
+  getCurrentAccountWithSendEtherInfo,
+  getCurrentCurrency,
+  getCurrentNetwork,
+  getCurrentViewContext,
+  getForceGasMin,
+  getGasLimit,
+  getGasPrice,
+  getGasTotal,
+  getPrimaryCurrency,
+  getSelectedAccount,
   getSelectedAddress,
   getSelectedIdentity,
-  getSelectedAccount,
   getSelectedToken,
+  getSelectedTokenContract,
   getSelectedTokenExchangeRate,
-  getTokenExchangeRate,
-  conversionRateSelector,
-  transactionsSelector,
-  accountsWithSendEtherInfoSelector,
-  getCurrentAccountWithSendEtherInfo,
-  getGasPrice,
-  getGasLimit,
-  getForceGasMin,
-  getAddressBook,
-  getSendFrom,
-  getCurrentCurrency,
-  getSendAmount,
   getSelectedTokenToFiatRate,
-  getSelectedTokenContract,
-  autoAddToBetaUI,
-  getSendMaxModeState,
-  getCurrentViewContext,
+  getSendAmount,
+  getSendEditingTransactionId,
   getSendErrors,
+  getSendFrom,
+  getSendFromBalance,
+  getSendFromObject,
+  getSendMaxModeState,
   getSendTo,
-  getCurrentNetwork,
+  getSendToAccounts,
+  getTokenBalance,
+  getTokenExchangeRate,
+  getUnapprovedTxs,
+  isSendFormInError,
+  transactionsSelector,
 }
 
 module.exports = selectors
 
-function getSelectedAddress (state) {
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0]
-
-  return selectedAddress
-}
+function accountsWithSendEtherInfoSelector (state) {
+  const {
+    accounts,
+    identities,
+  } = state.metamask
 
-function getSelectedIdentity (state) {
-  const selectedAddress = getSelectedAddress(state)
-  const identities = state.metamask.identities
+  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
+    return Object.assign({}, account, identities[key])
+  })
 
-  return identities[selectedAddress]
+  return accountsWithSendEtherInfo
 }
 
-function getSelectedAccount (state) {
-  const accounts = state.metamask.accounts
-  const selectedAddress = getSelectedAddress(state)
+function autoAddToBetaUI (state) {
+  const autoAddTransactionThreshold = 12
+  const autoAddAccountsThreshold = 2
+  const autoAddTokensThreshold = 1
 
-  return accounts[selectedAddress]
-}
+  const numberOfTransactions = state.metamask.selectedAddressTxList.length
+  const numberOfAccounts = Object.keys(state.metamask.accounts).length
+  const numberOfTokensAdded = state.metamask.tokens.length
 
-function getSelectedToken (state) {
-  const tokens = state.metamask.tokens || []
-  const selectedTokenAddress = state.metamask.selectedTokenAddress
-  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
-  const sendToken = state.metamask.send.token
+  const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
+    (numberOfAccounts > autoAddAccountsThreshold) &&
+    (numberOfTokensAdded > autoAddTokensThreshold)
+  const userIsNotInBeta = !state.metamask.featureFlags.betaUI
 
-  return selectedToken || sendToken || null
+  return userIsNotInBeta && userPassesThreshold
 }
 
-function getSelectedTokenExchangeRate (state) {
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const selectedToken = getSelectedToken(state) || {}
-  const { symbol = '' } = selectedToken
-
-  const pair = `${symbol.toLowerCase()}_eth`
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
+function getAddressBook (state) {
+  return state.metamask.addressBook
 }
 
-function getTokenExchangeRate (state, tokenSymbol) {
-  const pair = `${tokenSymbol.toLowerCase()}_eth`
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
-
-  return tokenExchangeRate
+function getAmountConversionRate (state) {
+  return getSelectedToken(state)
+    ? getSelectedTokenToFiatRate(state)
+    : getConversionRate(state)
 }
 
-function conversionRateSelector (state) {
+function getConversionRate (state) {
   return state.metamask.conversionRate
 }
 
-function getAddressBook (state) {
-  return state.metamask.addressBook
-}
-
-function accountsWithSendEtherInfoSelector (state) {
-  const {
-    accounts,
-    identities,
-  } = state.metamask
-
-  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
-    return Object.assign({}, account, identities[key])
-  })
-
-  return accountsWithSendEtherInfo
+function getConvertedCurrency (state) {
+  return state.metamask.currentCurrency
 }
 
 function getCurrentAccountWithSendEtherInfo (state) {
@@ -110,20 +100,21 @@ function getCurrentAccountWithSendEtherInfo (state) {
   return accounts.find(({ address }) => address === currentAddress)
 }
 
-function transactionsSelector (state) {
-  const { network, selectedTokenAddress } = state.metamask
-  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
-  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
-  const transactions = state.metamask.selectedAddressTxList || []
-  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+function getCurrentCurrency (state) {
+  return state.metamask.currentCurrency
+}
 
-  // console.log({txsToRender, selectedTokenAddress})
-  return selectedTokenAddress
-    ? txsToRender
-      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-      .sort((a, b) => b.time - a.time)
-    : txsToRender
-      .sort((a, b) => b.time - a.time)
+function getCurrentNetwork (state) {
+  return state.metamask.network
+}
+
+function getCurrentViewContext (state) {
+  const { currentView = {} } = state.appState
+  return currentView.context
+}
+
+function getForceGasMin (state) {
+  return state.metamask.send.forceGasMin
 }
 
 function getGasPrice (state) {
@@ -134,29 +125,64 @@ function getGasLimit (state) {
   return state.metamask.send.gasLimit
 }
 
-function getForceGasMin (state) {
-  return state.metamask.send.forceGasMin
+function getGasTotal (state) {
+  return state.metamask.send.gasTotal
 }
 
-function getSendFrom (state) {
-  return state.metamask.send.from
+function getPrimaryCurrency (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken && selectedToken.symbol
 }
 
-function getSendAmount (state) {
-  return state.metamask.send.amount
+function getSelectedAccount (state) {
+  const accounts = state.metamask.accounts
+  const selectedAddress = getSelectedAddress(state)
+
+  return accounts[selectedAddress]
 }
 
-function getSendMaxModeState (state) {
-  return state.metamask.send.maxModeOn
+function getSelectedAddress (state) {
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0]
+
+  return selectedAddress
 }
 
-function getCurrentCurrency (state) {
-  return state.metamask.currentCurrency
+function getSelectedIdentity (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const identities = state.metamask.identities
+
+  return identities[selectedAddress]
+}
+
+function getSelectedToken (state) {
+  const tokens = state.metamask.tokens || []
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+  const sendToken = state.metamask.send.token
+
+  return selectedToken || sendToken || null
+}
+
+function getSelectedTokenContract (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken
+    ? global.eth.contract(abi).at(selectedToken.address)
+    : null
+}
+
+function getSelectedTokenExchangeRate (state) {
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedToken = getSelectedToken(state) || {}
+  const { symbol = '' } = selectedToken
+  const pair = `${symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates && tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
 }
 
 function getSelectedTokenToFiatRate (state) {
   const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
-  const conversionRate = conversionRateSelector(state)
+  const conversionRate = getConversionRate(state)
 
   const tokenToFiatRate = multiplyCurrencies(
     conversionRate,
@@ -167,37 +193,33 @@ function getSelectedTokenToFiatRate (state) {
   return tokenToFiatRate
 }
 
-function getSelectedTokenContract (state) {
-  const selectedToken = getSelectedToken(state)
-  return selectedToken
-    ? global.eth.contract(abi).at(selectedToken.address)
-    : null
+function getSendAmount (state) {
+  return state.metamask.send.amount
 }
 
-function autoAddToBetaUI (state) {
-  const autoAddTransactionThreshold = 12
-  const autoAddAccountsThreshold = 2
-  const autoAddTokensThreshold = 1
+function getSendEditingTransactionId (state) {
+  return state.metamask.send.editingTransactionId
+}
 
-  const numberOfTransactions = state.metamask.selectedAddressTxList.length
-  const numberOfAccounts = Object.keys(state.metamask.accounts).length
-  const numberOfTokensAdded = state.metamask.tokens.length
+function getSendErrors (state) {
+  return state.send.errors
+}
 
-  const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
-    (numberOfAccounts > autoAddAccountsThreshold) &&
-    (numberOfTokensAdded > autoAddTokensThreshold)
-  const userIsNotInBeta = !state.metamask.featureFlags.betaUI
+function getSendFrom (state) {
+  return state.metamask.send.from
+}
 
-  return userIsNotInBeta && userPassesThreshold
+function getSendFromBalance (state) {
+  const from = getSendFrom(state) || getSelectedAccount(state)
+  return from.balance
 }
 
-function getCurrentViewContext (state) {
-  const { currentView = {} } = state.appState
-  return currentView.context
+function getSendFromObject (state) {
+  return getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
 }
 
-function getSendErrors (state) {
-  return state.metamask.send.errors
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
 }
 
 function getSendTo (state) {
@@ -212,6 +234,38 @@ function getSendToAccounts (state) {
   return Object.entries(allAccounts).map(([key, account]) => account)
 }
 
-function getCurrentNetwork (state) {
-  return state.metamask.network
-}
\ No newline at end of file
+function getTokenBalance (state) {
+  return state.metamask.send.tokenBalance
+}
+
+function getTokenExchangeRate (state, tokenSymbol) {
+  const pair = `${tokenSymbol.toLowerCase()}_eth`
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getUnapprovedTxs (state) {
+  return state.metamask.unapprovedTxs
+}
+
+function isSendFormInError (state) {
+  const { amount, to } = getSendErrors(state)
+  return Boolean(amount || to !== null)
+}
+
+function transactionsSelector (state) {
+  const { network, selectedTokenAddress } = state.metamask
+  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
+  const transactions = state.metamask.selectedAddressTxList || []
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+
+  return selectedTokenAddress
+    ? txsToRender
+      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
+      .sort((a, b) => b.time - a.time)
+    : txsToRender
+      .sort((a, b) => b.time - a.time)
+}
diff --git a/ui/app/components/send_/send.utils.js b/ui/app/components/send_/send.utils.js
index e69de29bb..e537d5624 100644
--- a/ui/app/components/send_/send.utils.js
+++ b/ui/app/components/send_/send.utils.js
@@ -0,0 +1,188 @@
+const {
+  addCurrencies,
+  conversionUtil,
+  conversionGTE,
+  multiplyCurrencies,
+} = require('../../conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../token-util')
+const {
+  conversionGreaterThan,
+} = require('../../conversion-util')
+const {
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  NEGATIVE_ETH_ERROR,
+} = require('./send.constants')
+
+module.exports = {
+  calcGasTotal,
+  doesAmountErrorRequireUpdate,
+  generateTokenTransferData,
+  getAmountErrorObject,
+  getParamsForGasEstimate,
+  calcTokenBalance,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+}
+
+function calcGasTotal (gasLimit, gasPrice) {
+  return multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+}
+
+function isBalanceSufficient ({
+  amount = '0x0',
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal = '0x0',
+  primaryCurrency,
+}) {
+  const totalAmount = addCurrencies(amount, gasTotal, {
+    aBase: 16,
+    bBase: 16,
+    toNumericBase: 'hex',
+  })
+
+  const balanceIsSufficient = conversionGTE(
+    {
+      value: balance,
+      fromNumericBase: 'hex',
+      fromCurrency: primaryCurrency,
+      conversionRate,
+    },
+    {
+      value: totalAmount,
+      fromNumericBase: 'hex',
+      conversionRate: amountConversionRate || conversionRate,
+      fromCurrency: primaryCurrency,
+    },
+  )
+
+  return balanceIsSufficient
+}
+
+function isTokenBalanceSufficient ({
+  amount = '0x0',
+  tokenBalance,
+  decimals,
+}) {
+  const amountInDec = conversionUtil(amount, {
+    fromNumericBase: 'hex',
+  })
+
+  const tokenBalanceIsSufficient = conversionGTE(
+    {
+      value: tokenBalance,
+      fromNumericBase: 'dec',
+    },
+    {
+      value: calcTokenAmount(amountInDec, decimals),
+      fromNumericBase: 'dec',
+    },
+  )
+
+  return tokenBalanceIsSufficient
+}
+
+function getAmountErrorObject ({
+  amount,
+  amountConversionRate,
+  balance,
+  conversionRate,
+  gasTotal,
+  primaryCurrency,
+  selectedToken,
+  tokenBalance,
+}) {
+  let insufficientFunds = false
+  if (gasTotal && conversionRate) {
+    insufficientFunds = !isBalanceSufficient({
+      amount: selectedToken ? '0x0' : amount,
+      amountConversionRate,
+      balance,
+      conversionRate,
+      gasTotal,
+      primaryCurrency,
+    })
+  }
+
+  let inSufficientTokens = false
+  if (selectedToken && tokenBalance !== null) {
+    const { decimals } = selectedToken
+    inSufficientTokens = !isTokenBalanceSufficient({
+      tokenBalance,
+      amount,
+      decimals,
+    })
+  }
+
+  const amountLessThanZero = conversionGreaterThan(
+    { value: 0, fromNumericBase: 'dec' },
+    { value: amount, fromNumericBase: 'hex' },
+  )
+
+  let amountError = null
+
+  if (insufficientFunds) {
+    amountError = INSUFFICIENT_FUNDS_ERROR
+  } else if (inSufficientTokens) {
+    amountError = INSUFFICIENT_TOKENS_ERROR
+  } else if (amountLessThanZero) {
+    amountError = NEGATIVE_ETH_ERROR
+  }
+
+  return { amount: amountError }
+}
+
+function getParamsForGasEstimate (selectedAddress, symbol, data) {
+  const estimatedGasParams = {
+    from: selectedAddress,
+    gas: '746a528800',
+  }
+
+  if (symbol) {
+    Object.assign(estimatedGasParams, { value: '0x0' })
+  }
+
+  if (data) {
+    Object.assign(estimatedGasParams, { data })
+  }
+
+  return estimatedGasParams
+}
+
+function calcTokenBalance ({ selectedToken, usersToken }) {
+  const { decimals } = selectedToken || {}
+  return calcTokenAmount(usersToken.balance.toString(), decimals)
+}
+
+function doesAmountErrorRequireUpdate ({
+  balance,
+  gasTotal,
+  prevBalance,
+  prevGasTotal,
+  prevTokenBalance,
+  selectedToken,
+  tokenBalance,
+}) {
+  const balanceHasChanged = balance !== prevBalance
+  const gasTotalHasChange = gasTotal !== prevGasTotal
+  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
+  const amountErrorRequiresUpdate = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
+
+  return amountErrorRequiresUpdate
+}
+
+function generateTokenTransferData (abi, selectedAddress, selectedToken) {
+  if (!selectedToken) return
+  return Array.prototype.map.call(
+    abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+    x => ('00' + x.toString(16)).slice(-2)
+  ).join('')
+}
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 41415411e..b958a2d2d 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -6,6 +6,8 @@ const Identicon = require('./identicon')
 const connect = require('react-redux').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')
 
@@ -20,6 +22,8 @@ const {
   conversionRateSelector,
 } = require('../selectors.js')
 
+const { DEFAULT_ROUTE } = require('../routes')
+
 function mapStateToProps (state) {
   return {
     balance: getSelectedAccount(state).balance,
@@ -42,7 +46,10 @@ SignatureRequest.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SignatureRequest)
 
 
 inherits(SignatureRequest, Component)
@@ -229,10 +236,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.context.t('cancel')),
     h('button.btn-primary--lg', {
-      onClick: sign,
+      onClick: event => {
+        sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
+      },
     }, this.context.t('sign')),
   ])
 }
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index a80640116..0016a09c1 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -4,31 +4,17 @@ const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
 class TabBar extends Component {
-  constructor (props) {
-    super(props)
-    const { defaultTab, tabs } = props
-
-    this.state = {
-      subview: defaultTab || tabs[0].key,
-    }
-  }
-
   render () {
-    const { tabs = [], tabSelected } = this.props
-    const { subview } = this.state
+    const { tabs = [], onSelect, isActive } = this.props
 
     return (
       h('.tab-bar', {}, [
-        tabs.map((tab) => {
-          const { key, content } = tab
+        tabs.map(({ key, content }) => {
           return h('div', {
             className: classnames('tab-bar__tab pointer', {
-              'tab-bar__tab--active': subview === key,
+              'tab-bar__tab--active': isActive(key, content),
             }),
-            onClick: () => {
-              this.setState({ subview: key })
-              tabSelected(key)
-            },
+            onClick: () => onSelect(key),
             key,
           }, content)
         }),
@@ -39,9 +25,9 @@ class TabBar extends Component {
 }
 
 TabBar.propTypes = {
-  defaultTab: PropTypes.string,
+  isActive: PropTypes.func.isRequired,
   tabs: PropTypes.array,
-  tabSelected: PropTypes.func,
+  onSelect: PropTypes.func,
 }
 
 module.exports = TabBar
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
index 2f71c0687..1900ccec7 100644
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const connect = require('react-redux').connect
 const selectors = require('../selectors')
+const log = require('loglevel')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 0332fde88..c84117d84 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -16,7 +16,7 @@ function mapStateToProps (state) {
     currentCurrency: state.metamask.currentCurrency,
     selectedTokenAddress: state.metamask.selectedTokenAddress,
     userAddress: selectors.getSelectedAddress(state),
-    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    contractExchangeRates: state.metamask.contractExchangeRates,
     conversionRate: state.metamask.conversionRate,
     sidebarOpen: state.appState.sidebarOpen,
   }
@@ -25,7 +25,6 @@ function mapStateToProps (state) {
 function mapDispatchToProps (dispatch) {
   return {
     setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
-    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
     hideSidebar: () => dispatch(actions.hideSidebar()),
   }
 }
@@ -41,15 +40,6 @@ function TokenCell () {
   }
 }
 
-TokenCell.prototype.componentWillMount = function () {
-  const {
-    updateTokenExchangeRate,
-    symbol,
-  } = this.props
-
-  updateTokenExchangeRate(symbol)
-}
-
 TokenCell.prototype.render = function () {
   const { tokenMenuOpen } = this.state
   const props = this.props
@@ -60,7 +50,7 @@ TokenCell.prototype.render = function () {
     network,
     setSelectedToken,
     selectedTokenAddress,
-    tokenExchangeRates,
+    contractExchangeRates,
     conversionRate,
     hideSidebar,
     sidebarOpen,
@@ -68,15 +58,13 @@ TokenCell.prototype.render = function () {
     // userAddress,
   } = props
 
-  const pair = `${symbol.toLowerCase()}_eth`
-
   let currentTokenToFiatRate
   let currentTokenInFiat
   let formattedFiat = ''
 
-  if (tokenExchangeRates[pair]) {
+  if (contractExchangeRates[address]) {
     currentTokenToFiatRate = multiplyCurrencies(
-      tokenExchangeRates[pair].rate,
+      contractExchangeRates[address],
       conversionRate
     )
     currentTokenInFiat = conversionUtil(string, {
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 150a3762d..4189cf801 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -6,6 +6,7 @@ const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
 const connect = require('react-redux').connect
 const selectors = require('../selectors')
+const log = require('loglevel')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 42c008798..bd4ea80a6 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -9,6 +9,7 @@ const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(abi)
 const Identicon = require('./identicon')
 const contractMap = require('eth-contract-metadata')
+const { checksumAddress } = require('../util')
 
 const actions = require('../actions')
 const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
@@ -27,7 +28,7 @@ function mapStateToProps (state) {
   return {
     tokens: state.metamask.tokens,
     currentCurrency: getCurrentCurrency(state),
-    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    contractExchangeRates: state.metamask.contractExchangeRates,
     selectedAddressTxList: state.metamask.selectedAddressTxList,
   }
 }
@@ -74,10 +75,12 @@ TxListItem.prototype.getAddressText = function () {
   const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
   const { name: txDataName, params = [] } = decodedData || {}
   const { value } = params[0] || {}
+  const checksummedAddress = checksumAddress(address)
+  const checksummedValue = checksumAddress(value)
 
   let addressText
   if (txDataName === 'transfer' || address) {
-    const addressToRender = txDataName === 'transfer' ? value : address
+    const addressToRender = txDataName === 'transfer' ? checksummedValue : checksummedAddress
     addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}`
   } else if (isMsg) {
     addressText = this.context.t('sigRequest')
@@ -142,31 +145,29 @@ TxListItem.prototype.getTokenInfo = async function () {
     ({ decimals, symbol } = await tokenInfoGetter(toAddress))
   }
 
-  return { decimals, symbol }
+  return { decimals, symbol, address: toAddress }
 }
 
 TxListItem.prototype.getSendTokenTotal = async function () {
   const {
     txParams = {},
     conversionRate,
-    tokenExchangeRates,
+    contractExchangeRates,
     currentCurrency,
   } = this.props
 
   const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
   const { params = [] } = decodedData || {}
   const { value } = params[1] || {}
-  const { decimals, symbol } = await this.getTokenInfo()
+  const { decimals, symbol, address } = await this.getTokenInfo()
   const total = calcTokenAmount(value, decimals)
 
-  const pair = symbol && `${symbol.toLowerCase()}_eth`
-
   let tokenToFiatRate
   let totalInFiat
 
-  if (tokenExchangeRates[pair]) {
+  if (contractExchangeRates[address]) {
     tokenToFiatRate = multiplyCurrencies(
-      tokenExchangeRates[pair].rate,
+      contractExchangeRates[address],
       conversionRate
     )
 
@@ -220,7 +221,6 @@ TxListItem.prototype.resubmit = function () {
 TxListItem.prototype.render = function () {
   const {
     transactionStatus,
-    transactionAmount,
     onClick,
     transactionId,
     dateString,
@@ -229,7 +229,6 @@ TxListItem.prototype.render = function () {
     txParams,
   } = this.props
   const { total, fiatTotal, isTokenTx } = this.state
-  const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
 
   return h(`div${className || ''}`, {
     key: transactionId,
@@ -288,7 +287,7 @@ TxListItem.prototype.render = function () {
 
           h('span.tx-list-value', total),
 
-          showFiatTotal && h('span.tx-list-fiat-value', fiatTotal),
+          fiatTotal && h('span.tx-list-fiat-value', fiatTotal),
 
         ]),
       ]),
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 740c4a4ab..554febcff 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -11,14 +11,19 @@ const { formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(TxList)
 
 TxList.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
-
-
 function mapStateToProps (state) {
   return {
     txsToRender: selectors.transactionsSelector(state),
@@ -96,7 +101,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionNetworkId,
     transactionSubmittedTime,
   } = props
-  const { showConfTxPage } = this.props
+  const { history } = this.props
 
   const opts = {
     key: transactionId || transactionHash,
@@ -116,7 +121,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
   const isUnapproved = transactionStatus === 'unapproved'
 
   if (isUnapproved) {
-    opts.onClick = () => showConfTxPage({ id: transactionId })
+    opts.onClick = () => {
+      this.props.showConfTxPage({ id: transactionId })
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
     opts.transactionStatus = this.context.t('notStarted')
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index ca24e813f..263f992c0 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -2,22 +2,27 @@ const Component = require('react').Component
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
-const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 const actions = require('../actions')
 const selectors = require('../selectors')
+const { SEND_ROUTE } = require('../routes')
+const { checksumAddress: toChecksumAddress } = require('../util')
 
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
 const Identicon = require('./identicon')
 
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(TxView)
+
 TxView.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
-
-
 function mapStateToProps (state) {
   const sidebarOpen = state.appState.sidebarOpen
   const isMascara = state.appState.isMascara
@@ -27,7 +32,7 @@ function mapStateToProps (state) {
   const network = state.metamask.network
   const selectedTokenAddress = state.metamask.selectedTokenAddress
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
+  const checksumAddress = toChecksumAddress(selectedAddress)
   const identity = identities[selectedAddress]
 
   return {
@@ -69,7 +74,7 @@ TxView.prototype.renderHeroBalance = function () {
 }
 
 TxView.prototype.renderButtons = function () {
-  const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props
+  const {selectedToken, showModal, history } = this.props
 
   return !selectedToken
     ? (
@@ -84,14 +89,14 @@ TxView.prototype.renderButtons = function () {
           style: {
             marginLeft: '0.8em',
           },
-          onClick: showSendPage,
+          onClick: () => history.push(SEND_ROUTE),
         }, this.context.t('send')),
       ])
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
         h('button.btn-primary.hero-balance-button', {
-          onClick: showSendTokenPage,
+          onClick: () => history.push(SEND_ROUTE),
         }, this.context.t('send')),
       ])
     )
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index e6b94ad12..9e430f87b 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -2,8 +2,11 @@ const Component = require('react').Component
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
 const inherits = require('util').inherits
 const classnames = require('classnames')
+const { checksumAddress } = require('../util')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
 const Tooltip = require('./tooltip-v2.js')
@@ -12,14 +15,17 @@ const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
+const { ADD_TOKEN_ROUTE } = require('../routes')
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(WalletView)
 
 WalletView.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
-
-
 function mapStateToProps (state) {
 
   return {
@@ -97,11 +103,13 @@ WalletView.prototype.render = function () {
     keyrings,
     showAccountDetailModal,
     hideSidebar,
-    showAddTokenPage,
+    history,
   } = this.props
   // temporary logs + fake extra wallets
   // console.log('walletview, selectedAccount:', selectedAccount)
 
+  const checksummedAddress = checksumAddress(selectedAddress)
+
   const keyring = keyrings.find((kr) => {
     return kr.accounts.includes(selectedAddress) ||
       kr.accounts.includes(selectedIdentity.address)
@@ -130,7 +138,7 @@ WalletView.prototype.render = function () {
       }, [
         h(Identicon, {
           diameter: 54,
-          address: selectedAddress,
+          address: checksummedAddress,
         }),
 
         h('span.account-name', {
@@ -153,7 +161,7 @@ WalletView.prototype.render = function () {
           'wallet-view__address__pressed': this.state.copyToClipboardPressed,
         }),
         onClick: () => {
-          copyToClipboard(selectedAddress)
+          copyToClipboard(checksummedAddress)
           this.setState({ hasCopied: true })
           setTimeout(() => this.setState({ hasCopied: false }), 3000)
         },
@@ -164,7 +172,7 @@ WalletView.prototype.render = function () {
           this.setState({ copyToClipboardPressed: false })
         },
       }, [
-        `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+        `${checksummedAddress.slice(0, 4)}...${checksummedAddress.slice(-4)}`,
         h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
       ]),
     ]),
@@ -174,10 +182,7 @@ WalletView.prototype.render = function () {
     h(TokenList),
 
     h('button.btn-primary.wallet-view__add-token-button', {
-      onClick: () => {
-        showAddTokenPage()
-        hideSidebar()
-      },
+      onClick: () => history.push(ADD_TOKEN_ROUTE),
     }, this.context.t('addToken')),
   ])
 }