Handle i18n with redux.

7 years ago · 5fe0be722b
parent eb5a84975b
commit 5fe0be722b
88 changed files with 538 additions and 385 deletions
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@ -11,6 +11,7 @@ class PreferencesController {
      tokens: [],
      useBlockie: false,
      featureFlags: {},
      currentLocale: 'ja',
    }, 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)
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@ -333,6 +333,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),
@ -920,6 +921,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 = {
--- a/app/scripts/popup-core.js
+++ b/app/scripts/popup-core.js
@ -11,11 +11,11 @@ const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
 module.exports = initializePopup
-function initializePopup ({ container, connectionStream }, cb) {
+function initializePopup ({ container, connectionStream, localeMessages }, cb) {
  // setup app
  async.waterfall([
    (cb) => connectToAccountManager(connectionStream, cb),
-    (accountManager, cb) => launchMetamaskUi({ container, accountManager }, cb),
+    (accountManager, cb) => launchMetamaskUi({ container, accountManager, localeMessages }, cb),
  ], cb)
 }
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@ -1,8 +1,8 @@
 // setup i18n
-const Translator = require('../../ui/create-i18n')
+// const Translator = require('../../ui/create-i18n')
-const translator = new Translator()
+// const translator = new Translator()
-global.translator = translator
+// global.translator = translator
-global.getMessage = translator.getMessage.bind(translator)
+// global.getMessage = translator.getMessage.bind(translator)
 const injectCss = require('inject-css')
 const OldMetaMaskUiCss = require('../../old-ui/css')
@ -15,6 +15,7 @@ const ExtensionPlatform = require('./platforms/extension')
 const NotificationManager = require('./lib/notification-manager')
 const notificationManager = new NotificationManager()
 const setupRaven = require('./lib/setupRaven')
 const { fetchLocale } = require('../../ui/i18n-helper.js')
 start().catch(log.error)
@ -28,7 +29,8 @@ async function start() {
  setupRaven({ release })
  // Load translator
-  await translator.setLocale('ja')
+  // await translator.setLocale('ja')
  const localeMessages = await fetchLocale('ja')
  // inject css
  // const css = MetaMaskUiCss()
@ -45,7 +47,7 @@ async function start() {
  // start ui
  const container = document.getElementById('app-content')
-  startPopup({ container, connectionStream }, (err, store) => {
+  startPopup({ container, connectionStream, localeMessages }, (err, store) => {
    if (err) return displayCriticalError(err)
    // Code commented out until we begin auto adding users to NewUI
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const actions = require('./actions')
 const valuesFor = require('./util').valuesFor
 const TransactionList = require('./components/transaction-list')
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 import Select from 'react-select'
 // Subviews
@ -14,8 +14,8 @@ module.exports = connect(mapStateToProps)(AccountImportSubview)
 function mapStateToProps (state) {
  return {
    menuItems: [
-      t('privateKey'),
+      t(this.props.localeMessages, 'privateKey'),
-      t('jsonFile'),
+      t(this.props.localeMessages, 'jsonFile'),
    ],
  }
 }
@ -84,9 +84,9 @@ AccountImportSubview.prototype.renderImportView = function () {
  const current = type || menuItems[0]
  switch (current) {
-    case t('privateKey'):
+    case t(this.props.localeMessages, 'privateKey'):
      return h(PrivateKeyImportView)
-    case t('jsonFile'):
+    case t(this.props.localeMessages, 'jsonFile'):
      return h(JsonImportView)
    default:
      return h(JsonImportView)
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@ -1,10 +1,10 @@
 const Component = require('react').Component
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const FileInput = require('react-simple-file-input').default
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
@ -25,11 +25,11 @@ class JsonImportSubview extends Component {
    return (
      h('div.new-account-import-form__json', [
-        h('p', t('usedByClients')),
+        h('p', t(this.props.localeMessages, 'usedByClients')),
        h('a.warning', {
          href: HELP_LINK,
          target: '_blank',
-        }, t('fileImportFail')),
+        }, t(this.props.localeMessages, 'fileImportFail')),
        h(FileInput, {
          readAs: 'text',
@ -44,7 +44,7 @@ class JsonImportSubview extends Component {
        h('input.new-account-import-form__input-password', {
          type: 'password',
-          placeholder: t('enterPassword'),
+          placeholder: t(this.props.localeMessages, 'enterPassword'),
          id: 'json-password-box',
          onKeyPress: this.createKeyringOnEnter.bind(this),
        }),
@ -54,13 +54,13 @@ class JsonImportSubview extends Component {
          h('button.new-account-create-form__button-cancel', {
            onClick: () => this.props.goHome(),
          }, [
-            t('cancel'),
+            t(this.props.localeMessages, 'cancel'),
          ]),
          h('button.new-account-create-form__button-create', {
            onClick: () => this.createNewKeychain(),
          }, [
-            t('import'),
+            t(this.props.localeMessages, 'import'),
          ]),
        ]),
@ -92,7 +92,7 @@ class JsonImportSubview extends Component {
    const { fileContents } = state
    if (!fileContents) {
-      const message = t('needImportFile')
+      const message = t(this.props.localeMessages, 'needImportFile')
      return this.props.displayWarning(message)
    }
@ -100,7 +100,7 @@ class JsonImportSubview extends Component {
    const password = passwordInput.value
    if (!password) {
-      const message = t('needImportPassword')
+      const message = t(this.props.localeMessages, 'needImportPassword')
      return this.props.displayWarning(message)
    }
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@ -1,9 +1,9 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
@ -34,7 +34,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', t(this.props.localeMessages, 'pastePrivateKey')),
      h('div.new-account-import-form__private-key-password-container', [
@ -51,13 +51,13 @@ PrivateKeyImportView.prototype.render = function () {
        h('button.new-account-create-form__button-cancel.allcaps', {
          onClick: () => goHome(),
        }, [
-          t('cancel'),
+          t(this.props.localeMessages, 'cancel'),
        ]),
        h('button.new-account-create-form__button-create.allcaps', {
          onClick: () => this.createNewKeychain(),
        }, [
-          t('import'),
+          t(this.props.localeMessages, 'import'),
        ]),
      ]),
--- a/ui/app/accounts/import/seed.js
+++ b/ui/app/accounts/import/seed.js
@ -1,8 +1,8 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps)(SeedImportSubview)
@ -21,10 +21,10 @@ SeedImportSubview.prototype.render = function () {
      style: {
      },
    }, [
-      t('pasteSeed'),
+      t(this.props.localeMessages, 'pasteSeed'),
      h('textarea'),
      h('br'),
-      h('button', t('submit')),
+      h('button', t(this.props.localeMessages, 'submit')),
    ])
  )
 }
--- a/ui/app/accounts/new-account/create-form.js
+++ b/ui/app/accounts/new-account/create-form.js
@ -1,9 +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 t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 class NewAccountCreateForm extends Component {
  constructor (props) {
@ -14,7 +14,7 @@ class NewAccountCreateForm extends Component {
    this.state = {
      newAccountName: '',
-      defaultAccountName: t('newAccountNumberName', [newAccountNumber]),
+      defaultAccountName: t(this.props.localeMessages, 'newAccountNumberName', [newAccountNumber]),
    }
  }
@ -25,7 +25,7 @@ class NewAccountCreateForm extends Component {
    return h('div.new-account-create-form', [
      h('div.new-account-create-form__input-label', {}, [
-        t('accountName'),
+        t(this.props.localeMessages, 'accountName'),
      ]),
      h('div.new-account-create-form__input-wrapper', {}, [
@ -41,13 +41,13 @@ class NewAccountCreateForm extends Component {
        h('button.new-account-create-form__button-cancel.allcaps', {
          onClick: () => this.props.goHome(),
        }, [
-          t('cancel'),
+          t(this.props.localeMessages, 'cancel'),
        ]),
        h('button.new-account-create-form__button-create.allcaps', {
          onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
        }, [
-          t('create'),
+          t(this.props.localeMessages, 'create'),
        ]),
      ]),
--- a/ui/app/accounts/new-account/index.js
+++ b/ui/app/accounts/new-account/index.js
@ -1,9 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const { getCurrentViewContext } = require('../../selectors')
 const classnames = require('classnames')
@ -46,7 +46,7 @@ AccountDetailsModal.prototype.render = function () {
    h('div.new-account__header', [
-      h('div.new-account__title', t('newAccount')),
+      h('div.new-account__title', t(this.props.localeMessages, 'newAccount')),
      h('div.new-account__tabs', [
@ -56,7 +56,7 @@ AccountDetailsModal.prototype.render = function () {
            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
          }),
          onClick: () => displayForm('CREATE'),
-        }, t('createDen')),
+        }, t(this.props.localeMessages, 'createDen')),
        h('div.new-account__tabs__tab', {
          className: classnames('new-account__tabs__tab', {
@ -64,7 +64,7 @@ AccountDetailsModal.prototype.render = function () {
            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
          }),
          onClick: () => displayForm('IMPORT'),
-        }, t('import')),
+        }, t(this.props.localeMessages, 'import')),
      ]),
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@ -2,6 +2,7 @@ const abi = require('human-standard-token-abi')
 const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
 const { getTokenAddressFromTokenObject } = require('./util')
 const ethUtil = require('ethereumjs-util')
 const { fetchLocale } = require('../i18n-helper')
 var actions = {
  _setBackgroundConnection: _setBackgroundConnection,
@ -23,7 +24,7 @@ var actions = {
  NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
  showNetworkDropdown: showNetworkDropdown,
  hideNetworkDropdown: hideNetworkDropdown,
-  // menu state
+  // menu state/
  getNetworkStatus: 'getNetworkStatus',
  // transition state
  TRANSITION_FORWARD: 'TRANSITION_FORWARD',
@ -254,6 +255,13 @@ var actions = {
  SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
  setUseBlockie,
  // locale
  SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE',
  SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES',
  setCurrentLocale,
  updateCurrentLocale,
  setLocaleMessages,
  //
  // Feature Flags
  setFeatureFlag,
  updateFeatureFlags,
@ -1790,6 +1798,39 @@ function setUseBlockie (val) {
  }
 }
 function updateCurrentLocale (key) {
  return (dispatch) => {
    dispatch(actions.showLoadingIndication())
    log.debug(`background.updateCurrentLocale`)
    console.log(`fetchLocale`, fetchLocale);
    fetchLocale(key)
      .then((localeMessages) => {
        background.setCurrentLocale(key, (err) => {
          dispatch(actions.hideLoadingIndication())
          if (err) {
            return dispatch(actions.displayWarning(err.message))
          }
          dispatch(actions.setCurrentLocale(key))
          dispatch(actions.setLocaleMessages(localeMessages))
        })
      })
  }
 }
 function setCurrentLocale (key) {
  return {
    type: actions.SET_CURRENT_LOCALE,
    value: key,
  }
 }
 function setLocaleMessages (localeMessages) {
  return {
    type: actions.SET_LOCALE_MESSAGES,
    value: localeMessages,
  }
 }
 function setNetworkEndpoints (networkEndpointType) {
  return dispatch => {
    log.debug('background.setNetworkEndpoints')
--- a/ui/app/add-token.js
+++ b/ui/app/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')
--- a/ui/app/app.js
+++ b/ui/app/app.js
@ -1,10 +1,10 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
-const t = global.getMessage
+const t = require('../i18n-helper').getMessage
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
@ -294,8 +294,8 @@ App.prototype.renderAppBar = function () {
            // metamask name
            h('.flex-row', [
-              h('h1', t('appName')),
+              h('h1', t(this.props.localeMessages, 'appName')),
-              h('div.beta-label', t('beta')),
+              h('div.beta-label', t(this.props.localeMessages, 'beta')),
            ]),
          ]),
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
@ -79,7 +79,7 @@ class AccountDropdowns extends Component {
    try { // Sometimes keyrings aren't loaded yet:
      const type = keyring.type
      const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', t(this.props.localeMessages, 'loose')) : null
    } catch (e) { return }
  }
@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                diameter: 32,
              },
            ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t(this.props.localeMessages, 'createAccount')),
          ],
        ),
        h(
@ -154,7 +154,7 @@ class AccountDropdowns extends Component {
                fontSize: '24px',
                marginBottom: '5px',
              },
-            }, t('importAccount')),
+            }, t(this.props.localeMessages, 'importAccount')),
          ]
        ),
      ]
@ -192,7 +192,7 @@ class AccountDropdowns extends Component {
              global.platform.openWindow({ url })
            },
          },
-          t('etherscanView'),
+          t(this.props.localeMessages, 'etherscanView'),
        ),
        h(
          DropdownMenuItem,
@ -204,7 +204,7 @@ class AccountDropdowns extends Component {
              actions.showQrView(selected, identity ? identity.name : '')
            },
          },
-          t('showQRCode'),
+          t(this.props.localeMessages, 'showQRCode'),
        ),
        h(
          DropdownMenuItem,
@ -216,7 +216,7 @@ class AccountDropdowns extends Component {
              copyToClipboard(checkSumAddress)
            },
          },
-          t('copyAddress'),
+          t(this.props.localeMessages, 'copyAddress'),
        ),
        h(
          DropdownMenuItem,
@ -226,7 +226,7 @@ class AccountDropdowns extends Component {
              actions.requestAccountExport()
            },
          },
-          t('exportPrivateKey'),
+          t(this.props.localeMessages, 'exportPrivateKey'),
        ),
      ]
    )
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@ -5,8 +5,8 @@ const exportAsFile = require('../util').exportAsFile
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
-const t = global.getMessage
+const t = require('../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps)(ExportAccountView)
@ -36,7 +36,7 @@ ExportAccountView.prototype.render = function () {
  if (notExporting) return h('div')
  if (exportRequested) {
-    const warning = t('exportPrivateKeyWarning')
+    const warning = t(this.props.localeMessages, 'exportPrivateKeyWarning')
    return (
      h('div', {
        style: {
@ -54,7 +54,7 @@ ExportAccountView.prototype.render = function () {
            h('p.error', warning),
            h('input#exportAccount.sizing-input', {
              type: 'password',
-              placeholder: t('confirmPassword').toLowerCase(),
+              placeholder: t(this.props.localeMessages, 'confirmPassword').toLowerCase(),
              onKeyPress: this.onExportKeyPress.bind(this),
              style: {
                position: 'relative',
@ -75,10 +75,10 @@ ExportAccountView.prototype.render = function () {
                style: {
                  marginRight: '10px',
                },
-              }, t('submit')),
+              }, t(this.props.localeMessages, 'submit')),
              h('button', {
                onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, t('cancel')),
+              }, t(this.props.localeMessages, 'cancel')),
            ]),
          (this.props.warning) && (
          h('span.error', {
@ -99,7 +99,7 @@ ExportAccountView.prototype.render = function () {
        margin: '0 20px',
      },
    }, [
-      h('label', t('copyPrivateKey') + ':'),
+      h('label', t(this.props.localeMessages, 'copyPrivateKey') + ':'),
      h('p.error.cursor-pointer', {
        style: {
          textOverflow: 'ellipsis',
@ -113,13 +113,13 @@ ExportAccountView.prototype.render = function () {
      }, plainKey),
      h('button', {
        onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, t('done')),
+      }, t(this.props.localeMessages, 'done')),
      h('button', {
        style: {
          marginLeft: '10px',
        },
        onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, t('saveAsFile')),
+      }, t(this.props.localeMessages, 'saveAsFile')),
    ])
  }
 }
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@ -1,12 +1,12 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const h = require('react-hyperscript')
 const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
@ -71,10 +71,10 @@ AccountMenu.prototype.render = function () {
    h(Item, {
      className: 'account-menu__header',
    }, [
-      t('myAccounts'),
+      t(this.props.localeMessages, 'myAccounts'),
      h('button.account-menu__logout-button', {
        onClick: lockMetamask,
-      }, t('logout')),
+      }, t(this.props.localeMessages, 'logout')),
    ]),
    h(Divider),
    h('div.account-menu__accounts', this.renderAccounts()),
@ -82,23 +82,23 @@ AccountMenu.prototype.render = function () {
    h(Item, {
      onClick: () => showNewAccountPage('CREATE'),
      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
-      text: t('createAccount'),
+      text: t(this.props.localeMessages, 'createAccount'),
    }),
    h(Item, {
      onClick: () => showNewAccountPage('IMPORT'),
      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
-      text: t('importAccount'),
+      text: t(this.props.localeMessages, 'importAccount'),
    }),
    h(Divider),
    h(Item, {
      onClick: showInfoPage,
      icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: t('infoHelp'),
+      text: t(this.props.localeMessages, 'infoHelp'),
    }),
    h(Item, {
      onClick: showConfigPage,
      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-      text: t('settings'),
+      text: t(this.props.localeMessages, 'settings'),
    }),
  ])
 }
@ -156,6 +156,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) {
  try { // Sometimes keyrings aren't loaded yet:
    const type = keyring.type
    const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label.allcaps', t('imported')) : null
+    return isLoose ? h('.keyring-label.allcaps', t(this.props.localeMessages, 'imported')) : null
  } catch (e) { return }
 }
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
--- 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 = global.getMessage
+const t = require('../../i18n-helper').getMessage
 module.exports = BnAsDecimalInput
@ -137,13 +137,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
  let message = name ? name + ' ' : ''
  if (min && max) {
-    message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
+    message += t(this.props.localeMessages, 'betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
  } else if (min) {
-    message += t('greaterThanMin', [`${newMin} ${suffix}`])
+    message += t(this.props.localeMessages, 'greaterThanMin', [`${newMin} ${suffix}`])
  } else if (max) {
-    message += t('lessThanMax', [`${newMax} ${suffix}`])
+    message += t(this.props.localeMessages, 'lessThanMax', [`${newMax} ${suffix}`])
  } else {
-    message += t('invalidInput')
+    message += t(this.props.localeMessages, 'invalidInput')
  }
  return message
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
@ -9,7 +9,7 @@ const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const networkNames = require('../../../app/scripts/config.js').networkNames
-const t = require('../../i18n')
+const t = require('../../i18n-helper.js').getMessage
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
@ -77,7 +77,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
            paddingTop: '4px',
            paddingBottom: '4px',
          },
-        }, t('depositEth')),
+        }, t(this.props.localeMessages, 'depositEth')),
      ]),
      // loading indication
