From e226b10a89d87af07c7c35ff1251a8264f3bb1b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 28 Nov 2017 20:24:35 -0800 Subject: Add react-router to allow use of the browser back button --- ui/app/components/pending-tx/confirm-send-token.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) (limited to 'ui/app/components/pending-tx/confirm-send-token.js') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 727cd260b..8087e431f 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -1,5 +1,7 @@ const Component = require('react').Component const { connect } = require('react-redux') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') const inherits = require('util').inherits const ethAbi = require('ethereumjs-abi') @@ -27,8 +29,12 @@ const { getSelectedAddress, getSelectedTokenContract, } = require('../../selectors') +const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmSendToken) function mapStateToProps (state, ownProps) { const { token: { symbol }, txData } = ownProps @@ -99,6 +105,12 @@ function ConfirmSendToken () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendToken.prototype.editTransaction = function (txMeta) { + const { editTransaction, history } = this.props + editTransaction(txMeta) + history.push(SEND_ROUTE) +} + ConfirmSendToken.prototype.componentWillMount = function () { const { tokenContract, selectedAddress } = this.props tokenContract && tokenContract @@ -293,7 +305,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { } ConfirmSendToken.prototype.render = function () { - const { editTransaction } = this.props const txMeta = this.gatherTxMeta() const { from: { @@ -316,7 +327,7 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), @@ -416,6 +427,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() this.props.cancelTransaction(txMeta) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmSendToken.prototype.checkValidity = function () { -- cgit From 72ffa2c3f5abbcb06c8ab5fdf20b9d934c330692 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Feb 2018 12:05:27 -0800 Subject: Fix react-router related exceptions --- ui/app/components/pending-tx/confirm-send-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx/confirm-send-token.js') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index da3a92fa8..f52fd01da 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -327,7 +327,7 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.btn-clear.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), -- cgit From 1e6f062bb6bbc39d6ab21a351fdb0d3bcab4d7d5 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 6 Apr 2018 02:04:39 -0700 Subject: Fix integration tests --- ui/app/components/pending-tx/confirm-send-token.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx/confirm-send-token.js') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 5e6d0747d..6942f9b51 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -524,7 +524,9 @@ ConfirmSendToken.prototype.render = function () { }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', { + onClick: event => this.onSubmit(event), + }, [this.context.t('confirm')]), ]), ]), ]), -- cgit From 9dbb9d12ad31d53b8911db171cb7d6b3fcb477e2 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Apr 2018 16:45:23 -0230 Subject: Internationalize converted value in confirm screens --- ui/app/components/pending-tx/confirm-send-token.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx/confirm-send-token.js') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 19e591fd6..65b9b9d07 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -25,6 +25,8 @@ const { calcTokenAmount, } = require('../../token-util') const classnames = require('classnames') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -310,10 +312,12 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { const txParams = txMeta.txParams || {} const { memo = '' } = txParams + const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency) + return fiatAmount ? ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount', `${convertedAmountInFiat}`), h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), @@ -361,6 +365,9 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas) + const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) + return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ @@ -370,7 +377,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`), + h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), ]), ]) @@ -405,6 +412,16 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) { : null } +ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) { + const upperCaseCurrencyCode = currencyCode.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(value), { + code: upperCaseCurrencyCode, + }) + : value +} + ConfirmSendToken.prototype.render = function () { const { editTransaction } = this.props const txMeta = this.gatherTxMeta() -- cgit From a350e80feea6747a5e10088ac6ec15171a590a65 Mon Sep 17 00:00:00 2001 From: bitpshr Date: Sun, 15 Apr 2018 23:37:42 -0400 Subject: Fetch token prices based on contract address --- ui/app/components/pending-tx/confirm-send-token.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'ui/app/components/pending-tx/confirm-send-token.js') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 6942f9b51..37130a1cc 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -48,7 +48,7 @@ module.exports = compose( function mapStateToProps (state, ownProps) { - const { token: { symbol }, txData } = ownProps + const { token: { address }, txData } = ownProps const { txParams } = txData || {} const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) @@ -59,7 +59,7 @@ function mapStateToProps (state, ownProps) { } = state.metamask const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) - const tokenExchangeRate = getTokenExchangeRate(state, symbol) + const tokenExchangeRate = getTokenExchangeRate(state, address) const { balance } = accounts[selectedAddress] return { conversionRate, @@ -75,12 +75,9 @@ function mapStateToProps (state, ownProps) { } function mapDispatchToProps (dispatch, ownProps) { - const { token: { symbol } } = ownProps - return { backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), editTransaction: txMeta => { const { token: { address } } = ownProps const { txParams = {}, id } = txMeta @@ -203,7 +200,6 @@ ConfirmSendToken.prototype.componentWillMount = function () { .balanceOf(selectedAddress) .then(usersToken => { }) - this.props.updateTokenExchangeRate() this.updateComponentSendErrors({}) } -- cgit