diff options
Diffstat (limited to 'ui/app/components/pages')
8 files changed, 153 insertions, 115 deletions
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js index 3b7a65b21..b33373c19 100644 --- a/ui/app/components/pages/add-token.js +++ b/ui/app/components/pages/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') @@ -25,7 +25,6 @@ const fuse = new Fuse(contractList, { }) const actions = require('../../actions') const ethUtil = require('ethereumjs-util') -const t = require('../../../i18n') const { tokenInfoGetter } = require('../../token-util') const { DEFAULT_ROUTE } = require('../../routes') @@ -140,28 +139,31 @@ AddTokenScreen.prototype.validate = function () { if (customAddress) { const validAddress = ethUtil.isValidAddress(customAddress) if (!validAddress) { - errors.customAddress = t('invalidAddress') + errors.customAddress = this.props.t('invalidAddress') } - const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36 + const validDecimals = customDecimals !== null + && customDecimals !== '' + && customDecimals >= 0 + && customDecimals < 36 if (!validDecimals) { - errors.customDecimals = t('decimalsMustZerotoTen') + errors.customDecimals = this.props.t('decimalsMustZerotoTen') } const symbolLen = customSymbol.trim().length const validSymbol = symbolLen > 0 && symbolLen < 10 if (!validSymbol) { - errors.customSymbol = t('symbolBetweenZeroTen') + errors.customSymbol = this.props.t('symbolBetweenZeroTen') } const ownAddress = identitiesList.includes(standardAddress) if (ownAddress) { - errors.customAddress = t('personalAddressDetected') + errors.customAddress = this.props.t('personalAddressDetected') } const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) if (tokenAlreadyAdded) { - errors.customAddress = t('tokenAlreadyAdded') + errors.customAddress = this.props.t('tokenAlreadyAdded') } } else if ( Object.entries(selectedTokens) @@ -169,7 +171,7 @@ AddTokenScreen.prototype.validate = function () { isEmpty && !isSelected ), true) ) { - errors.tokenSelector = t('mustSelectOne') + errors.tokenSelector = this.props.t('mustSelectOne') } return { @@ -199,7 +201,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customAddress, }), }, [ - h('div.add-token__add-custom-label', t('tokenAddress')), + h('div.add-token__add-custom-label', this.props.t('tokenAddress')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenAddressDidChange, @@ -212,7 +214,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customSymbol, }), }, [ - h('div.add-token__add-custom-label', t('tokenSymbol')), + h('div.add-token__add-custom-label', this.props.t('tokenSymbol')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenSymbolDidChange, @@ -226,7 +228,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customDecimals, }), }, [ - h('div.add-token__add-custom-label', t('decimal')), + h('div.add-token__add-custom-label', this.props.t('decimal')), h('input.add-token__add-custom-input', { type: 'number', onChange: this.tokenDecimalsDidChange, @@ -248,7 +250,7 @@ AddTokenScreen.prototype.renderTokenList = function () { const results = [...addressSearchResult, ...fuseSearchResult] return h('div', [ - results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')), + results.length > 0 && h('div.add-token__token-icons-title', this.props.t('popularTokens')), h('div.add-token__token-icons-container', Array(6).fill(undefined) .map((_, i) => { const { logo, symbol, name, address } = results[i] || {} @@ -303,10 +305,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token', [ h('div.add-token__wrapper', [ h('div.add-token__title-container.add-token__confirmation-title', [ - h('div.add-token__description', t('likeToAddTokens')), + h('div.add-token__description', this.props.t('likeToAddTokens')), ]), h('div.add-token__content-container.add-token__confirmation-content', [ - h('div.add-token__description.add-token__confirmation-description', t('balances')), + h('div.add-token__description.add-token__confirmation-description', this.props.t('balances')), h('div.add-token__confirmation-token-list', Object.entries(tokens) .map(([ address, token ]) => ( @@ -325,10 +327,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { onClick: () => this.setState({ isShowingConfirmation: false }), - }, t('back')), + }, this.props.t('back')), h('button.btn-primary--lg', { onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)), - }, t('addTokens')), + }, this.props.t('addTokens')), ]), ]) ) @@ -348,14 +350,14 @@ AddTokenScreen.prototype.renderTabs = function () { h('div.add-token__content-container', [ h('div.add-token__info-box', [ h('div.add-token__info-box__close'), - h('div.add-token__info-box__title', t('whatsThis')), - h('div.add-token__info-box__copy', t('keepTrackTokens')), - h('div.add-token__info-box__copy--blue', t('learnMore')), + h('div.add-token__info-box__title', this.props.t('whatsThis')), + h('div.add-token__info-box__copy', this.props.t('keepTrackTokens')), + h('div.add-token__info-box__copy--blue', this.props.t('learnMore')), ]), h('div.add-token__input-container', [ h('input.add-token__input', { type: 'text', - placeholder: t('searchTokens'), + placeholder: this.props.t('searchTokens'), onChange: e => this.setState({ searchQuery: e.target.value }), }), h('div.add-token__search-input-error-message', errors.tokenSelector), @@ -379,9 +381,9 @@ AddTokenScreen.prototype.render = function () { onClick: () => history.goBack(), }, [ h('i.fa.fa-angle-left.fa-lg'), - h('span', t('cancel')), + h('span', this.props.t('cancel')), ]), - h('div.add-token__header__title', t('addTokens')), + h('div.add-token__header__title', this.props.t('addTokens')), !isShowingConfirmation && h('div.add-token__header__tabs', [ h('div.add-token__header__tabs__tab', { @@ -390,7 +392,7 @@ AddTokenScreen.prototype.render = function () { 'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH', }), onClick: () => this.displayTab('SEARCH'), - }, t('search')), + }, this.props.t('search')), h('div.add-token__header__tabs__tab', { className: classnames('add-token__header__tabs__tab', { @@ -398,11 +400,11 @@ AddTokenScreen.prototype.render = function () { 'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN', }), onClick: () => this.displayTab('CUSTOM_TOKEN'), - }, t('customToken')), + }, this.props.t('customToken')), ]), ]), -// + isShowingConfirmation ? this.renderConfirmation() : this.renderTabs(), @@ -410,10 +412,10 @@ AddTokenScreen.prototype.render = function () { !isShowingConfirmation && h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { onClick: () => history.goBack(), - }, t('cancel')), + }, this.props.t('cancel')), h('button.btn-primary--lg.add-token__confirm-button', { onClick: this.onNext, - }, t('next')), + }, this.props.t('next')), ]), ]) } diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js index 8031ea36d..26353b670 100644 --- a/ui/app/components/pages/create-account/import-account/index.js +++ b/ui/app/components/pages/create-account/import-account/index.js @@ -1,43 +1,38 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const connect = require('react-redux').connect -const t = require('../../../../../i18n') +const connect = require('../../../../metamask-connect') import Select from 'react-select' // Subviews const JsonImportView = require('./json.js') const PrivateKeyImportView = require('./private-key.js') -const menuItems = [ - t('privateKey'), - t('jsonFile'), -] -module.exports = connect(mapStateToProps)(AccountImportSubview) - -function mapStateToProps (state) { - return { - menuItems, - } -} +module.exports = connect()(AccountImportSubview) inherits(AccountImportSubview, Component) function AccountImportSubview () { Component.call(this) } +AccountImportSubview.prototype.getMenuItemTexts = function () { + return [ + this.props.t('privateKey'), + this.props.t('jsonFile'), + ] +} + AccountImportSubview.prototype.render = function () { - const props = this.props const state = this.state || {} - const { menuItems } = props + const menuItems = this.getMenuItemTexts() const { type } = state return ( h('div.new-account-import-form', [ h('.new-account-import-disclaimer', [ - h('span', t('importAccountMsg')), + h('span', this.props.t('importAccountMsg')), h('span', { style: { cursor: 'pointer', @@ -48,12 +43,12 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, t('here')), + }, this.props.t('here')), ]), h('div.new-account-import-form__select-section', [ - h('div.new-account-import-form__select-label', t('selectType')), + h('div.new-account-import-form__select-label', this.props.t('selectType')), h(Select, { className: 'new-account-import-form__select', @@ -79,16 +74,15 @@ AccountImportSubview.prototype.render = function () { } AccountImportSubview.prototype.renderImportView = function () { - const props = this.props const state = this.state || {} const { type } = state - const { menuItems } = props + const menuItems = this.getMenuItemTexts() const current = type || menuItems[0] switch (current) { - case t('privateKey'): + case this.props.t('privateKey'): return h(PrivateKeyImportView) - case t('jsonFile'): + case this.props.t('jsonFile'): return h(JsonImportView) default: return h(JsonImportView) diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index 554a67df4..2e858a8f0 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -3,10 +3,9 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const { withRouter } = require('react-router-dom') const { compose } = require('recompose') -const { connect } = require('react-redux') +const connect = require('../../../../metamask-connect') const actions = require('../../../../actions') const FileInput = require('react-simple-file-input').default -const t = require('../../../../../i18n') const { DEFAULT_ROUTE } = require('../../../../routes') const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' @@ -26,11 +25,11 @@ class JsonImportSubview extends Component { return ( h('div.new-account-import-form__json', [ - h('p', t('usedByClients')), + h('p', this.props.t('usedByClients')), h('a.warning', { href: HELP_LINK, target: '_blank', - }, t('fileImportFail')), + }, this.props.t('fileImportFail')), h(FileInput, { readAs: 'text', @@ -45,7 +44,7 @@ class JsonImportSubview extends Component { h('input.new-account-import-form__input-password', { type: 'password', - placeholder: t('enterPassword'), + placeholder: this.props.t('enterPassword'), id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), }), @@ -55,13 +54,13 @@ class JsonImportSubview extends Component { h('button.btn-secondary.new-account-create-form__button', { onClick: () => this.props.history.push(DEFAULT_ROUTE), }, [ - t('cancel'), + this.props.t('cancel'), ]), h('button.btn-primary.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - t('import'), + this.props.t('import'), ]), ]), @@ -86,14 +85,14 @@ class JsonImportSubview extends Component { const state = this.state if (!state) { - const message = t('validFileImport') + const message = this.props.t('validFileImport') return this.props.displayWarning(message) } const { fileContents } = state if (!fileContents) { - const message = t('needImportFile') + const message = this.props.t('needImportFile') return this.props.displayWarning(message) } @@ -101,7 +100,7 @@ class JsonImportSubview extends Component { const password = passwordInput.value if (!password) { - const message = t('needImportPassword') + const message = this.props.t('needImportPassword') return this.props.displayWarning(message) } @@ -115,6 +114,7 @@ JsonImportSubview.propTypes = { displayWarning: PropTypes.func, importNewJsonAccount: PropTypes.func, history: PropTypes.object, + t: PropTypes.func, } const mapStateToProps = state => { diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index a30492e3b..17a32c10f 100644 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -3,10 +3,9 @@ const Component = require('react').Component const h = require('react-hyperscript') const { withRouter } = require('react-router-dom') const { compose } = require('recompose') -const { connect } = require('react-redux') +const connect = require('../../../../metamask-connect') const actions = require('../../../../actions') const { DEFAULT_ROUTE } = require('../../../../routes') -const t = require('../../../../../i18n') module.exports = compose( withRouter, @@ -39,7 +38,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', this.props.t('pastePrivateKey')), h('div.new-account-import-form__private-key-password-container', [ @@ -56,13 +55,13 @@ PrivateKeyImportView.prototype.render = function () { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => this.props.history.push(DEFAULT_ROUTE), }, [ - t('cancel'), + this.props.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - t('import'), + this.props.t('import'), ]), ]), diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js index 85fa93faa..15dd98c73 100644 --- a/ui/app/components/pages/create-account/import-account/seed.js +++ b/ui/app/components/pages/create-account/import-account/seed.js @@ -1,8 +1,7 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const connect = require('react-redux').connect -const t = require('../../../../../i18n') +const connect = require('../../../../metamask-connect') module.exports = connect(mapStateToProps)(SeedImportSubview) @@ -21,10 +20,10 @@ SeedImportSubview.prototype.render = function () { style: { }, }, [ - t('pasteSeed'), + this.props.t('pasteSeed'), h('textarea'), h('br'), - h('button', t('submit')), + h('button', this.props.t('submit')), ]) ) } diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js index ceeb8a05b..dfe2a2ab1 100644 --- a/ui/app/components/pages/create-account/new-account.js +++ b/ui/app/components/pages/create-account/new-account.js @@ -1,10 +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 { DEFAULT_ROUTE } = require('../../../routes') -const t = require('../../../../i18n') class NewAccountCreateForm extends Component { constructor (props) { @@ -15,7 +14,7 @@ class NewAccountCreateForm extends Component { this.state = { newAccountName: '', - defaultAccountName: t('newAccountNumberName', [newAccountNumber]), + defaultAccountName: this.props.t('newAccountNumberName', [newAccountNumber]), } } @@ -26,7 +25,7 @@ class NewAccountCreateForm extends Component { return h('div.new-account-create-form', [ h('div.new-account-create-form__input-label', {}, [ - t('accountName'), + this.props.t('accountName'), ]), h('div.new-account-create-form__input-wrapper', {}, [ @@ -42,7 +41,7 @@ class NewAccountCreateForm extends Component { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => history.push(DEFAULT_ROUTE), }, [ - t('cancel'), + this.props.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { @@ -51,7 +50,7 @@ class NewAccountCreateForm extends Component { .then(() => history.push(DEFAULT_ROUTE)) }, }, [ - t('create'), + this.props.t('create'), ]), ]), @@ -66,6 +65,7 @@ NewAccountCreateForm.propTypes = { createAccount: PropTypes.func, numberOfExistingAccounts: PropTypes.number, history: PropTypes.object, + t: PropTypes.func, } const mapStateToProps = state => { diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js index cb1782562..adb2fdfcd 100644 --- a/ui/app/components/pages/settings/info.js +++ b/ui/app/components/pages/settings/info.js @@ -1,7 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const t = require('../../../../i18n') +const connect = require('../../../metamask-connect') class Info extends Component { renderLogo () { @@ -15,13 +15,13 @@ class Info extends Component { renderInfoLinks () { return ( h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', t('links')), + h('div.settings__info-link-header', this.props.t('links')), h('div.settings__info-link-item', [ h('a', { href: 'https://metamask.io/privacy.html', target: '_blank', }, [ - h('span.settings__info-link', t('privacyMsg')), + h('span.settings__info-link', this.props.t('privacyMsg')), ]), ]), h('div.settings__info-link-item', [ @@ -29,7 +29,7 @@ class Info extends Component { href: 'https://metamask.io/terms.html', target: '_blank', }, [ - h('span.settings__info-link', t('terms')), + h('span.settings__info-link', this.props.t('terms')), ]), ]), h('div.settings__info-link-item', [ @@ -37,7 +37,7 @@ class Info extends Component { href: 'https://metamask.io/attributions.html', target: '_blank', }, [ - h('span.settings__info-link', t('attributions')), + h('span.settings__info-link', this.props.t('attributions')), ]), ]), h('hr.settings__info-separator'), @@ -46,7 +46,7 @@ class Info extends Component { href: 'https://support.metamask.io', target: '_blank', }, [ - h('span.settings__info-link', t('supportCenter')), + h('span.settings__info-link', this.props.t('supportCenter')), ]), ]), h('div.settings__info-link-item', [ @@ -54,7 +54,7 @@ class Info extends Component { href: 'https://metamask.io/', target: '_blank', }, [ - h('span.settings__info-link', t('visitWebSite')), + h('span.settings__info-link', this.props.t('visitWebSite')), ]), ]), h('div.settings__info-link-item', [ @@ -62,7 +62,7 @@ class Info extends Component { target: '_blank', href: 'mailto:help@metamask.io?subject=Feedback', }, [ - h('span.settings__info-link', t('emailUs')), + h('span.settings__info-link', this.props.t('emailUs')), ]), ]), ]) @@ -82,7 +82,7 @@ class Info extends Component { h('div.settings__info-item', [ h( 'div.settings__info-about', - t('builtInCalifornia') + this.props.t('builtInCalifornia') ), ]), ]), @@ -103,6 +103,7 @@ Info.propTypes = { warning: PropTypes.string, location: PropTypes.object, history: PropTypes.object, + t: PropTypes.func, } -module.exports = Info +module.exports = connect()(Info) diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js index 219ace651..7b3704c4d 100644 --- a/ui/app/components/pages/settings/settings.js +++ b/ui/app/components/pages/settings/settings.js @@ -3,7 +3,7 @@ const { withRouter } = require('react-router-dom') const { compose } = require('recompose') 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 infuraCurrencies = require('../../../infura-conversion.json') const validUrl = require('valid-url') @@ -11,8 +11,8 @@ const { exportAsFile } = require('../../../util') const SimpleDropdown = require('../../dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') const { REVEAL_SEED_ROUTE } = require('../../../routes') +const locales = require('../../../../../app/_locales/index.json') const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums -const t = require('../../../../i18n') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -28,6 +28,16 @@ const getInfuraCurrencyOptions = () => { }) } +const getLocaleOptions = () => { + return locales.map((locale) => { + return { + displayValue: `${locale.name}`, + key: locale.code, + value: locale.code, + } + }) +} + class Settings extends Component { constructor (props) { super(props) @@ -42,7 +52,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('blockiesIdenticon')), + h('span', this.props.t('blockiesIdenticon')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ @@ -62,13 +72,13 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('currentConversion')), + h('span', this.props.t('currentConversion')), h('span.settings__content-description', `Updated ${Date(conversionDate)}`), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h(SimpleDropdown, { - placeholder: t('selectCurrency'), + placeholder: this.props.t('selectCurrency'), options: getInfuraCurrencyOptions(), selectedOption: currentCurrency, onSelect: newCurrency => setCurrentCurrency(newCurrency), @@ -78,6 +88,30 @@ class Settings extends Component { ]) } + renderCurrentLocale () { + const { updateCurrentLocale, currentLocale } = this.props + const currentLocaleMeta = locales.find(locale => locale.code === currentLocale) + + return h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'Current Language'), + h('span.settings__content-description', `${currentLocaleMeta.name}`), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h(SimpleDropdown, { + placeholder: 'Select Locale', + options: getLocaleOptions(), + selectedOption: currentLocale, + onSelect: async (newLocale) => { + updateCurrentLocale(newLocale) + }, + }), + ]), + ]), + ]) + } + renderCurrentProvider () { const { metamask: { provider = {} } } = this.props let title, value, color @@ -85,31 +119,31 @@ class Settings extends Component { switch (provider.type) { case 'mainnet': - title = t('currentNetwork') - value = t('mainnet') + title = this.props.t('currentNetwork') + value = this.props.t('mainnet') color = '#038789' break case 'ropsten': - title = t('currentNetwork') - value = t('ropsten') + title = this.props.t('currentNetwork') + value = this.props.t('ropsten') color = '#e91550' break case 'kovan': - title = t('currentNetwork') - value = t('kovan') + title = this.props.t('currentNetwork') + value = this.props.t('kovan') color = '#690496' break case 'rinkeby': - title = t('currentNetwork') - value = t('rinkeby') + title = this.props.t('currentNetwork') + value = this.props.t('rinkeby') color = '#ebb33f' break default: - title = t('currentRpc') + title = this.props.t('currentRpc') value = provider.rpcTarget } @@ -130,12 +164,12 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('newRPC')), + h('span', this.props.t('newRPC')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('input.settings__input', { - placeholder: t('newRPC'), + placeholder: this.props.t('newRPC'), onChange: event => this.setState({ newRpc: event.target.value }), onKeyPress: event => { if (event.key === 'Enter') { @@ -148,7 +182,7 @@ class Settings extends Component { event.preventDefault() this.validateRpc(this.state.newRpc) }, - }, t('save')), + }, this.props.t('save')), ]), ]), ]) @@ -164,9 +198,9 @@ class Settings extends Component { const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { - displayWarning(t('uriErrorMsg')) + displayWarning(this.props.t('uriErrorMsg')) } else { - displayWarning(t('invalidRPC')) + displayWarning(this.props.t('invalidRPC')) } } } @@ -175,10 +209,10 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('div', t('stateLogs')), + h('div', this.props.t('stateLogs')), h( 'div.settings__content-description', - t('stateLogsDescription') + this.props.t('stateLogsDescription') ), ]), h('div.settings__content-item', [ @@ -187,13 +221,13 @@ class Settings extends Component { onClick (event) { window.logStateString((err, result) => { if (err) { - this.state.dispatch(actions.displayWarning(t('stateLogError'))) + this.state.dispatch(actions.displayWarning(this.props.t('stateLogError'))) } else { exportAsFile('MetaMask State Logs.json', result) } }) }, - }, t('downloadStateLogs')), + }, this.props.t('downloadStateLogs')), ]), ]), ]) @@ -205,12 +239,15 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', t('revealSeedWords')), + h('div.settings__content-item', this.props.t('revealSeedWords')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--red', { - onClick: () => history.push(REVEAL_SEED_ROUTE), - }, t('revealSeedWords')), + onClick: event => { + event.preventDefault() + history.push(REVEAL_SEED_ROUTE) + }, + }, this.props.t('revealSeedWords')), ]), ]), ]) @@ -222,7 +259,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', t('useOldUI')), + h('div.settings__content-item', this.props.t('useOldUI')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--orange', { @@ -230,7 +267,7 @@ class Settings extends Component { event.preventDefault() setFeatureFlagToBeta() }, - }, t('useOldUI')), + }, this.props.t('useOldUI')), ]), ]), ]) @@ -241,7 +278,7 @@ class Settings extends Component { const { showResetAccountConfirmationModal } = this.props return h('div.settings__content-row', [ - h('div.settings__content-item', t('resetAccount')), + h('div.settings__content-item', this.props.t('resetAccount')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--orange', { @@ -249,7 +286,7 @@ class Settings extends Component { event.preventDefault() showResetAccountConfirmationModal() }, - }, t('resetAccount')), + }, this.props.t('resetAccount')), ]), ]), ]) @@ -262,6 +299,7 @@ class Settings extends Component { h('div.settings__content', [ warning && h('div.settings__error', warning), this.renderCurrentConversion(), + this.renderCurrentLocale(), // this.renderCurrentProvider(), this.renderNewRpcUrl(), this.renderStateLogs(), @@ -286,6 +324,9 @@ Settings.propTypes = { warning: PropTypes.string, history: PropTypes.object, isMascara: PropTypes.bool, + updateCurrentLocale: PropTypes.func, + currentLocale: PropTypes.string, + t: PropTypes.func, } const mapStateToProps = state => { @@ -293,6 +334,7 @@ const mapStateToProps = state => { metamask: state.metamask, warning: state.appState.warning, isMascara: state.metamask.isMascara, + currentLocale: state.metamask.currentLocale, } } @@ -303,6 +345,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))) |