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

34 files changed, 937 insertions, 400 deletions

diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
new file mode 100644
index 000000000..cf36e0d79
--- /dev/null
+++ b/ui/app/components/app-header/app-header.component.js
@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../../app/scripts/lib/enums')
+const { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes')
+const Identicon = require('../identicon')
+const NetworkIndicator = require('../network')
+
+class AppHeader extends Component {
+  static propTypes = {
+    history: PropTypes.object,
+    location: PropTypes.object,
+    network: PropTypes.string,
+    provider: PropTypes.object,
+    networkDropdownOpen: PropTypes.bool,
+    showNetworkDropdown: PropTypes.func,
+    hideNetworkDropdown: PropTypes.func,
+    toggleAccountMenu: PropTypes.func,
+    selectedAddress: PropTypes.string,
+    isUnlocked: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleNetworkIndicatorClick (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props
+
+    return networkDropdownOpen === false
+      ? showNetworkDropdown()
+      : hideNetworkDropdown()
+  }
+
+  renderAccountMenu () {
+    const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props
+
+    return isUnlocked && (
+      <div
+        className="account-menu__icon"
+        onClick={toggleAccountMenu}
+      >
+        <Identicon
+          address={selectedAddress}
+          diameter={32}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      network,
+      provider,
+      history,
+      location,
+      isUnlocked,
+    } = this.props
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+      return null
+    }
+
+    return (
+      <div
+        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
+        <div className="app-header__contents">
+          <div
+            className="app-header__logo-container"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          >
+            <img
+              className="app-header__metafox"
+              src="/images/metamask-fox.svg"
+              height={42}
+              width={42}
+            />
+            <div className="flex-row">
+              <h1>{ this.context.t('appName') }</h1>
+              <div className="app-header__beta-label">
+                { this.context.t('beta') }
+              </div>
+            </div>
+          </div>
+          <div className="app-header__account-menu-container">
+            <div className="network-component-wrapper">
+              <NetworkIndicator
+                network={network}
+                provider={provider}
+                onClick={event => this.handleNetworkIndicatorClick(event)}
+                disabled={location.pathname === CONFIRM_TRANSACTION_ROUTE}
+              />
+            </div>
+            { this.renderAccountMenu() }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AppHeader
diff --git a/ui/app/components/app-header/app-header.container.js b/ui/app/components/app-header/app-header.container.js
new file mode 100644
index 000000000..30d3f8cc4
--- /dev/null
+++ b/ui/app/components/app-header/app-header.container.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+
+import AppHeader from './app-header.component'
+const actions = require('../../actions')
+
+const mapStateToProps = state => {
+  const { appState, metamask } = state
+  const { networkDropdownOpen } = appState
+  const {
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+  } = metamask
+
+  return {
+    networkDropdownOpen,
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AppHeader)
diff --git a/ui/app/components/app-header/index.js b/ui/app/components/app-header/index.js
new file mode 100644
index 000000000..daa31f621
--- /dev/null
+++ b/ui/app/components/app-header/index.js
@@ -0,0 +1,2 @@
+import AppHeader from './app-header.container'
+module.exports = AppHeader
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
new file mode 100644
index 000000000..7769e4875
--- /dev/null
+++ b/ui/app/components/button/button.component.js
@@ -0,0 +1,43 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
+
+const SECONDARY = 'secondary'
+const CLASSNAME_PRIMARY = 'btn-primary'
+const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
+const CLASSNAME_SECONDARY = 'btn-secondary'
+const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+
+const getClassName = (type, large = false) => {
+  let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
+
+  if (large) {
+    output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
+  }
+
+  return output
+}
+
+class Button extends Component {
+  render () {
+    const { type, large, className, ...buttonProps } = this.props
+
+    return (
+      h('button', {
+        className: classnames(getClassName(type, large), className),
+        ...buttonProps,
+      }, this.props.children)
+    )
+  }
+}
+
+Button.propTypes = {
+  type: PropTypes.string,
+  large: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.string,
+}
+
+module.exports = Button
+
diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js
new file mode 100644
index 000000000..d1e14e869
--- /dev/null
+++ b/ui/app/components/button/button.stories.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button from './'
+import { text } from '@storybook/addon-knobs/react'
+
+storiesOf('Button', module)
+  .add('primary', () =>
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
+  .add('secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large primary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
diff --git a/ui/app/components/button/index.js b/ui/app/components/button/index.js
new file mode 100644
index 000000000..3dc7d1eea
--- /dev/null
+++ b/ui/app/components/button/index.js
@@ -0,0 +1,2 @@
+const Button = require('./button.component')
+module.exports = Button
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index fda7c3e17..c6957d2aa 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -6,7 +6,7 @@ const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
-const Loading = require('./loading')
+const Loading = require('./loading-screen')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 845e4ddc2..df933e363 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -284,8 +284,7 @@ CustomizeGasModal.prototype.render = function () {
         h(GasModalCard, {
           value: convertedGasPrice,
           min: forceGasMin || MIN_GAS_PRICE_GWEI,
-          // max: 1000,
-          step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
+          step: 1,
           onChange: value => this.convertAndSetGasPrice(value),
           title: this.context.t('gasPrice'),
           copy: this.context.t('gasPriceCalculation'),
@@ -294,7 +293,6 @@ CustomizeGasModal.prototype.render = function () {
         h(GasModalCard, {
           value: convertedGasLimit,
           min: 1,
-          // max: 100000,
           step: 1,
           onChange: value => this.convertAndSetGasLimit(value),
           title: this.context.t('gasLimit'),
diff --git a/ui/app/components/export-text-container/export-text-container.component.js b/ui/app/components/export-text-container/export-text-container.component.js
new file mode 100644
index 000000000..c2546fa9b
--- /dev/null
+++ b/ui/app/components/export-text-container/export-text-container.component.js
@@ -0,0 +1,45 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const copyToClipboard = require('copy-to-clipboard')
+const { exportAsFile } = require('../../util')
+
+class ExportTextContainer extends Component {
+  render () {
+    const { text = '', filename = '' } = this.props
+    const { t } = this.context
+
+    return (
+      h('.export-text-container', [
+        h('.export-text-container__text-container', [
+          h('.export-text-container__text', text),
+        ]),
+        h('.export-text-container__buttons-container', [
+          h('.export-text-container__button.export-text-container__button--copy', {
+            onClick: () => copyToClipboard(text),
+          }, [
+            h('img', { src: 'images/copy-to-clipboard.svg' }),
+            h('.export-text-container__button-text', t('copyToClipboard')),
+          ]),
+          h('.export-text-container__button', {
+            onClick: () => exportAsFile(filename, text),
+          }, [
+            h('img', { src: 'images/download.svg' }),
+            h('.export-text-container__button-text', t('saveAsCsvFile')),
+          ]),
+        ]),
+      ])
+    )
+  }
+}
+
+ExportTextContainer.propTypes = {
+  text: PropTypes.string,
+  filename: PropTypes.string,
+}
+
+ExportTextContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = ExportTextContainer
diff --git a/ui/app/components/export-text-container/export-text-container.scss b/ui/app/components/export-text-container/export-text-container.scss
new file mode 100644
index 000000000..975d62f70
--- /dev/null
+++ b/ui/app/components/export-text-container/export-text-container.scss
@@ -0,0 +1,52 @@
+.export-text-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid $alto;
+  border-radius: 4px;
+  font-weight: 400;
+
+  &__text-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 4px;
+    background: $alabaster;
+  }
+
+  &__text {
+    resize: none;
+    border: none;
+    background: $alabaster;
+    font-size: 20px;
+    text-align: center;
+  }
+
+  &__buttons-container {
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid $alto;
+    width: 100%;
+  }
+
+  &__button {
+    padding: 10px;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    color: $curious-blue;
+
+    &--copy {
+      border-right: 1px solid $alto;
+    }
+  }
+
+  &__button-text {
+    padding-left: 10px;
+  }
+}
diff --git a/ui/app/components/export-text-container/index.js b/ui/app/components/export-text-container/index.js
new file mode 100644
index 000000000..b2864a717
--- /dev/null
+++ b/ui/app/components/export-text-container/index.js
@@ -0,0 +1,2 @@
+const ExportTextContainer = require('./export-text-container.component')
+module.exports = ExportTextContainer
diff --git a/ui/app/components/loading-screen/index.js b/ui/app/components/loading-screen/index.js
new file mode 100644
index 000000000..191d953f7
--- /dev/null
+++ b/ui/app/components/loading-screen/index.js
@@ -0,0 +1,2 @@
+const LoadingScreen = require('./loading-screen.component')
+module.exports = LoadingScreen
diff --git a/ui/app/components/loading.js b/ui/app/components/loading-screen/loading-screen.component.js
index b9afc550f..bce2a4aac 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading-screen/loading-screen.component.js
@@ -2,8 +2,9 @@ const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const classnames = require('classnames')
+const Spinner = require('../spinner')
 
-class LoadingIndicator extends Component {
+class LoadingScreen extends Component {
   renderMessage () {
     const { loadingMessage } = this.props
     return loadingMessage && h('span', loadingMessage)
@@ -14,9 +15,9 @@ class LoadingIndicator extends Component {
       h('.loading-overlay', {
         className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
       }, [
-        h('.flex-center.flex-column', [
-          h('img', {
-            src: 'images/loading.svg',
+        h('.loading-overlay__container', [
+          h(Spinner, {
+            color: '#F7C06C',
           }),
 
           this.renderMessage(),
@@ -26,9 +27,9 @@ class LoadingIndicator extends Component {
   }
 }
 
-LoadingIndicator.propTypes = {
+LoadingScreen.propTypes = {
   loadingMessage: PropTypes.string,
   fullScreen: PropTypes.bool,
 }
 
-module.exports = LoadingIndicator
+module.exports = LoadingScreen
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index fafe1c19e..84d8296b0 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Button from './components/button'
 
 export default class PageContainerFooter extends Component {
 
@@ -27,20 +28,24 @@ export default class PageContainerFooter extends Component {
     return (
       <div className="page-container__footer">
 
-        <button
-          className="btn-secondary--lg page-container__footer-button"
+        <Button
+          type="secondary"
+          large={true}
+          className="page-container__footer-button"
           onClick={() => onCancel()}
         >
           { this.context.t('cancel') || cancelText }
-        </button>
+        </Button>
 
-        <button
-          className="btn-primary--lg page-container__footer-button"
+        <Button
+          type="primary"
+          large={true}
+          className="page-container__footer-button"
           disabled={disabled}
           onClick={e => onSubmit(e)}
         >
           { this.context.t('next') || submitText }
-        </button>
+        </Button>
 
       </div>
     )
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 1e7fc3a41..6240499be 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -192,7 +192,7 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address)
   if (symbol && decimals) {
     this.setState({
       customSymbol: symbol,
-      customDecimals: decimals.toString(),
+      customDecimals: decimals,
       autoFilled: true,
     })
   }
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index 946907a47..0a3314b2a 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -105,6 +105,8 @@ class JsonImportSubview extends Component {
     }
 
     this.props.importNewJsonAccount([ fileContents, password ])
+      // JS runtime requires caught rejections but failures are handled by Redux 
+      .catch()
   }
 }
 
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
index c77612ea4..df7ac910a 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -91,5 +91,7 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
   const { importNewAccount, history } = this.props
 
   importNewAccount('Private Key', [ privateKey ])
+    // JS runtime requires caught rejections but failures are handled by Redux 
+    .catch()
     .then(() => history.push(DEFAULT_ROUTE))
 }
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 90b8e1d37..9110f8202 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -21,7 +21,7 @@ const QrView = require('../../components/qr-code')
 
 // Routes
 const {
-  REVEAL_SEED_ROUTE,
+  INITIALIZE_BACKUP_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   NOTICE_ROUTE,
@@ -69,7 +69,7 @@ class Home extends Component {
       log.debug('rendering seed words')
       return h(Redirect, {
         to: {
-          pathname: REVEAL_SEED_ROUTE,
+          pathname: INITIALIZE_BACKUP_PHRASE_ROUTE,
         },
       })
     }
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 247f3c8e2..685c81074 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -2,11 +2,27 @@ 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 classnames = require('classnames')
+
+const { requestRevealSeedWords } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+const ExportTextContainer = require('../../export-text-container')
+
+const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
+const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
 
 class RevealSeedPage extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      screen: PASSWORD_PROMPT_SCREEN,
+      password: '',
+      seedWords: null,
+      error: null,
+    }
+  }
+
   componentDidMount () {
     const passwordBox = document.getElementById('password-box')
     if (passwordBox) {
@@ -14,182 +30,135 @@ class RevealSeedPage extends Component {
     }
   }
 
-  checkConfirmation (event) {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      this.revealSeedWords()
-    }
+  handleSubmit (event) {
+    event.preventDefault()
+    this.setState({ seedWords: null, error: null })
+    this.props.requestRevealSeedWords(this.state.password)
+      .then(seedWords => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }))
+      .catch(error => this.setState({ error: error.message }))
   }
 
-  revealSeedWords () {
-    const password = document.getElementById('password-box').value
-    this.props.requestRevealSeed(password)
-  }
-
-  renderSeed () {
-    const { seedWords, confirmSeedWords, history } = this.props
-
+  renderWarning () {
     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('.page-container__warning-container', [
+        h('img.page-container__warning-icon', {
+          src: 'images/warning.svg',
         }),
-
-        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'),
+        h('.page-container__warning-message', [
+          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
+          h('div', [this.context.t('revealSeedWordsWarning')]),
+        ]),
       ])
     )
   }
 
-  renderConfirmation () {
-    const { history, warning, inProgress } = this.props
+  renderContent () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptContent()
+      : this.renderRevealSeedContent()
+  }
+
+  renderPasswordPromptContent () {
+    const { t } = this.context
 
     return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', {
-        style: { maxWidth: '420px' },
+      h('form', {
+        onSubmit: event => this.handleSubmit(event),
       }, [
-
-        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', {
+        h('label.input-label', {
+          htmlFor: 'password-box',
+        }, t('enterPasswordContinue')),
+        h('.input-group', [
+          h('input.form-control', {
             type: 'password',
+            placeholder: t('password'),
             id: 'password-box',
-            placeholder: 'Enter your password to confirm',
-            onKeyPress: this.checkConfirmation.bind(this),
-            style: {
-              width: 260,
-              marginTop: '12px',
-            },
+            value: this.state.password,
+            onChange: event => this.setState({ password: event.target.value }),
+            className: classnames({ 'form-control--error': this.state.error }),
           }),
+        ]),
+        this.state.error && h('.reveal-seed__error', this.state.error),
+      ])
+    )
+  }
 
-          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'),
+  renderRevealSeedContent () {
+    const { t } = this.context
 
-          ]),
+    return (
+      h('div', [
+        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
+        h(ExportTextContainer, {
+          text: this.state.seedWords,
+          filename: t('metamaskSeedWords'),
+        }),
+      ])
+    )
+  }
 
-          warning && (
-            h('span.error', {
-              style: {
-                margin: '20px',
-              },
-            }, warning.split('-'))
-          ),
-
-          inProgress && (
-            h('span.in-progress-notification', 'Generating Seed...')
-          ),
-        ]),
+  renderFooter () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptFooter()
+      : this.renderRevealSeedFooter()
+  }
+
+  renderPasswordPromptFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('cancel')),
+        h('button.btn-primary--lg.page-container__footer-button', {
+          onClick: event => this.handleSubmit(event),
+          disabled: this.state.password === '',
+        }, this.context.t('next')),
+      ])
+    )
+  }
+
+  renderRevealSeedFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('close')),
       ])
     )
   }
 
   render () {
-    return this.props.seedWords
-      ? this.renderSeed()
-      : this.renderConfirmation()
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
+          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
+        ]),
+        h('.page-container__content', [
+          this.renderWarning(),
+          h('.reveal-seed__content', [
+            this.renderContent(),
+          ]),
+        ]),
+        this.renderFooter(),
+      ])
+    )
   }
 }
 
 RevealSeedPage.propTypes = {
-  requestRevealSeed: PropTypes.func,
-  confirmSeedWords: PropTypes.func,
-  seedWords: PropTypes.string,
-  inProgress: PropTypes.bool,
+  requestRevealSeedWords: PropTypes.func,
   history: PropTypes.object,
-  warning: PropTypes.string,
 }
 