@ -119,7 +119,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
            paddingTop: '4px',
            paddingBottom: '4px',
          },
-        }, t('selectService')),
+        }, t(this.props.localeMessages, 'selectService')),
      ]),
    ])
@ -165,14 +165,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
              style: {
                marginTop: '15px',
              },
-            }, t('borrowDharma'))
+            }, t(this.props.localeMessages, 'borrowDharma'))
          ) : null,
      ])
    )
    default:
      return (
-        h('h2.error', t('unknownNetworkId'))
+        h('h2.error', t(this.props.localeMessages, 'unknownNetworkId'))
      )
  }
@ -205,7 +205,7 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
          ],
          subtext: {
            'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`,
-            'ShapeShift': t('crypto'),
+            'ShapeShift': t(this.props.localeMessages, 'crypto'),
          },
          onClick: this.radioHandler.bind(this),
        }),
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@ -1,9 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const actions = require('../actions')
-const t = global.getMessage
+const t = require('../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps)(CoinbaseForm)
@ -38,11 +38,11 @@ CoinbaseForm.prototype.render = function () {
    }, [
      h('button.btn-green', {
        onClick: this.toCoinbase.bind(this),
-      }, t('continueToCoinbase')),
+      }, t(this.props.localeMessages, 'continueToCoinbase')),
      h('button.btn-red', {
        onClick: () => props.dispatch(actions.goHome()),
-      }, t('cancel')),
+      }, t(this.props.localeMessages, 'cancel')),
    ]),
  ])
 }
--- 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 = global.getMessage
+const t = require('../../i18n-helper').getMessage
 const Tooltip = require('./tooltip')
