i18n - load locales manually

app/scripts/popup.js

@@ -1,3 +1,9 @@
+// setup i18n
+const Translator = require('../../ui/create-i18n')
+const translator = new Translator()
+global.translator = translator
+global.getMessage = translator.getMessage.bind(translator)
+
 const injectCss = require('inject-css')
 const OldMetaMaskUiCss = require('../../old-ui/css')
 const NewMetaMaskUiCss = require('../../ui/css')
@@ -10,29 +16,36 @@ const NotificationManager = require('./lib/notification-manager')
 const notificationManager = new NotificationManager()
 const setupRaven = require('./lib/setupRaven')
 
-// create platform global
+start().catch(log.error)
-global.platform = new ExtensionPlatform()
 
-// setup sentry error reporting
+async function start() {
-const release = global.platform.getVersion()
-setupRaven({ release })
 
-// inject css
+  // create platform global
-// const css = MetaMaskUiCss()
+  global.platform = new ExtensionPlatform()
-// injectCss(css)
 
-// identify window type (popup, notification)
+  // setup sentry error reporting
-const windowType = isPopupOrNotification()
+  const release = global.platform.getVersion()
-global.METAMASK_UI_TYPE = windowType
+  setupRaven({ release })
-closePopupIfOpen(windowType)
 
-// setup stream to background
+  // Load translator
-const extensionPort = extension.runtime.connect({ name: windowType })
+  await translator.setLocale('ja')
-const connectionStream = new PortStream(extensionPort)
 
-// start ui
+  // inject css
-const container = document.getElementById('app-content')
+  // const css = MetaMaskUiCss()
-startPopup({ container, connectionStream }, (err, store) => {
+  // injectCss(css)
+
+  // identify window type (popup, notification)
+  const windowType = isPopupOrNotification()
+  global.METAMASK_UI_TYPE = windowType
+  closePopupIfOpen(windowType)
+
+  // setup stream to background
+  const extensionPort = extension.runtime.connect({ name: windowType })
+  const connectionStream = new PortStream(extensionPort)
+
+  // start ui
+  const container = document.getElementById('app-content')
+  startPopup({ container, connectionStream }, (err, store) => {
     if (err) return displayCriticalError(err)
 
     // Code commented out until we begin auto adding users to NewUI
@@ -60,18 +73,20 @@ startPopup({ container, connectionStream }, (err, store) => {
       }
       if (state.appState.shouldClose) notificationManager.closePopup()
     })
-})
+  })
 
 
-function closePopupIfOpen (windowType) {
+  function closePopupIfOpen (windowType) {
     if (windowType !== 'notification') {
       notificationManager.closePopup()
     }
-}
+  }
 
-function displayCriticalError (err) {
+  function displayCriticalError (err) {
     container.innerHTML = '<div class="critical-error">The MetaMask app failed to load: please open and close MetaMask again to restart.</div>'
     container.style.height = '80px'
     log.error(err.stack)
     throw err
+  }
+
 }

package-lock.json

@@ -3929,6 +3929,16 @@
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
       "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
     },
