Fix merge conflicts

8 files changed, 360 insertions, 286 deletions

diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 40cfedafd..782ce79ae 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -23,9 +23,9 @@ const fuse = new Fuse(contractList, {
       { name: 'symbol', weight: 0.5 },
     ],
 })
-// const actions = require('./actions')
 const actions = require('../../actions')
 const ethUtil = require('ethereumjs-util')
+const t = require('../i18n')
 const { tokenInfoGetter } = require('../../token-util')
 const { DEFAULT_ROUTE } = require('../../routes')
 
@@ -53,13 +53,16 @@ function AddTokenScreen () {
     isShowingConfirmation: false,
     customAddress: '',
     customSymbol: '',
-    customDecimals: 0,
+    customDecimals: '',
     searchQuery: '',
-    isCollapsed: true,
     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)
 }
@@ -69,13 +72,17 @@ AddTokenScreen.prototype.componentWillMount = function () {
 }
 
 AddTokenScreen.prototype.toggleToken = function (address, token) {
-  const { selectedTokens, errors } = this.state
-  const { [address]: selectedToken } = selectedTokens
+  const { selectedTokens = {}, errors } = this.state
+  const selectedTokensCopy = { ...selectedTokens }
+
+  if (address in selectedTokensCopy) {
+    delete selectedTokensCopy[address]
+  } else {
+    selectedTokensCopy[address] = token
+  }
+
   this.setState({
-    selectedTokens: {
-      ...selectedTokens,
-      [address]: selectedToken ? null : token,
-    },
+    selectedTokens: selectedTokensCopy,
     errors: {
       ...errors,
       tokenSelector: null,
@@ -104,6 +111,16 @@ AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
   }
 }
 
+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
@@ -123,28 +140,28 @@ AddTokenScreen.prototype.validate = function () {
   if (customAddress) {
     const validAddress = ethUtil.isValidAddress(customAddress)
     if (!validAddress) {
-      errors.customAddress = 'Address is invalid. '
+      errors.customAddress = t('invalidAddress')
     }
 
-    const validDecimals = customDecimals >= 0 && customDecimals < 36
+    const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36
     if (!validDecimals) {
-      errors.customDecimals = 'Decimals must be at least 0, and not over 36.'
+      errors.customDecimals = t('decimalsMustZerotoTen')
     }
 
     const symbolLen = customSymbol.trim().length
     const validSymbol = symbolLen > 0 && symbolLen < 10
     if (!validSymbol) {
-      errors.customSymbol = 'Symbol must be between 0 and 10 characters.'
+      errors.customSymbol = t('symbolBetweenZeroTen')
     }
 
     const ownAddress = identitiesList.includes(standardAddress)
     if (ownAddress) {
-      errors.customAddress = 'Personal address detected. Input the token contract address.'
+      errors.customAddress = t('personalAddressDetected')
     }
 
     const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
     if (tokenAlreadyAdded) {
-      errors.customAddress = 'Token has already been added.'
+      errors.customAddress = t('tokenAlreadyAdded')
     }
   } else if (
     Object.entries(selectedTokens)
@@ -152,7 +169,7 @@ AddTokenScreen.prototype.validate = function () {
         isEmpty && !isSelected
       ), true)
   ) {
-    errors.tokenSelector = 'Must select at least 1 token.'
+    errors.tokenSelector = t('mustSelectOne')
   }
 
   return {
@@ -167,21 +184,22 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address)
     this.setState({
       customSymbol: symbol,
       customDecimals: decimals.toString(),
+      autoFilled: true,
     })
   }
 }
 
 AddTokenScreen.prototype.renderCustomForm = function () {
-  const { customAddress, customSymbol, customDecimals, errors } = this.state
+  const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state
 
-  return !this.state.isCollapsed && (
+  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', 'Token Address'),
+        h('div.add-token__add-custom-label', t('tokenAddress')),
         h('input.add-token__add-custom-input', {
           type: 'text',
           onChange: this.tokenAddressDidChange,
@@ -194,11 +212,12 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customSymbol,
         }),
       }, [
-        h('div.add-token__add-custom-label', 'Token Symbol'),
+        h('div.add-token__add-custom-label', t('tokenSymbol')),
         h('input.add-token__add-custom-input', {
           type: 'text',
+          onChange: this.tokenSymbolDidChange,
           value: customSymbol,
-          disabled: true,
+          disabled: autoFilled,
         }),
         h('div.add-token__add-custom-error-message', errors.customSymbol),
       ]),