@ -23,7 +23,7 @@ CopyButton.prototype.render = function () {
  const value = props.value
  const copied = state.copied
-  const message = copied ? t('copiedButton') : props.title || t('copyButton')
+  const message = copied ? t(this.props.localeMessages, 'copiedButton') : props.title || t(this.props.localeMessages, 'copyButton')
  return h('.copy-button', {
    style: {
--- 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 = global.getMessage
+const t = require('../../i18n-helper').getMessage
 module.exports = Copyable
@ -23,7 +23,7 @@ Copyable.prototype.render = function () {
  const { copied } = state
  return h(Tooltip, {
-    title: copied ? t('copiedExclamation') : t('copy'),
+    title: copied ? t(this.props.localeMessages, 'copiedExclamation') : t(this.props.localeMessages, 'copy'),
    position: 'bottom',
  }, h('span', {
    style: {
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@ -1,10 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const ethUtil = require('ethereumjs-util')
@ -147,7 +147,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
  })
  if (!balanceIsSufficient) {
-    error = t('balanceIsInsufficientGas')
+    error = t(this.props.localeMessages, 'balanceIsInsufficientGas')
  }
  const gasLimitTooLow = gasLimit && conversionGreaterThan(
@ -163,7 +163,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
  )
  if (gasLimitTooLow) {
-    error = t('gasLimitTooLow')
+    error = t(this.props.localeMessages, 'gasLimitTooLow')
  }
  this.setState({ error })
@ -240,7 +240,7 @@ CustomizeGasModal.prototype.render = function () {
    }, [
      h('div.send-v2__customize-gas__header', {}, [
-        h('div.send-v2__customize-gas__title', t('customGas')),
+        h('div.send-v2__customize-gas__title', t(this.props.localeMessages, 'customGas')),
        h('div.send-v2__customize-gas__close', {
          onClick: hideModal,
@ -256,8 +256,8 @@ CustomizeGasModal.prototype.render = function () {
          // max: 1000,
          step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
          onChange: value => this.convertAndSetGasPrice(value),
-          title: t('gasPrice'),
+          title: t(this.props.localeMessages, 'gasPrice'),
-          copy: t('gasPriceCalculation'),
+          copy: t(this.props.localeMessages, 'gasPriceCalculation'),
        }),
        h(GasModalCard, {
@ -266,8 +266,8 @@ CustomizeGasModal.prototype.render = function () {
          // max: 100000,
          step: 1,
          onChange: value => this.convertAndSetGasLimit(value),
-          title: t('gasLimit'),
+          title: t(this.props.localeMessages, 'gasLimit'),
-          copy: t('gasLimitCalculation'),
+          copy: t(this.props.localeMessages, 'gasLimitCalculation'),
        }),
      ]),
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@ -3,14 +3,14 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
-const connect = require('react-redux').connect
+const connect = require('../../../metamask-connect')
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
-const t = global.getMessage
+const t = require('../../../../i18n-helper').getMessage
 class AccountDropdowns extends Component {
@ -131,7 +131,7 @@ class AccountDropdowns extends Component {
                  actions.showEditAccountModal(identity)
                },
              }, [
-                t('edit'),
+                t(this.props.localeMessages, 'edit'),
              ]),
            ]),
@ -145,7 +145,7 @@ class AccountDropdowns extends Component {
    try { // Sometimes keyrings aren't loaded yet:
      const type = keyring.type
      const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', t(this.props.localeMessages, 'loose')) : null
    } catch (e) { return }
  }
@ -203,7 +203,7 @@ class AccountDropdowns extends Component {
                fontSize: '16px',
                lineHeight: '23px',
              },
-            }, t('createAccount')),
+            }, t(this.props.localeMessages, 'createAccount')),
          ],
        ),
        h(
@ -237,7 +237,7 @@ class AccountDropdowns extends Component {
                fontSize: '16px',
                lineHeight: '23px',
              },
-            }, t('importAccount')),
+            }, t(this.props.localeMessages, 'importAccount')),
          ]
        ),
      ]
@ -288,7 +288,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          t('accountDetails'),
+          t(this.props.localeMessages, 'accountDetails'),
        ),
        h(
          DropdownMenuItem,
@ -304,7 +304,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          t('etherscanView'),
+          t(this.props.localeMessages, 'etherscanView'),
        ),
        h(
          DropdownMenuItem,
@ -320,7 +320,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          t('copyAddress'),
+          t(this.props.localeMessages, 'copyAddress'),
        ),
        h(
          DropdownMenuItem,
@ -332,7 +332,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          t('exportPrivateKey'),
+          t(this.props.localeMessages, 'exportPrivateKey'),
        ),
        h(
          DropdownMenuItem,
@ -347,7 +347,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          t('addToken'),
+          t(this.props.localeMessages, 'addToken'),
        ),
      ]
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@ -1,13 +1,13 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 const R = require('ramda')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 // classes from nodes of the toggle element.
@ -95,13 +95,13 @@ NetworkDropdown.prototype.render = function () {
  }, [
    h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, t('networks')),
+      h('div.network-dropdown-title', {}, t(this.props.localeMessages, 'networks')),
      h('div.network-dropdown-divider'),
      h('div.network-dropdown-content',
        {},
-        t('defaultNetwork')
+        t(this.props.localeMessages, 'defaultNetwork')
      ),
    ]),
@ -123,7 +123,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('mainnet')),
+        }, t(this.props.localeMessages, 'mainnet')),
      ]
    ),
@ -145,7 +145,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('ropsten')),
+        }, t(this.props.localeMessages, 'ropsten')),
      ]
    ),
@ -167,7 +167,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('kovan')),
+        }, t(this.props.localeMessages, 'kovan')),
      ]
    ),
@ -189,7 +189,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('rinkeby')),
+        }, t(this.props.localeMessages, 'rinkeby')),
      ]
    ),
@ -211,7 +211,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('localhost')),
+        }, t(this.props.localeMessages, 'localhost')),
      ]
    ),
@ -235,7 +235,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
          },
-        }, t('customRPC')),
+        }, t(this.props.localeMessages, 'customRPC')),
      ]
    ),
@ -250,15 +250,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
  let name
  if (providerName === 'mainnet') {
-    name = t('mainnet')
+    name = t(this.props.localeMessages, 'mainnet')
  } else if (providerName === 'ropsten') {
-    name = t('ropsten')
+    name = t(this.props.localeMessages, 'ropsten')
  } else if (providerName === 'kovan') {
-    name = t('kovan')
+    name = t(this.props.localeMessages, 'kovan')
  } else if (providerName === 'rinkeby') {
-    name = t('rinkeby')
+    name = t(this.props.localeMessages, 'rinkeby')
  } else {
-    name = t('unknownNetwork')
+    name = t(this.props.localeMessages, 'unknownNetwork')
  }
  return name
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@ -1,9 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
@ -45,7 +45,7 @@ TokenMenuDropdown.prototype.render = function () {
            showHideTokenConfirmationModal(this.props.token)
            this.props.onClose()
          },
-        }, t('hideToken')),
+        }, t(this.props.localeMessages, 'hideToken')),
      ]),
    ]),
--- 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 = global.getMessage
+const t = require('../../i18n-helper').getMessage
 module.exports = EnsInput
@ -90,13 +90,13 @@ EnsInput.prototype.lookupEnsName = function () {
  log.info(`ENS attempting to resolve name: ${recipient}`)
  this.ens.lookup(recipient.trim())
  .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName'))
+    if (address === ZERO_ADDRESS) throw new Error(t(this.props.localeMessages, 'noAddressForName'))
    if (address !== ensResolution) {
      this.setState({
        loadingEns: false,
        ensResolution: address,
        nickname: recipient.trim(),
-        hoverText: address + '\n' + t('clickCopy'),
+        hoverText: address + '\n' + t(this.props.localeMessages, 'clickCopy'),
        ensFailure: false,
      })
    }
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-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 = require('../../i18n-helper').getMessage
 module.exports = HexAsDecimalInput
@ -127,13 +127,13 @@ HexAsDecimalInput.prototype.constructWarning = function () {
  let message = name ? name + ' ' : ''
  if (min && max) {
-    message += t('betweenMinAndMax', [min, max])
+    message += t(this.props.localeMessages, 'betweenMinAndMax', [min, max])
  } else if (min) {
-    message += t('greaterThanMin', [min])
+    message += t(this.props.localeMessages, 'greaterThanMin', [min])
  } else if (max) {
-    message += t('lessThanMax', [max])
+    message += t(this.props.localeMessages, 'lessThanMax', [max])
  } else {
-    message += t('invalidInput')
+    message += t(this.props.localeMessages, 'invalidInput')
  }
  return message
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@ -1,14 +1,14 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -65,12 +65,12 @@ AccountDetailsModal.prototype.render = function () {
      h('button.btn-clear.account-modal__button', {
        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, t('etherscanView')),
+      }, t(this.props.localeMessages, 'etherscanView')),
      // Holding on redesign for Export Private Key functionality
      h('button.btn-clear.account-modal__button', {
        onClick: () => showExportPrivateKeyModal(),
-      }, t('exportPrivateKey')),
+      }, t(this.props.localeMessages, 'exportPrivateKey')),
  ])
 }
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@ -1,11 +1,11 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -60,7 +60,7 @@ AccountModalContainer.prototype.render = function () {
        h('i.fa.fa-angle-left.fa-lg'),
-        h('span.account-modal-back__text', ' ' + t('back')),
+        h('span.account-modal-back__text', ' ' + t(this.props.localeMessages, 'back')),
      ]),
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@ -1,10 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -57,15 +57,15 @@ BuyOptions.prototype.render = function () {
      }, [
        h('div.buy-modal-content-title', {
          style: {},
-        }, t('transfers')),
+        }, t(this.props.localeMessages, 'transfers')),
-        h('div', {}, t('howToDeposit')),
+        h('div', {}, t(this.props.localeMessages, 'howToDeposit')),
      ]),
      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
        isTestNetwork