-const mapStateToProps = state => {
-  const { appState: { warning }, metamask: { seedWords } } = state
-
-  return {
-    warning,
-    seedWords,
-  }
+RevealSeedPage.contextTypes = {
+  t: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    requestRevealSeed: password => dispatch(requestRevealSeed(password)),
-    confirmSeedWords: () => dispatch(confirmSeedWords()),
+    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
   }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage)
+module.exports = connect(null, mapDispatchToProps)(RevealSeedPage)
diff --git a/ui/app/components/pages/unlock-page/index.js b/ui/app/components/pages/unlock-page/index.js
new file mode 100644
index 000000000..be80cde4f
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/index.js
@@ -0,0 +1,2 @@
+import UnlockPage from './unlock-page.container'
+module.exports = UnlockPage
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
new file mode 100644
index 000000000..d5e2a3224
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -0,0 +1,181 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from 'material-ui/Button'
+import TextField from '../../text-field'
+
+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 { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes')
+
+class UnlockPage extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      password: '',
+      error: null,
+    }
+
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  componentWillMount () {
+    const { isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  tryUnlockMetamask (password) {
+    const { tryUnlockMetamask, history } = this.props
+    tryUnlockMetamask(password)
+      .then(() => history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => this.setState({ error: message }))
+  }
+
+  handleSubmit (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { password } = this.state
+    const { tryUnlockMetamask, history } = this.props
+
+    if (password === '') {
+      return
+    }
+
+    this.setState({ error: null })
+
+    tryUnlockMetamask(password)
+      .then(() => history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => this.setState({ error: message }))
+  }
+
+  handleInputChange ({ target }) {
+    this.setState({ password: target.value, error: null })
+
+    // tell mascot to look at page action
+    const element = target
+    const boundingRect = element.getBoundingClientRect()
+    const coordinates = getCaretCoordinates(element, element.selectionEnd)
+    this.animationEventEmitter.emit('point', {
+      x: boundingRect.left + coordinates.left - element.scrollLeft,
+      y: boundingRect.top + coordinates.top - element.scrollTop,
+    })
+  }
+
+  renderSubmitButton () {
+    const style = {
+      backgroundColor: '#f7861c',
+      color: 'white',
+      marginTop: '20px',
+      height: '60px',
+      fontWeight: '400',
+      boxShadow: 'none',
+      borderRadius: '4px',
+    }
+
+    return (
+      <Button
+        type="submit"
+        style={style}
+        disabled={!this.state.password}
+        fullWidth
+        variant="raised"
+        size="large"
+        onClick={event => this.handleSubmit(event)}
+        disableRipple
+      >
+        { this.context.t('login') }
+      </Button>
+    )
+  }
+
+  render () {
+    const { error } = this.state
+
+    return (
+      <div className="unlock-page__container">
+        <div className="unlock-page">
+          <div className="unlock-page__mascot-container">
+            <Mascot
+              animationEventEmitter={this.animationEventEmitter}
+              width="120"
+              height="120"
+            />
+          </div>
+          <h1 className="unlock-page__title">
+            { this.context.t('welcomeBack') }
+          </h1>
+          <div>{ this.context.t('unlockMessage') }</div>
+          <form
+            className="unlock-page__form"
+            onSubmit={event => this.handleSubmit(event)}
+          >
+            <TextField
+              id="password"
+              label="Password"
+              type="password"
+              value={this.state.password}
+              onChange={event => this.handleInputChange(event)}
+              error={error}
+              autoFocus
+              autoComplete="current-password"
+              fullWidth
+            />
+          </form>
+          { this.renderSubmitButton() }
+          <div className="unlock-page__links">
+            <div
+              className="unlock-page__link"
+              onClick={() => {
+                this.props.markPasswordForgotten()
+                this.props.history.push(RESTORE_VAULT_ROUTE)
+
+                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+                  global.platform.openExtensionInBrowser()
+                }
+              }}
+            >
+              { this.context.t('restoreFromSeed') }
+            </div>
+            <div
+              className="unlock-page__link unlock-page__link--import"
+              onClick={() => {
+                this.props.markPasswordForgotten()
+                this.props.history.push(RESTORE_VAULT_ROUTE)
+
+                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+                  global.platform.openExtensionInBrowser()
+                }
+              }}
+            >
+              { this.context.t('importUsingSeed') }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+UnlockPage.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,
+}
+
+export default UnlockPage
diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js
new file mode 100644
index 000000000..9788a18ea
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.container.js
@@ -0,0 +1,33 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+
+const {
+  tryUnlockMetamask,
+  forgotPassword,
+  markPasswordForgotten,
+  setNetworkEndpoints,
+} = require('../../../actions')
+
+import UnlockPage from './unlock-page.component'
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked } } = state
+  return {
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    forgotPassword: () => dispatch(forgotPassword()),
+    tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
+    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
+    setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(UnlockPage)
diff --git a/ui/app/components/pages/unlock-page/unlock-page.scss b/ui/app/components/pages/unlock-page/unlock-page.scss
new file mode 100644
index 000000000..3d44bd037
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.scss
@@ -0,0 +1,51 @@
+.unlock-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 357px;
+  padding: 30px;
+  font-weight: 400;
+  color: $silver-chalice;
+
+  &__container {
+    background: $white;
+    display: flex;
+    align-self: stretch;
+    justify-content: center;
+    flex: 1 0 auto;
+  }
+
+  &__mascot-container {
+    margin-top: 24px;
+  }
+
+  &__title {
+    margin-top: 5px;
+    font-size: 2rem;
+    font-weight: 800;
+    color: $tundora;
+  }
+
+  &__form {
+    width: 100%;
+    margin: 56px 0 8px;
+  }
+
+  &__links {
+    margin-top: 25px;
+    width: 100%;
+  }
+
+  &__link {
+    cursor: pointer;
+
+    &--import {
+      color: $ecstasy;
+    }
+
+    &--use-classic {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js
deleted file mode 100644
index 30144b978..000000000
--- a/ui/app/components/pages/unlock.js
+++ /dev/null
@@ -1,194 +0,0 @@
-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/index.js b/ui/app/components/pending-tx/index.js
index 6ee83ba7e..893538bcf 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -8,11 +8,11 @@ const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(abi)
 const inherits = require('util').inherits
 const actions = require('../../actions')
-const util = require('../../util')
+const { getSymbolAndDecimals } = require('../../token-util')
 const ConfirmSendEther = require('./confirm-send-ether')
 const ConfirmSendToken = require('./confirm-send-token')
 const ConfirmDeployContract = require('./confirm-deploy-contract')
-const Loading = require('../loading')
+const Loading = require('../loading-screen')
 
 const TX_TYPES = {
   DEPLOY_CONTRACT: 'deploy_contract',
@@ -26,6 +26,7 @@ function mapStateToProps (state) {
   const {
     conversionRate,
     identities,
+    tokens: existingTokens,
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
@@ -33,6 +34,7 @@ function mapStateToProps (state) {
     conversionRate,
     identities,
     selectedAddress,
+    existingTokens,
   }
 }
 
@@ -66,6 +68,7 @@ PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) {
 }
 
 PendingTx.prototype.setTokenData = async function () {
+  const { existingTokens } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -89,30 +92,15 @@ PendingTx.prototype.setTokenData = async function () {
   }
 
   if (isTokenTransaction) {
-    const token = util.getContractAtAddress(txParams.to)
-    const results = await Promise.all([
-      token.symbol(),
-      token.decimals(),
-    ])
-    const [ symbol, decimals ] = results
-
-    if (symbol[0] && decimals[0]) {
-      this.setState({
-        transactionType: TX_TYPES.SEND_TOKEN,
-        tokenAddress: txParams.to,
-        tokenSymbol: symbol[0],
-        tokenDecimals: decimals[0],
-        isFetching: false,
-      })
-    } else {
-      this.setState({
-        transactionType: TX_TYPES.SEND_TOKEN,
-        tokenAddress: txParams.to,
-        tokenSymbol: null,
-        tokenDecimals: null,
-        isFetching: false,
-      })
-    }
+    const { symbol, decimals } = await getSymbolAndDecimals(txParams.to, existingTokens)
+
+    this.setState({
+      transactionType: TX_TYPES.SEND_TOKEN,
+      tokenAddress: txParams.to,
+      tokenSymbol: symbol,
+      tokenDecimals: decimals,
+      isFetching: false,
+    })
   } else {
     this.setState({
       transactionType: TX_TYPES.SEND_ETHER,
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index a7bd5d7ea..90fb2b66c 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -89,7 +89,6 @@ CurrencyDisplay.prototype.render = function () {
   } = this.props
 
   const valueToRender = this.getValueToRender()
-
   const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
 
   return h('div', {
@@ -97,22 +96,24 @@ CurrencyDisplay.prototype.render = function () {
     style: {
       borderColor: inError ? 'red' : null,
     },
-    onClick: () => this.currencyInput.focus(),
+    onClick: () => this.currencyInput && this.currencyInput.focus(),
   }, [
 
     h('div.currency-display__primary-row', [
 
       h('div.currency-display__input-wrapper', [
 
-        h(CurrencyInput, {
+        h(readOnly ? 'input' : CurrencyInput, {
           className: primaryBalanceClassName,
           value: `${valueToRender}`,
           placeholder: '0',
           readOnly,
-          onInputChange: newValue => {
-            handleChange(this.getAmount(newValue))
-          },
-          inputRef: input => { this.currencyInput = input },
+          ...(!readOnly ? {
+            onInputChange: newValue => {
+              handleChange(this.getAmount(newValue))
+            },
+            inputRef: input => { this.currencyInput = input },
+          } : {}),
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
diff --git a/ui/app/components/send_/send.constants.js b/ui/app/components/send_/send.constants.js
index d047ed704..b59fcaaf0 100644
--- a/ui/app/components/send_/send.constants.js
+++ b/ui/app/components/send_/send.constants.js
@@ -1,8 +1,8 @@
 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_PRICE_DEC = '0'
+const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16)
 const MIN_GAS_LIMIT_DEC = '21000'
 const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
 
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index fd4a80a4a..22ab64426 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -55,6 +55,10 @@ function ShapeshiftForm () {
   }
 }
 
+ShapeshiftForm.prototype.getCoinPair = function () {
+  return `${this.state.depositCoin.toUpperCase()}_ETH`
+}
+
 ShapeshiftForm.prototype.componentWillMount = function () {
   this.props.shapeShiftSubview()
 }
@@ -120,14 +124,12 @@ ShapeshiftForm.prototype.renderMetadata = function (label, value) {
 }
 
 ShapeshiftForm.prototype.renderMarketInfo = function () {
-  const { depositCoin } = this.state
-  const coinPair = `${depositCoin}_eth`
   const { tokenExchangeRates } = this.props
   const {
     limit,
     rate,
     minimum,
-  } = tokenExchangeRates[coinPair] || {}
+  } = tokenExchangeRates[this.getCoinPair()] || {}
 
   return h('div.shapeshift-form__metadata', {}, [
 
@@ -172,10 +174,9 @@ ShapeshiftForm.prototype.renderQrCode = function () {
 
 ShapeshiftForm.prototype.render = function () {
   const { coinOptions, btnClass, warning } = this.props
-  const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
-  const coinPair = `${depositCoin}_eth`
+  const { errorMessage, showQrCode, depositAddress } = this.state
   const { tokenExchangeRates } = this.props
-  const token = tokenExchangeRates[coinPair]
+  const token = tokenExchangeRates[this.getCoinPair()]
 
   return h('div.shapeshift-form-wrapper', [
     showQrCode
diff --git a/ui/app/components/spinner/index.js b/ui/app/components/spinner/index.js
new file mode 100644
index 000000000..9589efcf0
--- /dev/null
+++ b/ui/app/components/spinner/index.js
@@ -0,0 +1,2 @@
+const Spinner = require('./spinner.component')
+module.exports = Spinner
diff --git a/ui/app/components/spinner/spinner.component.js b/ui/app/components/spinner/spinner.component.js
new file mode 100644
index 000000000..b9a2eb52a
--- /dev/null
+++ b/ui/app/components/spinner/spinner.component.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Spinner = ({ className = '', color = '#000000' }) => {
+  return (
+    <div className={`spinner ${className}`}>
+      <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style={{background: 'none'}}>
+        <g transform="rotate(0 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(30 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(60 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(90 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(120 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(150 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(180 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(210 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(240 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(270 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(300 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(330 50 50)">
+          <rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" />
+          </rect>
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+Spinner.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+}
+
+module.exports = Spinner
diff --git a/ui/app/components/text-field/index.js b/ui/app/components/text-field/index.js
new file mode 100644
index 000000000..171caf7a4
--- /dev/null
+++ b/ui/app/components/text-field/index.js
@@ -0,0 +1,2 @@
+import TextField from './text-field.component'
+module.exports = TextField
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
new file mode 100644
index 000000000..4a02f76d8
--- /dev/null
+++ b/ui/app/components/text-field/text-field.component.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+import { default as MaterialTextField } from 'material-ui/TextField'
+
+const styles = {
+  cssLabel: {
+    '&$cssFocused': {
+      color: '#aeaeae',
+    },
+    fontWeight: '400',
+    color: '#aeaeae',
+  },
+  cssFocused: {},
+  cssUnderline: {
+    '&:after': {
+      backgroundColor: '#f7861c',
+    },
+  },
+}
+
+const TextField = props => {
+  const { error, classes, ...textFieldProps } = props
+
+  return (
+    <MaterialTextField
+      error={Boolean(error)}
+      helperText={error}
+      InputLabelProps={{
+        FormLabelClasses: {
+          root: classes.cssLabel,
+          focused: classes.cssFocused,
+        },
+      }}
+      InputProps={{
+        classes: {
+          underline: classes.cssUnderline,
+        },
+      }}
+      {...textFieldProps}
+    />
+  )
+}
+
+TextField.defaultProps = {
+  error: null,
+}
+
+TextField.propTypes = {
+  error: PropTypes.string,
+  classes: PropTypes.object,
+}
+
+export default withStyles(styles)(TextField)
diff --git a/ui/app/components/text-field/text-field.stories.js b/ui/app/components/text-field/text-field.stories.js
new file mode 100644
index 000000000..ee3e5faaf
--- /dev/null
+++ b/ui/app/components/text-field/text-field.stories.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import TextField from './'
+
+storiesOf('TextField', module)
+  .add('text', () =>
+    <TextField
+      label="Text"
+      type="text"
+    />
+  )
+  .add('password', () =>
+    <TextField
+      label="Password"
+      type="password"
+    />
+  )
+  .add('error', () =>
+    <TextField
+      type="text"
+      label="Name"
+      error="Invalid value"
+    />
+  )
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 9e430f87b..3b29dacac 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -102,6 +102,7 @@ WalletView.prototype.render = function () {
     selectedIdentity,
     keyrings,
     showAccountDetailModal,
+    sidebarOpen,
     hideSidebar,
     history,
   } = this.props
@@ -182,7 +183,10 @@ WalletView.prototype.render = function () {
     h(TokenList),
 
     h('button.btn-primary.wallet-view__add-token-button', {
-      onClick: () => history.push(ADD_TOKEN_ROUTE),
+      onClick: () => {
+        history.push(ADD_TOKEN_ROUTE)
+        sidebarOpen && hideSidebar()
+      },
     }, this.context.t('addToken')),
   ])
 }