1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/app/components/eth-balance.js

103 lines
2.6 KiB
JavaScript
Raw Normal View History

const { Component } = require('react')
2016-05-18 22:41:08 +02:00
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const { inherits } = require('util')
const {
formatBalance,
2017-08-29 16:50:48 +02:00
generateBalanceObject,
} = require('../util')
const Tooltip = require('./tooltip.js')
2016-09-03 23:20:27 +02:00
const FiatValue = require('./fiat-value.js')
module.exports = connect(mapStateToProps)(EthBalanceComponent)
function mapStateToProps (state) {
return {
ticker: state.metamask.ticker,
}
}
2016-05-18 22:41:08 +02:00
inherits(EthBalanceComponent, Component)
2016-06-21 22:18:32 +02:00
function EthBalanceComponent () {
2016-05-18 22:41:08 +02:00
Component.call(this)
}
2016-06-21 22:18:32 +02:00
EthBalanceComponent.prototype.render = function () {
const props = this.props
const { ticker, value, style, width, needsParse = true } = props
const formattedValue = value ? formatBalance(value, 6, needsParse, ticker) : '...'
2016-05-18 22:41:08 +02:00
return (
h('.ether-balance.ether-balance-amount', {
style,
2016-05-18 22:41:08 +02:00
}, [
h('div', {
2016-05-18 22:41:08 +02:00
style: {
display: 'inline',
width,
2016-05-18 22:41:08 +02:00
},
}, this.renderBalance(formattedValue)),
2016-05-18 22:41:08 +02:00
])
)
}
EthBalanceComponent.prototype.renderBalance = function (value) {
if (value === 'None') return value
if (value === '...') return value
const {
conversionRate,
shorten,
incoming,
currentCurrency,
hideTooltip,
styleOveride = {},
showFiat = true,
} = this.props
const { fontSize, color, fontFamily, lineHeight } = styleOveride
const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
const balanceToRender = shorten ? shortBalance : balance
const [ethNumber, ethSuffix] = value.split(' ')
const containerProps = hideTooltip ? {} : {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
2017-08-29 16:50:48 +02:00
}
2016-06-30 20:15:32 +02:00
return (
h(hideTooltip ? 'div' : Tooltip,
containerProps,
h('div.flex-column', [
h('.flex-row', {
style: {
alignItems: 'flex-end',
lineHeight: lineHeight || '13px',
fontFamily: fontFamily || 'Montserrat Light',
textRendering: 'geometricPrecision',
},
}, [
h('div', {
style: {
width: '100%',
textAlign: 'right',
fontSize: fontSize || 'inherit',
color: color || 'inherit',
},
}, incoming ? `+${balanceToRender}` : balanceToRender),
h('div', {
style: {
color: color || '#AEAEAE',
fontSize: fontSize || '12px',
marginLeft: '5px',
},
}, label),
]),
2016-09-03 23:20:27 +02:00
showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
])
)
2016-06-30 20:15:32 +02:00
)
}