From 0a711f0de0e342b24988a5da4ca5c64342153210 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 29 Mar 2018 12:30:44 -0230 Subject: Removes t from props via metamask-connect and instead places it on context via a provider. --- ui/app/accounts/import/index.js | 22 ++++++++++++++-------- ui/app/accounts/import/json.js | 25 +++++++++++++++---------- ui/app/accounts/import/private-key.js | 14 ++++++++++---- ui/app/accounts/import/seed.js | 12 +++++++++--- ui/app/accounts/new-account/create-form.js | 17 +++++++++++------ ui/app/accounts/new-account/index.js | 14 ++++++++++---- 6 files changed, 69 insertions(+), 35 deletions(-) (limited to 'ui/app/accounts') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index b09b50ef7..52d3dcde9 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -1,7 +1,8 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect import Select from 'react-select' // Subviews @@ -9,8 +10,13 @@ const JsonImportView = require('./json.js') const PrivateKeyImportView = require('./private-key.js') +AccountImportSubview.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(AccountImportSubview) + inherits(AccountImportSubview, Component) function AccountImportSubview () { Component.call(this) @@ -18,8 +24,8 @@ function AccountImportSubview () { AccountImportSubview.prototype.getMenuItemTexts = function () { return [ - this.props.t('privateKey'), - this.props.t('jsonFile'), + this.context.t('privateKey'), + this.context.t('jsonFile'), ] } @@ -32,7 +38,7 @@ AccountImportSubview.prototype.render = function () { h('div.new-account-import-form', [ h('.new-account-import-disclaimer', [ - h('span', this.props.t('importAccountMsg')), + h('span', this.context.t('importAccountMsg')), h('span', { style: { cursor: 'pointer', @@ -43,12 +49,12 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, this.props.t('here')), + }, this.context.t('here')), ]), h('div.new-account-import-form__select-section', [ - h('div.new-account-import-form__select-label', this.props.t('selectType')), + h('div.new-account-import-form__select-label', this.context.t('selectType')), h(Select, { className: 'new-account-import-form__select', @@ -80,9 +86,9 @@ AccountImportSubview.prototype.renderImportView = function () { const current = type || menuItems[0] switch (current) { - case this.props.t('privateKey'): + case this.context.t('privateKey'): return h(PrivateKeyImportView) - case this.props.t('jsonFile'): + case this.context.t('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 02b64858d..e53c1c9ca 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -1,7 +1,7 @@ const Component = require('react').Component const PropTypes = require('prop-types') const h = require('react-hyperscript') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const FileInput = require('react-simple-file-input').default @@ -24,11 +24,11 @@ class JsonImportSubview extends Component { return ( h('div.new-account-import-form__json', [ - h('p', this.props.t('usedByClients')), + h('p', this.context.t('usedByClients')), h('a.warning', { href: HELP_LINK, target: '_blank', - }, this.props.t('fileImportFail')), + }, this.context.t('fileImportFail')), h(FileInput, { readAs: 'text', @@ -43,7 +43,7 @@ class JsonImportSubview extends Component { h('input.new-account-import-form__input-password', { type: 'password', - placeholder: this.props.t('enterPassword'), + placeholder: this.context.t('enterPassword'), id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), }), @@ -53,13 +53,13 @@ class JsonImportSubview extends Component { h('button.btn-secondary.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ - this.props.t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - this.props.t('import'), + this.context.t('import'), ]), ]), @@ -84,14 +84,14 @@ class JsonImportSubview extends Component { const state = this.state if (!state) { - const message = this.props.t('validFileImport') + const message = this.context.t('validFileImport') return this.props.displayWarning(message) } const { fileContents } = state if (!fileContents) { - const message = this.props.t('needImportFile') + const message = this.context.t('needImportFile') return this.props.displayWarning(message) } @@ -99,7 +99,7 @@ class JsonImportSubview extends Component { const password = passwordInput.value if (!password) { - const message = this.props.t('needImportPassword') + const message = this.context.t('needImportPassword') return this.props.displayWarning(message) } @@ -112,7 +112,7 @@ JsonImportSubview.propTypes = { goHome: PropTypes.func, displayWarning: PropTypes.func, importNewJsonAccount: PropTypes.func, - t: PropTypes.func, + t: PropTypes.func, } const mapStateToProps = state => { @@ -129,4 +129,9 @@ const mapDispatchToProps = dispatch => { } } +JsonImportSubview.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview) + diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index bdf581b01..006131bdc 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -1,11 +1,17 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const actions = require('../../actions') +PrivateKeyImportView.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) + function mapStateToProps (state) { return { error: state.appState.warning, @@ -33,7 +39,7 @@ PrivateKeyImportView.prototype.render = function () { return ( h('div.new-account-import-form__private-key', [ - h('span.new-account-create-form__instruction', this.props.t('pastePrivateKey')), + h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')), h('div.new-account-import-form__private-key-password-container', [ @@ -50,13 +56,13 @@ PrivateKeyImportView.prototype.render = function () { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => goHome(), }, [ - this.props.t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - this.props.t('import'), + this.context.t('import'), ]), ]), diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js index 5479a6be9..d98909baa 100644 --- a/ui/app/accounts/import/seed.js +++ b/ui/app/accounts/import/seed.js @@ -1,10 +1,16 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect + +SeedImportSubview.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(SeedImportSubview) + function mapStateToProps (state) { return {} } @@ -20,10 +26,10 @@ SeedImportSubview.prototype.render = function () { style: { }, }, [ - this.props.t('pasteSeed'), + this.context.t('pasteSeed'), h('textarea'), h('br'), - h('button', this.props.t('submit')), + h('button', this.context.t('submit')), ]) ) } diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 69fbf1e35..48c74192a 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -1,11 +1,11 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') class NewAccountCreateForm extends Component { - constructor (props) { + constructor (props, context) { super(props) const { numberOfExistingAccounts = 0 } = props @@ -13,7 +13,7 @@ class NewAccountCreateForm extends Component { this.state = { newAccountName: '', - defaultAccountName: this.props.t('newAccountNumberName', [newAccountNumber]), + defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]), } } @@ -24,7 +24,7 @@ class NewAccountCreateForm extends Component { return h('div.new-account-create-form', [ h('div.new-account-create-form__input-label', {}, [ - this.props.t('accountName'), + this.context.t('accountName'), ]), h('div.new-account-create-form__input-wrapper', {}, [ @@ -40,13 +40,13 @@ class NewAccountCreateForm extends Component { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ - this.props.t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.props.createAccount(newAccountName || defaultAccountName), }, [ - this.props.t('create'), + this.context.t('create'), ]), ]), @@ -97,4 +97,9 @@ const mapDispatchToProps = dispatch => { } } +NewAccountCreateForm.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) + diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js index 584016974..207cf7760 100644 --- a/ui/app/accounts/new-account/index.js +++ b/ui/app/accounts/new-account/index.js @@ -1,7 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const { getCurrentViewContext } = require('../../selectors') const classnames = require('classnames') @@ -36,8 +37,13 @@ function AccountDetailsModal (props) { } } +AccountDetailsModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + AccountDetailsModal.prototype.render = function () { const { displayedForm, displayForm } = this.props @@ -45,7 +51,7 @@ AccountDetailsModal.prototype.render = function () { h('div.new-account__header', [ - h('div.new-account__title', this.props.t('newAccount')), + h('div.new-account__title', this.context.t('newAccount')), h('div.new-account__tabs', [ @@ -55,7 +61,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', }), onClick: () => displayForm('CREATE'), - }, this.props.t('createDen')), + }, this.context.t('createDen')), h('div.new-account__tabs__tab', { className: classnames('new-account__tabs__tab', { @@ -63,7 +69,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', }), onClick: () => displayForm('IMPORT'), - }, this.props.t('import')), + }, this.context.t('import')), ]), -- cgit