aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/account-eth-balance.js140
-rw-r--r--ui/app/components/eth-balance.js25
-rw-r--r--ui/app/components/fiat-value.js71
-rw-r--r--ui/app/components/network.js1
-rw-r--r--ui/app/components/pending-tx-details.js11
-rw-r--r--ui/app/components/tooltip.js8
-rw-r--r--ui/app/components/transaction-list-item.js1
7 files changed, 97 insertions, 160 deletions
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
deleted file mode 100644
index 8d693685f..000000000
--- a/ui/app/components/account-eth-balance.js
+++ /dev/null
@@ -1,140 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
-const Tooltip = require('./tooltip.js')
-
-module.exports = connect(mapStateToProps)(EthBalanceComponent)
-
-function mapStateToProps (state) {
- return {
- conversionRate: state.metamask.conversionRate,
- conversionDate: state.metamask.conversionDate,
- currentFiat: state.metamask.currentFiat,
- }
-}
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
- Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
- var state = this.props
- var style = state.style
-
- const value = formatBalance(state.value, 6)
- var width = state.width
-
- return (
-
- h('.ether-balance', {
- style: style,
- }, [
- h('.ether-balance-amount', {
- style: {
- display: 'inline',
- width: width,
- },
- }, this.renderBalance(value, state)),
- ])
-
- )
-}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
- if (value === 'None') return value
- var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
- var balance, fiatDisplayNumber, fiatTooltipNumber
- var splitBalance = value.split(' ')
- var ethNumber = splitBalance[0]
- var ethSuffix = splitBalance[1]
-
-
- if (state.conversionRate !== 0) {
- fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate
- fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
- } else {
- fiatDisplayNumber = 'N/A'
- }
-
- var fiatSuffix = state.currentFiat
-
- if (state.shorten) {
- balance = balanceObj.shortBalance
- } else {
- balance = balanceObj.balance
- }
-
- var label = balanceObj.label
-
- return (
- h('.flex-column', [
- h(Tooltip, {
- position: 'bottom',
- title: `${ethNumber} ${ethSuffix}`,
- }, [
- h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- marginBottom: '5px',
- },
- }, [
- h('div', {
- style: {
- width: '100%',
- textAlign: 'right',
- },
- }, balance),
- h('div', {
- style: {
- color: '#AEAEAE',
- marginLeft: '5px',
- },
- }, label),
- ]),
- ]),
- h(Tooltip, {
- position: 'bottom',
- title: `${fiatTooltipNumber} ${fiatSuffix}`,
- }, [
- fiatDisplay(fiatDisplayNumber, fiatSuffix),
- ]),
- ])
- )
-}
-
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
- if (fiatDisplayNumber !== 'N/A') {
- return h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- },
- }, [
- h('div', {
- style: {
- width: '100%',
- textAlign: 'right',
- fontSize: '12px',
- color: '#333333',
- },
- }, fiatDisplayNumber),
- h('div', {
- style: {
- color: '#AEAEAE',
- marginLeft: '5px',
- fontSize: '12px',
- },
- }, fiatSuffix),
- ])
- } else {
- return h('div')
- }
-}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 498873faa..46127bed5 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
const formatBalance = require('../util').formatBalance
const generateBalanceObject = require('../util').generateBalanceObject
const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
module.exports = EthBalanceComponent
@@ -13,11 +14,11 @@ function EthBalanceComponent () {
}
EthBalanceComponent.prototype.render = function () {
- var state = this.props
- var style = state.style
+ var props = this.props
+ var style = props.style
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
- const value = formatBalance(state.value, 6, needsParse)
- var width = state.width
+ const value = formatBalance(props.value, 6, needsParse)
+ var width = props.width
return (
@@ -35,15 +36,16 @@ EthBalanceComponent.prototype.render = function () {
)
}
EthBalanceComponent.prototype.renderBalance = function (value) {
- var state = this.props
+ var props = this.props
if (value === 'None') return value
- var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
+ var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
var balance
var splitBalance = value.split(' ')
var ethNumber = splitBalance[0]
var ethSuffix = splitBalance[1]
+ const showFiat = 'showFiat' in props ? props.showFiat : true
- if (state.shorten) {
+ if (props.shorten) {
balance = balanceObj.shortBalance
} else {
balance = balanceObj.balance
@@ -55,8 +57,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
h(Tooltip, {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
- }, [
- h('.flex-column', {
+ }, h('div.flex-column', [
+ h('.flex-row', {
style: {
alignItems: 'flex-end',
lineHeight: '13px',
@@ -74,9 +76,12 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
style: {
color: ' #AEAEAE',
fontSize: '12px',
+ marginLeft: '5px',
},
}, label),
]),
- ])
+
+ showFiat ? h(FiatValue, { value: props.value }) : null,
+ ]))
)
}
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
new file mode 100644
index 000000000..13ee48245
--- /dev/null
+++ b/ui/app/components/fiat-value.js
@@ -0,0 +1,71 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const formatBalance = require('../util').formatBalance
+
+module.exports = connect(mapStateToProps)(FiatValue)
+
+function mapStateToProps (state) {
+ return {
+ conversionRate: state.metamask.conversionRate,
+ currentFiat: state.metamask.currentFiat,
+ }
+}
+
+inherits(FiatValue, Component)
+function FiatValue () {
+ Component.call(this)
+}
+
+FiatValue.prototype.render = function () {
+ const props = this.props
+ const value = formatBalance(props.value, 6)
+
+ if (value === 'None') return value
+ var fiatDisplayNumber, fiatTooltipNumber
+ var splitBalance = value.split(' ')
+
+ if (props.conversionRate !== 0) {
+ fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate
+ fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
+ } else {
+ fiatDisplayNumber = 'N/A'
+ fiatTooltipNumber = 'Unknown'
+ }
+
+ var fiatSuffix = props.currentFiat
+
+ return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+ if (fiatDisplayNumber !== 'N/A') {
+ return h('.flex-row', {
+ style: {
+ alignItems: 'flex-end',
+ lineHeight: '13px',
+ fontFamily: 'Montserrat Light',
+ textRendering: 'geometricPrecision',
+ },
+ }, [
+ h('div', {
+ style: {
+ width: '100%',
+ textAlign: 'right',
+ fontSize: '12px',
+ color: '#333333',
+ },
+ }, fiatDisplayNumber),
+ h('div', {
+ style: {
+ color: '#AEAEAE',
+ marginLeft: '5px',
+ fontSize: '12px',
+ },
+ }, fiatSuffix),
+ ])
+ } else {
+ return h('div')
+ }
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 6826e0685..845861396 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -75,7 +75,6 @@ Network.prototype.render = function () {
default:
return h('.network-indicator', [
h('i.fa.fa-question-circle.fa-lg', {
- ariaHidden: true,
style: {
margin: '10px',
color: 'rgb(125, 128, 130)',
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 2fb0eae3f..c2e39a1ca 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -4,9 +4,8 @@ const inherits = require('util').inherits
const carratInline = require('fs').readFileSync('./images/forward-carrat.svg', 'utf8')
const MiniAccountPanel = require('./mini-account-panel')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
const addressSummary = require('../util').addressSummary
-const formatBalance = require('../util').formatBalance
const nameForAddress = require('../../lib/contract-namer')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
@@ -70,7 +69,7 @@ PTXP.render = function () {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, [
- h(EtherBalance, {
+ h(EthBalance, {
value: balance,
inline: true,
labelColor: '#F7861C',
@@ -107,12 +106,12 @@ PTXP.render = function () {
h('.row', [
h('.cell.label', 'Amount'),
- h('.cell.value', formatBalance(txParams.value)),
+ h(EthBalance, { value: txParams.value }),
]),
h('.cell.row', [
h('.cell.label', 'Max Transaction Fee'),
- h('.cell.value', formatBalance(txFee.toString(16))),
+ h(EthBalance, { value: txFee.toString(16) }),
]),
h('.cell.row', {
@@ -129,7 +128,7 @@ PTXP.render = function () {
alignItems: 'center',
},
}, [
- h(EtherBalance, {
+ h(EthBalance, {
value: maxCost.toString(16),
inline: true,
labelColor: 'black',
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index fb67c717e..757ad0cd6 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -11,12 +11,14 @@ function Tooltip () {
}
Tooltip.prototype.render = function () {
+
const props = this.props
+ const { position, title, children } = props
return h(ReactTooltip, {
- position: props.position ? props.position : 'left',
- title: props.title,
+ position: position || 'left',
+ title,
fixed: false,
- }, props.children)
+ }, children)
}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 1b85464e1..66a232981 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -77,6 +77,7 @@ TransactionListItem.prototype.render = function () {
value: txParams.value,
width: '55px',
shorten: true,
+ showFiat: false,
style: {fontSize: '15px'},
}) : h('.flex-column'),
])
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 13:35:34 +0800