-          ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network))
+          ? this.renderModalContentOption(networkName, t(this.props.localeMessages, 'testFaucet'), () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)),
+          : this.renderModalContentOption('Coinbase', t(this.props.localeMessages, 'depositFiat'), () => toCoinbase(address)),
        // h('div.buy-modal-content-option', {}, [
        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@ -73,8 +73,8 @@ BuyOptions.prototype.render = function () {
        // ]),,
        this.renderModalContentOption(
-          t('directDeposit'),
+          t(this.props.localeMessages, 'directDeposit'),
-          t('depositFromAccount'),
+          t(this.props.localeMessages, 'depositFromAccount'),
          () => this.goToAccountDetailsModal()
        ),
@ -85,7 +85,7 @@ BuyOptions.prototype.render = function () {
          background: 'white',
        },
        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t(this.props.localeMessages, 'cancel'))),
    ]),
  ])
 }
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@ -1,11 +1,11 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 let DIRECT_DEPOSIT_ROW_TITLE
 let DIRECT_DEPOSIT_ROW_TEXT
@ -16,7 +16,7 @@ let SHAPESHIFT_ROW_TEXT
 let FAUCET_ROW_TITLE
 const facuetRowText = (networkName) => {
-  return t('getEtherFromFaucet', [networkName])
+  return t(this.props.localeMessages, 'getEtherFromFaucet', [networkName])
 }
 function mapStateToProps (state) {
@ -49,13 +49,13 @@ function DepositEtherModal () {
  Component.call(this)
  // need to set after i18n locale has loaded
-  DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TITLE = t(this.props.localeMessages, 'directDepositEther')
-  DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
+  DIRECT_DEPOSIT_ROW_TEXT = t(this.props.localeMessages, 'directDepositEtherExplainer')
-  COINBASE_ROW_TITLE = t('buyCoinbase')
+  COINBASE_ROW_TITLE = t(this.props.localeMessages, 'buyCoinbase')
-  COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
+  COINBASE_ROW_TEXT = t(this.props.localeMessages, 'buyCoinbaseExplainer')
-  SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
+  SHAPESHIFT_ROW_TITLE = t(this.props.localeMessages, 'depositShapeShift')
-  SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
+  SHAPESHIFT_ROW_TEXT = t(this.props.localeMessages, 'depositShapeShiftExplainer')
-  FAUCET_ROW_TITLE = t('testFaucet')
+  FAUCET_ROW_TITLE = t(this.props.localeMessages, 'testFaucet')
  this.state = {
    buyingWithShapeshift: false,
@ -126,7 +126,7 @@ DepositEtherModal.prototype.render = function () {
      h('div.page-container__title', [t('depositEther')]),
      h('div.page-container__subtitle', [
-        t('needEtherInWallet'),
+        t(this.props.localeMessages, 'needEtherInWallet'),
      ]),
      h('div.page-container__header-close', {
@ -147,7 +147,7 @@ DepositEtherModal.prototype.render = function () {
          logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
          title: DIRECT_DEPOSIT_ROW_TITLE,
          text: DIRECT_DEPOSIT_ROW_TEXT,
-          buttonLabel: t('viewAccount'),
+          buttonLabel: t(this.props.localeMessages, 'viewAccount'),
          onButtonClick: () => this.goToAccountDetailsModal(),
          hide: buyingWithShapeshift,
        }),
@ -156,7 +156,7 @@ DepositEtherModal.prototype.render = function () {
          logo: h('i.fa.fa-tint.fa-2x'),
          title: FAUCET_ROW_TITLE,
          text: facuetRowText(networkName),
-          buttonLabel: t('getEther'),
+          buttonLabel: t(this.props.localeMessages, 'getEther'),
          onButtonClick: () => toFaucet(network),
          hide: !isTestNetwork || buyingWithShapeshift,
        }),
@ -170,7 +170,7 @@ DepositEtherModal.prototype.render = function () {
          }),
          title: COINBASE_ROW_TITLE,
          text: COINBASE_ROW_TEXT,
-          buttonLabel: t('continueToCoinbase'),
+          buttonLabel: t(this.props.localeMessages, 'continueToCoinbase'),
          onButtonClick: () => toCoinbase(address),
          hide: isTestNetwork || buyingWithShapeshift,
        }),
@ -183,7 +183,7 @@ DepositEtherModal.prototype.render = function () {
          }),
          title: SHAPESHIFT_ROW_TITLE,
          text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: t('shapeshiftBuy'),
+          buttonLabel: t(this.props.localeMessages, 'shapeshiftBuy'),
          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
          hide: isTestNetwork,
          hideButton: buyingWithShapeshift,
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@ -1,10 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -70,7 +70,7 @@ EditAccountNameModal.prototype.render = function () {
        },
        disabled: this.state.inputText.length === 0,
      }, [
-        t('save'),
+        t(this.props.localeMessages, 'save'),
      ]),
    ]),
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@ -1,13 +1,13 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const ethUtil = require('ethereumjs-util')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const copyToClipboard = require('copy-to-clipboard')
 function mapStateToProps (state) {
@ -49,8 +49,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
  return h('span.private-key-password-label', privateKey
-    ? t('copyPrivateKey')
+    ? t(this.props.localeMessages, 'copyPrivateKey')
-    : t('typePassword')
+    : t(this.props.localeMessages, 'typePassword')
  )
 }
@ -87,8 +87,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
    ),
    (privateKey
-      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done'))
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t(this.props.localeMessages, 'done'))
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t(this.props.localeMessages, 'confirm'))
    ),
  ])
@ -121,7 +121,7 @@ ExportPrivateKeyModal.prototype.render = function () {
      h('div.account-modal-divider'),
-      h('span.modal-body-title', t('showPrivateKeys')),
+      h('span.modal-body-title', t(this.props.localeMessages, 'showPrivateKeys')),
      h('div.private-key-password', {}, [
        this.renderPasswordLabel(privateKey),
@ -131,7 +131,7 @@ ExportPrivateKeyModal.prototype.render = function () {
        !warning ? null : h('span.private-key-password-error', warning),
      ]),
-      h('div.private-key-password-warning', t('privateKeyWarning')),
+      h('div.private-key-password-warning', t(this.props.localeMessages, 'privateKeyWarning')),
      this.renderButtons(privateKey, this.state.password, address, hideModal),
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@ -1,10 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const Identicon = require('../identicon')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -42,7 +42,7 @@ HideTokenConfirmationModal.prototype.render = function () {
    h('div.hide-token-confirmation__container', {
    }, [
      h('div.hide-token-confirmation__title', {}, [
-        t('hideTokenPrompt'),
+        t(this.props.localeMessages, 'hideTokenPrompt'),
      ]),
      h(Identicon, {
@ -55,19 +55,19 @@ HideTokenConfirmationModal.prototype.render = function () {
      h('div.hide-token-confirmation__symbol', {}, symbol),
      h('div.hide-token-confirmation__copy', {}, [
-        t('readdToken'),
+        t(this.props.localeMessages, 'readdToken'),
      ]),
      h('div.hide-token-confirmation__buttons', {}, [
        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
          onClick: () => hideModal(),
        }, [
-          t('cancel'),
+          t(this.props.localeMessages, 'cancel'),
        ]),
        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
          onClick: () => hideToken(address),
        }, [
-          t('hide'),
+          t(this.props.localeMessages, 'hide'),
        ]),
      ]),
    ]),
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 class NewAccountModal extends Component {
  constructor (props) {
@ -23,7 +23,7 @@ class NewAccountModal extends Component {
      h('div.new-account-modal-wrapper', {
      }, [
        h('div.new-account-modal-header', {}, [
-          t('newAccount'),
+          t(this.props.localeMessages, 'newAccount'),
        ]),
        h('div.modal-close-x', {
@ -31,19 +31,19 @@ class NewAccountModal extends Component {
        }),
        h('div.new-account-modal-content', {}, [
-          t('accountName'),
+          t(this.props.localeMessages, 'accountName'),
        ]),
        h('div.new-account-input-wrapper', {}, [
          h('input.new-account-input', {
            value: this.state.newAccountName,
-            placeholder: t('sampleAccountName'),
+            placeholder: t(this.props.localeMessages, 'sampleAccountName'),
            onChange: event => this.setState({ newAccountName: event.target.value }),
          }, []),
        ]),
        h('div.new-account-modal-content.after-input', {}, [
-          t('or'),
+          t(this.props.localeMessages, 'or'),
        ]),
        h('div.new-account-modal-content.after-input.pointer', {
@ -51,13 +51,13 @@ class NewAccountModal extends Component {
            this.props.hideModal()
            this.props.showImportPage()
          },
-        }, t('importAnAccount')),
+        }, t(this.props.localeMessages, 'importAnAccount')),
        h('div.new-account-modal-content.button.allcaps', {}, [
          h('button.btn-clear', {
            onClick: () => this.props.createAccount(newAccountName),
          }, [
-            t('save'),
+            t(this.props.localeMessages, 'save'),
          ]),
        ]),
      ]),
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 class NotificationModal extends Component {
  render () {
--- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const QrView = require('../qr-code')
 const AccountModalContainer = require('./account-modal-container')
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = Network
@ -34,7 +34,7 @@ Network.prototype.render = function () {
      onClick: (event) => this.props.onClick(event),
    }, [
      h('img', {
-        title: t('attemptingConnect'),
+        title: t(props.localeMessages, 'attemptingConnect'),
        style: {
          width: '27px',
        },
@ -42,22 +42,22 @@ Network.prototype.render = function () {
      }),
    ])
  } else if (providerName === 'mainnet') {
-    hoverText = t('mainnet')
+    hoverText = t(props.localeMessages, 'mainnet')
    iconName = 'ethereum-network'
  } else if (providerName === 'ropsten') {
-    hoverText = t('ropsten')
+    hoverText = t(props.localeMessages, 'ropsten')
    iconName = 'ropsten-test-network'
  } else if (parseInt(networkNumber) === 3) {
-    hoverText = t('ropsten')
+    hoverText = t(props.localeMessages, 'ropsten')
    iconName = 'ropsten-test-network'
  } else if (providerName === 'kovan') {
-    hoverText = t('kovan')
+    hoverText = t(props.localeMessages, 'kovan')
    iconName = 'kovan-test-network'
  } else if (providerName === 'rinkeby') {
-    hoverText = t('rinkeby')
+    hoverText = t(props.localeMessages, 'rinkeby')
    iconName = 'rinkeby-test-network'
  } else {
-    hoverText = t('unknownNetwork')
+    hoverText = t(props.localeMessages, 'unknownNetwork')
    iconName = 'unknown-private-network'
  }
@ -85,7 +85,7 @@ Network.prototype.render = function () {
                backgroundColor: '#038789', // $blue-lagoon
                nonSelectBackgroundColor: '#15afb2',
              }),
-              h('.network-name', t('mainnet')),
+              h('.network-name', t(props.localeMessages, 'mainnet')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'ropsten-test-network':
@ -94,7 +94,7 @@ Network.prototype.render = function () {
                backgroundColor: '#e91550', // $crimson
                nonSelectBackgroundColor: '#ec2c50',
              }),
-              h('.network-name', t('ropsten')),
+              h('.network-name', t(props.localeMessages, 'ropsten')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'kovan-test-network':
@ -103,7 +103,7 @@ Network.prototype.render = function () {
                backgroundColor: '#690496', // $purple
                nonSelectBackgroundColor: '#b039f3',
              }),
-              h('.network-name', t('kovan')),
+              h('.network-name', t(props.localeMessages, 'kovan')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'rinkeby-test-network':
@ -112,7 +112,7 @@ Network.prototype.render = function () {
                backgroundColor: '#ebb33f', // $tulip-tree
                nonSelectBackgroundColor: '#ecb23e',
              }),
-              h('.network-name', t('rinkeby')),
+              h('.network-name', t(props.localeMessages, 'rinkeby')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          default:
@ -124,7 +124,7 @@ Network.prototype.render = function () {
                },
              }),
-              h('.network-name', t('privateNetwork')),
+              h('.network-name', t(props.localeMessages, 'privateNetwork')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
        }
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const ReactMarkdown = require('react-markdown')
 const linker = require('extension-link-enabler')
 const findDOMNode = require('react-dom').findDOMNode
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = Notice
@ -111,7 +111,7 @@ Notice.prototype.render = function () {
        style: {
          marginTop: '18px',
        },
-      }, t('accept')),
+      }, t(this.props.localeMessages, 'accept')),
    ])
  )
 }
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const AccountPanel = require('./account-panel')
@ -40,7 +40,7 @@ PendingMsgDetails.prototype.render = function () {
      // message data
      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
        h('.flex-column.flex-space-between', [
-          h('label.font-small.allcaps', t('message')),
+          h('label.font-small.allcaps', t(this.props.localeMessages, 'message')),
          h('span.font-small', msgParams.data),
        ]),
      ]),
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-msg-details')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = PendingMsg
@ -30,14 +30,14 @@ PendingMsg.prototype.render = function () {
          fontWeight: 'bold',
          textAlign: 'center',
        },
