2018-11-12 04:30:37 -08:00
|
|
|
import React, { Component } from 'react'
|
2018-11-13 11:55:14 -08:00
|
|
|
import { formatBalance, countSignificantDecimals } from '../util'
|
2018-11-12 05:16:58 -08:00
|
|
|
import PropTypes from 'prop-types'
|
2019-02-06 08:21:56 -08:00
|
|
|
import { DAI_CODE, POA_SOKOL_CODE, GOERLI_TESTNET_CODE } from '../../../app/scripts/controllers/network/enums'
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
class FiatValue extends Component {
|
|
|
|
render = () => {
|
|
|
|
const props = this.props
|
|
|
|
let { conversionRate } = props
|
|
|
|
const { currentCurrency, network } = props
|
2019-02-06 08:21:56 -08:00
|
|
|
const isTestnet = parseInt(network) === POA_SOKOL_CODE || parseInt(network) === GOERLI_TESTNET_CODE
|
2019-01-10 08:59:43 -08:00
|
|
|
const isDai = parseInt(network) === DAI_CODE
|
2019-01-10 10:01:33 -08:00
|
|
|
if (isTestnet) {
|
2018-11-12 04:30:37 -08:00
|
|
|
conversionRate = 0
|
|
|
|
} else if (isDai) {
|
|
|
|
conversionRate = 1
|
|
|
|
}
|
|
|
|
const renderedCurrency = currentCurrency || ''
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
const value = formatBalance(props.value, 6, undefined, props.network)
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
if (value === 'None') return value
|
2018-11-13 10:51:06 -08:00
|
|
|
const splitBalance = value.split(' ')
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-13 11:55:14 -08:00
|
|
|
const fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
|
|
|
|
const fiatDisplayNumber = fiatTooltipNumber.toFixed(countSignificantDecimals(fiatTooltipNumber, 2))
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
const valueStyle = props.valueStyle ? props.valueStyle : {
|
|
|
|
width: '100%',
|
|
|
|
textAlign: 'right',
|
|
|
|
fontSize: '14px',
|
|
|
|
color: '#ffffff',
|
|
|
|
}
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
const dimStyle = props.dimStyle ? props.dimStyle : {
|
|
|
|
color: '#60db97',
|
|
|
|
marginLeft: '5px',
|
|
|
|
fontSize: '14px',
|
|
|
|
}
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
return this.fiatDisplay(fiatDisplayNumber, valueStyle, dimStyle, renderedCurrency.toUpperCase())
|
2018-07-26 11:15:51 -07:00
|
|
|
}
|
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
fiatDisplay = (fiatDisplayNumber, valueStyle, dimStyle, fiatSuffix) => {
|
2017-11-14 08:04:23 -08:00
|
|
|
|
2018-11-12 04:30:37 -08:00
|
|
|
if (fiatDisplayNumber !== 'N/A') {
|
|
|
|
return (
|
|
|
|
<div
|
2018-11-12 05:16:58 -08:00
|
|
|
className="flex-row"
|
2018-11-12 04:30:37 -08:00
|
|
|
style={{
|
|
|
|
alignItems: 'flex-end',
|
|
|
|
lineHeight: '14px',
|
|
|
|
textRendering: 'geometricPrecision',
|
|
|
|
}}
|
|
|
|
>
|
2018-11-12 05:16:58 -08:00
|
|
|
<div className="fiat-val" style={valueStyle}>{fiatDisplayNumber}</div>
|
|
|
|
<div className="fiat-dim" style={dimStyle}>{fiatSuffix}</div>
|
2018-11-12 04:30:37 -08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return <div/>
|
|
|
|
}
|
2017-11-14 08:04:23 -08:00
|
|
|
}
|
|
|
|
}
|
2018-11-12 04:30:37 -08:00
|
|
|
|
2018-11-12 05:16:58 -08:00
|
|
|
FiatValue.propTypes = {
|
|
|
|
conversionRate: PropTypes.number,
|
|
|
|
currentCurrency: PropTypes.string,
|
|
|
|
network: PropTypes.string,
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = FiatValue
|