i18n - load locales manually

39 files changed, 197 insertions, 118 deletions

diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index 11d50ee87..0677311da 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -1,3 +1,9 @@
+// setup i18n
+const Translator = require('../../ui/create-i18n')
+const translator = new Translator()
+global.translator = translator
+global.getMessage = translator.getMessage.bind(translator)
+
 const injectCss = require('inject-css')
 const OldMetaMaskUiCss = require('../../old-ui/css')
 const NewMetaMaskUiCss = require('../../ui/css')
@@ -10,68 +16,77 @@ 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 })
+
+  // Load translator
+  await translator.setLocale('ja')
+
+  // 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') {
-    notificationManager.closePopup()
+  function closePopupIfOpen (windowType) {
+    if (windowType !== 'notification') {
+      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
 }
diff --git a/package-lock.json b/package-lock.json
index bd3026816..d1c488b09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3929,6 +3929,16 @@
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
       "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
     },
+    "debounce-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/debounce-stream/-/debounce-stream-2.0.0.tgz",
+      "integrity": "sha1-HjNADM/wFavY7DMGYaVitoQQsI8=",
+      "requires": {
+        "debounce": "1.1.0",
+        "duplexer": "0.1.1",
+        "through": "2.3.8"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index c1b190e3d..9c4a79bec 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -2,23 +2,21 @@ 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
 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,
+    menuItems: [
+      t('privateKey'),
+      t('jsonFile'),
+    ],
   }
 }
 
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index 1b5e485d7..187abcc6a 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -4,7 +4,8 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const FileInput = require('react-simple-file-input').default
-const t = require('../../../i18n')
+const t = global.getMessage
+
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
@@ -102,7 +103,7 @@ class JsonImportSubview extends Component {
       const message = t('needImportPassword')
       return this.props.displayWarning(message)
     }
-    
+
     this.props.importNewJsonAccount([ fileContents, password ])
   }
 }
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index bc9e9384e..01a43afba 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -3,7 +3,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
 
diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js
index 9ffc669a2..da70a9cb5 100644
--- a/ui/app/accounts/import/seed.js
+++ b/ui/app/accounts/import/seed.js
@@ -2,7 +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')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 
diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js
index 8ef842a2a..78802d35a 100644
--- a/ui/app/accounts/new-account/create-form.js
+++ b/ui/app/accounts/new-account/create-form.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 class NewAccountCreateForm extends Component {
   constructor (props) {
@@ -20,7 +20,7 @@ class NewAccountCreateForm extends Component {
 
   render () {
     const { newAccountName, defaultAccountName } = this.state
-    
+
 
     return h('div.new-account-create-form', [
 
diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js
index 854568c77..a4535ec83 100644
--- a/ui/app/accounts/new-account/index.js
+++ b/ui/app/accounts/new-account/index.js
@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 const { getCurrentViewContext } = require('../../selectors')
 const classnames = require('classnames')
 
diff --git a/ui/app/app.js b/ui/app/app.js
index 9708a2485..f7fea0c22 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -4,7 +4,7 @@ const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
-const t = require('../i18n')
+const t = global.getMessage
 
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 1612d7b6a..500c794e3 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -9,7 +9,6 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
 
 class AccountDropdowns extends Component {
   constructor (props) {
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 5637bc8d0..41dc887a0 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -6,7 +6,7 @@ const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
 const connect = require('react-redux').connect
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index e838e8916..09d002597 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -6,7 +6,7 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
 
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 70701b039..2abdebeb9 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = BnAsDecimalInput
 
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index e442b43d5..b9ef143e6 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 355f78d45..610d5b6a8 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const t = global.getMessage
 
 const Tooltip = require('./tooltip')
 
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
index fca7d3863..e0bf66f7e 100644
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 
 const Tooltip = require('./tooltip')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = Copyable
 
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 920dfeab6..ac8f3b842 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -3,8 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 const GasModalCard = require('./gas-modal-card')
+const t = global.getMessage
 
 const ethUtil = require('ethereumjs-util')
 
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index e5359c1d6..0cdc2c0ae 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -10,7 +10,8 @@ const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
-const t = require('../../../../i18n')
+const t = global.getMessage
+
 
 class AccountDropdowns extends Component {
   constructor (props) {
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 5afe730c1..a7acc7bb9 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,8 +6,9 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
-const t = require('../../../i18n')
 const R = require('ramda')
+const t = global.getMessage
+
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index a4f93b505..392f43c35 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -3,7 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
+
 
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
 
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index add67ea35..4f6b3afe4 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -8,7 +8,7 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const t = require('../../i18n')
+const t = global.getMessage
 
 
 module.exports = EnsInput
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 75f989e86..c6a3111b1 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -8,7 +8,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 08540aa76..964677244 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 7eb73c3a6..33f8f6682 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 26ff3ea03..03304207e 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -5,15 +5,16 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
-const t = require('../../../i18n')
-
-const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
-const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
-const COINBASE_ROW_TITLE = t('buyCoinbase')
-const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
-const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
-const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
-const FAUCET_ROW_TITLE = t('testFaucet')
+const t = global.getMessage
+
+let DIRECT_DEPOSIT_ROW_TITLE
+let DIRECT_DEPOSIT_ROW_TEXT
+let COINBASE_ROW_TITLE
+let COINBASE_ROW_TEXT
+let SHAPESHIFT_ROW_TITLE
+let SHAPESHIFT_ROW_TEXT
+let FAUCET_ROW_TITLE
+
 const facuetRowText = (networkName) => {
   return t('getEtherFromFaucet', [networkName])
 }
@@ -47,6 +48,15 @@ inherits(DepositEtherModal, Component)
 function DepositEtherModal () {
   Component.call(this)
 
+  // need to set after i18n locale has loaded
+  DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
+  COINBASE_ROW_TITLE = t('buyCoinbase')
+  COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
+  SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
+  SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
+  FAUCET_ROW_TITLE = t('testFaucet')
+
   this.state = {
     buyingWithShapeshift: false,
   }
@@ -128,9 +138,9 @@ DepositEtherModal.prototype.render = function () {
       }),
 
     ]),
-    
+
     h('.page-container__content', {}, [
-    
+
       h('div.deposit-ether-modal__buy-rows', [
 
         this.renderRow({
@@ -164,7 +174,7 @@ DepositEtherModal.prototype.render = function () {
           onButtonClick: () => toCoinbase(address),
           hide: isTestNetwork || buyingWithShapeshift,
         }),
-        
+
         this.renderRow({
           logo: h('div.deposit-ether-modal__logo', {
             style: {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 6efa8d476..79d6109cc 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 017177cfd..3fc93b4f5 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -7,7 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
-const t = require('../../../i18n')
+const t = global.getMessage
 const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 33d8062c6..efd472cf3 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 501b83430..9250cc77e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,7 +6,6 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
-const t = require('../../../i18n')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
@@ -174,8 +173,8 @@ const MODALS = {
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('uiWelcome'),
-        message: t('uiWelcomeMessage'),
+        header: 'uiWelcome',
+        message: 'uiWelcomeMessage',
       }),
     ],
     mobileModalStyle: {
@@ -191,8 +190,8 @@ const MODALS = {
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('oldUI'),
-        message: t('oldUIMessage'),
+        header: 'oldUI',
+        message: 'oldUIMessage',
       }),
     ],
     mobileModalStyle: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 298b76af4..7fe367f3f 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 class NewAccountModal extends Component {
   constructor (props) {
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 621a974d0..071d7ffd5 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
+const t = global.getMessage
 
 class NotificationModal extends Component {
   render () {
@@ -22,12 +23,12 @@ class NotificationModal extends Component {
       }, [
 
         h('div.notification-modal__header', {}, [
-          header,
+          t(header),
         ]),
 
         h('div.notification-modal__message-wrapper', {}, [
           h('div.notification-modal__message', {}, [
-            message,
+            t(message),
           ]),
         ]),
 
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 49fbe6387..b6bfb9afe 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -9,7 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 4d4732bdb..7e1b25bb7 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -9,7 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil, addCurrencies } = require('../../conversion-util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 69afa8094..3a7678aa3 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -6,7 +6,7 @@ const tokenAbi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(tokenAbi)
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 const clone = require('clone')
 const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index 58743b641..4519f469b 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -7,7 +7,7 @@ const inherits = require('util').inherits
 const actions = require('../../actions')
 const selectors = require('../../selectors')
 const { isValidAddress, allNull } = require('../../util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 // const BalanceComponent = require('./balance-component')
 const Identicon = require('../identicon')
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0c6f76303..2aaa43350 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyDisplay = require('./currency-display')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = GasFeeDisplay
 
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index d925d3ed8..246c25152 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = GasTooltip
 
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 72074229e..1b0a1064a 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('./account-list-item')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = ToAutoComplete
 
diff --git a/ui/create-i18n.js b/ui/create-i18n.js
new file mode 100644
index 000000000..c80f5351a
--- /dev/null
+++ b/ui/create-i18n.js
@@ -0,0 +1,43 @@
+// cross-browser connection to extension i18n API
+const extension = require('extensionizer')
+const log = require('loglevel')
+
+
+class Translator {
+
+  async setLocale(localeName) {
+    this.localeName = localeName
+    this.locale = await fetchLocale(localeName)
+  }
+
+  getMessage (key, substitutions) {
+    // check locale is loaded
+    if (!this.locale) {
+      throw new Error('Translator - has not loaded a locale yet')
+    }
+    // check entry is present
+    const entry = this.locale[key]
+    if (!entry) {
+      log.error(`Translator - Unable to find value for "${key}"`)
+      throw new Error(`Translator - Unable to find value for "${key}"`)
+    }
+    let phrase = entry.message
+    // perform substitutions
+    if (substitutions && substitutions.length) {
+      phrase = phrase.replace(/\$1/g, substitutions[0])
+      if (substitutions.length > 1) {
+        phrase = phrase.replace(/\$2/g, substitutions[1])
+      }
+    }
+    return phrase
+  }
+
+}
+
+async function fetchLocale (localeName) {
+  const response = await fetch(`/_locales/${localeName}/messages.json`)
+  const locale = await response.json()
+  return locale
+}
+
+module.exports = Translator