diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2018-07-18 09:17:54 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-07-18 09:17:54 +0800 |
commit | f6ca06f775a739c8b449405c5e96b03151a6a33c (patch) | |
tree | c81242106d9e6c718e54ab338e99b5e10c665089 /ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js | |
parent | 89911dda170e33d8d9ca2f29f2705ed446d4c0f2 (diff) | |
parent | 301ae305b88d0a7e3a3cbca9a500f4b39753dc52 (diff) | |
download | tangerine-wallet-browser-f6ca06f775a739c8b449405c5e96b03151a6a33c.tar.gz tangerine-wallet-browser-f6ca06f775a739c8b449405c5e96b03151a6a33c.tar.zst tangerine-wallet-browser-f6ca06f775a739c8b449405c5e96b03151a6a33c.zip |
Merge pull request #4800 from MetaMask/i4785-confirm-screen-fixes
Add fallback when no function found, fix network colors, add fiat values for tokens with contract exchange rates
Diffstat (limited to 'ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js')
-rw-r--r-- | ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js | 85 |
1 files changed, 85 insertions, 0 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 new file mode 100644 index 000000000..365ae216e --- /dev/null +++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js @@ -0,0 +1,85 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import ConfirmTransactionBase from '../confirm-transaction-base' +import { + formatCurrency, + convertTokenToFiat, + addFiat, +} from '../../../helpers/confirm-transaction/util' + +export default class ConfirmTokenTransactionBase extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + tokenAddress: PropTypes.string, + toAddress: PropTypes.string, + tokenAmount: PropTypes.number, + tokenSymbol: PropTypes.string, + fiatTransactionTotal: PropTypes.string, + ethTransactionTotal: PropTypes.string, + contractExchangeRate: PropTypes.number, + conversionRate: PropTypes.number, + currentCurrency: PropTypes.string, + } + + getFiatTransactionAmount () { + const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props + + return convertTokenToFiat({ + value: tokenAmount, + toCurrency: currentCurrency, + conversionRate, + contractExchangeRate, + }) + } + + getSubtitle () { + const { currentCurrency, contractExchangeRate } = this.props + + if (typeof contractExchangeRate === 'undefined') { + return this.context.t('noConversionRateAvailable') + } else { + const fiatTransactionAmount = this.getFiatTransactionAmount() + return formatCurrency(fiatTransactionAmount, currentCurrency) + } + } + + getFiatTotalTextOverride () { + const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props + + if (typeof contractExchangeRate === 'undefined') { + return formatCurrency(fiatTransactionTotal, currentCurrency) + } else { + const fiatTransactionAmount = this.getFiatTransactionAmount() + const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal) + return formatCurrency(fiatTotal, currentCurrency) + } + } + + render () { + const { + toAddress, + tokenAddress, + tokenSymbol, + tokenAmount, + ethTransactionTotal, + ...restProps + } = this.props + + const tokensText = `${tokenAmount} ${tokenSymbol}` + + return ( + <ConfirmTransactionBase + toAddress={toAddress} + identiconAddress={tokenAddress} + title={tokensText} + subtitle={this.getSubtitle()} + ethTotalTextOverride={`${tokensText} + \u2666 ${ethTransactionTotal}`} + fiatTotalTextOverride={this.getFiatTotalTextOverride()} + {...restProps} + /> + ) + } +} |