@@ -207,11 +226,12 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customDecimals,
         }),
       }, [
-        h('div.add-token__add-custom-label', 'Decimals of Precision'),
+        h('div.add-token__add-custom-label', t('decimal')),
         h('input.add-token__add-custom-input', {
           type: 'number',
+          onChange: this.tokenDecimalsDidChange,
           value: customDecimals,
-          disabled: true,
+          disabled: autoFilled,
         }),
         h('div.add-token__add-custom-error-message', errors.customDecimals),
       ]),
@@ -227,33 +247,36 @@ AddTokenScreen.prototype.renderTokenList = function () {
   })
   const results = [...addressSearchResult, ...fuseSearchResult]
 
-  return 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: `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')
-          // ),
-        ])
-      )
-    })
+  return h('div', [
+      results.length > 0 && h('div.add-token__token-icons-title', 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 () {
@@ -280,11 +303,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
     h('div.add-token', [
       h('div.add-token__wrapper', [
         h('div.add-token__title-container.add-token__confirmation-title', [
-          h('div.add-token__title', 'Add Token'),
-          h('div.add-token__description', 'Would you like to add these tokens?'),
+          h('div.add-token__description', t('likeToAddTokens')),
         ]),
         h('div.add-token__content-container.add-token__confirmation-content', [
-          h('div.add-token__description.add-token__confirmation-description', 'Your balances'),
+          h('div.add-token__description.add-token__confirmation-description', t('balances')),
           h('div.add-token__confirmation-token-list',
             Object.entries(tokens)
               .map(([ address, token ]) => (
@@ -301,63 +323,97 @@ AddTokenScreen.prototype.renderConfirmation = function () {
         ]),
       ]),
       h('div.add-token__buttons', [
-        h('button.btn-cancel.add-token__button', {
+        h('button.btn-secondary--lg.add-token__cancel-button', {
           onClick: () => this.setState({ isShowingConfirmation: false }),
-        }, 'Back'),
-        h('button.btn-clear.add-token__button', {
+        }, t('back')),
+        h('button.btn-primary--lg', {
           onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
-        }, 'Add Tokens'),
+        }, t('addTokens')),
       ]),
     ])
   )
 }
 
-AddTokenScreen.prototype.render = function () {
-  const { isCollapsed, errors, isShowingConfirmation } = this.state
-  const { history } = this.props
+AddTokenScreen.prototype.displayTab = function (selectedTab) {
+  this.setState({ displayedTab: selectedTab })
+}
 
-  return isShowingConfirmation
-    ? this.renderConfirmation()
-    : (
-    h('div.add-token', [
-      h('div.add-token__wrapper', [
-        h('div.add-token__title-container', [
-          h('div.add-token__title', 'Add Token'),
-          h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'),
-          h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'),
-        ]),
-        h('div.add-token__content-container', [
-          h('div.add-token__input-container', [
-            h('input.add-token__input', {
-              type: 'text',
-              placeholder: 'Search',
-              onChange: e => this.setState({ searchQuery: e.target.value }),
-            }),
-            h('div.add-token__search-input-error-message', errors.tokenSelector),
-          ]),
-          h(
-            'div.add-token__token-icons-container',
-            this.renderTokenList(),
-          ),
+AddTokenScreen.prototype.renderTabs = function () {
+  const { displayedTab, errors } = this.state
+
+  return displayedTab === 'CUSTOM_TOKEN'
+    ? this.renderCustomForm()
+    : h('div', [
+    h('div.add-token__wrapper', [
+      h('div.add-token__content-container', [
+        h('div.add-token__info-box', [
+          h('div.add-token__info-box__close'),
+          h('div.add-token__info-box__title', t('whatsThis')),
+          h('div.add-token__info-box__copy', t('keepTrackTokens')),
+          h('div.add-token__info-box__copy--blue', t('learnMore')),
         ]),
-        h('div.add-token__footers', [
-          h('div.add-token__add-custom', {
-            onClick: () => this.setState({ isCollapsed: !isCollapsed }),
-          }, [
-            'Add custom token',
-            h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`),
-          ]),
-          this.renderCustomForm(),
+        h('div.add-token__input-container', [
+          h('input.add-token__input', {
+            type: 'text',
+            placeholder: t('searchTokens'),
+            onChange: e => this.setState({ searchQuery: e.target.value }),
+          }),
+          h('div.add-token__search-input-error-message', errors.tokenSelector),
         ]),
+        this.renderTokenList(),
       ]),
