diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 39d15fd83..dc7da90d0 100644 --- 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) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 0a5c1d36f..4ff08e029 100644 --- 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 = { diff --git a/app/scripts/popup-core.js b/app/scripts/popup-core.js index 2e4334bb1..5af913e98 100644 --- 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) } diff --git a/app/scripts/popup.js b/app/scripts/popup.js index 0677311da..fe6aae799 100644 --- a/app/scripts/popup.js +++ b/app/scripts/popup.js @@ -1,8 +1,8 @@ // setup i18n -const Translator = require('../../ui/create-i18n') -const translator = new Translator() -global.translator = translator -global.getMessage = translator.getMessage.bind(translator) +// 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') @@ -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 diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 0da435298..c67ccb647 100644 --- 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') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 9c4a79bec..ab5344dc6 100644 --- 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('jsonFile'), + t(this.props.localeMessages, 'privateKey'), + 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) diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 187abcc6a..b3f412e98 100644 --- 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) } diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 01a43afba..9a23b791a 100644 --- 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'), ]), ]), diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js index da70a9cb5..d701feedc 100644 --- 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 t = global.getMessage +const connect = require('../../metamask-connect') +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')), ]) ) } diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 78802d35a..38cffec64 100644 --- 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'), ]), ]), diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js index a4535ec83..8c305bfae 100644 --- 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')), ]), diff --git a/ui/app/actions.js b/ui/app/actions.js index 092af080b..4749d0735 100644 --- 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') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b8878b772..917a7c9fb 100644 --- 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') diff --git a/ui/app/app.js b/ui/app/app.js index f7fea0c22..34dd3d868 100644 --- 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('div.beta-label', t('beta')), + h('h1', t(this.props.localeMessages, 'appName')), + h('div.beta-label', t(this.props.localeMessages, 'beta')), ]), ]), diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 500c794e3..1f870a27c 100644 --- 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'), ), ] ) diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 41dc887a0..3bb7ec337 100644 --- 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 t = global.getMessage +const connect = require('../metamask-connect') +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')), ]) } } diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 09d002597..dc9c36c40 100644 --- 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 } } diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index d591ab455..f6292e358 100644 --- 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') diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js index 2abdebeb9..5b83b4332 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 = 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 diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 1e277a94b..b2b8cbbd5 100644 --- 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), }), diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index b9ef143e6..be413905e 100644 --- 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')), ]), ]) } diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index 610d5b6a8..db43668cb 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 = 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: { diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index e0bf66f7e..92a337a37 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 = 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: { diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index ac8f3b842..8e3960ce4 100644 --- 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'), - copy: t('gasPriceCalculation'), + title: t(this.props.localeMessages, 'gasPrice'), + 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'), - copy: t('gasLimitCalculation'), + title: t(this.props.localeMessages, 'gasLimit'), + copy: t(this.props.localeMessages, 'gasLimitCalculation'), }), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 0cdc2c0ae..73afb7009 100644 --- 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'), ), ] diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index a7acc7bb9..61c574aed 100644 --- 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 diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index 392f43c35..403d17591 100644 --- 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')), ]), ]), diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 4f6b3afe4..ea26acbca 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 = 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, }) } diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index a43d44f89..7e53ba2f0 100644 --- 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 diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index b803b7ceb..6b2a1b428 100644 --- 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') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index c6a3111b1..e4f2009aa 100644 --- 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')), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 964677244..ac6457b37 100644 --- 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')), ]), diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 33f8f6682..0e93e9a2d 100644 --- 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')), - h('div', {}, t('howToDeposit')), + }, t(this.props.localeMessages, 'transfers')), + 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('Coinbase', t('depositFiat'), () => toCoinbase(address)), + ? this.renderModalContentOption(networkName, t(this.props.localeMessages, 'testFaucet'), () => toFaucet(network)) + : 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('depositFromAccount'), + t(this.props.localeMessages, 'directDeposit'), + 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'))), ]), ]) } diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 03304207e..3984e2c7b 100644 --- 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_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') + DIRECT_DEPOSIT_ROW_TITLE = t(this.props.localeMessages, 'directDepositEther') + DIRECT_DEPOSIT_ROW_TEXT = t(this.props.localeMessages, 'directDepositEtherExplainer') + COINBASE_ROW_TITLE = t(this.props.localeMessages, 'buyCoinbase') + COINBASE_ROW_TEXT = t(this.props.localeMessages, 'buyCoinbaseExplainer') + SHAPESHIFT_ROW_TITLE = t(this.props.localeMessages, 'depositShapeShift') + SHAPESHIFT_ROW_TEXT = t(this.props.localeMessages, 'depositShapeShiftExplainer') + 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, diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 79d6109cc..02de5b99c 100644 --- 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'), ]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 3fc93b4f5..fac5366a4 100644 --- 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('typePassword') + ? t(this.props.localeMessages, 'copyPrivateKey') + : 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', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) + ? 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(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), diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index efd472cf3..a6cf2889f 100644 --- 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'), ]), ]), ]), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 9250cc77e..d0f4b486c 100644 --- 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') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 7fe367f3f..7f9b7a154 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 = 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'), ]), ]), ]), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js index 071d7ffd5..c05d80251 100644 --- 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 () { diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js index 24af5a0de..28dcb1902 100644 --- 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') diff --git a/ui/app/components/network.js b/ui/app/components/network.js index f3df2242a..d3a36b012 100644 --- 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'), ]) } diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index 8b0ce1e8b..ffc5ec6f1 100644 --- 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')), ]) ) } diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index 87e66855d..8edf21b48 100644 --- 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), ]), ]), diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index dc406b955..2364353be 100644 --- 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')), ]), ]) diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js index b896e9a7e..74f7b2ba0 100644 --- 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: { diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index b6bfb9afe..483574094 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 = 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('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]), + 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')), - h('div.confirm-screen-title', t('confirmContract')), + }, t(this.props.localeMessages, 'back')), + 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')]), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 7e1b25bb7..7fd498d83 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 = 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('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]), + 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 }) } } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 3a7678aa3..bd1ad82ef 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 = 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('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]), + 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('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + h('span.confirm-screen-label', [ t(this.props.localeMessages, 'total') + ' ' ]), + 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')), - h('div.page-container__title', t('confirm')), - h('div.page-container__subtitle', t('pleaseReviewTransaction')), + }, t(this.props.localeMessages, 'edit')), + h('div.page-container__title', t(this.props.localeMessages, 'confirm')), + 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 }) } } diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js index ae0a1171e..21eec3ce5 100644 --- 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: { diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js index ccde5e8af..91fa5f052 100644 --- 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')), ]), ]) diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index 83885539c..89504eca3 100644 --- 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') diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js index 4519f469b..96ccde214 100644 --- 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, - amount: !amount ? t('required') : null, - gasPrice: !gasPrice ? t('gasPriceRequired') : null, - gasLimit: !gasLimit ? t('gasLimitRequired') : null, + to: !to ? t(this.props.localeMessages, 'required') : null, + amount: !amount ? t(this.props.localeMessages, 'required') : null, + gasPrice: !gasPrice ? t(this.props.localeMessages, 'gasPriceRequired') : 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', [ diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js index 1ad3f69c1..749339694 100644 --- 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') diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 2aaa43350..c156e4482 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 = 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, diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js index 246c25152..8411fd61b 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 = global.getMessage +const t = require('../../../i18n-helper').getMessage module.exports = GasTooltip diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 1106902b7..a2a3ed389 100644 --- 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') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 1b0a1064a..ca034d855 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 = 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), diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 3f8c17932..46b16975a 100644 --- 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('limit'), limit), - this.renderMetadata(t('exchangeRate'), rate), - this.renderMetadata(t('min'), minimum), + this.renderMetadata(t(this.props.localeMessages, 'status'), limit ? t(this.props.localeMessages, 'available') : t(this.props.localeMessages, 'unavailable')), + this.renderMetadata(t(this.props.localeMessages, 'limit'), limit), + this.renderMetadata(t(this.props.localeMessages, 'exchangeRate'), rate), + 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', { diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index fddbc6821..cc401bc34 100644 --- 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])), - h('div', t('noDeposits')), + }, t(this.props.localeMessages, 'toETHviaShapeShift', [props.depositType])), + 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])), - h('div', t('conversionProgress')), + }, t(this.props.localeMessages, 'toETHviaShapeShift', [props.depositType])), + 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 '' } diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 7bf34e7b6..d6dd424ec 100644 --- 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 }] - notice = t('signNotice') + rows = [{ name: t(this.props.localeMessages, 'message'), value: data }] + 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')), ]) } diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 2f71c0687..7d7744fe6 100644 --- 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) { diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 0332fde88..a24781af1 100644 --- 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') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 01529aeda..439619158 100644 --- 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')), ]) } diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 6d6e79bd5..50555f2f3 100644 --- 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') + `)`), ]) } } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 07f7a06ae..66da7054e 100644 --- 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')), ]), ]), ]) diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 849d70489..db8621434 100644 --- 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') } } diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 34dc837ae..d536b2806 100644 --- 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) } diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 96d776270..f7ca9cc97 100644 --- 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')), ]) ) } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 18452205c..54770e436 100644 --- 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')), ]) } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index b4ffc48b7..cbf5cd1d2 100644 --- 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') diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 370fdd5b7..797718498 100644 --- 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 } diff --git a/ui/app/info.js b/ui/app/info.js index 49ff9f24a..3375478dd 100644 --- 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) diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index 5ab5d4c33..9d99eeb0d 100644 --- 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 diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index 4335186a5..5f323f7a1 100644 --- 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') diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index cb4088f61..0a604f505 100644 --- 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') diff --git a/ui/app/metamask-connect.js b/ui/app/metamask-connect.js new file mode 100644 index 000000000..eef90529b --- /dev/null +++ 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 \ No newline at end of file diff --git a/ui/app/new-keychain.js b/ui/app/new-keychain.js index cc9633166..6337faa08 100644 --- 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) diff --git a/ui/app/reducers.js b/ui/app/reducers.js index 70b7e71dc..f155b2bf3 100644 --- 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 } diff --git a/ui/app/reducers/locale.js b/ui/app/reducers/locale.js new file mode 100644 index 000000000..d8b78e1dd --- /dev/null +++ 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 + } +} diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 4ca7d221e..611c55391 100644 --- 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 diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 193c98353..fca3decce 100644 --- 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') diff --git a/ui/app/send.js b/ui/app/send.js index 517b7690d..b6fa0c0da 100644 --- 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') diff --git a/ui/app/settings.js b/ui/app/settings.js index 95b69e46e..708d11082 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -112,9 +112,9 @@ class Settings extends Component { } renderCurrentLocale () { - const { setCurrentLocale } = this.props - const currentLocaleName = global.translator.localeName - const currentLocale = locales.find(locale => locale.code === currentLocaleName) + const { updateCurrentLocale, currentLocale } = this.props + // const currentLocaleName = global.translator.localeName + // 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) - await global.translator.setLocale(newLocale) - log('did set new locale', newLocale) + // log('set new locale', newLocale) + // await global.translator.setLocale(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))) diff --git a/ui/app/template.js b/ui/app/template.js index d15b30fd2..83228ca77 100644 --- 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) diff --git a/ui/app/unlock.js b/ui/app/unlock.js index ac97d04d0..8b58ba1a8 100644 --- 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', diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js new file mode 100644 index 000000000..7ad8cd040 --- /dev/null +++ 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, +} diff --git a/ui/index.js b/ui/index.js index fdb2f23e0..c680accfe 100644 --- 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) - cb(null, store) + startApp(metamaskState, accountManager, opts.localeMessages, opts) + .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, })