1 files changed, 46 insertions, 1 deletions
diff --git a/ui/app/settings.js b/ui/app/settings.js
index 105cbb40b..f75b1e8b4 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -1,7 +1,7 @@
 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 infuraCurrencies = require('./infura-conversion.json')
 const validUrl = require('valid-url')
@@ -26,6 +26,23 @@ const getInfuraCurrencyOptions = () => {
   })
 }
 
+const locales = [
+  { name: 'English', code: 'en' },
+  { name: 'Japanese', code: 'ja' },
+  { name: 'French', code: 'fr' },
+  { name: 'Spanish', code: 'es' },
+]
+
+const getLocaleOptions = () => {
+  return locales.map((locale) => {
+    return {
+      displayValue: `${locale.name}`,
+      key: locale.code,
+      value: locale.code,
+    }
+  })
+}
+
 class Settings extends Component {
   constructor (props) {
     super(props)
@@ -95,6 +112,29 @@ class Settings extends Component {
     ])
   }
 
+  renderCurrentLocale () {
+    const { updateCurrentLocale, currentLocale } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Current Language'),
+        h('span.settings__content-description', `${currentLocale.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
@@ -282,6 +322,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(),
@@ -417,6 +458,8 @@ Settings.propTypes = {
   warning: PropTypes.string,
   goHome: PropTypes.func,
   isMascara: PropTypes.bool,
+  updateCurrentLocale: PropTypes.func,
+  currentLocale: PropTypes.object,
 }
 
 const mapStateToProps = state => {
@@ -424,6 +467,7 @@ const mapStateToProps = state => {
     metamask: state.metamask,
     warning: state.appState.warning,
     isMascara: state.metamask.isMascara,
+    currentLocale: state.metamask.currentLocale,
   }
 }
 
@@ -435,6 +479,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)))