diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2018-10-17 07:03:29 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-17 07:03:29 +0800 |
commit | badebe017fe28b58ac742082368484c3a4b1c1bc (patch) | |
tree | b0810d259ea104a11051dd48dc1038a9c2d82310 /ui/app/components/pages/confirm-token-transaction-base | |
parent | 8bccb88132447882f81105a0033a4f199200714f (diff) | |
download | tangerine-wallet-browser-badebe017fe28b58ac742082368484c3a4b1c1bc.tar.gz tangerine-wallet-browser-badebe017fe28b58ac742082368484c3a4b1c1bc.tar.zst tangerine-wallet-browser-badebe017fe28b58ac742082368484c3a4b1c1bc.zip |
Adds toggle for primary currency (#5421)
* Add UnitInput component
* Add CurrencyInput component
* Add UserPreferencedCurrencyInput component
* Add UserPreferencedCurrencyDisplay component
* Add updatePreferences action
* Add styles for CurrencyInput, CurrencyDisplay, and UnitInput
* Update SettingsTab page with Primary Currency toggle
* Refactor currency displays and inputs to use UserPreferenced displays and inputs
* Add TokenInput component
* Add UserPreferencedTokenInput component
* Use TokenInput in the send screen
* Fix unit tests
* Fix e2e and integration tests
* Remove send/CurrencyDisplay component
* Replace diamond unicode character with Eth logo. Fix typos
Diffstat (limited to 'ui/app/components/pages/confirm-token-transaction-base')
-rw-r--r-- | ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js | 59 |
1 files changed, 45 insertions, 14 deletions
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js index acaed383a..7f1fb4e49 100644 --- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js +++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js @@ -1,12 +1,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import ConfirmTransactionBase from '../confirm-transaction-base' +import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display' import { formatCurrency, convertTokenToFiat, addFiat, roundExponential, } from '../../../helpers/confirm-transaction/util' +import { getWeiHexFromDecimalValue } from '../../../helpers/conversions.util' +import { ETH, PRIMARY } from '../../../constants/common' export default class ConfirmTokenTransactionBase extends Component { static contextTypes = { @@ -36,19 +39,48 @@ export default class ConfirmTokenTransactionBase extends Component { }) } - getSubtitle () { - const { currentCurrency, contractExchangeRate } = this.props + renderSubtitleComponent () { + const { contractExchangeRate, tokenAmount } = this.props - if (typeof contractExchangeRate === 'undefined') { - return this.context.t('noConversionRateAvailable') - } else { - const fiatTransactionAmount = this.getFiatTransactionAmount() - const roundedFiatTransactionAmount = roundExponential(fiatTransactionAmount) - return formatCurrency(roundedFiatTransactionAmount, currentCurrency) - } + const decimalEthValue = (tokenAmount * contractExchangeRate) || 0 + const hexWeiValue = getWeiHexFromDecimalValue({ + value: decimalEthValue, + fromCurrency: ETH, + fromDenomination: ETH, + }) + + return typeof contractExchangeRate === 'undefined' + ? ( + <span> + { this.context.t('noConversionRateAvailable') } + </span> + ) : ( + <UserPreferencedCurrencyDisplay + value={hexWeiValue} + type={PRIMARY} + showEthLogo + hideLabel + /> + ) + } + + renderPrimaryTotalTextOverride () { + const { tokenAmount, tokenSymbol, ethTransactionTotal } = this.props + const tokensText = `${tokenAmount} ${tokenSymbol}` + + return ( + <div> + <span>{ `${tokensText} + ` }</span> + <img + src="/images/eth.svg" + height="18" + /> + <span>{ ethTransactionTotal }</span> + </div> + ) } - getFiatTotalTextOverride () { + getSecondaryTotalTextOverride () { const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props if (typeof contractExchangeRate === 'undefined') { @@ -67,7 +99,6 @@ export default class ConfirmTokenTransactionBase extends Component { tokenAddress, tokenSymbol, tokenAmount, - ethTransactionTotal, ...restProps } = this.props @@ -78,9 +109,9 @@ export default class ConfirmTokenTransactionBase extends Component { toAddress={toAddress} identiconAddress={tokenAddress} title={tokensText} - subtitle={this.getSubtitle()} - ethTotalTextOverride={`${tokensText} + \u2666 ${ethTransactionTotal}`} - fiatTotalTextOverride={this.getFiatTotalTextOverride()} + subtitleComponent={this.renderSubtitleComponent()} + primaryTotalTextOverride={this.renderPrimaryTotalTextOverride()} + secondaryTotalTextOverride={this.getSecondaryTotalTextOverride()} {...restProps} /> ) |