-      h('div.add-token__buttons', [
-        h('button.btn-cancel.add-token__button', {
-          onClick: () => history.goBack(),
-        }, 'Cancel'),
-        h('button.btn-clear.add-token__button', {
-          onClick: this.onNext,
-        }, 'Next'),
+    ]),
+  ])
+}
+
+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.goBack(),
+      }, [
+        h('i.fa.fa-angle-left.fa-lg'),
+        h('span', t('cancel')),
       ]),
-    ])
-  )
+      h('div.add-token__header__title', t('addTokens')),
+      !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 cursor-pointer': displayedTab !== 'SEARCH',
+          }),
+          onClick: () => this.displayTab('SEARCH'),
+        }, 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 cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
+          }),
+          onClick: () => this.displayTab('CUSTOM_TOKEN'),
+        }, t('customToken')),
+
+      ]),
+    ]),
+//
+    isShowingConfirmation
+      ? this.renderConfirmation()
+      : this.renderTabs(),
+
+    !isShowingConfirmation && h('div.add-token__buttons', [
+      h('button.btn-secondary--lg.add-token__cancel-button', {
+        onClick: history.goBack(),
+      }, t('cancel')),
+      h('button.btn-primary--lg.add-token__confirm-button', {
+        onClick: this.onNext,
+      }, t('next')),
+    ]),
+  ])
 }
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index 71eb9ae23..fc9031a65 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -2,6 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const t = require('../../../i18n')
 import Select from 'react-select'
 
 // Subviews
@@ -9,8 +10,8 @@ const JsonImportView = require('./json.js')
 const PrivateKeyImportView = require('./private-key.js')
 
 const menuItems = [
-  'Private Key',
-  'JSON File',
+  t('privateKey'),
+  t('jsonFile'),
 ]
 
 module.exports = connect(mapStateToProps)(AccountImportSubview)
