diff options
Diffstat (limited to 'ui/app/components/tx-list-item.js')
-rw-r--r-- | ui/app/components/tx-list-item.js | 90 |
1 files changed, 73 insertions, 17 deletions
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 3bb9a2eda..26de19f15 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -6,10 +6,10 @@ const classnames = require('classnames') const abi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') abiDecoder.addABI(abi) -const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') const Identicon = require('./identicon') +const contractMap = require('eth-contract-metadata') -const { conversionUtil } = require('../conversion-util') +const { conversionUtil, multiplyCurrencies } = require('../conversion-util') const { getCurrentCurrency } = require('../selectors') @@ -19,12 +19,31 @@ function mapStateToProps (state) { return { tokens: state.metamask.tokens, currentCurrency: getCurrentCurrency(state), + tokenExchangeRates: state.metamask.tokenExchangeRates, } } inherits(TxListItem, Component) function TxListItem () { Component.call(this) + + this.state = { + total: null, + fiatTotal: null, + } +} + +TxListItem.prototype.componentDidMount = async function () { + const { txParams = {} } = this.props + + const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { name: txDataName } = decodedData || {} + + const { total, fiatTotal } = txDataName === 'transfer' + ? await this.getSendTokenTotal() + : this.getSendEtherTotal() + + this.setState({ total, fiatTotal }) } TxListItem.prototype.getAddressText = function () { @@ -84,23 +103,67 @@ TxListItem.prototype.getSendEtherTotal = function () { } } -TxListItem.prototype.getSendTokenTotal = function () { +TxListItem.prototype.getTokenInfo = async function () { + const { txParams = {}, tokenInfoGetter, tokens } = this.props + const toAddress = txParams.to + + let decimals + let symbol + + ({ decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {}) + + if (!decimals && !symbol) { + ({ decimals, symbol } = contractMap[toAddress] || {}) + } + + if (!decimals && !symbol) { + ({ decimals, symbol } = await tokenInfoGetter(toAddress)) + } + + return { decimals, symbol } +} + +TxListItem.prototype.getSendTokenTotal = async function () { const { txParams = {}, - tokens, + conversionRate, + tokenExchangeRates, + currentCurrency, } = this.props - const toAddress = txParams.to const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { params = [] } = decodedData || {} const { value } = params[1] || {} - const { decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {} - + const { decimals, symbol } = await this.getTokenInfo() const multiplier = Math.pow(10, Number(decimals || 0)) const total = Number(value / multiplier) + const pair = symbol && `${symbol.toLowerCase()}_eth` + + let tokenToFiatRate + let totalInFiat + + if (tokenExchangeRates[pair]) { + tokenToFiatRate = multiplyCurrencies( + tokenExchangeRates[pair].rate, + conversionRate + ) + + totalInFiat = conversionUtil(total, { + fromNumericBase: 'dec', + toNumericBase: 'dec', + fromCurrency: symbol, + toCurrency: currentCurrency, + numberOfDecimals: 2, + conversionRate: tokenToFiatRate, + }) + } + + const showFiat = Boolean(totalInFiat) && currentCurrency.toUpperCase() !== symbol + return { total: `${total} ${symbol}`, + fiatTotal: showFiat && `${totalInFiat} ${currentCurrency.toUpperCase()}`, } } @@ -112,15 +175,8 @@ TxListItem.prototype.render = function () { dateString, address, className, - txParams = {}, } = this.props - - const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) - const { name: txDataName } = decodedData || {} - - const { total, fiatTotal } = txDataName === 'transfer' - ? this.getSendTokenTotal() - : this.getSendEtherTotal() + const { total, fiatTotal } = this.state return h(`div${className || ''}`, { key: transActionId, @@ -182,10 +238,10 @@ TxListItem.prototype.render = function () { }), }, total), - h('span.tx-list-fiat-value', fiatTotal), + fiatTotal && h('span.tx-list-fiat-value', fiatTotal), ]), ]), - ]) // holding on icon from design + ]), // holding on icon from design ]) } |