+    "debounce-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/debounce-stream/-/debounce-stream-2.0.0.tgz",
+      "integrity": "sha1-HjNADM/wFavY7DMGYaVitoQQsI8=",
+      "requires": {
+        "debounce": "1.1.0",
+        "duplexer": "0.1.1",
+        "through": "2.3.8"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

ui/app/accounts/import/index.js

@@ -2,23 +2,21 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
 import Select from 'react-select'
 
 // Subviews
 const JsonImportView = require('./json.js')
 const PrivateKeyImportView = require('./private-key.js')
 
-const menuItems = [
-  t('privateKey'),
-  t('jsonFile'),
-]
 
 module.exports = connect(mapStateToProps)(AccountImportSubview)
 
 function mapStateToProps (state) {
   return {
-    menuItems,
+    menuItems: [
+      t('privateKey'),
+      t('jsonFile'),
+    ],
   }
 }
 

ui/app/accounts/import/json.js

@@ -4,7 +4,8 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const FileInput = require('react-simple-file-input').default
-const t = require('../../../i18n')
+const t = global.getMessage
+
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 

ui/app/accounts/import/private-key.js

@@ -3,7 +3,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
 

ui/app/accounts/import/seed.js

@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 

ui/app/accounts/new-account/create-form.js

@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 class NewAccountCreateForm extends Component {
   constructor (props) {

ui/app/accounts/new-account/index.js

@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 const { getCurrentViewContext } = require('../../selectors')
 const classnames = require('classnames')
 

ui/app/app.js

@@ -4,7 +4,7 @@ const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
-const t = require('../i18n')
+const t = global.getMessage
 
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default

ui/app/components/account-dropdowns.js

@@ -9,7 +9,6 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
 
 class AccountDropdowns extends Component {
   constructor (props) {

ui/app/components/account-export.js

@@ -6,7 +6,7 @@ const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
 const connect = require('react-redux').connect
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 

ui/app/components/account-menu/index.js

@@ -6,7 +6,7 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
 

ui/app/components/bn-as-decimal-input.js

@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = BnAsDecimalInput
 

ui/app/components/coinbase-form.js

@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 

ui/app/components/copyButton.js

@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const t = global.getMessage
 
 const Tooltip = require('./tooltip')
 

ui/app/components/copyable.js

@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 
 const Tooltip = require('./tooltip')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const t = global.getMessage
 
 module.exports = Copyable
 

ui/app/components/customize-gas-modal/index.js

@@ -3,8 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 const GasModalCard = require('./gas-modal-card')
+const t = global.getMessage
 
 const ethUtil = require('ethereumjs-util')
 

ui/app/components/dropdowns/components/account-dropdowns.js

@@ -10,7 +10,8 @@ const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
-const t = require('../../../../i18n')
+const t = global.getMessage
+
 
 class AccountDropdowns extends Component {
   constructor (props) {

ui/app/components/dropdowns/network-dropdown.js

@@ -6,8 +6,9 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
-const t = require('../../../i18n')
 const R = require('ramda')
+const t = global.getMessage
+
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [

ui/app/components/dropdowns/token-menu-dropdown.js

@@ -3,7 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
+
 
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
 

ui/app/components/ens-input.js

@@ -8,7 +8,7 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const t = require('../../i18n')
+const t = global.getMessage
 
 
 module.exports = EnsInput

ui/app/components/modals/account-details-modal.js

@@ -8,7 +8,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {

ui/app/components/modals/account-modal-container.js

@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {

ui/app/components/modals/buy-options-modal.js

@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {

ui/app/components/modals/deposit-ether-modal.js

@@ -5,15 +5,16 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
-const t = require('../../../i18n')
+const t = global.getMessage
+
+let DIRECT_DEPOSIT_ROW_TITLE
+let DIRECT_DEPOSIT_ROW_TEXT
+let COINBASE_ROW_TITLE
+let COINBASE_ROW_TEXT
+let SHAPESHIFT_ROW_TITLE
+let SHAPESHIFT_ROW_TEXT
+let FAUCET_ROW_TITLE
 
-const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
-const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
-const COINBASE_ROW_TITLE = t('buyCoinbase')
-const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
-const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
-const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
-const FAUCET_ROW_TITLE = t('testFaucet')
 const facuetRowText = (networkName) => {
   return t('getEtherFromFaucet', [networkName])
 }
@@ -47,6 +48,15 @@ inherits(DepositEtherModal, Component)
 function DepositEtherModal () {
   Component.call(this)
 
+  // need to set after i18n locale has loaded
+  DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
+  COINBASE_ROW_TITLE = t('buyCoinbase')
+  COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
+  SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
+  SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
+  FAUCET_ROW_TITLE = t('testFaucet')
+
   this.state = {
     buyingWithShapeshift: false,
   }

ui/app/components/modals/edit-account-name-modal.js

@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {

ui/app/components/modals/export-private-key-modal.js

@@ -7,7 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
-const t = require('../../../i18n')
+const t = global.getMessage
 const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {

ui/app/components/modals/hide-token-confirmation-modal.js

@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 function mapStateToProps (state) {
   return {

ui/app/components/modals/modal.js

@@ -6,7 +6,6 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
-const t = require('../../../i18n')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
@@ -174,8 +173,8 @@ const MODALS = {
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('uiWelcome'),
+        header: 'uiWelcome',
-        message: t('uiWelcomeMessage'),
+        message: 'uiWelcomeMessage',
       }),
     ],
     mobileModalStyle: {
@@ -191,8 +190,8 @@ const MODALS = {
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('oldUI'),
+        header: 'oldUI',
-        message: t('oldUIMessage'),
+        message: 'oldUIMessage',
       }),
     ],
     mobileModalStyle: {

ui/app/components/modals/new-account-modal.js

@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 class NewAccountModal extends Component {
   constructor (props) {

ui/app/components/modals/notification-modal.js

@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
+const t = global.getMessage
 
 class NotificationModal extends Component {
   render () {
@@ -22,12 +23,12 @@ class NotificationModal extends Component {
       }, [
 
         h('div.notification-modal__header', {}, [
-          header,
+          t(header),
         ]),
 
         h('div.notification-modal__message-wrapper', {}, [
           h('div.notification-modal__message', {}, [
-            message,
+            t(message),
           ]),
         ]),
 

ui/app/components/pending-tx/confirm-deploy-contract.js

@@ -9,7 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 

ui/app/components/pending-tx/confirm-send-ether.js

@@ -9,7 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil, addCurrencies } = require('../../conversion-util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 

ui/app/components/pending-tx/confirm-send-token.js

@@ -6,7 +6,7 @@ const tokenAbi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(tokenAbi)
 const actions = require('../../actions')
-const t = require('../../../i18n')
+const t = global.getMessage
 const clone = require('clone')
 const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')

ui/app/components/send-token/index.js

@@ -7,7 +7,7 @@ const inherits = require('util').inherits
 const actions = require('../../actions')
 const selectors = require('../../selectors')
 const { isValidAddress, allNull } = require('../../util')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 // const BalanceComponent = require('./balance-component')
 const Identicon = require('../identicon')

ui/app/components/send/gas-fee-display-v2.js

@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyDisplay = require('./currency-display')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = GasFeeDisplay
 

ui/app/components/send/gas-tooltip.js

@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = GasTooltip
 

ui/app/components/send/to-autocomplete.js

@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('./account-list-item')
-const t = require('../../../i18n')
+const t = global.getMessage
 
 module.exports = ToAutoComplete
 

ui/create-i18n.js

@@ -0,0 +1,43 @@
+// cross-browser connection to extension i18n API
+const extension = require('extensionizer')
+const log = require('loglevel')
+
+
+class Translator {
+
+  async setLocale(localeName) {
+    this.localeName = localeName
+    this.locale = await fetchLocale(localeName)
+  }
+
+  getMessage (key, substitutions) {
+    // check locale is loaded
+    if (!this.locale) {
+      throw new Error('Translator - has not loaded a locale yet')
+    }
+    // check entry is present
+    const entry = this.locale[key]
+    if (!entry) {
+      log.error(`Translator - Unable to find value for "${key}"`)
+      throw new Error(`Translator - Unable to find value for "${key}"`)
+    }
+    let phrase = entry.message
+    // perform substitutions
+    if (substitutions && substitutions.length) {
+      phrase = phrase.replace(/\$1/g, substitutions[0])
+      if (substitutions.length > 1) {
+        phrase = phrase.replace(/\$2/g, substitutions[1])
+      }
+    }
+    return phrase
+  }
+
+}
+
+async function fetchLocale (localeName) {
+  const response = await fetch(`/_locales/${localeName}/messages.json`)
+  const locale = await response.json()
+  return locale
+}
+
+module.exports = Translator