@@ -35,9 +36,24 @@ AccountImportSubview.prototype.render = function () {
   return (
     h('div.new-account-import-form', [
 
+      h('.new-account-import-disclaimer', [
+        h('span', t('importAccountMsg')),
+        h('span', {
+          style: {
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+            })
+          },
+        }, t('here')),
+      ]),
+
       h('div.new-account-import-form__select-section', [
 
-        h('div.new-account-import-form__select-label', 'Select Type'),
+        h('div.new-account-import-form__select-label', t('selectType')),
 
         h(Select, {
           className: 'new-account-import-form__select',
@@ -70,9 +86,9 @@ AccountImportSubview.prototype.renderImportView = function () {
   const current = type || menuItems[0]
 
   switch (current) {
-    case 'Private Key':
+    case t('privateKey'):
       return h(PrivateKeyImportView)
-    case 'JSON File':
+    case 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
index 703dbc1f4..ef056b1b1 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -1,112 +1,137 @@
-const inherits = require('util').inherits
 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')
 const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
+const t = require('../../../i18n')
 const { DEFAULT_ROUTE } = require('../../../../routes')
-
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps)
-)(JsonImportSubview)
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
 
-function mapStateToProps (state) {
-  return {
-    error: state.appState.warning,
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
   }
-}
 
-inherits(JsonImportSubview, Component)
-function JsonImportSubview () {
-  Component.call(this)
-}
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', t('usedByClients')),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, 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: 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),
+          }, [
+            t('cancel'),
+          ]),
+
+          h('button.btn-primary.new-account-create-form__button', {
+            onClick: () => this.createNewKeychain(),
+          }, [
+            t('import'),
+          ]),
 
-JsonImportSubview.prototype.render = function () {
-  const { error } = this.props
-
-  return (
-    h('div.new-account-import-form__json', [
-
-      h('p', 'Used by a variety of different clients'),
-      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
-      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: 'Enter password',
-        id: 'json-password-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-      }),
-
-      h('div.new-account-create-form__buttons', {}, [
-
-        h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, [
-          'CANCEL',
         ]),
 
-        h('button.new-account-create-form__button-create', {
-          onClick: () => this.createNewKeychain.bind(this),
-        }, [
-          'IMPORT',
-        ]),
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
 
-      ]),
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
 
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
 
-JsonImportSubview.prototype.onLoad = function (event, file) {
-  this.setState({file: file, fileContents: event.target.result})
-}
+  createNewKeychain () {
+    const state = this.state
 
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
-  }
-}
+    if (!state) {
+      const message = t('validFileImport')
+      return this.props.displayWarning(message)
+    }
 
-JsonImportSubview.prototype.createNewKeychain = function () {
-  const state = this.state
+    const { fileContents } = state
 
-  if (!state) {
-    const message = 'You must select a valid file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
+    if (!fileContents) {
+      const message = t('needImportFile')
+      return this.props.displayWarning(message)
+    }
 
-  const { fileContents } = state
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
 
-  if (!fileContents) {
-    const message = 'You must select a file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
+    if (!password) {
+      const message = t('needImportPassword')
+      return this.props.displayWarning(message)
+    }
+
+    this.props.importNewJsonAccount([ fileContents, password ])
   }
+}
 
-  const passwordInput = document.getElementById('json-password-box')
-  const password = passwordInput.value
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  importNewJsonAccount: PropTypes.func,
+  history: PropTypes.object,
+}
 
-  if (!password) {
-    const message = 'You must enter a password for the selected file.'
-    return this.props.dispatch(actions.displayWarning(message))
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
   }
+}
 
-  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+  }
 }
+
+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
index fb10bdb48..f48feeb0e 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
@@ -6,6 +6,7 @@ const { compose } = require('recompose')
 const { connect } = require('react-redux')
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+const t = require('../../../i18n')
 
 module.exports = compose(
   withRouter,
@@ -38,9 +39,9 @@ PrivateKeyImportView.prototype.render = function () {
   return (
     h('div.new-account-import-form__private-key', [
 
-      h('div.new-account-import-form__private-key-password-container', [
+      h('span.new-account-create-form__instruction', t('pastePrivateKey')),
 
-        h('span.new-account-import-form__instruction', 'Paste your private key string here:'),
+      h('div.new-account-import-form__private-key-password-container', [
 
         h('input.new-account-import-form__input-password', {
           type: 'password',
@@ -52,16 +53,16 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.new-account-create-form__button-cancel', {
+        h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
-          'CANCEL',
+          t('cancel'),
         ]),
 
-        h('button.new-account-create-form__button-create', {
+        h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.createNewKeychain(),
         }, [
-          'IMPORT',
+          t('import'),
         ]),
 
       ]),
diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js
index b4a7c0afa..9ffc669a2 100644
--- a/ui/app/components/pages/create-account/import-account/seed.js
+++ b/ui/app/components/pages/create-account/import-account/seed.js
@@ -2,6 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const t = require('../../../i18n')
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 
@@ -20,11 +21,10 @@ SeedImportSubview.prototype.render = function () {
       style: {
       },
     }, [
-      `Paste your seed phrase here!`,
+      t('pasteSeed'),
       h('textarea'),
       h('br'),
-      h('button', 'Submit'),
+      h('button', t('submit')),
     ])
   )
 }
-
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index fbd456a75..889ae9206 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+const t = require('../../../i18n')
 
 class NewAccountCreateForm extends Component {
   constructor (props) {
@@ -14,7 +15,7 @@ class NewAccountCreateForm extends Component {
 
     this.state = {
       newAccountName: '',
-      defaultAccountName: `Account ${newAccountNumber}`,
+      defaultAccountName: t('newAccountNumberName', [newAccountNumber]),
     }
   }
 
@@ -25,7 +26,7 @@ class NewAccountCreateForm extends Component {
     return h('div.new-account-create-form', [
 
       h('div.new-account-create-form__input-label', {}, [
-        'Account Name',
+        t('accountName'),
       ]),
 
       h('div.new-account-create-form__input-wrapper', {}, [
@@ -38,19 +39,19 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.new-account-create-form__button-cancel', {
+        h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => history.push(DEFAULT_ROUTE),
         }, [
-          'CANCEL',
+          t('cancel'),
         ]),
 
-        h('button.new-account-create-form__button-create', {
+        h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
           },
         }, [
-          'CREATE',
+          t('create'),
         ]),
 
       ]),
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index 5506df1ae..6ce0556db 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -12,6 +12,7 @@ const SimpleDropdown = require('../../dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
 const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
+const t = require('../i18n')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -41,7 +42,7 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', 'Use Blockies Identicon'),
+        h('span', t('blockiesIdenticon')),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
@@ -61,13 +62,13 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', 'Current Conversion'),
+        h('span', t('currentConversion')),
         h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h(SimpleDropdown, {
-            placeholder: 'Select Currency',
+            placeholder: t('selectCurrency'),
             options: getInfuraCurrencyOptions(),
             selectedOption: currentCurrency,
             onSelect: newCurrency => setCurrentCurrency(newCurrency),
@@ -84,31 +85,31 @@ class Settings extends Component {
     switch (provider.type) {
 
       case 'mainnet':
-        title = 'Current Network'
-        value = 'Main Ethereum Network'
+        title = t('currentNetwork')
+        value = t('mainnet')
         color = '#038789'
         break
 
       case 'ropsten':
-        title = 'Current Network'
-        value = 'Ropsten Test Network'
+        title = t('currentNetwork')
+        value = t('ropsten')
         color = '#e91550'
         break
 
       case 'kovan':
-        title = 'Current Network'
-        value = 'Kovan Test Network'
+        title = t('currentNetwork')
+        value = t('kovan')
         color = '#690496'
         break
 
       case 'rinkeby':
-        title = 'Current Network'
-        value = 'Rinkeby Test Network'
+        title = t('currentNetwork')
+        value = t('rinkeby')
         color = '#ebb33f'
         break
 
       default:
-        title = 'Current RPC'
+        title = t('currentRpc')
         value = provider.rpcTarget
     }
 
@@ -129,12 +130,12 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('span', 'New RPC URL'),
+          h('span', t('newRPC')),
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('input.settings__input', {
-              placeholder: 'New RPC URL',
+              placeholder: t('newRPC'),
               onChange: event => this.setState({ newRpc: event.target.value }),
               onKeyPress: event => {
                 if (event.key === 'Enter') {
@@ -147,7 +148,7 @@ class Settings extends Component {
                 event.preventDefault()
                 this.validateRpc(this.state.newRpc)
               },
-            }, 'Save'),
+            }, t('save')),
           ]),
         ]),
       ])
@@ -163,9 +164,9 @@ class Settings extends Component {
       const appendedRpc = `http://${newRpc}`
 
       if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')
+        displayWarning(t('uriErrorMsg'))
       } else {
-        displayWarning('Invalid RPC URI')
+        displayWarning(t('invalidRPC'))
       }
     }
   }
@@ -174,19 +175,25 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('div', 'State Logs'),
+          h('div', t('stateLogs')),
           h(
             'div.settings__content-description',
-            'State logs contain your public account addresses and sent transactions.'
+            t('stateLogsDescription')
           ),
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button', {
+            h('button.btn-primary--lg.settings__button', {
               onClick (event) {
-                exportAsFile('MetaMask State Logs', window.logState())
+                window.logStateString((err, result) => {
+                  if (err) {
+                    this.state.dispatch(actions.displayWarning(t('stateLogError')))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
               },
-            }, 'Download State Logs'),
+            }, t('downloadStateLogs')),
           ]),
         ]),
       ])
