Fix i18n merge conflicts

8 files changed, 153 insertions, 115 deletions

diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 3b7a65b21..b33373c19 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const classnames = require('classnames')
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const R = require('ramda')
 const Fuse = require('fuse.js')
 const contractMap = require('eth-contract-metadata')
@@ -25,7 +25,6 @@ const fuse = new Fuse(contractList, {
 })
 const actions = require('../../actions')
 const ethUtil = require('ethereumjs-util')
-const t = require('../../../i18n')
 const { tokenInfoGetter } = require('../../token-util')
 const { DEFAULT_ROUTE } = require('../../routes')
 
@@ -140,28 +139,31 @@ AddTokenScreen.prototype.validate = function () {
   if (customAddress) {
     const validAddress = ethUtil.isValidAddress(customAddress)
     if (!validAddress) {
-      errors.customAddress = t('invalidAddress')
+      errors.customAddress = this.props.t('invalidAddress')
     }
 
-    const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36
+    const validDecimals = customDecimals !== null
+      && customDecimals !== ''
+      && customDecimals >= 0
+      && customDecimals < 36
     if (!validDecimals) {
-      errors.customDecimals = t('decimalsMustZerotoTen')
+      errors.customDecimals = this.props.t('decimalsMustZerotoTen')
     }
 
     const symbolLen = customSymbol.trim().length
     const validSymbol = symbolLen > 0 && symbolLen < 10
     if (!validSymbol) {
-      errors.customSymbol = t('symbolBetweenZeroTen')
+      errors.customSymbol = this.props.t('symbolBetweenZeroTen')
     }
 
     const ownAddress = identitiesList.includes(standardAddress)
     if (ownAddress) {
-      errors.customAddress = t('personalAddressDetected')
+      errors.customAddress = this.props.t('personalAddressDetected')
     }
 
     const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
     if (tokenAlreadyAdded) {
-      errors.customAddress = t('tokenAlreadyAdded')
+      errors.customAddress = this.props.t('tokenAlreadyAdded')
     }
   } else if (
     Object.entries(selectedTokens)
@@ -169,7 +171,7 @@ AddTokenScreen.prototype.validate = function () {
         isEmpty && !isSelected
       ), true)
   ) {
-    errors.tokenSelector = t('mustSelectOne')
+    errors.tokenSelector = this.props.t('mustSelectOne')
   }
 
   return {
@@ -199,7 +201,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customAddress,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('tokenAddress')),
+        h('div.add-token__add-custom-label', this.props.t('tokenAddress')),
         h('input.add-token__add-custom-input', {
           type: 'text',
           onChange: this.tokenAddressDidChange,
@@ -212,7 +214,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customSymbol,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('tokenSymbol')),
+        h('div.add-token__add-custom-label', this.props.t('tokenSymbol')),
         h('input.add-token__add-custom-input', {
           type: 'text',
           onChange: this.tokenSymbolDidChange,
@@ -226,7 +228,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customDecimals,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('decimal')),
+        h('div.add-token__add-custom-label', this.props.t('decimal')),
         h('input.add-token__add-custom-input', {
           type: 'number',
           onChange: this.tokenDecimalsDidChange,
@@ -248,7 +250,7 @@ AddTokenScreen.prototype.renderTokenList = function () {
   const results = [...addressSearchResult, ...fuseSearchResult]
 
   return h('div', [
-      results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')),
+      results.length > 0 && h('div.add-token__token-icons-title', this.props.t('popularTokens')),
       h('div.add-token__token-icons-container', Array(6).fill(undefined)
         .map((_, i) => {
           const { logo, symbol, name, address } = results[i] || {}
@@ -303,10 +305,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__description', t('likeToAddTokens')),
+          h('div.add-token__description', this.props.t('likeToAddTokens')),
         ]),
         h('div.add-token__content-container.add-token__confirmation-content', [
-          h('div.add-token__description.add-token__confirmation-description', t('balances')),
+          h('div.add-token__description.add-token__confirmation-description', this.props.t('balances')),
           h('div.add-token__confirmation-token-list',
             Object.entries(tokens)
               .map(([ address, token ]) => (
@@ -325,10 +327,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
       h('div.add-token__buttons', [
         h('button.btn-secondary--lg.add-token__cancel-button', {
           onClick: () => this.setState({ isShowingConfirmation: false }),
-        }, t('back')),
+        }, this.props.t('back')),
         h('button.btn-primary--lg', {
           onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
-        }, t('addTokens')),
+        }, this.props.t('addTokens')),
       ]),
     ])
   )
@@ -348,14 +350,14 @@ AddTokenScreen.prototype.renderTabs = function () {
       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__info-box__title', this.props.t('whatsThis')),
+          h('div.add-token__info-box__copy', this.props.t('keepTrackTokens')),
+          h('div.add-token__info-box__copy--blue', this.props.t('learnMore')),
         ]),
         h('div.add-token__input-container', [
           h('input.add-token__input', {
             type: 'text',
-            placeholder: t('searchTokens'),
+            placeholder: this.props.t('searchTokens'),
             onChange: e => this.setState({ searchQuery: e.target.value }),
           }),
           h('div.add-token__search-input-error-message', errors.tokenSelector),
@@ -379,9 +381,9 @@ AddTokenScreen.prototype.render = function () {
         onClick: () => history.goBack(),
       }, [
         h('i.fa.fa-angle-left.fa-lg'),
-        h('span', t('cancel')),
+        h('span', this.props.t('cancel')),
       ]),
-      h('div.add-token__header__title', t('addTokens')),
+      h('div.add-token__header__title', this.props.t('addTokens')),
       !isShowingConfirmation && h('div.add-token__header__tabs', [
 
         h('div.add-token__header__tabs__tab', {
@@ -390,7 +392,7 @@ AddTokenScreen.prototype.render = function () {
             'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH',
           }),
           onClick: () => this.displayTab('SEARCH'),
-        }, t('search')),
+        }, this.props.t('search')),
 
         h('div.add-token__header__tabs__tab', {
           className: classnames('add-token__header__tabs__tab', {
@@ -398,11 +400,11 @@ AddTokenScreen.prototype.render = function () {
             'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
           }),
           onClick: () => this.displayTab('CUSTOM_TOKEN'),
-        }, t('customToken')),
+        }, this.props.t('customToken')),
 
       ]),
     ]),
