|
|
|
@ -1,11 +1,13 @@ |
|
|
|
|
import React, { PureComponent } from 'react' |
|
|
|
|
import PropTypes from 'prop-types' |
|
|
|
|
import classnames from 'classnames' |
|
|
|
|
import Button from '../button' |
|
|
|
|
import Identicon from '../identicon' |
|
|
|
|
import TokenBalance from '../token-balance' |
|
|
|
|
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display' |
|
|
|
|
import { SEND_ROUTE } from '../../routes' |
|
|
|
|
import { PRIMARY, SECONDARY } from '../../constants/common' |
|
|
|
|
import Tooltip from '../tooltip-v2' |
|
|
|
|
|
|
|
|
|
export default class TransactionViewBalance extends PureComponent { |
|
|
|
|
static contextTypes = { |
|
|
|
@ -19,10 +21,11 @@ export default class TransactionViewBalance extends PureComponent { |
|
|
|
|
network: PropTypes.string, |
|
|
|
|
balance: PropTypes.string, |
|
|
|
|
assetImage: PropTypes.string, |
|
|
|
|
balanceIsCached: PropTypes.bool, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderBalance () { |
|
|
|
|
const { selectedToken, balance } = this.props |
|
|
|
|
const { selectedToken, balance, balanceIsCached } = this.props |
|
|
|
|
|
|
|
|
|
return selectedToken |
|
|
|
|
? ( |
|
|
|
@ -34,20 +37,34 @@ export default class TransactionViewBalance extends PureComponent { |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div className="transaction-view-balance__balance"> |
|
|
|
|
<UserPreferencedCurrencyDisplay |
|
|
|
|
className="transaction-view-balance__primary-balance" |
|
|
|
|
value={balance} |
|
|
|
|
type={PRIMARY} |
|
|
|
|
ethNumberOfDecimals={4} |
|
|
|
|
/> |
|
|
|
|
<UserPreferencedCurrencyDisplay |
|
|
|
|
className="transaction-view-balance__secondary-balance" |
|
|
|
|
value={balance} |
|
|
|
|
type={SECONDARY} |
|
|
|
|
ethNumberOfDecimals={4} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}> |
|
|
|
|
<div className="transaction-view-balance__balance"> |
|
|
|
|
<div className="transaction-view-balance__primary-container"> |
|
|
|
|
<UserPreferencedCurrencyDisplay |
|
|
|
|
className={classnames('transaction-view-balance__primary-balance', { |
|
|
|
|
'transaction-view-balance__cached-balance': balanceIsCached, |
|
|
|
|
})} |
|
|
|
|
value={balance} |
|
|
|
|
type={PRIMARY} |
|
|
|
|
ethNumberOfDecimals={4} |
|
|
|
|
hideTitle={true} |
|
|
|
|
/> |
|
|
|
|
{ |
|
|
|
|
balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
<UserPreferencedCurrencyDisplay |
|
|
|
|
className={classnames({ |
|
|
|
|
'transaction-view-balance__cached-secondary-balance': balanceIsCached, |
|
|
|
|
'transaction-view-balance__secondary-balance': !balanceIsCached, |
|
|
|
|
})} |
|
|
|
|
value={balance} |
|
|
|
|
type={SECONDARY} |
|
|
|
|
ethNumberOfDecimals={4} |
|
|
|
|
hideTitle={true} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</Tooltip> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|