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