-      }, t('signMessage')),
+      }, t(this.props.localeMessages, 'signMessage')),
      h('.error', {
        style: {
          margin: '10px',
        },
      }, [
-        t('signNotice'),
+        t(this.props.localeMessages, 'signNotice'),
        h('a', {
          href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
          style: { color: 'rgb(247, 134, 28)' },
@ -46,7 +46,7 @@ PendingMsg.prototype.render = function () {
            const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
            global.platform.openWindow({ url })
          },
-        }, t('readMore')),
+        }, t(this.props.localeMessages, 'readMore')),
      ]),
      // message details
@ -56,10 +56,10 @@ PendingMsg.prototype.render = function () {
      h('.flex-row.flex-space-around', [
        h('button', {
          onClick: state.cancelMessage,
-        }, t('cancel')),
+        }, t(this.props.localeMessages, 'cancel')),
        h('button', {
          onClick: state.signMessage,
-        }, t('sign')),
+        }, t(this.props.localeMessages, 'sign')),
      ]),
    ])
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const AccountPanel = require('./account-panel')
 const BinaryRenderer = require('./binary-renderer')
@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
          height: '260px',
        },
      }, [
-        h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')),
+        h('label.font-small.allcaps', { style: { display: 'block' } }, t(this.props.localeMessages, 'message')),
        h(BinaryRenderer, {
          value: data,
          style: {
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@ -56,7 +56,7 @@ ConfirmDeployContract.prototype.onSubmit = function (event) {
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(t(this.props.localeMessages, 'invalidGasParams')))
    this.setState({ submitting: false })
  }
 }
@ -201,7 +201,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () {
  return (
    h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
      h('div.confirm-screen-section-column', [
        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
@ -240,8 +240,8 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
  return (
    h('section.flex-row.flex-center.confirm-screen-total-box ', [
      h('div.confirm-screen-section-column', [
-        h('span.confirm-screen-label', [ t('total') + ' ' ]),
+        h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-        h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+        h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
      ]),
      h('div.confirm-screen-section-column', [
@ -274,8 +274,8 @@ ConfirmDeployContract.prototype.render = function () {
        h('h3.flex-center.confirm-screen-header', [
          h('button.confirm-screen-back-button.allcaps', {
            onClick: () => backToAccountDetail(selectedAddress),
-          }, t('back')),
+          }, t(this.props.localeMessages, 'back')),
-          h('div.confirm-screen-title', t('confirmContract')),
+          h('div.confirm-screen-title', t(this.props.localeMessages, 'confirmContract')),
          h('div.confirm-screen-header-tip'),
        ]),
        h('div.flex-row.flex-center.confirm-screen-identicons', [
@ -293,7 +293,7 @@ ConfirmDeployContract.prototype.render = function () {
          h('i.fa.fa-arrow-right.fa-lg'),
          h('div.confirm-screen-account-wrapper', [
            h('i.fa.fa-file-text-o'),
-            h('span.confirm-screen-account-name', t('newContract')),
+            h('span.confirm-screen-account-name', t(this.props.localeMessages, 'newContract')),
            h('span.confirm-screen-account-number', ' '),
          ]),
        ]),
@ -311,7 +311,7 @@ ConfirmDeployContract.prototype.render = function () {
        h('div.confirm-screen-rows', [
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', fromName),
              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -319,9 +319,9 @@ ConfirmDeployContract.prototype.render = function () {
          ]),
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', t('newContract')),
+              h('div.confirm-screen-row-info', t(this.props.localeMessages, 'newContract')),
            ]),
          ]),
@ -338,7 +338,7 @@ ConfirmDeployContract.prototype.render = function () {
        // Cancel Button
        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
          onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancel')),
+        }, t(this.props.localeMessages, 'cancel')),
        // Accept Button
        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@ -166,7 +166,7 @@ ConfirmSendEther.prototype.getData = function () {
    },
    to: {
      address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'),
+      name: identities[txParams.to] ? identities[txParams.to].name : t(this.props.localeMessages, 'newRecipient'),
    },
    memo: txParams.memo || '',
    gasFeeInFIAT,
@ -267,7 +267,7 @@ ConfirmSendEther.prototype.render = function () {
        h('div.confirm-screen-rows', [
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', fromName),
              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -275,7 +275,7 @@ ConfirmSendEther.prototype.render = function () {
          ]),
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', toName),
              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@ -283,7 +283,7 @@ ConfirmSendEther.prototype.render = function () {
          ]),
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
@ -294,8 +294,8 @@ ConfirmSendEther.prototype.render = function () {
          h('section.flex-row.flex-center.confirm-screen-total-box ', [
            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ t('total') + ' ' ]),
+              h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+              h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
            ]),
            h('div.confirm-screen-section-column', [
@ -395,7 +395,7 @@ ConfirmSendEther.prototype.render = function () {
            clearSend()
            this.cancel(event, txMeta)
          },
-        }, t('cancel')),
+        }, t(this.props.localeMessages, 'cancel')),
        // Accept Button
        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
@ -413,7 +413,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(t(this.props.localeMessages, 'invalidGasParams')))
    this.setState({ submitting: false })
  }
 }
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 const clone = require('clone')
 const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
@ -134,7 +134,7 @@ ConfirmSendToken.prototype.getAmount = function () {
      ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
      : null,
    token: typeof value === 'undefined'
-      ? t('unknown')
+      ? t(this.props.localeMessages, 'unknown')
      : +sendTokenAmount.toFixed(decimals),
  }
@ -205,7 +205,7 @@ ConfirmSendToken.prototype.getData = function () {
    },
    to: {
      address: value,
-      name: identities[value] ? identities[value].name : t('newRecipient'),
+      name: identities[value] ? identities[value].name : t(this.props.localeMessages, 'newRecipient'),
    },
    memo: txParams.memo || '',
  }
@ -245,7 +245,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
  return (
    h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'gasFee') ]),
      h('div.confirm-screen-section-column', [
        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
@ -267,8 +267,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
    ? (
      h('section.flex-row.flex-center.confirm-screen-total-box ', [
        h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ t('total') + ' ' ]),
+          h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+          h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
        ]),
        h('div.confirm-screen-section-column', [
@ -280,8 +280,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
    : (
      h('section.flex-row.flex-center.confirm-screen-total-box ', [
        h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ t('total') + ' ' ]),
+          h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+          h('div.confirm-screen-total-box__subtitle', [ t(this.props.localeMessages, 'amountPlusGas') ]),
        ]),
        h('div.confirm-screen-section-column', [
@ -315,9 +315,9 @@ ConfirmSendToken.prototype.render = function () {
        h('div.page-container__header', [
          h('button.confirm-screen-back-button', {
            onClick: () => editTransaction(txMeta),
-          }, t('edit')),
+          }, t(this.props.localeMessages, 'edit')),
-          h('div.page-container__title', t('confirm')),
+          h('div.page-container__title', t(this.props.localeMessages, 'confirm')),
-          h('div.page-container__subtitle', t('pleaseReviewTransaction')),
+          h('div.page-container__subtitle', t(this.props.localeMessages, 'pleaseReviewTransaction')),
        ]),
        h('div.flex-row.flex-center.confirm-screen-identicons', [
          h('div.confirm-screen-account-wrapper', [
@ -358,7 +358,7 @@ ConfirmSendToken.prototype.render = function () {
        h('div.confirm-screen-rows', [
          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'from') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', fromName),
              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@ -366,7 +366,7 @@ ConfirmSendToken.prototype.render = function () {
          ]),
          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t(this.props.localeMessages, 'to') ]),
            h('div.confirm-screen-section-column', [
              h('div.confirm-screen-row-info', toName),
              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@ -386,7 +386,7 @@ ConfirmSendToken.prototype.render = function () {
        // Cancel Button
        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
          onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancel')),
+        }, t(this.props.localeMessages, 'cancel')),
        // Accept Button
        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
@ -406,7 +406,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(t(this.props.localeMessages, 'invalidGasParams')))
    this.setState({ submitting: false })
  }
 }
--- a/ui/app/components/pending-typed-msg-details.js
+++ b/ui/app/components/pending-typed-msg-details.js
@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const AccountPanel = require('./account-panel')
 const TypedMessageRenderer = require('./typed-message-renderer')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = PendingMsgDetails
@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
          height: '260px',
        },
      }, [
-        h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')),
+        h('label.font-small.allcaps', { style: { display: 'block' } }, t(this.props.localeMessages, 'youSign')),
        h(TypedMessageRenderer, {
          value: data,
          style: {
--- a/ui/app/components/pending-typed-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-typed-msg-details')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = PendingMsg
@ -27,7 +27,7 @@ PendingMsg.prototype.render = function () {
          fontWeight: 'bold',
          textAlign: 'center',
        },
-      }, t('signMessage')),
+      }, t(this.props.localeMessages, 'signMessage')),
      // message details
      h(PendingTxDetails, state),
@ -36,10 +36,10 @@ PendingMsg.prototype.render = function () {
      h('.flex-row.flex-space-around', [
        h('button.allcaps', {
          onClick: state.cancelTypedMessage,
-        }, t('cancel')),
+        }, t(this.props.localeMessages, 'cancel')),
        h('button.allcaps', {
          onClick: state.signTypedMessage,
-        }, t('sign')),
+        }, t(this.props.localeMessages, 'sign')),
      ]),
    ])
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
 const ReadOnlyInput = require('./readonly-input')
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const h = require('react-hyperscript')
 const classnames = require('classnames')
 const abi = require('ethereumjs-abi')
