From 8e6ab7df052a5ca43b15edc9c308c626bb23e64c Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Mar 2018 22:38:04 -0230 Subject: Checking for sufficient balance in confirm ether screen; includes error messages for user. --- ui/app/components/pending-tx/confirm-send-ether.js | 62 ++++++++++++++++++++-- ui/app/components/send/send-utils.js | 12 ++++- 2 files changed, 69 insertions(+), 5 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index d1ce25cbf..14077b5e8 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -7,11 +7,16 @@ const clone = require('clone') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const classnames = require('classnames') const { conversionUtil, addCurrencies, multiplyCurrencies, } = require('../../conversion-util') +const { + getGasTotal, + isBalanceSufficient, +} = require('../send/send-utils') const GasFeeDisplay = require('../send/gas-fee-display-v2') const t = require('../../../i18n') const SenderToRecipient = require('../sender-to-recipient') @@ -30,12 +35,14 @@ function mapStateToProps (state) { } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + const { balance } = accounts[selectedAddress] return { conversionRate, identities, selectedAddress, currentCurrency, send, + balance, } } @@ -86,6 +93,7 @@ function mapDispatchToProps (dispatch) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -218,7 +226,12 @@ ConfirmSendEther.prototype.render = function () { conversionRate, currentCurrency: convertedCurrency, showCustomizeGasModal, - send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + send: { + gasTotal, + gasLimit: sendGasLimit, + gasPrice: sendGasPrice, + errors, + }, } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -326,7 +339,12 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ + h('div', { + className: classnames({ + 'confirm-screen-section-column--with-error': errors['insufficientFunds'], + 'confirm-screen-section-column': !errors['insufficientFunds'], + }) + }, [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), @@ -335,6 +353,8 @@ ConfirmSendEther.prototype.render = function () { h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), + + this.renderErrorMessage('insufficientFunds'), ]), ]), @@ -439,16 +459,28 @@ ConfirmSendEther.prototype.render = function () { ) } +ConfirmSendEther.prototype.renderErrorMessage = function (message) { + const { send: { errors } } = this.props + + return errors[message] + ? h('div.confirm-screen-error', [ errors[message] ]) + : null +} + ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() + const { updateSendErrors } = this.props const txMeta = this.gatherTxMeta() const valid = this.checkValidity() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) this.setState({ valid, submitting: true }) - if (valid && this.verifyGasParams()) { + if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) + } else if (!balanceIsSufficient) { + updateSendErrors({ insufficientFunds: t('insufficientFunds') }) } else { - this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) + updateSendErrors({ invalidGasParams: t('invalidGasParams') }) this.setState({ submitting: false }) } } @@ -460,6 +492,28 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) { cancelTransaction(txMeta) } +ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) { + const { + balance, + conversionRate, + } = this.props + const { + txParams: { + gas, + gasPrice, + value: amount, + }, + } = txMeta + const gasTotal = getGasTotal(gas, gasPrice) + + return isBalanceSufficient({ + amount, + gasTotal, + balance, + conversionRate, + }) +} + ConfirmSendEther.prototype.checkValidity = function () { const form = this.getFormEl() const valid = form.checkValidity() diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js index d8211930d..71bfb2668 100644 --- a/ui/app/components/send/send-utils.js +++ b/ui/app/components/send/send-utils.js @@ -2,6 +2,7 @@ const { addCurrencies, conversionUtil, conversionGTE, + multiplyCurrencies, } = require('../../conversion-util') const { calcTokenAmount, @@ -31,7 +32,7 @@ function isBalanceSufficient ({ { value: totalAmount, fromNumericBase: 'hex', - conversionRate: amountConversionRate, + conversionRate: amountConversionRate || conversionRate, fromCurrency: primaryCurrency, }, ) @@ -62,7 +63,16 @@ function isTokenBalanceSufficient ({ return tokenBalanceIsSufficient } +function getGasTotal (gasLimit, gasPrice) { + return multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) +} + module.exports = { + getGasTotal, isBalanceSufficient, isTokenBalanceSufficient, } -- cgit From 74ac3bb2a7130675a10e1701d569b2c35a948f8f Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Mar 2018 23:23:57 -0230 Subject: Confirm send token detects if balance is sufficient for gas. --- ui/app/components/pending-tx/confirm-send-ether.js | 4 +- ui/app/components/pending-tx/confirm-send-token.js | 59 ++++++++++++++++++++-- 2 files changed, 56 insertions(+), 7 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 14077b5e8..b775e0ad0 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -16,7 +16,7 @@ const { const { getGasTotal, isBalanceSufficient, -} = require('../send/send-utils') +} = require('../send/send-utils') const GasFeeDisplay = require('../send/gas-fee-display-v2') const t = require('../../../i18n') const SenderToRecipient = require('../sender-to-recipient') @@ -343,7 +343,7 @@ ConfirmSendEther.prototype.render = function () { className: classnames({ 'confirm-screen-section-column--with-error': errors['insufficientFunds'], 'confirm-screen-section-column': !errors['insufficientFunds'], - }) + }), }, [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index f9276e8a5..5cc2585f7 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -17,9 +17,14 @@ const { multiplyCurrencies, addCurrencies, } = require('../../conversion-util') +const { + getGasTotal, + isBalanceSufficient, +} = require('../send/send-utils') const { calcTokenAmount, } = require('../../token-util') +const classnames = require('classnames') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -41,9 +46,10 @@ function mapStateToProps (state, ownProps) { identities, currentCurrency, } = state.metamask + const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) const tokenExchangeRate = getTokenExchangeRate(state, symbol) - + const { balance } = accounts[selectedAddress] return { conversionRate, identities, @@ -53,6 +59,7 @@ function mapStateToProps (state, ownProps) { currentCurrency: currentCurrency.toUpperCase(), send: state.metamask.send, tokenContract: getSelectedTokenContract(state), + balance, } } @@ -124,6 +131,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -301,7 +309,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { } ConfirmSendToken.prototype.renderTotalPlusGas = function () { - const { token: { symbol }, currentCurrency } = this.props + const { token: { symbol }, currentCurrency, send: { errors } } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() @@ -321,7 +329,12 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ) : ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ + h('div', { + className: classnames({ + 'confirm-screen-section-column--with-error': errors['insufficientFunds'], + 'confirm-screen-section-column': !errors['insufficientFunds'], + }), + }, [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), @@ -330,10 +343,20 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`), ]), + + this.renderErrorMessage('insufficientFunds'), ]) ) } +ConfirmSendToken.prototype.renderErrorMessage = function (message) { + const { send: { errors } } = this.props + + return errors[message] + ? h('div.confirm-screen-error', [ errors[message] ]) + : null +} + ConfirmSendToken.prototype.render = function () { const { editTransaction } = this.props const txMeta = this.gatherTxMeta() @@ -448,18 +471,44 @@ ConfirmSendToken.prototype.render = function () { ConfirmSendToken.prototype.onSubmit = function (event) { event.preventDefault() + const { updateSendErrors } = this.props const txMeta = this.gatherTxMeta() const valid = this.checkValidity() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) this.setState({ valid, submitting: true }) - if (valid && this.verifyGasParams()) { + if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) + } else if (!balanceIsSufficient) { + updateSendErrors({ insufficientFunds: t('insufficientFunds') }) } else { - this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) + updateSendErrors({ invalidGasParams: t('invalidGasParams') }) this.setState({ submitting: false }) } } +ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) { + const { + balance, + conversionRate, + } = this.props + const { + txParams: { + gas, + gasPrice, + }, + } = txMeta + const gasTotal = getGasTotal(gas, gasPrice) + + return isBalanceSufficient({ + amount: '0', + gasTotal, + balance, + conversionRate, + }) +} + + ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props -- cgit From 21b6a3442d8cae8c95a3d7e0b9e216d91bc8bd19 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 28 Mar 2018 10:51:16 -0230 Subject: Fix display of unapprovedMessages in txList (old and new ui); includes fix of undefined txParams. --- ui/app/components/tx-list-item.js | 20 +++++++++++++------- ui/app/components/tx-list.js | 5 +++-- 2 files changed, 16 insertions(+), 9 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 5e88d38d3..a411edd89 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -62,20 +62,23 @@ TxListItem.prototype.getAddressText = function () { const { address, txParams = {}, + isMsg, } = this.props const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { name: txDataName, params = [] } = decodedData || {} const { value } = params[0] || {} - switch (txDataName) { - case 'transfer': - return `${value.slice(0, 10)}...${value.slice(-4)}` - default: - return address - ? `${address.slice(0, 10)}...${address.slice(-4)}` - : this.props.t('contractDeployment') + let addressText + if (txDataName === 'transfer' || address) { + addressText = `${value.slice(0, 10)}...${value.slice(-4)}` + } else if (isMsg) { + addressText = this.props.t('sigRequest') + } else { + addressText = this.props.t('contractDeployment') } + + return addressText } TxListItem.prototype.getSendEtherTotal = function () { @@ -185,6 +188,9 @@ TxListItem.prototype.showRetryButton = function () { transactionId, txParams, } = this.props + if (!txParams) { + return false + } const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 5f09d887e..b8619fbf1 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -71,9 +71,9 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const props = { dateString: formatDate(transaction.time), - address: transaction.txParams.to, + address: transaction.txParams && transaction.txParams.to, transactionStatus: transaction.status, - transactionAmount: transaction.txParams.value, + transactionAmount: transaction.txParams && transaction.txParams.value, transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, @@ -95,6 +95,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const opts = { key: transactionId || transactionHash, txParams: transaction.txParams, + isMsg: Boolean(transaction.msgParams), transactionStatus, transactionId, dateString, -- cgit From d6ebf5d94e374adbd2c2a66e8e5fb7f35fe5b6b2 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Mar 2018 23:23:57 -0230 Subject: Confirm send token detects if balance is sufficient for gas. --- ui/app/components/customize-gas-modal/index.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'ui/app/components') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 8234f8d19..3f5e2064d 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -64,6 +64,7 @@ function mapDispatchToProps (dispatch) { updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -106,6 +107,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { selectedToken, balance, updateSendAmount, + updateSendErrors, } = this.props if (maxModeOn && !selectedToken) { @@ -120,6 +122,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateGasPrice(ethUtil.addHexPrefix(gasPrice)) updateGasLimit(ethUtil.addHexPrefix(gasLimit)) updateGasTotal(ethUtil.addHexPrefix(gasTotal)) + updateSendErrors({ insufficientFunds: false }) hideModal() } -- cgit From cf82e766d4c08ee874e0c077d73186b5b134669f Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 28 Mar 2018 22:21:49 -0700 Subject: ui - fix relative url for deposit-ether-modal --- ui/app/components/modals/deposit-ether-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index e38899d04..5af484af1 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -144,7 +144,7 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('img.deposit-ether-modal__logo', { - src: '../../../images/deposit-eth.svg', + src: './images/deposit-eth.svg', }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, -- cgit From 10609493c5a23a930dd8f7bda0435e576fd24815 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 28 Mar 2018 22:30:35 -0700 Subject: ui - use relative location for images --- ui/app/components/modals/deposit-ether-modal.js | 4 ++-- ui/app/components/sender-to-recipient.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 5af484af1..30be1d450 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -165,7 +165,7 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('div.deposit-ether-modal__logo', { style: { - backgroundImage: 'url(\'../../../images/coinbase logo.png\')', + backgroundImage: 'url(\'./images/coinbase logo.png\')', height: '40px', }, }), @@ -179,7 +179,7 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('div.deposit-ether-modal__logo', { style: { - backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', + backgroundImage: 'url(\'./images/shapeshift logo.png\')', }, }), title: SHAPESHIFT_ROW_TITLE, diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js index 4c3881668..299616612 100644 --- a/ui/app/components/sender-to-recipient.js +++ b/ui/app/components/sender-to-recipient.js @@ -46,7 +46,7 @@ class SenderToRecipient extends Component { h('img', { height: 15, width: 15, - src: '/images/arrow-right.svg', + src: './images/arrow-right.svg', }), ]), ]), -- cgit From f9b680b09f3de33865371bb8430f1d62b5b19a1c Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 28 Mar 2018 22:39:45 -0700 Subject: ui - identicon - use relative link for ether logo --- ui/app/components/identicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 6b2a1b428..96bb89f5f 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () { ) : ( h('img.balance-icon', { - src: '../images/eth_logo.svg', + src: './images/eth_logo.svg', style: { height: diameter, width: diameter, -- cgit From 01e3293b65bb153325479f7366113e037fee659b Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 29 Mar 2018 10:32:30 -0230 Subject: Ensure correct address used when rendering transfer transactions. --- ui/app/components/tx-list-item.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index a411edd89..116813547 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -71,7 +71,8 @@ TxListItem.prototype.getAddressText = function () { let addressText if (txDataName === 'transfer' || address) { - addressText = `${value.slice(0, 10)}...${value.slice(-4)}` + const addressToRender = txDataName === 'transfer' ? value : address + addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}` } else if (isMsg) { addressText = this.props.t('sigRequest') } else { -- cgit 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/account-dropdowns.js | 20 ++++++----- ui/app/components/account-export.js | 22 +++++++----- ui/app/components/account-menu/index.js | 22 +++++++----- ui/app/components/balance-component.js | 2 +- ui/app/components/bn-as-decimal-input.js | 16 ++++++--- ui/app/components/buy-button-subview.js | 22 +++++++----- ui/app/components/coinbase-form.js | 12 +++++-- ui/app/components/copyButton.js | 10 ++++-- ui/app/components/copyable.js | 10 ++++-- ui/app/components/customize-gas-modal/index.js | 28 +++++++++------ .../dropdowns/components/account-dropdowns.js | 25 +++++++------ ui/app/components/dropdowns/network-dropdown.js | 34 ++++++++++-------- ui/app/components/dropdowns/token-menu-dropdown.js | 10 ++++-- ui/app/components/ens-input.js | 12 +++++-- ui/app/components/hex-as-decimal-input.js | 16 ++++++--- ui/app/components/identicon.js | 2 +- 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 +- ui/app/components/network-display.js | 9 +++-- ui/app/components/network.js | 33 ++++++++++------- ui/app/components/notice.js | 10 ++++-- ui/app/components/pending-msg-details.js | 10 ++++-- ui/app/components/pending-msg.js | 18 ++++++---- .../pending-tx/confirm-deploy-contract.js | 32 +++++++++-------- ui/app/components/pending-tx/confirm-send-ether.js | 26 ++++++++------ ui/app/components/pending-tx/confirm-send-token.js | 42 ++++++++++++---------- ui/app/components/pending-tx/index.js | 2 +- ui/app/components/qr-code.js | 2 +- ui/app/components/send/account-list-item.js | 2 +- ui/app/components/send/gas-fee-display-v2.js | 12 +++++-- ui/app/components/send/gas-tooltip.js | 10 ++++-- ui/app/components/send/send-v2-container.js | 2 +- ui/app/components/send/to-autocomplete.js | 10 ++++-- ui/app/components/sender-to-recipient.js | 9 +++-- ui/app/components/shapeshift-form.js | 28 +++++++++------ ui/app/components/shift-list-item.js | 22 +++++++----- ui/app/components/signature-request.js | 28 +++++++++------ ui/app/components/token-balance.js | 2 +- ui/app/components/token-cell.js | 2 +- ui/app/components/token-list.js | 14 +++++--- ui/app/components/tx-list-item.js | 26 ++++++++------ ui/app/components/tx-list.js | 14 +++++--- ui/app/components/tx-view.js | 14 +++++--- ui/app/components/wallet-view.js | 16 ++++++--- 53 files changed, 537 insertions(+), 287 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 84678fee6..03955e077 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('../metamask-connect') +const connect = require('react-redux').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', this.props.t('loose')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null } catch (e) { return } } @@ -129,7 +129,7 @@ class AccountDropdowns extends Component { diameter: 32, }, ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.props.t('createAccount')), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')), ], ), h( @@ -154,7 +154,7 @@ class AccountDropdowns extends Component { fontSize: '24px', marginBottom: '5px', }, - }, this.props.t('importAccount')), + }, this.context.t('importAccount')), ] ), ] @@ -192,7 +192,7 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, }, - this.props.t('etherscanView'), + this.context.t('etherscanView'), ), h( DropdownMenuItem, @@ -204,7 +204,7 @@ class AccountDropdowns extends Component { actions.showQrView(selected, identity ? identity.name : '') }, }, - this.props.t('showQRCode'), + this.context.t('showQRCode'), ), h( DropdownMenuItem, @@ -216,7 +216,7 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, }, - this.props.t('copyAddress'), + this.context.t('copyAddress'), ), h( DropdownMenuItem, @@ -226,7 +226,7 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, }, - this.props.t('exportPrivateKey'), + this.context.t('exportPrivateKey'), ), ] ) @@ -316,6 +316,10 @@ const mapDispatchToProps = (dispatch) => { } } +AccountDropdowns.contextTypes = { + t: PropTypes.func, +} + module.exports = { AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), } diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 8889f88a7..865207487 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -1,14 +1,20 @@ const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const inherits = require('util').inherits const exportAsFile = require('../util').exportAsFile const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const ethUtil = require('ethereumjs-util') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +ExportAccountView.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(ExportAccountView) + inherits(ExportAccountView, Component) function ExportAccountView () { Component.call(this) @@ -35,7 +41,7 @@ ExportAccountView.prototype.render = function () { if (notExporting) return h('div') if (exportRequested) { - const warning = this.props.t('exportPrivateKeyWarning') + const warning = this.context.t('exportPrivateKeyWarning') return ( h('div', { style: { @@ -53,7 +59,7 @@ ExportAccountView.prototype.render = function () { h('p.error', warning), h('input#exportAccount.sizing-input', { type: 'password', - placeholder: this.props.t('confirmPassword').toLowerCase(), + placeholder: this.context.t('confirmPassword').toLowerCase(), onKeyPress: this.onExportKeyPress.bind(this), style: { position: 'relative', @@ -74,10 +80,10 @@ ExportAccountView.prototype.render = function () { style: { marginRight: '10px', }, - }, this.props.t('submit')), + }, this.context.t('submit')), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, this.props.t('cancel')), + }, this.context.t('cancel')), ]), (this.props.warning) && ( h('span.error', { @@ -98,7 +104,7 @@ ExportAccountView.prototype.render = function () { margin: '0 20px', }, }, [ - h('label', this.props.t('copyPrivateKey') + ':'), + h('label', this.context.t('copyPrivateKey') + ':'), h('p.error.cursor-pointer', { style: { textOverflow: 'ellipsis', @@ -112,13 +118,13 @@ ExportAccountView.prototype.render = function () { }, plainKey), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, this.props.t('done')), + }, this.context.t('done')), h('button', { style: { marginLeft: '10px', }, onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), - }, this.props.t('saveAsFile')), + }, this.context.t('saveAsFile')), ]) } } diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index a9120f9db..21de358d6 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -1,14 +1,20 @@ const inherits = require('util').inherits const Component = require('react').Component -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').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') +AccountMenu.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) + inherits(AccountMenu, Component) function AccountMenu () { Component.call(this) } @@ -70,10 +76,10 @@ AccountMenu.prototype.render = function () { h(Item, { className: 'account-menu__header', }, [ - this.props.t('myAccounts'), + this.context.t('myAccounts'), h('button.account-menu__logout-button', { onClick: lockMetamask, - }, this.props.t('logout')), + }, this.context.t('logout')), ]), h(Divider), h('div.account-menu__accounts', this.renderAccounts()), @@ -81,23 +87,23 @@ AccountMenu.prototype.render = function () { h(Item, { onClick: () => showNewAccountPage('CREATE'), icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }), - text: this.props.t('createAccount'), + text: this.context.t('createAccount'), }), h(Item, { onClick: () => showNewAccountPage('IMPORT'), icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }), - text: this.props.t('importAccount'), + text: this.context.t('importAccount'), }), h(Divider), h(Item, { onClick: showInfoPage, icon: h('img', { src: 'images/mm-info-icon.svg' }), - text: this.props.t('infoHelp'), + text: this.context.t('infoHelp'), }), h(Item, { onClick: showConfigPage, icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), - text: this.props.t('settings'), + text: this.context.t('settings'), }), ]) } @@ -155,6 +161,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', this.props.t('imported')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.t('imported')) : null } catch (e) { return } } diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index f6292e358..d591ab455 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('../metamask-connect') +const connect = require('react-redux').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 0ace2b840..9a033f893 100644 --- a/ui/app/components/bn-as-decimal-input.js +++ b/ui/app/components/bn-as-decimal-input.js @@ -1,13 +1,19 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +BnAsDecimalInput.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(BnAsDecimalInput) + inherits(BnAsDecimalInput, Component) function BnAsDecimalInput () { this.state = { invalid: null } @@ -137,13 +143,13 @@ BnAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += this.props.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`]) + message += this.context.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`]) } else if (min) { - message += this.props.t('greaterThanMin', [`${newMin} ${suffix}`]) + message += this.context.t('greaterThanMin', [`${newMin} ${suffix}`]) } else if (max) { - message += this.props.t('lessThanMax', [`${newMax} ${suffix}`]) + message += this.context.t('lessThanMax', [`${newMax} ${suffix}`]) } else { - message += this.props.t('invalidInput') + message += this.context.t('invalidInput') } return message diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index eafa2af91..9ac565cf4 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.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 CoinbaseForm = require('./coinbase-form') const ShapeshiftForm = require('./shapeshift-form') @@ -10,8 +11,13 @@ const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') const networkNames = require('../../../app/scripts/config.js').networkNames +BuyButtonSubview.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(BuyButtonSubview) + function mapStateToProps (state) { return { identity: state.appState.identity, @@ -76,7 +82,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, this.props.t('depositEth')), + }, this.context.t('depositEth')), ]), // loading indication @@ -118,7 +124,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, this.props.t('selectService')), + }, this.context.t('selectService')), ]), ]) @@ -143,7 +149,7 @@ BuyButtonSubview.prototype.primarySubview = function () { case '4': case '42': const networkName = networkNames[network] - const label = `${networkName} ${this.props.t('testFaucet')}` + const label = `${networkName} ${this.context.t('testFaucet')}` return ( h('div.flex-column', { style: { @@ -164,14 +170,14 @@ BuyButtonSubview.prototype.primarySubview = function () { style: { marginTop: '15px', }, - }, this.props.t('borrowDharma')) + }, this.context.t('borrowDharma')) ) : null, ]) ) default: return ( - h('h2.error', this.props.t('unknownNetworkId')) + h('h2.error', this.context.t('unknownNetworkId')) ) } @@ -203,8 +209,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () { 'ShapeShift', ], subtext: { - 'Coinbase': `${this.props.t('crypto')}/${this.props.t('fiat')} (${this.props.t('usaOnly')})`, - 'ShapeShift': this.props.t('crypto'), + 'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`, + 'ShapeShift': this.context.t('crypto'), }, onClick: this.radioHandler.bind(this), }), diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index 0f980fbd5..d5915292e 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -1,11 +1,17 @@ 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') +CoinbaseForm.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(CoinbaseForm) + function mapStateToProps (state) { return { warning: state.appState.warning, @@ -37,11 +43,11 @@ CoinbaseForm.prototype.render = function () { }, [ h('button.btn-green', { onClick: this.toCoinbase.bind(this), - }, this.props.t('continueToCoinbase')), + }, this.context.t('continueToCoinbase')), h('button.btn-red', { onClick: () => props.dispatch(actions.goHome()), - }, this.props.t('cancel')), + }, this.context.t('cancel')), ]), ]) } diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index ea1c43d54..a60d33523 100644 --- a/ui/app/components/copyButton.js +++ b/ui/app/components/copyButton.js @@ -1,13 +1,19 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const copyToClipboard = require('copy-to-clipboard') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const Tooltip = require('./tooltip') +CopyButton.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(CopyButton) + inherits(CopyButton, Component) function CopyButton () { Component.call(this) @@ -23,7 +29,7 @@ CopyButton.prototype.render = function () { const value = props.value const copied = state.copied - const message = copied ? this.props.t('copiedButton') : props.title || this.props.t('copyButton') + const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton') return h('.copy-button', { style: { diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index 28def9adb..ad504deb8 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -1,13 +1,19 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const Tooltip = require('./tooltip') const copyToClipboard = require('copy-to-clipboard') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +Copyable.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(Copyable) + inherits(Copyable, Component) function Copyable () { Component.call(this) @@ -23,7 +29,7 @@ Copyable.prototype.render = function () { const { copied } = state return h(Tooltip, { - title: copied ? this.props.t('copiedExclamation') : this.props.t('copy'), + title: copied ? this.context.t('copiedExclamation') : this.context.t('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 8234f8d19..825366cb2 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.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 GasModalCard = require('./gas-modal-card') @@ -94,8 +95,13 @@ function CustomizeGasModal (props) { this.state = getOriginalState(props) } +CustomizeGasModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) + CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { const { updateGasPrice, @@ -149,7 +155,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { }) if (!balanceIsSufficient) { - error = this.props.t('balanceIsInsufficientGas') + error = this.context.t('balanceIsInsufficientGas') } const gasLimitTooLow = gasLimit && conversionGreaterThan( @@ -165,7 +171,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { ) if (gasLimitTooLow) { - error = this.props.t('gasLimitTooLow') + error = this.context.t('gasLimitTooLow') } this.setState({ error }) @@ -258,7 +264,7 @@ CustomizeGasModal.prototype.render = function () { }, [ h('div.send-v2__customize-gas__header', {}, [ - h('div.send-v2__customize-gas__title', this.props.t('customGas')), + h('div.send-v2__customize-gas__title', this.context.t('customGas')), h('div.send-v2__customize-gas__close', { onClick: hideModal, @@ -274,8 +280,8 @@ CustomizeGasModal.prototype.render = function () { // max: 1000, step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), - title: this.props.t('gasPrice'), - copy: this.props.t('gasPriceCalculation'), + title: this.context.t('gasPrice'), + copy: this.context.t('gasPriceCalculation'), }), h(GasModalCard, { @@ -284,8 +290,8 @@ CustomizeGasModal.prototype.render = function () { // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), - title: this.props.t('gasLimit'), - copy: this.props.t('gasLimitCalculation'), + title: this.context.t('gasLimit'), + copy: this.context.t('gasLimitCalculation'), }), ]), @@ -298,7 +304,7 @@ CustomizeGasModal.prototype.render = function () { h('div.send-v2__customize-gas__revert', { onClick: () => this.revert(), - }, [this.props.t('revert')]), + }, [this.context.t('revert')]), h('div.send-v2__customize-gas__buttons', [ h('button.btn-secondary.send-v2__customize-gas__cancel', { @@ -306,12 +312,12 @@ CustomizeGasModal.prototype.render = function () { style: { marginRight: '10px', }, - }, [this.props.t('cancel')]), + }, [this.context.t('cancel')]), h('button.btn-primary.send-v2__customize-gas__save', { onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), className: error && 'btn-primary--disabled', - }, [this.props.t('save')]), + }, [this.context.t('save')]), ]), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 5e7c0d554..a133f0e29 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/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('../../../../lib/account-link.js') -const connect = require('../../../metamask-connect') +const connect = require('react-redux').connect const Dropdown = require('./dropdown').Dropdown const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('../../identicon') @@ -130,7 +130,7 @@ class AccountDropdowns extends Component { actions.showEditAccountModal(identity) }, }, [ - this.props.t('edit'), + this.context.t('edit'), ]), ]), @@ -144,7 +144,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', this.props.t('loose')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null } catch (e) { return } } @@ -202,7 +202,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, this.props.t('createAccount')), + }, this.context.t('createAccount')), ], ), h( @@ -236,7 +236,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, this.props.t('importAccount')), + }, this.context.t('importAccount')), ] ), ] @@ -287,7 +287,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - this.props.t('accountDetails'), + this.context.t('accountDetails'), ), h( DropdownMenuItem, @@ -303,7 +303,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - this.props.t('etherscanView'), + this.context.t('etherscanView'), ), h( DropdownMenuItem, @@ -319,7 +319,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - this.props.t('copyAddress'), + this.context.t('copyAddress'), ), h( DropdownMenuItem, @@ -331,7 +331,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - this.props.t('exportPrivateKey'), + this.context.t('exportPrivateKey'), ), h( DropdownMenuItem, @@ -346,7 +346,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - this.props.t('addToken'), + this.context.t('addToken'), ), ] @@ -464,4 +464,9 @@ function mapStateToProps (state) { } } +AccountDropdowns.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns) + diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index aac7a9ee5..94e5d967b 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.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 Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem @@ -54,8 +55,13 @@ function NetworkDropdown () { Component.call(this) } +NetworkDropdown.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) + // TODO: specify default props and proptypes NetworkDropdown.prototype.render = function () { const props = this.props @@ -94,13 +100,13 @@ NetworkDropdown.prototype.render = function () { }, [ h('div.network-dropdown-header', {}, [ - h('div.network-dropdown-title', {}, this.props.t('networks')), + h('div.network-dropdown-title', {}, this.context.t('networks')), h('div.network-dropdown-divider'), h('div.network-dropdown-content', {}, - this.props.t('defaultNetwork') + this.context.t('defaultNetwork') ), ]), @@ -122,7 +128,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('mainnet')), + }, this.context.t('mainnet')), ] ), @@ -144,7 +150,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('ropsten')), + }, this.context.t('ropsten')), ] ), @@ -166,7 +172,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('kovan')), + }, this.context.t('kovan')), ] ), @@ -188,7 +194,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('rinkeby')), + }, this.context.t('rinkeby')), ] ), @@ -210,7 +216,7 @@ NetworkDropdown.prototype.render = function () { style: { color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('localhost')), + }, this.context.t('localhost')), ] ), @@ -234,7 +240,7 @@ NetworkDropdown.prototype.render = function () { style: { color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', }, - }, this.props.t('customRPC')), + }, this.context.t('customRPC')), ] ), @@ -249,15 +255,15 @@ NetworkDropdown.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = this.props.t('mainnet') + name = this.context.t('mainnet') } else if (providerName === 'ropsten') { - name = this.props.t('ropsten') + name = this.context.t('ropsten') } else if (providerName === 'kovan') { - name = this.props.t('kovan') + name = this.context.t('kovan') } else if (providerName === 'rinkeby') { - name = this.props.t('rinkeby') + name = this.context.t('rinkeby') } else { - name = this.props.t('unknownNetwork') + name = this.context.t('unknownNetwork') } return name diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index 630e1f99d..b70d0b893 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -1,12 +1,18 @@ 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') +TokenMenuDropdown.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) + function mapDispatchToProps (dispatch) { return { showHideTokenConfirmationModal: (token) => { @@ -44,7 +50,7 @@ TokenMenuDropdown.prototype.render = function () { showHideTokenConfirmationModal(this.props.token) this.props.onClose() }, - }, this.props.t('hideToken')), + }, this.context.t('hideToken')), ]), ]), diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 922f24d40..1f3946817 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const extend = require('xtend') @@ -8,11 +9,16 @@ const ENS = require('ethjs-ens') const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete') +EnsInput.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(EnsInput) + inherits(EnsInput, Component) function EnsInput () { Component.call(this) @@ -70,13 +76,13 @@ EnsInput.prototype.lookupEnsName = function (recipient) { log.info(`ENS attempting to resolve name: ${recipient}`) this.ens.lookup(recipient.trim()) .then((address) => { - if (address === ZERO_ADDRESS) throw new Error(this.props.t('noAddressForName')) + if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, nickname: recipient.trim(), - hoverText: address + '\n' + this.props.t('clickCopy'), + hoverText: address + '\n' + this.context.t('clickCopy'), ensFailure: false, }) } diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index be7ba4c9e..75303a34a 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -1,13 +1,19 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +HexAsDecimalInput.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(HexAsDecimalInput) + inherits(HexAsDecimalInput, Component) function HexAsDecimalInput () { this.state = { invalid: null } @@ -127,13 +133,13 @@ HexAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += this.props.t('betweenMinAndMax', [min, max]) + message += this.context.t('betweenMinAndMax', [min, max]) } else if (min) { - message += this.props.t('greaterThanMin', [min]) + message += this.context.t('greaterThanMin', [min]) } else if (max) { - message += this.props.t('lessThanMax', [max]) + message += this.context.t('lessThanMax', [max]) } else { - message += this.props.t('invalidInput') + message += this.context.t('invalidInput') } return message diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 6b2a1b428..b803b7ceb 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('../metamask-connect') +const connect = require('react-redux').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 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') diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js index 111a82be1..59719d9a4 100644 --- a/ui/app/components/network-display.js +++ b/ui/app/components/network-display.js @@ -1,7 +1,7 @@ const { Component } = require('react') const h = require('react-hyperscript') const PropTypes = require('prop-types') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') const networkToColorHash = { @@ -30,7 +30,7 @@ class NetworkDisplay extends Component { const { provider: { type } } = this.props return h('.network-display__container', [ this.renderNetworkIcon(), - h('.network-name', this.props.t(type)), + h('.network-name', this.context.t(type)), ]) } } @@ -48,4 +48,9 @@ const mapStateToProps = ({ metamask: { network, provider } }) => { } } +NetworkDisplay.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(NetworkDisplay) + diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 10961390e..83297c4f2 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -1,12 +1,18 @@ 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 classnames = require('classnames') const inherits = require('util').inherits const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') +Network.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(Network) + inherits(Network, Component) function Network () { @@ -15,6 +21,7 @@ function Network () { Network.prototype.render = function () { const props = this.props + const context = this.context const networkNumber = props.network let providerName try { @@ -34,7 +41,7 @@ Network.prototype.render = function () { onClick: (event) => this.props.onClick(event), }, [ h('img', { - title: props.t('attemptingConnect'), + title: context.t('attemptingConnect'), style: { width: '27px', }, @@ -42,22 +49,22 @@ Network.prototype.render = function () { }), ]) } else if (providerName === 'mainnet') { - hoverText = props.t('mainnet') + hoverText = context.t('mainnet') iconName = 'ethereum-network' } else if (providerName === 'ropsten') { - hoverText = props.t('ropsten') + hoverText = context.t('ropsten') iconName = 'ropsten-test-network' } else if (parseInt(networkNumber) === 3) { - hoverText = props.t('ropsten') + hoverText = context.t('ropsten') iconName = 'ropsten-test-network' } else if (providerName === 'kovan') { - hoverText = props.t('kovan') + hoverText = context.t('kovan') iconName = 'kovan-test-network' } else if (providerName === 'rinkeby') { - hoverText = props.t('rinkeby') + hoverText = context.t('rinkeby') iconName = 'rinkeby-test-network' } else { - hoverText = props.t('unknownNetwork') + hoverText = context.t('unknownNetwork') iconName = 'unknown-private-network' } @@ -85,7 +92,7 @@ Network.prototype.render = function () { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', }), - h('.network-name', props.t('mainnet')), + h('.network-name', context.t('mainnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': @@ -94,7 +101,7 @@ Network.prototype.render = function () { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', }), - h('.network-name', props.t('ropsten')), + h('.network-name', context.t('ropsten')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'kovan-test-network': @@ -103,7 +110,7 @@ Network.prototype.render = function () { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', }), - h('.network-name', props.t('kovan')), + h('.network-name', context.t('kovan')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': @@ -112,7 +119,7 @@ Network.prototype.render = function () { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', }), - h('.network-name', props.t('rinkeby')), + h('.network-name', context.t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: @@ -124,7 +131,7 @@ Network.prototype.render = function () { }, }), - h('.network-name', props.t('privateNetwork')), + h('.network-name', context.t('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 a999ffd88..bb7e0814c 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -1,13 +1,19 @@ const inherits = require('util').inherits const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const ReactMarkdown = require('react-markdown') const linker = require('extension-link-enabler') const findDOMNode = require('react-dom').findDOMNode -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +Notice.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(Notice) + inherits(Notice, Component) function Notice () { Component.call(this) @@ -111,7 +117,7 @@ Notice.prototype.render = function () { style: { marginTop: '18px', }, - }, this.props.t('accept')), + }, this.context.t('accept')), ]) ) } diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index ddec8470d..f16fcb1c7 100644 --- a/ui/app/components/pending-msg-details.js +++ b/ui/app/components/pending-msg-details.js @@ -1,12 +1,18 @@ 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 AccountPanel = require('./account-panel') +PendingMsgDetails.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(PendingMsgDetails) + inherits(PendingMsgDetails, Component) function PendingMsgDetails () { Component.call(this) @@ -40,7 +46,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', this.props.t('message')), + h('label.font-small.allcaps', this.context.t('message')), h('span.font-small', msgParams.data), ]), ]), diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index 56e646a1c..21a7864e4 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-msg-details') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect + +PendingMsg.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(PendingMsg) + inherits(PendingMsg, Component) function PendingMsg () { Component.call(this) @@ -30,14 +36,14 @@ PendingMsg.prototype.render = function () { fontWeight: 'bold', textAlign: 'center', }, - }, this.props.t('signMessage')), + }, this.context.t('signMessage')), h('.error', { style: { margin: '10px', }, }, [ - this.props.t('signNotice'), + this.context.t('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 +52,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 }) }, - }, this.props.t('readMore')), + }, this.context.t('readMore')), ]), // message details @@ -56,10 +62,10 @@ PendingMsg.prototype.render = function () { h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelMessage, - }, this.props.t('cancel')), + }, this.context.t('cancel')), h('button', { onClick: state.signMessage, - }, this.props.t('sign')), + }, this.context.t('sign')), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index f41fa51e6..aa68a9eb0 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -1,5 +1,5 @@ const { Component } = require('react') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const h = require('react-hyperscript') const PropTypes = require('prop-types') const actions = require('../../actions') @@ -32,7 +32,7 @@ class ConfirmDeployContract extends Component { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.displayWarning(this.props.t('invalidGasParams')) + this.props.displayWarning(this.context.t('invalidGasParams')) this.setState({ submitting: false }) } } @@ -177,7 +177,7 @@ class ConfirmDeployContract extends Component { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), @@ -216,8 +216,8 @@ class ConfirmDeployContract extends Component { return ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]), + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -247,11 +247,11 @@ class ConfirmDeployContract extends Component { h('.page-container__header-row', [ h('span.page-container__back-button', { onClick: () => backToAccountDetail(selectedAddress), - }, this.props.t('back')), + }, this.context.t('back')), window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), ]), - h('.page-container__title', this.props.t('confirmContract')), - h('.page-container__subtitle', this.props.t('pleaseReviewTransaction')), + h('.page-container__title', this.context.t('confirmContract')), + h('.page-container__subtitle', this.context.t('pleaseReviewTransaction')), ]), // Main Send token Card h('.page-container__content', [ @@ -274,7 +274,7 @@ class ConfirmDeployContract extends Component { h('div.confirm-screen-rows', [ h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('from') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('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)}`), @@ -282,9 +282,9 @@ class ConfirmDeployContract extends Component { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', this.props.t('newContract')), + h('div.confirm-screen-row-info', this.context.t('newContract')), ]), ]), @@ -302,12 +302,12 @@ class ConfirmDeployContract extends Component { // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { onClick: event => this.cancel(event, txMeta), - }, this.props.t('cancel')), + }, this.context.t('cancel')), // Accept Button h('button.btn-confirm.page-container__footer-button.allcaps', { onClick: event => this.onSubmit(event), - }, this.props.t('confirm')), + }, this.context.t('confirm')), ]), ]), ]) @@ -351,4 +351,8 @@ const mapDispatchToProps = dispatch => { } } -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) \ No newline at end of file +ConfirmDeployContract.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 255f0e8a2..b68de4704 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../actions') @@ -18,8 +19,13 @@ const NetworkDisplay = require('../network-display') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +ConfirmSendEther.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) + function mapStateToProps (state) { const { conversionRate, @@ -196,7 +202,7 @@ ConfirmSendEther.prototype.getData = function () { }, to: { address: txParams.to, - name: identities[txParams.to] ? identities[txParams.to].name : this.props.t('newRecipient'), + name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'), }, memo: txParams.memo || '', gasFeeInFIAT, @@ -297,7 +303,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', [ this.props.t('from') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('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)}`), @@ -305,7 +311,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('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)}`), @@ -313,7 +319,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h(GasFeeDisplay, { gasTotal: gasTotal || gasFeeInHex, @@ -326,8 +332,8 @@ ConfirmSendEther.prototype.render = function () { h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]), + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -428,10 +434,10 @@ ConfirmSendEther.prototype.render = function () { clearSend() this.cancel(event, txMeta) }, - }, this.props.t('cancel')), + }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), ]), ]), ]) @@ -447,7 +453,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams'))) + this.props.dispatch(actions.displayWarning(this.context.t('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 3e66705ae..7fe260a61 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const connect = require('../../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const tokenAbi = require('human-standard-token-abi') @@ -28,8 +29,13 @@ const { getSelectedTokenContract, } = require('../../selectors') +ConfirmSendToken.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) + function mapStateToProps (state, ownProps) { const { token: { symbol }, txData } = ownProps const { txParams } = txData || {} @@ -168,7 +174,7 @@ ConfirmSendToken.prototype.getAmount = function () { ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) : null, token: typeof value === 'undefined' - ? this.props.t('unknown') + ? this.context.t('unknown') : +sendTokenAmount.toFixed(decimals), } @@ -240,7 +246,7 @@ ConfirmSendToken.prototype.getData = function () { }, to: { address: value, - name: identities[value] ? identities[value].name : this.props.t('newRecipient'), + name: identities[value] ? identities[value].name : this.context.t('newRecipient'), }, memo: txParams.memo || '', } @@ -286,7 +292,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h(GasFeeDisplay, { gasTotal: gasTotal || gasFeeInHex, @@ -308,8 +314,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ? ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]), + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -321,13 +327,13 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { : ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]), + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), - h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.props.t('gas')}`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`), ]), ]) ) @@ -350,10 +356,10 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] const isTxReprice = Boolean(txMeta.lastGasPrice) - const title = isTxReprice ? this.props.t('reprice_title') : this.props.t('confirm') + const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm') const subtitle = isTxReprice - ? this.props.t('reprice_subtitle') - : this.props.t('pleaseReviewTransaction') + ? this.context.t('reprice_subtitle') + : this.context.t('pleaseReviewTransaction') return ( h('div.confirm-screen-container.confirm-send-token', [ @@ -362,7 +368,7 @@ ConfirmSendToken.prototype.render = function () { h('div.page-container__header', [ !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), - }, this.props.t('edit')), + }, this.context.t('edit')), h('div.page-container__title', title), h('div.page-container__subtitle', subtitle), ]), @@ -406,7 +412,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', [ this.props.t('from') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('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)}`), @@ -414,7 +420,7 @@ ConfirmSendToken.prototype.render = function () { ]), toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('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)}`), @@ -436,10 +442,10 @@ ConfirmSendToken.prototype.render = function () { // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { onClick: (event) => this.cancel(event, txMeta), - }, this.props.t('cancel')), + }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), ]), ]), ]), @@ -456,7 +462,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams'))) + this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams'))) this.setState({ submitting: false }) } } diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 0a8813b03..acdd99364 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect const h = require('react-hyperscript') const clone = require('clone') const abi = require('human-standard-token-abi') diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index 89504eca3..83885539c 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('../metamask-connect') +const connect = require('react-redux').connect const isHexPrefixed = require('ethereumjs-util').isHexPrefixed const ReadOnlyInput = require('./readonly-input') diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js index 749339694..1ad3f69c1 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('../../metamask-connect') +const connect = require('react-redux').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 76ed1b5d4..1423aa84d 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const CurrencyDisplay = require('./currency-display') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect + +GasFeeDisplay.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(GasFeeDisplay) + inherits(GasFeeDisplay, Component) function GasFeeDisplay () { Component.call(this) @@ -33,8 +39,8 @@ GasFeeDisplay.prototype.render = function () { readOnly: true, }) : gasLoadingError - ? h('div.currency-display.currency-display--message', this.props.t('setGasPrice')) - : h('div.currency-display', this.props.t('loading')), + ? h('div.currency-display.currency-display--message', this.context.t('setGasPrice')) + : h('div.currency-display', this.context.t('loading')), h('button.sliders-icon-container', { onClick, diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js index 607394c8b..62cdc1cad 100644 --- a/ui/app/components/send/gas-tooltip.js +++ b/ui/app/components/send/gas-tooltip.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const InputNumber = require('../input-number.js') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect + +GasTooltip.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(GasTooltip) + inherits(GasTooltip, Component) function GasTooltip () { Component.call(this) @@ -82,7 +88,7 @@ GasTooltip.prototype.render = function () { 'marginTop': '81px', }, }, [ - h('span.gas-tooltip-label', {}, [this.props.t('gasLimit')]), + h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]), h('i.fa.fa-info-circle'), ]), h(InputNumber, { diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 5b903a96e..08c26a91f 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('../../metamask-connect') +const connect = require('react-redux').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 4c54701cb..5ea17f9a2 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('./account-list-item') -const connect = require('../../metamask-connect') +const connect = require('react-redux').connect + +ToAutoComplete.contextTypes = { + t: PropTypes.func, +} module.exports = connect()(ToAutoComplete) + inherits(ToAutoComplete, Component) function ToAutoComplete () { Component.call(this) @@ -93,7 +99,7 @@ ToAutoComplete.prototype.render = function () { return h('div.send-v2__to-autocomplete', {}, [ h('input.send-v2__to-autocomplete__input', { - placeholder: this.props.t('recipientAddress'), + placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', value: to, onChange: event => onChange(event.target.value), diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js index 4c3881668..6b9cd32ea 100644 --- a/ui/app/components/sender-to-recipient.js +++ b/ui/app/components/sender-to-recipient.js @@ -1,6 +1,6 @@ const { Component } = require('react') const h = require('react-hyperscript') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const PropTypes = require('prop-types') const Identicon = require('./identicon') @@ -21,7 +21,7 @@ class SenderToRecipient extends Component { this.renderRecipientIcon(), h( '.sender-to-recipient__name.sender-to-recipient__recipient-name', - recipientName || this.props.t('newContract') + recipientName || this.context.t('newContract') ), ]) ) @@ -64,4 +64,9 @@ SenderToRecipient.propTypes = { t: PropTypes.func, } +SenderToRecipient.contextTypes = { + t: PropTypes.func, +} + module.exports = connect()(SenderToRecipient) + diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 5f58527fe..fd4a80a4a 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -1,7 +1,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits +const PropTypes = require('prop-types') const Component = require('react').Component -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const classnames = require('classnames') const { qrcode } = require('qrcode-npm') const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') @@ -32,8 +33,13 @@ function mapDispatchToProps (dispatch) { } } +ShapeshiftForm.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) + inherits(ShapeshiftForm, Component) function ShapeshiftForm () { Component.call(this) @@ -93,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: this.props.t('invalidRequest'), + errorMessage: this.context.t('invalidRequest'), isLoading: false, })) } @@ -125,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { return h('div.shapeshift-form__metadata', {}, [ - this.renderMetadata(this.props.t('status'), limit ? this.props.t('available') : this.props.t('unavailable')), - this.renderMetadata(this.props.t('limit'), limit), - this.renderMetadata(this.props.t('exchangeRate'), rate), - this.renderMetadata(this.props.t('min'), minimum), + this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')), + this.renderMetadata(this.context.t('limit'), limit), + this.renderMetadata(this.context.t('exchangeRate'), rate), + this.renderMetadata(this.context.t('min'), minimum), ]) } @@ -142,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - this.props.t('depositCoin', [depositCoin.toUpperCase()]), + this.context.t('depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), @@ -179,7 +185,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', this.props.t('deposit')), + h('div.shapeshift-form__selector-label', this.context.t('deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -199,7 +205,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - this.props.t('receive'), + this.context.t('receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -217,7 +223,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - this.props.t('refundAddress'), + this.context.t('refundAddress'), ]), h('input.shapeshift-form__address-input', { @@ -239,7 +245,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [this.props.t('buy')]), + }, [this.context.t('buy')]), ]) } diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index d810eddc9..4334aacba 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -1,7 +1,8 @@ const inherits = require('util').inherits 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 vreme = new (require('vreme'))() const explorerLink = require('etherscan-link').createExplorerLink const actions = require('../actions') @@ -12,8 +13,13 @@ const EthBalance = require('./eth-balance') const Tooltip = require('./tooltip') +ShiftListItem.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(ShiftListItem) + function mapStateToProps (state) { return { selectedAddress: state.metamask.selectedAddress, @@ -75,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () { value: this.props.depositAddress, }), h(Tooltip, { - title: this.props.t('qrCode'), + title: this.context.t('qrCode'), }, [ h('i.fa.fa-qrcode.pointer.pop-hover', { onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)), @@ -135,8 +141,8 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, this.props.t('toETHviaShapeShift', [props.depositType])), - h('div', this.props.t('noDeposits')), + }, this.context.t('toETHviaShapeShift', [props.depositType])), + h('div', this.context.t('noDeposits')), h('div', { style: { fontSize: 'x-small', @@ -158,8 +164,8 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, this.props.t('toETHviaShapeShift', [props.depositType])), - h('div', this.props.t('conversionProgress')), + }, this.context.t('toETHviaShapeShift', [props.depositType])), + h('div', this.context.t('conversionProgress')), h('div', { style: { fontSize: 'x-small', @@ -184,7 +190,7 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, this.props.t('fromShapeShift')), + }, this.context.t('fromShapeShift')), h('div', formatDate(props.time)), h('div', { style: { @@ -196,7 +202,7 @@ ShiftListItem.prototype.renderInfo = function () { ]) case 'failed': - return h('span.error', '(' + this.props.t('failed') + ')') + return h('span.error', '(' + this.context.t('failed') + ')') default: return '' } diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index b76c1e60f..41415411e 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -1,8 +1,9 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const ethUtil = require('ethereumjs-util') const classnames = require('classnames') @@ -37,8 +38,13 @@ function mapDispatchToProps (dispatch) { } } +SignatureRequest.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) + inherits(SignatureRequest, Component) function SignatureRequest (props) { Component.call(this) @@ -54,7 +60,7 @@ SignatureRequest.prototype.renderHeader = function () { h('div.request-signature__header-background'), - h('div.request-signature__header__text', this.props.t('sigRequest')), + h('div.request-signature__header__text', this.context.t('sigRequest')), h('div.request-signature__header__tip-container', [ h('div.request-signature__header__tip'), @@ -75,7 +81,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () { return h('div.request-signature__account', [ - h('div.request-signature__account-text', [this.props.t('account') + ':']), + h('div.request-signature__account-text', [this.context.t('account') + ':']), h(AccountDropdownMini, { selectedAccount, @@ -102,7 +108,7 @@ SignatureRequest.prototype.renderBalance = function () { return h('div.request-signature__balance', [ - h('div.request-signature__balance-text', [this.props.t('balance')]), + h('div.request-signature__balance-text', [this.context.t('balance')]), h('div.request-signature__balance-value', `${balanceInEther} ETH`), @@ -136,7 +142,7 @@ SignatureRequest.prototype.renderRequestInfo = function () { return h('div.request-signature__request-info', [ h('div.request-signature__headline', [ - this.props.t('yourSigRequested'), + this.context.t('yourSigRequested'), ]), ]) @@ -154,18 +160,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) { SignatureRequest.prototype.renderBody = function () { let rows - let notice = this.props.t('youSign') + ':' + let notice = this.context.t('youSign') + ':' const { txData } = this.props const { type, msgParams: { data } } = txData if (type === 'personal_sign') { - rows = [{ name: this.props.t('message'), value: this.msgHexToText(data) }] + rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }] } else if (type === 'eth_signTypedData') { rows = data } else if (type === 'eth_sign') { - rows = [{ name: this.props.t('message'), value: data }] - notice = this.props.t('signNotice') + rows = [{ name: this.context.t('message'), value: data }] + notice = this.context.t('signNotice') } return h('div.request-signature__body', {}, [ @@ -224,10 +230,10 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.btn-secondary--lg.request-signature__footer__cancel-button', { onClick: cancel, - }, this.props.t('cancel')), + }, this.context.t('cancel')), h('button.btn-primary--lg', { onClick: sign, - }, this.props.t('sign')), + }, this.context.t('sign')), ]) } diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 7d7744fe6..2f71c0687 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('../metamask-connect') +const connect = require('react-redux').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 a24781af1..0332fde88 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('../metamask-connect') +const connect = require('react-redux').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 ae22f3702..150a3762d 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -1,9 +1,10 @@ const Component = require('react').Component +const PropTypes = require('prop-types') 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('../metamask-connect') +const connect = require('react-redux').connect const selectors = require('../selectors') function mapStateToProps (state) { @@ -24,8 +25,13 @@ for (const address in contracts) { } } +TokenList.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(TokenList) + inherits(TokenList, Component) function TokenList () { this.state = { @@ -42,7 +48,7 @@ TokenList.prototype.render = function () { const { tokens, isLoading, error } = state if (isLoading) { - return this.message(this.props.t('loadingTokens')) + return this.message(this.context.t('loadingTokens')) } if (error) { @@ -52,7 +58,7 @@ TokenList.prototype.render = function () { padding: '80px', }, }, [ - this.props.t('troubleTokenBalances'), + this.context.t('troubleTokenBalances'), h('span.hotFix', { style: { color: 'rgba(247, 134, 28, 1)', @@ -63,7 +69,7 @@ TokenList.prototype.render = function () { url: `https://ethplorer.io/address/${userAddress}`, }) }, - }, this.props.t('here')), + }, this.context.t('here')), ]) } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 5e88d38d3..622664786 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -1,6 +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 inherits = require('util').inherits const classnames = require('classnames') const abi = require('human-standard-token-abi') @@ -15,8 +16,13 @@ const { calcTokenAmount } = require('../token-util') const { getCurrentCurrency } = require('../selectors') +TxListItem.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem) + function mapStateToProps (state) { return { tokens: state.metamask.tokens, @@ -74,7 +80,7 @@ TxListItem.prototype.getAddressText = function () { default: return address ? `${address.slice(0, 10)}...${address.slice(-4)}` - : this.props.t('contractDeployment') + : this.context.t('contractDeployment') } } @@ -306,21 +312,21 @@ TxListItem.prototype.txStatusIndicator = function () { let name if (transactionStatus === 'unapproved') { - name = this.props.t('unapproved') + name = this.context.t('unapproved') } else if (transactionStatus === 'rejected') { - name = this.props.t('rejected') + name = this.context.t('rejected') } else if (transactionStatus === 'approved') { - name = this.props.t('approved') + name = this.context.t('approved') } else if (transactionStatus === 'signed') { - name = this.props.t('signed') + name = this.context.t('signed') } else if (transactionStatus === 'submitted') { - name = this.props.t('submitted') + name = this.context.t('submitted') } else if (transactionStatus === 'confirmed') { - name = this.props.t('confirmed') + name = this.context.t('confirmed') } else if (transactionStatus === 'failed') { - name = this.props.t('failed') + name = this.context.t('failed') } else if (transactionStatus === 'dropped') { - name = this.props.t('dropped') + name = this.context.t('dropped') } return name } diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 5f09d887e..fa01c7b29 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const connect = require('../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') @@ -11,8 +12,13 @@ const { showConfTxPage } = require('../actions') const classnames = require('classnames') const { tokenInfoGetter } = require('../token-util') +TxList.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) + function mapStateToProps (state) { return { txsToRender: selectors.transactionsSelector(state), @@ -39,7 +45,7 @@ TxList.prototype.render = function () { return h('div.flex-column', [ h('div.flex-row.tx-list-header-wrapper', [ h('div.flex-row.tx-list-header', [ - h('div', this.props.t('transactions')), + h('div', this.context.t('transactions')), ]), ]), h('div.flex-column.tx-list-container', {}, [ @@ -56,7 +62,7 @@ TxList.prototype.renderTransaction = function () { : [h( 'div.tx-list-item.tx-list-item--empty', { key: 'tx-list-none' }, - [ this.props.t('noTransactions') ], + [ this.context.t('noTransactions') ], )] } @@ -110,7 +116,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa if (isUnapproved) { opts.onClick = () => showConfTxPage({ id: transactionId }) - opts.transactionStatus = this.props.t('notStarted') + opts.transactionStatus = this.context.t('notStarted') } 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 8b0cc890a..ca24e813f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const connect = require('../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits @@ -10,8 +11,13 @@ const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') +TxView.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) + function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen const isMascara = state.appState.isMascara @@ -72,21 +78,21 @@ TxView.prototype.renderButtons = function () { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), - }, this.props.t('deposit')), + }, this.context.t('deposit')), h('button.btn-primary.hero-balance-button', { style: { marginLeft: '0.8em', }, onClick: showSendPage, - }, this.props.t('send')), + }, this.context.t('send')), ]) ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ h('button.btn-primary.hero-balance-button', { onClick: showSendTokenPage, - }, this.props.t('send')), + }, this.context.t('send')), ]) ) } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 5f1ed7b60..e6b94ad12 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const connect = require('../metamask-connect') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const classnames = require('classnames') @@ -12,8 +13,13 @@ const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') const selectors = require('../selectors') +WalletView.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) + function mapStateToProps (state) { return { @@ -116,7 +122,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label.allcaps', isLoose ? this.props.t('imported') : ''), + h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, @@ -133,13 +139,13 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.btn-clear.wallet-view__details-button.allcaps', this.props.t('details')), + h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')), ]), ]), h(Tooltip, { position: 'bottom', - title: this.state.hasCopied ? this.props.t('copiedExclamation') : this.props.t('copyToClipboard'), + title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'), wrapperClassName: 'wallet-view__tooltip', }, [ h('button.wallet-view__address', { @@ -172,7 +178,7 @@ WalletView.prototype.render = function () { showAddTokenPage() hideSidebar() }, - }, this.props.t('addToken')), + }, this.context.t('addToken')), ]) } -- cgit From a4594f6838a9ff38a9a6f1998850b27beebb2fbb Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 29 Mar 2018 15:30:03 -0230 Subject: Show insufficient funds on confirm screen on first render. --- ui/app/components/pending-tx/confirm-send-ether.js | 12 ++++++++++++ ui/app/components/pending-tx/confirm-send-token.js | 10 +++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index c91911c3d..78dae266d 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -103,6 +103,18 @@ function ConfirmSendEther () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendEther.prototype.componentWillMount = function () { + const { updateSendErrors } = this.props + const txMeta = this.gatherTxMeta() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) + + updateSendErrors({ + insufficientFunds: balanceIsSufficient + ? false + : this.props.t('insufficientFunds') + }) +} + ConfirmSendEther.prototype.getAmount = function () { const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index dd115e890..ed0be601e 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -142,12 +142,20 @@ function ConfirmSendToken () { } ConfirmSendToken.prototype.componentWillMount = function () { - const { tokenContract, selectedAddress } = this.props + const { tokenContract, selectedAddress, updateSendErrors} = this.props + const txMeta = this.gatherTxMeta() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) tokenContract && tokenContract .balanceOf(selectedAddress) .then(usersToken => { }) this.props.updateTokenExchangeRate() + + updateSendErrors({ + insufficientFunds: balanceIsSufficient + ? false + : this.props.t('insufficientFunds') + }) } ConfirmSendToken.prototype.getAmount = function () { -- cgit From 2be6f8bae0e516d49c83776a06dcbf82971a0a19 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 30 Mar 2018 02:19:04 -0230 Subject: Fix lint and tests --- ui/app/components/pending-tx/confirm-send-ether.js | 4 ++-- ui/app/components/pending-tx/confirm-send-token.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 68c56d243..2474516d4 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -117,7 +117,7 @@ ConfirmSendEther.prototype.componentWillMount = function () { updateSendErrors({ insufficientFunds: balanceIsSufficient ? false - : this.props.t('insufficientFunds') + : this.context.t('insufficientFunds'), }) } @@ -495,7 +495,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.props.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) } else { updateSendErrors({ invalidGasParams: this.context.t('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 503c2b19d..dd9fdc23f 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -160,7 +160,7 @@ ConfirmSendToken.prototype.componentWillMount = function () { updateSendErrors({ insufficientFunds: balanceIsSufficient ? false - : this.props.t('insufficientFunds') + : this.context.t('insufficientFunds'), }) } @@ -495,7 +495,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) } else if (!balanceIsSufficient) { - updateSendErrors({ insufficientFunds: this.props.t('insufficientFunds') }) + updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) } else { updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) this.setState({ submitting: false }) -- cgit From 9f7b63bb6a03d79a00a8e47b7b8866bbba7bb810 Mon Sep 17 00:00:00 2001 From: kumavis Date: Fri, 30 Mar 2018 21:45:49 -0700 Subject: identicon - set blockies height and width to identicon diameter --- ui/app/components/identicon.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 7cc5a4de0..dce9b0449 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -105,9 +105,8 @@ IdenticonComponent.prototype.componentDidUpdate = function () { function _generateBlockie (container, address, diameter) { const img = new Image() img.src = toDataUrl(address) - const dia = !diameter || diameter < 50 ? 50 : diameter - img.height = dia * 1.25 - img.width = dia * 1.25 + img.height = diameter + img.width = diameter container.appendChild(img) } -- cgit