@@ -198,12 +205,12 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', 'Reveal Seed Words'),
+        h('div.settings__content-item', t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button.settings__clear-button--red', {
+            h('button.btn-primary--lg.settings__button--red', {
               onClick: () => history.push(REVEAL_SEED_ROUTE),
-            }, 'Reveal Seed Words'),
+            }, t('revealSeedWords')),
           ]),
         ]),
       ])
@@ -215,15 +222,15 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', 'Use old UI'),
+        h('div.settings__content-item', t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button.settings__clear-button--orange', {
+            h('button.btn-primary--lg.settings__button--orange', {
               onClick (event) {
                 event.preventDefault()
                 setFeatureFlagToBeta()
               },
-            }, 'Use old UI'),
+            }, t('useOldUI')),
           ]),
         ]),
       ])
@@ -242,6 +249,7 @@ class Settings extends Component {
         this.renderStateLogs(),
         this.renderSeedWords(),
         !isMascara && this.renderOldUI(),
+        this.renderResetAccount(),
         this.renderBlockieOptIn(),
       ])
     )
@@ -256,6 +264,7 @@ Settings.propTypes = {
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
   setFeatureFlagToBeta: PropTypes.func,
+  showResetAccountConfirmationModal: PropTypes.func,
   warning: PropTypes.string,
   history: PropTypes.object,
   isMascara: PropTypes.bool,
@@ -280,6 +289,9 @@ const mapDispatchToProps = dispatch => {
       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' }))
+    },
   }
 }
 
diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js
index 0c9f4a091..2e7f3ea20 100644
--- a/ui/app/components/pages/signature-request.js
+++ b/ui/app/components/pages/signature-request.js
@@ -8,9 +8,8 @@ const classnames = require('classnames')
 
 const AccountDropdownMini = require('../dropdowns/account-dropdown-mini')
 