@ -7,7 +7,7 @@ const inherits = require('util').inherits
 const actions = require('../../actions')
 const selectors = require('../../selectors')
 const { isValidAddress, allNull } = require('../../util')
-const t = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 // const BalanceComponent = require('./balance-component')
 const Identicon = require('../identicon')
@ -127,14 +127,14 @@ SendTokenScreen.prototype.validate = function () {
  const amount = Number(stringAmount)
  const errors = {
-    to: !to ? t('required') : null,
+    to: !to ? t(this.props.localeMessages, 'required') : null,
-    amount: !amount ? t('required') : null,
+    amount: !amount ? t(this.props.localeMessages, 'required') : null,
-    gasPrice: !gasPrice ? t('gasPriceRequired') : null,
+    gasPrice: !gasPrice ? t(this.props.localeMessages, 'gasPriceRequired') : null,
-    gasLimit: !gasLimit ? t('gasLimitRequired') : null,
+    gasLimit: !gasLimit ? t(this.props.localeMessages, 'gasLimitRequired') : null,
  }
  if (to && !isValidAddress(to)) {
-    errors.to = t('invalidAddress')
+    errors.to = t(this.props.localeMessages, 'invalidAddress')
  }
  const isValid = Object.entries(errors).every(([key, value]) => value === null)
@ -238,7 +238,7 @@ SendTokenScreen.prototype.renderToAddressInput = function () {
    h('input.large-input.send-screen-input', {
      name: 'address',
      list: 'addresses',
-      placeholder: t('address'),
+      placeholder: t(this.props.localeMessages, 'address'),
      value: to,
      onChange: e => this.setState({
        to: e.target.value,
@ -356,7 +356,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
    }),
    h('div.send-screen-gas-labels', {}, [
-      h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']),
+      h('span', [ h('i.fa.fa-bolt'), t(this.props.localeMessages, 'gasFee') + ':']),
      h('span', [t('whatsThis')]),
    ]),
    h('div.large-input.send-screen-gas-input', [
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const Identicon = require('../identicon')
 const CurrencyDisplay = require('./currency-display')
 const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = GasFeeDisplay
@ -31,7 +31,7 @@ GasFeeDisplay.prototype.render = function () {
        convertedPrefix: '$',
        readOnly: true,
      })
-      : h('div.currency-display', t('loading')),
+      : h('div.currency-display', t(this.props.localeMessages, 'loading')),
    h('button.send-v2__sliders-icon-container', {
      onClick,
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = GasTooltip
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@ -1,4 +1,4 @@
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const actions = require('../../actions')
 const abi = require('ethereumjs-abi')
 const SendEther = require('../../send-v2')
--- 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 = global.getMessage
+const t = require('../../../i18n-helper').getMessage
 module.exports = ToAutoComplete
@ -93,7 +93,7 @@ ToAutoComplete.prototype.render = function () {
  return h('div.send-v2__to-autocomplete', {}, [
    h('input.send-v2__to-autocomplete__input', {
-      placeholder: t('recipientAddress'),
+      placeholder: t(this.props.localeMessages, 'recipientAddress'),
      className: inError ? `send-v2__error-border` : '',
      value: to,
      onChange: event => onChange(event.target.value),
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@ -1,13 +1,13 @@
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const classnames = require('classnames')
 const { qrcode } = require('qrcode-npm')
 const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
 const { isValidAddress } = require('../util')
 const SimpleDropdown = require('./dropdowns/simple-dropdown')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 function mapStateToProps (state) {
  const {
@ -94,7 +94,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
      }))
      .catch(() => this.setState({
        showQrCode: false,
-        errorMessage: t('invalidRequest'),
+        errorMessage: t(this.props.localeMessages, 'invalidRequest'),
        isLoading: false,
      }))
  }
@ -126,10 +126,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
  return h('div.shapeshift-form__metadata', {}, [
-    this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')),
+    this.renderMetadata(t(this.props.localeMessages, 'status'), limit ? t(this.props.localeMessages, 'available') : t(this.props.localeMessages, 'unavailable')),
-    this.renderMetadata(t('limit'), limit),
+    this.renderMetadata(t(this.props.localeMessages, 'limit'), limit),
-    this.renderMetadata(t('exchangeRate'), rate),
+    this.renderMetadata(t(this.props.localeMessages, 'exchangeRate'), rate),
-    this.renderMetadata(t('min'), minimum),
+    this.renderMetadata(t(this.props.localeMessages, 'min'), minimum),
  ])
 }
@ -143,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
  return h('div.shapeshift-form', {}, [
    h('div.shapeshift-form__deposit-instruction', [
-      t('depositCoin', [depositCoin.toUpperCase()]),
+      t(this.props.localeMessages, 'depositCoin', [depositCoin.toUpperCase()]),
    ]),
    h('div', depositAddress),
@ -180,7 +180,7 @@ ShapeshiftForm.prototype.render = function () {
            h('div.shapeshift-form__selector', [
-              h('div.shapeshift-form__selector-label', t('deposit')),
+              h('div.shapeshift-form__selector-label', t(this.props.localeMessages, 'deposit')),
              h(SimpleDropdown, {
                selectedOption: this.state.depositCoin,
@ -200,7 +200,7 @@ ShapeshiftForm.prototype.render = function () {
            h('div.shapeshift-form__selector', [
              h('div.shapeshift-form__selector-label', [
-                t('receive'),
+                t(this.props.localeMessages, 'receive'),
              ]),
              h('div.shapeshift-form__selector-input', ['ETH']),
@ -218,7 +218,7 @@ ShapeshiftForm.prototype.render = function () {
          }, [
            h('div.shapeshift-form__address-input-label', [
-              t('refundAddress'),
+              t(this.props.localeMessages, 'refundAddress'),
            ]),
            h('input.shapeshift-form__address-input', {
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@ -1,12 +1,12 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const vreme = new (require('vreme'))()
 const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const CopyButton = require('./copyButton')
 const EthBalance = require('./eth-balance')
@ -76,7 +76,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
          value: this.props.depositAddress,
        }),
        h(Tooltip, {
-          title: t('qrCode'),
+          title: t(this.props.localeMessages, 'qrCode'),
        }, [
          h('i.fa.fa-qrcode.pointer.pop-hover', {
            onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@ -136,8 +136,8 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, t('toETHviaShapeShift', [props.depositType])),
+        }, t(this.props.localeMessages, 'toETHviaShapeShift', [props.depositType])),
-        h('div', t('noDeposits')),
+        h('div', t(this.props.localeMessages, 'noDeposits')),
        h('div', {
          style: {
            fontSize: 'x-small',
@ -159,8 +159,8 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, t('toETHviaShapeShift', [props.depositType])),
+        }, t(this.props.localeMessages, 'toETHviaShapeShift', [props.depositType])),
-        h('div', t('conversionProgress')),
+        h('div', t(this.props.localeMessages, 'conversionProgress')),
        h('div', {
          style: {
            fontSize: 'x-small',
@ -185,7 +185,7 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, t('fromShapeShift')),
+        }, t(this.props.localeMessages, 'fromShapeShift')),
        h('div', formatDate(props.time)),
        h('div', {
          style: {
@ -197,7 +197,7 @@ ShiftListItem.prototype.renderInfo = function () {
      ])
    case 'failed':
-      return h('span.error', '(' + t('failed') + ')')
+      return h('span.error', '(' + t(this.props.localeMessages, 'failed') + ')')
    default:
      return ''
  }
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@ -2,14 +2,14 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('./identicon')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 const actions = require('../actions')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const { conversionUtil } = require('../conversion-util')
 const {
@ -55,7 +55,7 @@ SignatureRequest.prototype.renderHeader = function () {
    h('div.request-signature__header-background'),
-    h('div.request-signature__header__text', t('sigRequest')),
+    h('div.request-signature__header__text', t(this.props.localeMessages, 'sigRequest')),
    h('div.request-signature__header__tip-container', [
      h('div.request-signature__header__tip'),
@ -137,7 +137,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
  return h('div.request-signature__request-info', [
    h('div.request-signature__headline', [
-      t('yourSigRequested'),
+      t(this.props.localeMessages, 'yourSigRequested'),
    ]),
  ])
@ -155,18 +155,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
 SignatureRequest.prototype.renderBody = function () {
  let rows
-  let notice = t('youSign') + ':'
+  let notice = t(this.props.localeMessages, 'youSign') + ':'
  const { txData } = this.props
  const { type, msgParams: { data } } = txData
  if (type === 'personal_sign') {
-    rows = [{ name: t('message'), value: this.msgHexToText(data) }]
+    rows = [{ name: t(this.props.localeMessages, 'message'), value: this.msgHexToText(data) }]
  } else if (type === 'eth_signTypedData') {
    rows = data
  } else if (type === 'eth_sign') {
-    rows = [{ name: t('message'), value: data }]
+    rows = [{ name: t(this.props.localeMessages, 'message'), value: data }]
-    notice = t('signNotice')
+    notice = t(this.props.localeMessages, 'signNotice')
  }
  return h('div.request-signature__body', {}, [
@ -225,10 +225,10 @@ SignatureRequest.prototype.renderFooter = function () {
  return h('div.request-signature__footer', [
    h('button.request-signature__footer__cancel-button', {
      onClick: cancel,
-    }, t('cancel')),
+    }, t(this.props.localeMessages, 'cancel')),
    h('button.request-signature__footer__sign-button', {
      onClick: sign,
-    }, t('sign')),
+    }, t(this.props.localeMessages, 'sign')),
  ])
 }
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const selectors = require('../selectors')
 function mapStateToProps (state) {
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const selectors = require('../selectors')
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@ -3,9 +3,9 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const selectors = require('../selectors')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 function mapStateToProps (state) {
  return {
@ -43,7 +43,7 @@ TokenList.prototype.render = function () {
  const { tokens, isLoading, error } = state
  if (isLoading) {
-    return this.message(t('loadingTokens'))
+    return this.message(t(this.props.localeMessages, 'loadingTokens'))
  }
  if (error) {
@ -53,7 +53,7 @@ TokenList.prototype.render = function () {
        padding: '80px',
      },
    }, [
-      t('troubleTokenBalances'),
+      t(this.props.localeMessages, 'troubleTokenBalances'),
      h('span.hotFix', {
        style: {
          color: 'rgba(247, 134, 28, 1)',
@ -64,7 +64,7 @@ TokenList.prototype.render = function () {
          url: `https://ethplorer.io/address/${userAddress}`,
        })
        },
-      }, t('here')),
+      }, t(this.props.localeMessages, 'here')),
    ])
  }
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
@ -11,7 +11,7 @@ const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
 const numberToBN = require('number-to-bn')
 const actions = require('../actions')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const TransactionIcon = require('./transaction-list-item-icon')
 const ShiftListItem = require('./shift-list-item')
@ -86,7 +86,7 @@ TransactionListItem.prototype.render = function () {
        ]),
        h(Tooltip, {
-          title: t('transactionNumber'),
+          title: t(this.props.localeMessages, 'transactionNumber'),
          position: 'right',
        }, [
          h('span', {
@ -143,12 +143,12 @@ TransactionListItem.prototype.render = function () {
          style: {
            paddingRight: '2px',
          },
-        }, t('takesTooLong')),
+        }, t(this.props.localeMessages, 'takesTooLong')),
        h('div', {
          style: {
            textDecoration: 'underline',
          },
-        }, t('retryWithMoreGas')),
+        }, t(this.props.localeMessages, 'retryWithMoreGas')),
      ]),
    ])
  )
@ -177,11 +177,11 @@ function recipientField (txParams, transaction, isTx, isMsg) {
  let message
  if (isMsg) {
-    message = t('sigRequested')
+    message = t(this.props.localeMessages, 'sigRequested')
  } else if (txParams.to) {
    message = addressSummary(txParams.to)
  } else {
-    message = t('contractDeployment')
+    message = t(this.props.localeMessages, 'contractDeployment')
  }
  return h('div', {
@ -204,7 +204,7 @@ function renderErrorOrWarning (transaction) {
  // show rejected
  if (status === 'rejected') {
-    return h('span.error', ' (' + t('rejected') + ')')
+    return h('span.error', ' (' + t(this.props.localeMessages, 'rejected') + ')')
  }
  if (transaction.err || transaction.warning) {
    const { err, warning = {} } = transaction
@ -220,7 +220,7 @@ function renderErrorOrWarning (transaction) {
            title: message,
            position: 'bottom',
          }, [
-            h(`span.error`, ` (` + t('failed') + `)`),
+            h(`span.error`, ` (` + t(this.props.localeMessages, 'failed') + `)`),
          ])
      )
    }
@ -232,7 +232,7 @@ function renderErrorOrWarning (transaction) {
        title: message,
        position: 'bottom',
      }, [
-        h(`span.warning`, ` (` + t('warning') + `)`),
+        h(`span.warning`, ` (` + t(this.props.localeMessages, 'warning') + `)`),
      ])
    }
  }
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TransactionListItem = require('./transaction-list-item')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = TransactionList
@ -79,7 +79,7 @@ TransactionList.prototype.render = function () {
            style: {
              marginTop: '50px',
            },
-          }, t('noTransactionHistory')),
+          }, t(this.props.localeMessages, 'noTransactionHistory')),
        ]),
      ]),
    ])
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@ -1,6 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const inherits = require('util').inherits
 const classnames = require('classnames')
 const abi = require('human-standard-token-abi')
@ -13,7 +13,7 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 const { calcTokenAmount } = require('../token-util')
 const { getCurrentCurrency } = require('../selectors')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps)(TxListItem)
@ -64,7 +64,7 @@ TxListItem.prototype.getAddressText = function () {
    default:
      return address
        ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : t('contractDeployment')
+        : t(this.props.localeMessages, 'contractDeployment')
  }
 }
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
@ -10,7 +10,7 @@ const { formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
@ -57,7 +57,7 @@ TxList.prototype.renderTransaction = function () {
    : [h(
        'div.tx-list-item.tx-list-item--empty',
        { key: 'tx-list-none' },
-        [ t('noTransactions') ],
+        [ t(this.props.localeMessages, 'noTransactions') ],
      )]
 }
@ -108,7 +108,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
  if (isUnapproved) {
    opts.onClick = () => showConfTxPage({id: transActionId})
-    opts.transactionStatus = t('Not Started')
+    opts.transactionStatus = t(this.props.localeMessages, 'Not Started')
  } else if (transactionHash) {
    opts.onClick = () => this.view(transactionHash, transactionNetworkId)
  }
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@ -1,11 +1,11 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const h = require('react-hyperscript')
 const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
 const actions = require('../actions')
 const selectors = require('../selectors')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
@ -73,21 +73,21 @@ TxView.prototype.renderButtons = function () {
          onClick: () => showModal({
            name: 'DEPOSIT_ETHER',
          }),
-        }, t('deposit')),
+        }, t(this.props.localeMessages, 'deposit')),
        h('button.btn-clear.hero-balance-button.allcaps', {
          style: {
            marginLeft: '0.8em',
          },
          onClick: showSendPage,
-        }, t('send')),
+        }, t(this.props.localeMessages, 'send')),
      ])
    )
    : (
      h('div.flex-row.flex-center.hero-balance-buttons', [
        h('button.btn-clear.hero-balance-button', {
          onClick: showSendTokenPage,
-        }, t('send')),
+        }, t(this.props.localeMessages, 'send')),
      ])
    )
 }
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const classnames = require('classnames')
@ -11,7 +11,7 @@ const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
@ -117,7 +117,7 @@ WalletView.prototype.render = function () {
        onClick: hideSidebar,
      }),
