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/components/modals/account-details-modal.js | 12 +++++-- .../components/modals/account-modal-container.js | 10 ++++-- ui/app/components/modals/buy-options-modal.js | 22 ++++++++----- ui/app/components/modals/deposit-ether-modal.js | 38 +++++++++++++--------- .../components/modals/edit-account-name-modal.js | 12 +++++-- .../components/modals/export-private-key-modal.js | 20 ++++++++---- .../modals/hide-token-confirmation-modal.js | 16 ++++++--- ui/app/components/modals/new-account-modal.js | 21 +++++++----- ui/app/components/modals/notification-modal.js | 11 +++++-- .../notification-modals/confirm-reset-account.js | 2 +- .../modals/shapeshift-deposit-tx-modal.js | 2 +- 11 files changed, 109 insertions(+), 57 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index c43e3e3a5..d9885daf5 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity } = require('../../selectors') @@ -33,8 +34,13 @@ function AccountDetailsModal () { Component.call(this) } +AccountDetailsModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + // Not yet pixel perfect todos: // fonts of qr-header @@ -64,12 +70,12 @@ AccountDetailsModal.prototype.render = function () { h('button.btn-primary.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), - }, this.props.t('etherscanView')), + }, this.context.t('etherscanView')), // Holding on redesign for Export Private Key functionality h('button.btn-primary.account-modal__button', { onClick: () => showExportPrivateKeyModal(), - }, this.props.t('exportPrivateKey')), + }, this.context.t('exportPrivateKey')), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 70efe16cb..a9856b20f 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const { getSelectedIdentity } = require('../../selectors') const Identicon = require('../identicon') @@ -25,8 +26,13 @@ function AccountModalContainer () { Component.call(this) } +AccountModalContainer.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) + AccountModalContainer.prototype.render = function () { const { selectedIdentity, @@ -59,7 +65,7 @@ AccountModalContainer.prototype.render = function () { h('i.fa.fa-angle-left.fa-lg'), - h('span.account-modal-back__text', ' ' + this.props.t('back')), + h('span.account-modal-back__text', ' ' + this.context.t('back')), ]), diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index c0ee3632e..d871e7516 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames @@ -32,8 +33,13 @@ function BuyOptions () { Component.call(this) } +BuyOptions.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) + BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) { return h('div.buy-modal-content-option', { onClick, @@ -56,15 +62,15 @@ BuyOptions.prototype.render = function () { }, [ h('div.buy-modal-content-title', { style: {}, - }, this.props.t('transfers')), - h('div', {}, this.props.t('howToDeposit')), + }, this.context.t('transfers')), + h('div', {}, this.context.t('howToDeposit')), ]), h('div.buy-modal-content-options.flex-column.flex-center', {}, [ isTestNetwork - ? this.renderModalContentOption(networkName, this.props.t('testFaucet'), () => toFaucet(network)) - : this.renderModalContentOption('Coinbase', this.props.t('depositFiat'), () => toCoinbase(address)), + ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network)) + : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)), // h('div.buy-modal-content-option', {}, [ // h('div.buy-modal-content-option-title', {}, 'Shapeshift'), @@ -72,8 +78,8 @@ BuyOptions.prototype.render = function () { // ]),, this.renderModalContentOption( - this.props.t('directDeposit'), - this.props.t('depositFromAccount'), + this.context.t('directDeposit'), + this.context.t('depositFromAccount'), () => this.goToAccountDetailsModal() ), @@ -84,7 +90,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.props.t('cancel'))), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))), ]), ]) } diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index e38899d04..8854d258f 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames const ShapeshiftForm = require('../shapeshift-form') @@ -40,27 +41,32 @@ function mapDispatchToProps (dispatch) { } inherits(DepositEtherModal, Component) -function DepositEtherModal (props) { +function DepositEtherModal (props, context) { Component.call(this) // need to set after i18n locale has loaded - DIRECT_DEPOSIT_ROW_TITLE = props.t('directDepositEther') - DIRECT_DEPOSIT_ROW_TEXT = props.t('directDepositEtherExplainer') - COINBASE_ROW_TITLE = props.t('buyCoinbase') - COINBASE_ROW_TEXT = props.t('buyCoinbaseExplainer') - SHAPESHIFT_ROW_TITLE = props.t('depositShapeShift') - SHAPESHIFT_ROW_TEXT = props.t('depositShapeShiftExplainer') - FAUCET_ROW_TITLE = props.t('testFaucet') + DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther') + DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer') + COINBASE_ROW_TITLE = context.t('buyCoinbase') + COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer') + SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift') + SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer') + FAUCET_ROW_TITLE = context.t('testFaucet') this.state = { buyingWithShapeshift: false, } } +DepositEtherModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal) + DepositEtherModal.prototype.facuetRowText = function (networkName) { - return this.props.t('getEtherFromFaucet', [networkName]) + return this.context.t('getEtherFromFaucet', [networkName]) } DepositEtherModal.prototype.renderRow = function ({ @@ -122,10 +128,10 @@ DepositEtherModal.prototype.render = function () { h('div.page-container__header', [ - h('div.page-container__title', [this.props.t('depositEther')]), + h('div.page-container__title', [this.context.t('depositEther')]), h('div.page-container__subtitle', [ - this.props.t('needEtherInWallet'), + this.context.t('needEtherInWallet'), ]), h('div.page-container__header-close', { @@ -148,7 +154,7 @@ DepositEtherModal.prototype.render = function () { }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: this.props.t('viewAccount'), + buttonLabel: this.context.t('viewAccount'), onButtonClick: () => this.goToAccountDetailsModal(), hide: buyingWithShapeshift, }), @@ -157,7 +163,7 @@ DepositEtherModal.prototype.render = function () { logo: h('i.fa.fa-tint.fa-2x'), title: FAUCET_ROW_TITLE, text: this.facuetRowText(networkName), - buttonLabel: this.props.t('getEther'), + buttonLabel: this.context.t('getEther'), onButtonClick: () => toFaucet(network), hide: !isTestNetwork || buyingWithShapeshift, }), @@ -171,7 +177,7 @@ DepositEtherModal.prototype.render = function () { }), title: COINBASE_ROW_TITLE, text: COINBASE_ROW_TEXT, - buttonLabel: this.props.t('continueToCoinbase'), + buttonLabel: this.context.t('continueToCoinbase'), onButtonClick: () => toCoinbase(address), hide: isTestNetwork || buyingWithShapeshift, }), @@ -184,7 +190,7 @@ DepositEtherModal.prototype.render = function () { }), title: SHAPESHIFT_ROW_TITLE, text: SHAPESHIFT_ROW_TEXT, - buttonLabel: this.props.t('shapeshiftBuy'), + buttonLabel: this.context.t('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 4f5bc001a..c79645dbf 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const { getSelectedAccount } = require('../../selectors') @@ -32,8 +33,13 @@ function EditAccountNameModal (props) { } } +EditAccountNameModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) + EditAccountNameModal.prototype.render = function () { const { hideModal, saveAccountLabel, identity } = this.props @@ -50,7 +56,7 @@ EditAccountNameModal.prototype.render = function () { ]), h('div.edit-account-name-modal-title', { - }, [this.props.t('editAccountName')]), + }, [this.context.t('editAccountName')]), h('input.edit-account-name-modal-input', { placeholder: identity.name, @@ -69,7 +75,7 @@ EditAccountNameModal.prototype.render = function () { }, disabled: this.state.inputText.length === 0, }, [ - this.props.t('save'), + this.context.t('save'), ]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index d5a1ba7b8..1f80aed39 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const ethUtil = require('ethereumjs-util') const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') @@ -37,8 +38,13 @@ function ExportPrivateKeyModal () { } } +ExportPrivateKeyModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) + ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { const { exportAccount } = this.props @@ -48,8 +54,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { return h('span.private-key-password-label', privateKey - ? this.props.t('copyPrivateKey') - : this.props.t('typePassword') + ? this.context.t('copyPrivateKey') + : this.context.t('typePassword') ) } @@ -86,8 +92,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, ), (privateKey - ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.props.t('done')) - : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.props.t('confirm')) + ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done')) + : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm')) ), ]) @@ -120,7 +126,7 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), - h('span.modal-body-title', this.props.t('showPrivateKeys')), + h('span.modal-body-title', this.context.t('showPrivateKeys')), h('div.private-key-password', {}, [ this.renderPasswordLabel(privateKey), @@ -130,7 +136,7 @@ ExportPrivateKeyModal.prototype.render = function () { !warning ? null : h('span.private-key-password-error', warning), ]), - h('div.private-key-password-warning', this.props.t('privateKeyWarning')), + h('div.private-key-password-warning', this.context.t('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 5207b4c95..72e9c84eb 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -1,7 +1,8 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const Identicon = require('../identicon') @@ -31,8 +32,13 @@ function HideTokenConfirmationModal () { this.state = {} } +HideTokenConfirmationModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) + HideTokenConfirmationModal.prototype.render = function () { const { token, network, hideToken, hideModal } = this.props const { symbol, address } = token @@ -41,7 +47,7 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__container', { }, [ h('div.hide-token-confirmation__title', {}, [ - this.props.t('hideTokenPrompt'), + this.context.t('hideTokenPrompt'), ]), h(Identicon, { @@ -54,19 +60,19 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__symbol', {}, symbol), h('div.hide-token-confirmation__copy', {}, [ - this.props.t('readdToken'), + this.context.t('readdToken'), ]), h('div.hide-token-confirmation__buttons', {}, [ h('button.btn-cancel.hide-token-confirmation__button.allcaps', { onClick: () => hideModal(), }, [ - this.props.t('cancel'), + this.context.t('cancel'), ]), h('button.btn-clear.hide-token-confirmation__button.allcaps', { onClick: () => hideToken(address), }, [ - this.props.t('hide'), + this.context.t('hide'), ]), ]), ]), diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 372b65251..0635b3f72 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -1,7 +1,7 @@ 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 NewAccountModal extends Component { @@ -11,7 +11,7 @@ class NewAccountModal extends Component { const newAccountNumber = numberOfExistingAccounts + 1 this.state = { - newAccountName: `${props.t('account')} ${newAccountNumber}`, + newAccountName: `${this.context.t('account')} ${newAccountNumber}`, } } @@ -22,7 +22,7 @@ class NewAccountModal extends Component { h('div.new-account-modal-wrapper', { }, [ h('div.new-account-modal-header', {}, [ - this.props.t('newAccount'), + this.context.t('newAccount'), ]), h('div.modal-close-x', { @@ -30,19 +30,19 @@ class NewAccountModal extends Component { }), h('div.new-account-modal-content', {}, [ - this.props.t('accountName'), + this.context.t('accountName'), ]), h('div.new-account-input-wrapper', {}, [ h('input.new-account-input', { value: this.state.newAccountName, - placeholder: this.props.t('sampleAccountName'), + placeholder: this.context.t('sampleAccountName'), onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), h('div.new-account-modal-content.after-input', {}, [ - this.props.t('or'), + this.context.t('or'), ]), h('div.new-account-modal-content.after-input.pointer', { @@ -50,13 +50,13 @@ class NewAccountModal extends Component { this.props.hideModal() this.props.showImportPage() }, - }, this.props.t('importAnAccount')), + }, this.context.t('importAnAccount')), h('div.new-account-modal-content.button.allcaps', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - this.props.t('save'), + this.context.t('save'), ]), ]), ]), @@ -104,4 +104,9 @@ const mapDispatchToProps = dispatch => { } } +NewAccountModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) + diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js index 5d6dca177..46a4c8a21 100644 --- a/ui/app/components/modals/notification-modal.js +++ b/ui/app/components/modals/notification-modal.js @@ -1,7 +1,7 @@ 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 NotificationModal extends Component { @@ -22,12 +22,12 @@ class NotificationModal extends Component { }, [ h('div.notification-modal__header', {}, [ - this.props.t(header), + this.context.t(header), ]), h('div.notification-modal__message-wrapper', {}, [ h('div.notification-modal__message', {}, [ - this.props.t(message), + this.context.t(message), ]), ]), @@ -73,4 +73,9 @@ const mapDispatchToProps = dispatch => { } } +NotificationModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(null, mapDispatchToProps)(NotificationModal) + diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js index 94ee997ab..89fa9bef1 100644 --- a/ui/app/components/modals/notification-modals/confirm-reset-account.js +++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js @@ -1,7 +1,7 @@ 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') const NotifcationModal = require('../notification-modal') diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js index 28dcb1902..24af5a0de 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('../../metamask-connect') +const connect = require('react-redux').connect const actions = require('../../actions') const QrView = require('../qr-code') const AccountModalContainer = require('./account-modal-container') -- cgit v1.2.3