-const actions = require('../../actions')
+const t = require('../../i18n')
 const { conversionUtil } = require('../../conversion-util')
-const txHelper = require('../../../lib/tx-helper')
 const { DEFAULT_ROUTE } = require('../../routes')
 
 const {
@@ -48,7 +47,7 @@ class SignatureRequest extends Component {
 
       h('div.request-signature__header-background'),
 
-      h('div.request-signature__header__text', 'Signature Request'),
+      h('div.request-signature__header__text', t('sigRequest')),
 
       h('div.request-signature__header__tip-container', [
         h('div.request-signature__header__tip'),
@@ -67,7 +66,7 @@ class SignatureRequest extends Component {
 
     return h('div.request-signature__account', [
 
-      h('div.request-signature__account-text', ['Account:']),
+      h('div.request-signature__account-text', [t('account') + ':']),
 
       h(AccountDropdownMini, {
         selectedAccount,
@@ -94,7 +93,7 @@ class SignatureRequest extends Component {
 
     return h('div.request-signature__balance', [
 
-      h('div.request-signature__balance-text', ['Balance:']),
+      h('div.request-signature__balance-text', [t('balance')]),
 
       h('div.request-signature__balance-value', `${balanceInEther} ETH`),
 
@@ -128,7 +127,7 @@ class SignatureRequest extends Component {
     return h('div.request-signature__request-info', [
 
       h('div.request-signature__headline', [
-        `Your signature is being requested`,
+        t('yourSigRequested'),
       ]),
 
     ])
@@ -145,23 +144,19 @@ class SignatureRequest extends Component {
   }
 
   renderBody () {
-    let rows = []
-    let notice = 'You are signing:'
+    let rows
+    let notice = t('youSign') + ':'
 
-    const { txData = {} } = this.props
-    const { type, msgParams = {} } = txData
-    const { data } = msgParams
+    const { txData } = this.props
+    const { type, msgParams: { data } } = txData
 
     if (type === 'personal_sign') {
-      rows = [{ name: 'Message', value: this.msgHexToText(data) }]
+      rows = [{ name: t('message'), value: this.msgHexToText(data) }]
     } else if (type === 'eth_signTypedData') {
       rows = data
     } else if (type === 'eth_sign') {
-      rows = [{ name: 'Message', value: data }]
-      notice = `Signing this message can have
-      dangerous side effects. Only sign messages from
-      sites you fully trust with your entire account.
-      This dangerous method will be removed in a future version. `
+      rows = [{ name: t('message'), value: data }]
+      notice = t('signNotice')
     }
 
     return h('div.request-signature__body', {}, [
@@ -227,16 +222,16 @@ class SignatureRequest extends Component {
     }
 
     return h('div.request-signature__footer', [
-      h('button.request-signature__footer__cancel-button', {
+      h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
         onClick: () => {
           cancel().then(() => history.push(DEFAULT_ROUTE))
         },
-      }, 'CANCEL'),
-      h('button.request-signature__footer__sign-button', {
+      }, t('cancel')),
+      h('button.btn-primary--lg', {
         onClick: () => {
           sign().then(() => history.push(DEFAULT_ROUTE))
         },
-      }, 'SIGN'),
+      }, t('sign')),
     ])
   }
 
@@ -275,47 +270,15 @@ SignatureRequest.propTypes = {
 }
 
 const mapStateToProps = state => {
-  const { metamask } = state
-  const {
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    network,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-  } = metamask
-  const unconfTxList = txHelper(
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    network
-  ) || []
-
   return {
     balance: getSelectedAccount(state).balance,
     selectedAccount: getCurrentAccountWithSendEtherInfo(state),
     selectedAddress: getSelectedAddress(state),
+    requester: null,
+    requesterAddress: null,
     accounts: accountsWithSendEtherInfoSelector(state),
     conversionRate: conversionRateSelector(state),
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    txData: unconfTxList[0] || {},
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    signPersonalMessage: params => dispatch(actions.signPersonalMsg(params)),
-    cancelPersonalMessage: params => dispatch(actions.cancelPersonalMsg(params)),
-    signTypedMessage: params => dispatch(actions.signTypedMsg(params)),
-    cancelTypedMessage: params => dispatch(actions.cancelTypedMsg(params)),
-    signMessage: params => dispatch(actions.signMsg(params)),
-    cancelMessage: params => dispatch(actions.cancelMsg(params)),
   }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
+module.exports = connect(mapStateToProps)(SignatureRequest)