-      h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''),
+      h('div.wallet-view__keyring-label.allcaps', isLoose ? t(this.props.localeMessages, 'imported') : ''),
      h('div.flex-column.flex-center.wallet-view__name-container', {
        style: { margin: '0 auto' },
@ -134,13 +134,13 @@ WalletView.prototype.render = function () {
          selectedIdentity.name,
        ]),
-        h('button.btn-clear.wallet-view__details-button.allcaps', t('details')),
+        h('button.btn-clear.wallet-view__details-button.allcaps', t(this.props.localeMessages, 'details')),
      ]),
    ]),
    h(Tooltip, {
      position: 'bottom',
-      title: this.state.hasCopied ? t('copiedExclamation') : t('copyToClipboard'),
+      title: this.state.hasCopied ? t(this.props.localeMessages, 'copiedExclamation') : t(this.props.localeMessages, 'copyToClipboard'),
      wrapperClassName: 'wallet-view__tooltip',
    }, [
      h('button.wallet-view__address', {
@ -173,7 +173,7 @@ WalletView.prototype.render = function () {
        showAddTokenPage()
        hideSidebar()
      },
-    }, t('addToken')),
+    }, t(this.props.localeMessages, 'addToken')),
  ])
 }
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const actions = require('./actions')
 const txHelper = require('../lib/tx-helper')
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@ -1,12 +1,12 @@
 const inherits = require('util').inherits
 const EventEmitter = require('events').EventEmitter
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../metamask-connect')
 const h = require('react-hyperscript')
 const Mascot = require('../components/mascot')
 const actions = require('../actions')
 const Tooltip = require('../components/tooltip')
-const t = require('../../i18n')
+const t = require('../../i18n-helper').getMessage
 const getCaretCoordinates = require('textarea-caret')
 const environmentType = require('../../../app/scripts/lib/environment-type')
 const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
@ -60,7 +60,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
          color: '#7F8082',
          marginBottom: 10,
        },