-//
+
     isShowingConfirmation
       ? this.renderConfirmation()
       : this.renderTabs(),
@@ -410,10 +412,10 @@ AddTokenScreen.prototype.render = function () {
     !isShowingConfirmation && h('div.add-token__buttons', [
       h('button.btn-secondary--lg.add-token__cancel-button', {
         onClick: () => history.goBack(),
-      }, t('cancel')),
+      }, this.props.t('cancel')),
       h('button.btn-primary--lg.add-token__confirm-button', {
         onClick: this.onNext,
-      }, t('next')),
+      }, this.props.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 8031ea36d..26353b670 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -1,43 +1,38 @@
 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')
+const connect = require('../../../../metamask-connect')
 import Select from 'react-select'
 
 // Subviews
 const JsonImportView = require('./json.js')
 const PrivateKeyImportView = require('./private-key.js')
 
-const menuItems = [
-  t('privateKey'),
-  t('jsonFile'),
-]
 
-module.exports = connect(mapStateToProps)(AccountImportSubview)
-
-function mapStateToProps (state) {
-  return {
-    menuItems,
-  }
-}
+module.exports = connect()(AccountImportSubview)
 
 inherits(AccountImportSubview, Component)
 function AccountImportSubview () {
   Component.call(this)
 }
 
+AccountImportSubview.prototype.getMenuItemTexts = function () {
+  return [
+    this.props.t('privateKey'),
+    this.props.t('jsonFile'),
+  ]
+}
+
 AccountImportSubview.prototype.render = function () {
-  const props = this.props
   const state = this.state || {}
-  const { menuItems } = props
+  const menuItems = this.getMenuItemTexts()
   const { type } = state
 
   return (
     h('div.new-account-import-form', [
 
       h('.new-account-import-disclaimer', [
-        h('span', t('importAccountMsg')),
+        h('span', this.props.t('importAccountMsg')),
         h('span', {
           style: {
             cursor: 'pointer',
@@ -48,12 +43,12 @@ AccountImportSubview.prototype.render = function () {
               url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
             })
           },
-        }, t('here')),
+        }, this.props.t('here')),
       ]),
 
       h('div.new-account-import-form__select-section', [
 
-        h('div.new-account-import-form__select-label', t('selectType')),
+        h('div.new-account-import-form__select-label', this.props.t('selectType')),
 
         h(Select, {
           className: 'new-account-import-form__select',
@@ -79,16 +74,15 @@ AccountImportSubview.prototype.render = function () {
 }
 
 AccountImportSubview.prototype.renderImportView = function () {
-  const props = this.props
   const state = this.state || {}
   const { type } = state
-  const { menuItems } = props
+  const menuItems = this.getMenuItemTexts()
   const current = type || menuItems[0]
 
   switch (current) {
-    case t('privateKey'):
+    case this.props.t('privateKey'):
       return h(PrivateKeyImportView)
-    case t('jsonFile'):
+    case this.props.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 554a67df4..2e858a8f0 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -3,10 +3,9 @@ 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 connect = require('../../../../metamask-connect')
 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'
 
@@ -26,11 +25,11 @@ class JsonImportSubview extends Component {
     return (
       h('div.new-account-import-form__json', [
 
-        h('p', t('usedByClients')),
+        h('p', this.props.t('usedByClients')),
         h('a.warning', {
           href: HELP_LINK,
           target: '_blank',
-        }, t('fileImportFail')),
+        }, this.props.t('fileImportFail')),
 
         h(FileInput, {
           readAs: 'text',
@@ -45,7 +44,7 @@ class JsonImportSubview extends Component {
 
         h('input.new-account-import-form__input-password', {
           type: 'password',
-          placeholder: t('enterPassword'),
+          placeholder: this.props.t('enterPassword'),
           id: 'json-password-box',
           onKeyPress: this.createKeyringOnEnter.bind(this),
         }),
@@ -55,13 +54,13 @@ class JsonImportSubview extends Component {
           h('button.btn-secondary.new-account-create-form__button', {
             onClick: () => this.props.history.push(DEFAULT_ROUTE),
           }, [
-            t('cancel'),
+            this.props.t('cancel'),
           ]),
 
           h('button.btn-primary.new-account-create-form__button', {
             onClick: () => this.createNewKeychain(),
           }, [
-            t('import'),
+            this.props.t('import'),
           ]),
 
         ]),
@@ -86,14 +85,14 @@ class JsonImportSubview extends Component {
     const state = this.state
 
     if (!state) {
-      const message = t('validFileImport')
+      const message = this.props.t('validFileImport')
       return this.props.displayWarning(message)
     }
 
     const { fileContents } = state
 
     if (!fileContents) {
-      const message = t('needImportFile')
+      const message = this.props.t('needImportFile')
       return this.props.displayWarning(message)
     }
 
@@ -101,7 +100,7 @@ class JsonImportSubview extends Component {
     const password = passwordInput.value
 
     if (!password) {
-      const message = t('needImportPassword')
+      const message = this.props.t('needImportPassword')
       return this.props.displayWarning(message)
     }
 
@@ -115,6 +114,7 @@ JsonImportSubview.propTypes = {
   displayWarning: PropTypes.func,
   importNewJsonAccount: PropTypes.func,
   history: PropTypes.object,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
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 a30492e3b..17a32c10f 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
@@ -3,10 +3,9 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const { connect } = require('react-redux')
+const connect = require('../../../../metamask-connect')
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
-const t = require('../../../../../i18n')
 
 module.exports = compose(
   withRouter,
@@ -39,7 +38,7 @@ PrivateKeyImportView.prototype.render = function () {
   return (
     h('div.new-account-import-form__private-key', [
 
-      h('span.new-account-create-form__instruction', t('pastePrivateKey')),
+      h('span.new-account-create-form__instruction', this.props.t('pastePrivateKey')),
 
       h('div.new-account-import-form__private-key-password-container', [
 
@@ -56,13 +55,13 @@ PrivateKeyImportView.prototype.render = function () {
         h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
-          t('cancel'),
+          this.props.t('cancel'),
         ]),
 
         h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.createNewKeychain(),
         }, [
-          t('import'),
+          this.props.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 85fa93faa..15dd98c73 100644
--- a/ui/app/components/pages/create-account/import-account/seed.js
+++ b/ui/app/components/pages/create-account/import-account/seed.js
@@ -1,8 +1,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')
+const connect = require('../../../../metamask-connect')
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 
@@ -21,10 +20,10 @@ SeedImportSubview.prototype.render = function () {
       style: {
       },
     }, [
-      t('pasteSeed'),
+      this.props.t('pasteSeed'),
       h('textarea'),
       h('br'),
-      h('button', t('submit')),
+      h('button', this.props.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 ceeb8a05b..dfe2a2ab1 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -1,10 +1,9 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('../../../metamask-connect')
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
-const t = require('../../../../i18n')
 
 class NewAccountCreateForm extends Component {
   constructor (props) {
@@ -15,7 +14,7 @@ class NewAccountCreateForm extends Component {
 
     this.state = {
       newAccountName: '',
-      defaultAccountName: t('newAccountNumberName', [newAccountNumber]),
+      defaultAccountName: this.props.t('newAccountNumberName', [newAccountNumber]),
     }
   }
 
@@ -26,7 +25,7 @@ class NewAccountCreateForm extends Component {
     return h('div.new-account-create-form', [
 
       h('div.new-account-create-form__input-label', {}, [
-        t('accountName'),
+        this.props.t('accountName'),
       ]),
 
       h('div.new-account-create-form__input-wrapper', {}, [
@@ -42,7 +41,7 @@ class NewAccountCreateForm extends Component {
         h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => history.push(DEFAULT_ROUTE),
         }, [
-          t('cancel'),
+          this.props.t('cancel'),
         ]),
 
         h('button.btn-primary--lg.new-account-create-form__button', {
@@ -51,7 +50,7 @@ class NewAccountCreateForm extends Component {
               .then(() => history.push(DEFAULT_ROUTE))
           },
         }, [
-          t('create'),
+          this.props.t('create'),
         ]),
 
       ]),
@@ -66,6 +65,7 @@ NewAccountCreateForm.propTypes = {
   createAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
index cb1782562..adb2fdfcd 100644
--- a/ui/app/components/pages/settings/info.js
+++ b/ui/app/components/pages/settings/info.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const t = require('../../../../i18n')
+const connect = require('../../../metamask-connect')
 
 class Info extends Component {
   renderLogo () {
@@ -15,13 +15,13 @@ class Info extends Component {
   renderInfoLinks () {
     return (
       h('div.settings__content-item.settings__content-item--without-height', [
-        h('div.settings__info-link-header', t('links')),
+        h('div.settings__info-link-header', this.props.t('links')),
         h('div.settings__info-link-item', [
           h('a', {
             href: 'https://metamask.io/privacy.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('privacyMsg')),
+            h('span.settings__info-link', this.props.t('privacyMsg')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -29,7 +29,7 @@ class Info extends Component {
             href: 'https://metamask.io/terms.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('terms')),
+            h('span.settings__info-link', this.props.t('terms')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -37,7 +37,7 @@ class Info extends Component {
             href: 'https://metamask.io/attributions.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('attributions')),
+            h('span.settings__info-link', this.props.t('attributions')),
           ]),
         ]),
         h('hr.settings__info-separator'),
@@ -46,7 +46,7 @@ class Info extends Component {
             href: 'https://support.metamask.io',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('supportCenter')),
+            h('span.settings__info-link', this.props.t('supportCenter')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -54,7 +54,7 @@ class Info extends Component {
             href: 'https://metamask.io/',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('visitWebSite')),
+            h('span.settings__info-link', this.props.t('visitWebSite')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -62,7 +62,7 @@ class Info extends Component {
             target: '_blank',
             href: 'mailto:help@metamask.io?subject=Feedback',
           }, [
-            h('span.settings__info-link', t('emailUs')),
+            h('span.settings__info-link', this.props.t('emailUs')),
           ]),
         ]),
       ])
@@ -82,7 +82,7 @@ class Info extends Component {
             h('div.settings__info-item', [
               h(
                 'div.settings__info-about',
-                t('builtInCalifornia')
+                this.props.t('builtInCalifornia')
               ),
             ]),
           ]),
@@ -103,6 +103,7 @@ Info.propTypes = {
   warning: PropTypes.string,
   location: PropTypes.object,
   history: PropTypes.object,
+  t: PropTypes.func,
 }
 
-module.exports = Info
+module.exports = connect()(Info)
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index 219ace651..7b3704c4d 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -3,7 +3,7 @@ const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('../../../metamask-connect')
 const actions = require('../../../actions')
 const infuraCurrencies = require('../../../infura-conversion.json')
 const validUrl = require('valid-url')
@@ -11,8 +11,8 @@ const { exportAsFile } = require('../../../util')
 const SimpleDropdown = require('../../dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
+const locales = require('../../../../../app/_locales/index.json')
 const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
-const t = require('../../../../i18n')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -28,6 +28,16 @@ const getInfuraCurrencyOptions = () => {
   })
 }
 
+const getLocaleOptions = () => {
+  return locales.map((locale) => {
+    return {
+      displayValue: `${locale.name}`,
+      key: locale.code,
+      value: locale.code,
+    }
+  })
+}
+
 class Settings extends Component {
   constructor (props) {
     super(props)
@@ -42,7 +52,7 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', t('blockiesIdenticon')),
+        h('span', this.props.t('blockiesIdenticon')),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
@@ -62,13 +72,13 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', t('currentConversion')),
+        h('span', this.props.t('currentConversion')),
         h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h(SimpleDropdown, {
-            placeholder: t('selectCurrency'),
+            placeholder: this.props.t('selectCurrency'),
             options: getInfuraCurrencyOptions(),
             selectedOption: currentCurrency,
             onSelect: newCurrency => setCurrentCurrency(newCurrency),
@@ -78,6 +88,30 @@ class Settings extends Component {
     ])
   }
 
+  renderCurrentLocale () {
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Current Language'),
+        h('span.settings__content-description', `${currentLocaleMeta.name}`),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: 'Select Locale',
+            options: getLocaleOptions(),
+            selectedOption: currentLocale,
+            onSelect: async (newLocale) => {
+              updateCurrentLocale(newLocale)
+            },
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentProvider () {
     const { metamask: { provider = {} } } = this.props
     let title, value, color
@@ -85,31 +119,31 @@ class Settings extends Component {
     switch (provider.type) {
 
       case 'mainnet':
-        title = t('currentNetwork')
-        value = t('mainnet')
+        title = this.props.t('currentNetwork')
+        value = this.props.t('mainnet')
         color = '#038789'
         break
 
       case 'ropsten':
-        title = t('currentNetwork')
-        value = t('ropsten')
+        title = this.props.t('currentNetwork')
+        value = this.props.t('ropsten')
         color = '#e91550'
         break
 
       case 'kovan':
-        title = t('currentNetwork')
-        value = t('kovan')
+        title = this.props.t('currentNetwork')
+        value = this.props.t('kovan')
         color = '#690496'
         break
 
       case 'rinkeby':
-        title = t('currentNetwork')
-        value = t('rinkeby')
+        title = this.props.t('currentNetwork')
+        value = this.props.t('rinkeby')
         color = '#ebb33f'
         break
 
       default:
-        title = t('currentRpc')
+        title = this.props.t('currentRpc')
         value = provider.rpcTarget
     }
 
@@ -130,12 +164,12 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('span', t('newRPC')),
+          h('span', this.props.t('newRPC')),
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('input.settings__input', {
-              placeholder: t('newRPC'),
+              placeholder: this.props.t('newRPC'),
               onChange: event => this.setState({ newRpc: event.target.value }),
               onKeyPress: event => {
                 if (event.key === 'Enter') {
@@ -148,7 +182,7 @@ class Settings extends Component {
                 event.preventDefault()
                 this.validateRpc(this.state.newRpc)
               },
-            }, t('save')),
+            }, this.props.t('save')),
           ]),
         ]),
       ])
@@ -164,9 +198,9 @@ class Settings extends Component {
       const appendedRpc = `http://${newRpc}`
 
       if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(t('uriErrorMsg'))
+        displayWarning(this.props.t('uriErrorMsg'))
       } else {
-        displayWarning(t('invalidRPC'))
+        displayWarning(this.props.t('invalidRPC'))
       }
     }
   }
@@ -175,10 +209,10 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('div', t('stateLogs')),
+          h('div', this.props.t('stateLogs')),
           h(
             'div.settings__content-description',
-            t('stateLogsDescription')
+            this.props.t('stateLogsDescription')
           ),
         ]),
         h('div.settings__content-item', [
@@ -187,13 +221,13 @@ class Settings extends Component {
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
-                    this.state.dispatch(actions.displayWarning(t('stateLogError')))
+                    this.state.dispatch(actions.displayWarning(this.props.t('stateLogError')))
                   } else {
                     exportAsFile('MetaMask State Logs.json', result)
                   }
                 })
               },
-            }, t('downloadStateLogs')),
+            }, this.props.t('downloadStateLogs')),
           ]),
         ]),
       ])
@@ -205,12 +239,15 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', t('revealSeedWords')),
+        h('div.settings__content-item', this.props.t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('button.btn-primary--lg.settings__button--red', {
-              onClick: () => history.push(REVEAL_SEED_ROUTE),
-            }, t('revealSeedWords')),
+              onClick: event => {
+                event.preventDefault()
+                history.push(REVEAL_SEED_ROUTE)
+              },
+            }, this.props.t('revealSeedWords')),
           ]),
         ]),
       ])
@@ -222,7 +259,7 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', t('useOldUI')),
+        h('div.settings__content-item', this.props.t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('button.btn-primary--lg.settings__button--orange', {
@@ -230,7 +267,7 @@ class Settings extends Component {
                 event.preventDefault()
                 setFeatureFlagToBeta()
               },
-            }, t('useOldUI')),
+            }, this.props.t('useOldUI')),
           ]),
         ]),
       ])
@@ -241,7 +278,7 @@ class Settings extends Component {
     const { showResetAccountConfirmationModal } = this.props
 
     return h('div.settings__content-row', [
-      h('div.settings__content-item', t('resetAccount')),
+      h('div.settings__content-item', this.props.t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h('button.btn-primary--lg.settings__button--orange', {
@@ -249,7 +286,7 @@ class Settings extends Component {
               event.preventDefault()
               showResetAccountConfirmationModal()
             },
-          }, t('resetAccount')),
+          }, this.props.t('resetAccount')),
         ]),
       ]),
     ])
@@ -262,6 +299,7 @@ class Settings extends Component {
       h('div.settings__content', [
         warning && h('div.settings__error', warning),
         this.renderCurrentConversion(),
+        this.renderCurrentLocale(),
         // this.renderCurrentProvider(),
         this.renderNewRpcUrl(),
         this.renderStateLogs(),
@@ -286,6 +324,9 @@ Settings.propTypes = {
   warning: PropTypes.string,
   history: PropTypes.object,
   isMascara: PropTypes.bool,
+  updateCurrentLocale: PropTypes.func,
+  currentLocale: PropTypes.string,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -293,6 +334,7 @@ const mapStateToProps = state => {
     metamask: state.metamask,
     warning: state.appState.warning,
     isMascara: state.metamask.isMascara,
+    currentLocale: state.metamask.currentLocale,
   }
 }
 
@@ -303,6 +345,7 @@ const mapDispatchToProps = dispatch => {
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
     setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
     setFeatureFlagToBeta: () => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
         .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))