Merge pull request #3609 from MetaMask/i18n-translator-redux

Handle i18n with redux.

9 files changed, 136 insertions, 70 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 0bfa992b4..3e469cf44 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -185,7 +185,7 @@
   },
   "decimal": {
     "message": "Decimals of Precision"
-  }, 
+  },
   "defaultNetwork": {
     "message": "The default network for Ether transactions is Main Net."
   },
@@ -235,7 +235,7 @@
   "done": {
     "message": "Done"
   },
-  "downloadStatelogs": {
+  "downloadStateLogs": {
     "message": "Download State Logs"
   },
   "dropped": {
@@ -671,6 +671,12 @@
   "save": {
     "message": "Save"
   },
+  "reprice_title": {
+    "message": "Reprice Transaction"
+  },
+  "reprice_subtitle": {
+    "message": "Increase your gas price to attempt to overwrite and speed up your transaction"
+  },
   "saveAsFile": {
     "message": "Save as File",
     "description": "Account export process"
@@ -884,7 +890,7 @@
   },
   "visitWebSite": {
     "message": "Visit our web site"
-  }, 
+  },
   "warning": {
     "message": "Warning"
   },
diff --git a/app/_locales/index.json b/app/_locales/index.json
new file mode 100644
index 000000000..c085deb72
--- /dev/null
+++ b/app/_locales/index.json
@@ -0,0 +1,19 @@
+[
+  { "code": "de", "name": "German" },
+  { "code": "en", "name": "English" },
+  { "code": "es", "name": "Spanish" },
+  { "code": "fr", "name": "French" },
+  { "code": "hn", "name": "Hindi" },
+  { "code": "it", "name": "Italian" },
+  { "code": "ja", "name": "Japanese" },
+  { "code": "ko", "name": "Korean" },
+  { "code": "nl", "name": "Dutch" },
+  { "code": "ph", "name": "Tagalog" },
+  { "code": "pt", "name": "Portuguese" },
+  { "code": "ru", "name": "Russian" },
+  { "code": "sl", "name": "Slovenian" },
+  { "code": "th", "name": "Thai" },
+  { "code": "vi", "name": "Vietnamese" },
+  { "code": "zh_CN", "name": "Mandarin" },
+  { "code": "zh_TW", "name": "Taiwanese" }
+]
diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json
index f54ef98ca..ef3ed4025 100644
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@@ -223,7 +223,7 @@
   "done": {
     "message": "Finito"
   },
-  "downloadStatelogs": {
+  "downloadStateLogs": {
     "message": "Scarica i log di Stato"
   },
   "edit": {
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
index c9eb178f9..e770392d0 100644
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@@ -223,7 +223,7 @@
   "done": {
     "message": "Finalizado"
   },
-  "downloadStatelogs": {
+  "downloadStateLogs": {
     "message": "Descarregar Registos de Estado"
   },
   "edit": {
diff --git a/app/scripts/background.js b/app/scripts/background.js
index 7bbaa89d6..7782fc41e 100644
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@@ -19,7 +19,7 @@ const setupRaven = require('./lib/setupRaven')
 const reportFailedTxToSentry = require('./lib/reportFailedTxToSentry')
 const setupMetamaskMeshMetrics = require('./lib/setupMetamaskMeshMetrics')
 const EdgeEncryptor = require('./edge-encryptor')
-
+const getFirstPreferredLangCode = require('./lib/get-first-preferred-lang-code')
 
 const STORAGE_KEY = 'metamask-config'
 const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
@@ -58,7 +58,8 @@ setupMetamaskMeshMetrics()
 
 async function initialize () {
   const initState = await loadStateFromPersistence()
-  await setupController(initState)
+  const initLangCode = await getFirstPreferredLangCode()
+  await setupController(initState, initLangCode)
   log.debug('MetaMask initialization complete.')
 }
 
@@ -89,11 +90,11 @@ async function loadStateFromPersistence () {
   return versionedData.data
 }
 
-function setupController (initState) {
+function setupController (initState, initLangCode) {
   //
   // MetaMask Controller
   //
-
+  
   const controller = new MetamaskController({
     // User confirmation callbacks:
     showUnconfirmedMessage: triggerUi,
@@ -101,6 +102,8 @@ function setupController (initState) {
     showUnapprovedTx: triggerUi,
     // initial state
     initState,
+    // initial locale code
+    initLangCode,
     // platform specific api
     platform,
     encryptor: isEdge ? new EdgeEncryptor() : undefined,
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 39d15fd83..b4819d951 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -11,6 +11,7 @@ class PreferencesController {
       tokens: [],
       useBlockie: false,
       featureFlags: {},
+      currentLocale: opts.initLangCode,
     }, opts.initState)
     this.store = new ObservableStore(initState)
   }
@@ -24,6 +25,10 @@ class PreferencesController {
     return this.store.getState().useBlockie
   }
 
+  setCurrentLocale (key) {
+    this.store.updateState({ currentLocale: key })
+  }
+
   setSelectedAddress (_address) {
     return new Promise((resolve, reject) => {
       const address = normalizeAddress(_address)
diff --git a/app/scripts/lib/get-first-preferred-lang-code.js b/app/scripts/lib/get-first-preferred-lang-code.js
new file mode 100644
index 000000000..28612f763
--- /dev/null
+++ b/app/scripts/lib/get-first-preferred-lang-code.js
@@ -0,0 +1,16 @@
+const extension = require('extensionizer')
+const promisify = require('pify')
+const allLocales = require('../../_locales/index.json')
+
+const existingLocaleCodes = allLocales.map(locale => locale.code)
+
+async function getFirstPreferredLangCode () {
+  const userPreferredLocaleCodes = await promisify(
+    extension.i18n.getAcceptLanguages,
+    { errorFirst: false }
+  )()
+  const firstPreferredLangCode = userPreferredLocaleCodes.find(code => existingLocaleCodes.includes(code))
+  return firstPreferredLangCode || 'en'
+}
+
+module.exports = getFirstPreferredLangCode
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 18d71874a..ff7b66572 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -57,7 +57,7 @@ module.exports = class MetamaskController extends EventEmitter {
     this.defaultMaxListeners = 20
 
     this.sendUpdate = debounce(this.privateSendUpdate.bind(this), 200)
-
+    
     this.opts = opts
     const initState = opts.initState || {}
     this.recordFirstTimeInfo(initState)
@@ -82,6 +82,7 @@ module.exports = class MetamaskController extends EventEmitter {
     // preferences controller
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
+      initLangCode: opts.initLangCode,
     })
 
     // currency controller
@@ -351,6 +352,7 @@ module.exports = class MetamaskController extends EventEmitter {
       getState: (cb) => cb(null, this.getState()),
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
       setUseBlockie: this.setUseBlockie.bind(this),
+      setCurrentLocale: this.setCurrentLocale.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
       unMarkPasswordForgotten: this.unMarkPasswordForgotten.bind(this),
@@ -1029,6 +1031,15 @@ module.exports = class MetamaskController extends EventEmitter {
     }
   }
 
+  setCurrentLocale (key, cb) {
+    try {
+      this.preferencesController.setCurrentLocale(key)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
   recordFirstTimeInfo (initState) {
     if (!('firstTimeInfo' in initState)) {
       initState.firstTimeInfo = {
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index e78981f06..13c7ac5ec 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -10,69 +10,75 @@ const NotificationManager = require('./lib/notification-manager')
 const notificationManager = new NotificationManager()
 const setupRaven = require('./lib/setupRaven')
 
-// create platform global
-global.platform = new ExtensionPlatform()
-
-// setup sentry error reporting
-const release = global.platform.getVersion()
-setupRaven({ release })
-
-// inject css
-// const css = MetaMaskUiCss()
-// injectCss(css)
-
-// identify window type (popup, notification)
-const windowType = isPopupOrNotification()
-global.METAMASK_UI_TYPE = windowType
-closePopupIfOpen(windowType)
-
-// setup stream to background
-const extensionPort = extension.runtime.connect({ name: windowType })
-const connectionStream = new PortStream(extensionPort)
-
-// start ui
-const container = document.getElementById('app-content')
-startPopup({ container, connectionStream }, (err, store) => {
-  if (err) return displayCriticalError(err)
-
-  // Code commented out until we begin auto adding users to NewUI
-  // const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask
-  // const firstTime = Object.keys(identities).length === 0
-  const { isMascara, featureFlags = {} } = store.getState().metamask
-  let betaUIState = featureFlags.betaUI
-
-  // Code commented out until we begin auto adding users to NewUI
-  // const useBetaCss = isMascara || firstTime || betaUIState
-  const useBetaCss = isMascara || betaUIState
-
-  let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
-  let deleteInjectedCss = injectCss(css)
-  let newBetaUIState
-
-  store.subscribe(() => {
-    const state = store.getState()
-    newBetaUIState = state.metamask.featureFlags.betaUI
-    if (newBetaUIState !== betaUIState) {
-      deleteInjectedCss()
-      betaUIState = newBetaUIState
-      css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
-      deleteInjectedCss = injectCss(css)
-    }
-    if (state.appState.shouldClose) notificationManager.closePopup()
+start().catch(log.error)
+
+async function start() {
+
+  // create platform global
+  global.platform = new ExtensionPlatform()
+
+  // setup sentry error reporting
+  const release = global.platform.getVersion()
+  setupRaven({ release })
+
+  // inject css
+  // const css = MetaMaskUiCss()
+  // injectCss(css)
+
+  // identify window type (popup, notification)
+  const windowType = isPopupOrNotification()
+  global.METAMASK_UI_TYPE = windowType
+  closePopupIfOpen(windowType)
+
+  // setup stream to background
+  const extensionPort = extension.runtime.connect({ name: windowType })
+  const connectionStream = new PortStream(extensionPort)
+
+  // start ui
+  const container = document.getElementById('app-content')
+  startPopup({ container, connectionStream }, (err, store) => {
+    if (err) return displayCriticalError(err)
+
+    // Code commented out until we begin auto adding users to NewUI
+    // const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask
+    // const firstTime = Object.keys(identities).length === 0
+    const { isMascara, featureFlags = {} } = store.getState().metamask
+    let betaUIState = featureFlags.betaUI
+
+    // Code commented out until we begin auto adding users to NewUI
+    // const useBetaCss = isMascara || firstTime || betaUIState
+    const useBetaCss = isMascara || betaUIState
+
+    let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
+    let deleteInjectedCss = injectCss(css)
+    let newBetaUIState
+
+    store.subscribe(() => {
+      const state = store.getState()
+      newBetaUIState = state.metamask.featureFlags.betaUI
+      if (newBetaUIState !== betaUIState) {
+        deleteInjectedCss()
+        betaUIState = newBetaUIState
+        css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
+        deleteInjectedCss = injectCss(css)
+      }
+      if (state.appState.shouldClose) notificationManager.closePopup()
+    })
   })
-})
 
 
-function closePopupIfOpen (windowType) {
-  if (windowType !== 'notification') {
-    // should close only chrome popup
-    notificationManager.closePopup()
+  function closePopupIfOpen (windowType) {
+    if (windowType !== 'notification') {
+      // should close only chrome popup
+      notificationManager.closePopup()
+    }
+  }
+
+  function displayCriticalError (err) {
+    container.innerHTML = '<div class="critical-error">The MetaMask app failed to load: please open and close MetaMask again to restart.</div>'
+    container.style.height = '80px'
+    log.error(err.stack)
+    throw err
   }
-}
 
-function displayCriticalError (err) {
-  container.innerHTML = '<div class="critical-error">The MetaMask app failed to load: please open and close MetaMask again to restart.</div>'
-  container.style.height = '80px'
-  log.error(err.stack)
-  throw err
 }