-      }, t('appName')),
+      }, t(this.props.localeMessages, 'appName')),
      h('div', [
@ -70,10 +70,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
            color: '#7F8082',
            display: 'inline',
          },
-        }, t('encryptNewDen')),
+        }, t(this.props.localeMessages, 'encryptNewDen')),
        h(Tooltip, {
-          title: t('denExplainer'),
+          title: t(this.props.localeMessages, 'denExplainer'),
        }, [
          h('i.fa.fa-question-circle.pointer', {
            style: {
@ -93,7 +93,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box',
-        placeholder: t('newPassword'),
+        placeholder: t(this.props.localeMessages, 'newPassword'),
        onInput: this.inputChanged.bind(this),
        style: {
          width: 260,
@ -105,7 +105,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box-confirm',
-        placeholder: t('confirmPassword'),
+        placeholder: t(this.props.localeMessages, 'confirmPassword'),
        onKeyPress: this.createVaultOnEnter.bind(this),
        onInput: this.inputChanged.bind(this),
        style: {
@ -120,7 +120,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
        style: {
          margin: 12,
        },
-      }, t('createDen')),
+      }, t(this.props.localeMessages, 'createDen')),
      h('.flex-row.flex-center.flex-grow', [
        h('p.pointer', {
@ -130,7 +130,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
            color: 'rgb(247, 134, 28)',
            textDecoration: 'underline',
          },
-        }, t('importDen')),
+        }, t(this.props.localeMessages, 'importDen')),
      ]),
      h('.flex-row.flex-center.flex-grow', [
@ -179,12 +179,12 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
  var passwordConfirm = passwordConfirmBox.value
  if (password.length < 8) {
-    this.warning = t('passwordShort')
+    this.warning = t(this.props.localeMessages, 'passwordShort')
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
  if (password !== passwordConfirm) {
-    this.warning = t('passwordMismatch')
+    this.warning = t(this.props.localeMessages, 'passwordMismatch')
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
--- a/ui/app/info.js
+++ b/ui/app/info.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const actions = require('./actions')
 module.exports = connect(mapStateToProps)(InfoScreen)
--- a/ui/app/keychains/hd/create-vault-complete.js
+++ b/ui/app/keychains/hd/create-vault-complete.js
@ -1,6 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const h = require('react-hyperscript')
 const actions = require('../../actions')
 const exportAsFile = require('../../util').exportAsFile
--- a/ui/app/keychains/hd/recover-seed/confirmation.js
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('../../../metamask-connect')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@ -1,6 +1,6 @@
 const inherits = require('util').inherits
 const PersistentForm = require('../../../lib/persistent-form')
-const connect = require('react-redux').connect
+const connect = require('../../metamask-connect')
 const h = require('react-hyperscript')
 const actions = require('../../actions')
--- a/ui/app/metamask-connect.js
+++ b/ui/app/metamask-connect.js
@ -0,0 +1,18 @@
 const connect = require('react-redux').connect
 const metamaskConnect = (mapStateToProps, mapDispatchToProps) => {
    return connect(
        _higherOrderMapStateToProps(mapStateToProps),
        mapDispatchToProps
    )
 }
 const _higherOrderMapStateToProps = (mapStateToProps) => {
    return (state, ownProps) => {
        const stateProps = mapStateToProps(state, ownProps)
        stateProps.localeMessages = state.localeMessages || {}
        return stateProps
    }
 }
 module.exports = metamaskConnect
--- a/ui/app/new-keychain.js
+++ b/ui/app/new-keychain.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 module.exports = connect(mapStateToProps)(NewKeychain)
--- a/ui/app/reducers.js
+++ b/ui/app/reducers.js
@ -7,6 +7,7 @@ const copyToClipboard = require('copy-to-clipboard')
 const reduceIdentities = require('./reducers/identities')
 const reduceMetamask = require('./reducers/metamask')
 const reduceApp = require('./reducers/app')
 const reduceLocale = require('./reducers/locale')
 window.METAMASK_CACHED_LOG_STATE = null
@ -38,6 +39,12 @@ function rootReducer (state, action) {
  state.appState = reduceApp(state, action)
  //
  // LocaleMessages
  //
  state.localeMessages = reduceLocale(state, action)
  window.METAMASK_CACHED_LOG_STATE = state
  return state
 }
--- a/ui/app/reducers/locale.js
+++ b/ui/app/reducers/locale.js
@ -0,0 +1,18 @@
 const extend = require('xtend')
 const actions = require('../actions')
 const MetamascaraPlatform = require('../../../app/scripts/platforms/window')
 const environmentType = require('../../../app/scripts/lib/environment-type')
 const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
 module.exports = reduceMetamask
 function reduceMetamask (state, action) {
  const localeMessagesState = extend({}, state.localeMessages)
  switch (action.type) {
    case actions.SET_LOCALE_MESSAGES:
      return action.value
    default:
      return localeMessagesState
  }
 }
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@ -45,6 +45,7 @@ function reduceMetamask (state, action) {
    networkEndpointType: OLD_UI_NETWORK_TYPE,
    isRevealingSeedWords: false,
    welcomeScreenSeen: false,
    currentLocale: 'ja',
  }, state.metamask)
  switch (action.type) {
@ -353,6 +354,11 @@ function reduceMetamask (state, action) {
        welcomeScreenSeen: true,
      })
    case action.SET_CURRENT_LOCALE:
      return extend(metamaskState, {
        currentLocale: action.value,
      })
    default:
      return metamaskState
--- a/ui/app/select-app.js
+++ b/ui/app/select-app.js
@ -1,6 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const h = require('react-hyperscript')
 const App = require('./app')
 const OldApp = require('../../old-ui/app/app')
--- a/ui/app/send.js
+++ b/ui/app/send.js
@ -1,7 +1,7 @@
 // const { inherits } = require('util')
 // const PersistentForm = require('../lib/persistent-form')
 // const h = require('react-hyperscript')
-// const connect = require('react-redux').connect
+// const connect = require('./metamask-connect')
 // const Identicon = require('./components/identicon')
 // const EnsInput = require('./components/ens-input')
 // const GasTooltip = require('./components/send/gas-tooltip')
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@ -112,9 +112,9 @@ class Settings extends Component {
  }
  renderCurrentLocale () {
-    const { setCurrentLocale } = this.props
+    const { updateCurrentLocale, currentLocale } = this.props
-    const currentLocaleName = global.translator.localeName
+    // const currentLocaleName = global.translator.localeName
-    const currentLocale = locales.find(locale => locale.code === currentLocaleName)
+    // const currentLocale = locales.find(locale => locale.code === currentLocaleName)
    return h('div.settings__content-row', [
      h('div.settings__content-item', [
@ -126,11 +126,12 @@ class Settings extends Component {
          h(SimpleDropdown, {
            placeholder: 'Select Locale',
            options: getLocaleOptions(),
-            selectedOption: currentLocaleName,
+            selectedOption: currentLocale,
            onSelect: async (newLocale) => {
-              log('set new locale', newLocale)
+              // log('set new locale', newLocale)
-              await global.translator.setLocale(newLocale)
+              // await global.translator.setLocale(newLocale)
-              log('did set new locale', newLocale)
+              updateCurrentLocale(newLocale)
              // log('did set new locale', newLocale)
            },
          }),
        ]),
@ -468,6 +469,7 @@ const mapStateToProps = state => {
    metamask: state.metamask,
    warning: state.appState.warning,
    isMascara: state.metamask.isMascara,
    currentLocale: state.metamask.currentLocale,
  }
 }
@ -479,6 +481,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)))
--- a/ui/app/template.js
+++ b/ui/app/template.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 module.exports = connect(mapStateToProps)(COMPONENTNAME)
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@ -1,11 +1,11 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
 const actions = require('./actions')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
-const t = require('../i18n')
+const t = require('../i18n-helper').getMessage
 const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
 const environmentType = require('../../app/scripts/lib/environment-type')
@ -41,7 +41,7 @@ UnlockScreen.prototype.render = function () {
          textTransform: 'uppercase',
          color: '#7F8082',
        },
-      }, t('appName')),
+      }, t(this.props.localeMessages, 'appName')),
      h('input.large-input', {
        type: 'password',
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@ -0,0 +1,37 @@
 // cross-browser connection to extension i18n API
 const extension = require('extensionizer')
 const log = require('loglevel')
 const getMessage = (locale, key, substitutions) => {
  // check locale is loaded
  if (!locale) {
    // throw new Error('Translator - has not loaded a locale yet.')
    return ''
  }
  // check entry is present
  const entry = 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 = {
  getMessage,
  fetchLocale,
 }
--- a/ui/index.js
+++ b/ui/index.js
@ -4,6 +4,7 @@ const Root = require('./app/root')
 const actions = require('./app/actions')
 const configureStore = require('./app/store')
 const txHelper = require('./lib/tx-helper')
 const { fetchLocale } = require('./i18n-helper').getMessage
 const { OLD_UI_NETWORK_TYPE, BETA_UI_NETWORK_TYPE } = require('../app/scripts/config').enums
 global.log = require('loglevel')
@ -18,14 +19,17 @@ function launchMetamaskUi (opts, cb) {
  // check if we are unlocked first
  accountManager.getState(function (err, metamaskState) {
    if (err) return cb(err)
-    const store = startApp(metamaskState, accountManager, opts)
+    startApp(metamaskState, accountManager, opts.localeMessages, opts)
-    cb(null, store)
+      .then((store) => {
        cb(null, store)
      })
  })
 }
-function startApp (metamaskState, accountManager, opts) {
+async function startApp (metamaskState, accountManager, currentLocaleMessages, opts) {
  // parse opts
  if (!metamaskState.featureFlags) metamaskState.featureFlags = {}
  const store = configureStore({
    // metamaskState represents the cross-tab state
@ -34,6 +38,8 @@ function startApp (metamaskState, accountManager, opts) {
    // appState represents the current tab's popup state
    appState: {},
    localeMessages: currentLocaleMessages,
    // Which blockchain we are using:
    networkVersion: opts.networkVersion,
  })