diff --git a/CHANGELOG.md b/CHANGELOG.md index bea356ab6..c20aa11d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Add fiat conversion values to more views. - On fresh install, open a new tab with the MetaMask Introduction video. - Block negative values from transactions. - Fixed a memory leak. diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 486a1a633..cc956fed3 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -10,7 +10,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const valuesFor = require('./util').valuesFor const Identicon = require('./components/identicon') -const AccountEtherBalance = require('./components/account-eth-balance') +const EthBalance = require('./components/eth-balance') const TransactionList = require('./components/transaction-list') const ExportAccountView = require('./components/account-export') const ethUtil = require('ethereumjs-util') @@ -168,7 +168,7 @@ AccountDetailScreen.prototype.render = function () { }, }, [ - h(AccountEtherBalance, { + h(EthBalance, { value: account && account.balance, style: { lineHeight: '7px', diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js index aa80e0e23..0b4acdfec 100644 --- a/ui/app/accounts/account-list-item.js +++ b/ui/app/accounts/account-list-item.js @@ -3,7 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') -const AccountEtherBalance = require('../components/account-eth-balance') +const EthBalance = require('../components/eth-balance') const CopyButton = require('../components/copyButton') const Identicon = require('../components/identicon') @@ -50,7 +50,7 @@ NewComponent.prototype.render = function () { textOverflow: 'ellipsis', }, }, ethUtil.toChecksumAddress(identity.address)), - h(AccountEtherBalance, { + h(EthBalance, { value: account.balance, style: { lineHeight: '7px', diff --git a/ui/app/app.js b/ui/app/app.js index b674efff1..2e05f0038 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -245,7 +245,7 @@ App.prototype.renderNetworkDropdown = function () { label: 'Localhost 8545', closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')), - icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-question-circle.fa-lg'), activeNetworkRender: props.provider.rpcTarget, }), @@ -253,7 +253,7 @@ App.prototype.renderNetworkDropdown = function () { label: 'Custom RPC', closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-question-circle.fa-lg'), }), this.renderCustomOption(props.provider.rpcTarget), @@ -289,21 +289,21 @@ App.prototype.renderDropdown = function () { label: 'Settings', closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-gear.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-gear.fa-lg'), }), h(DropMenuItem, { label: 'Lock', closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), action: () => this.props.dispatch(actions.lockMetamask()), - icon: h('i.fa.fa-lock.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-lock.fa-lg'), }), h(DropMenuItem, { label: 'Help', closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), action: () => this.props.dispatch(actions.showInfoPage()), - icon: h('i.fa.fa-question.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-question.fa-lg'), }), ]) } @@ -312,7 +312,6 @@ App.prototype.renderBackButton = function (style, justArrow = false) { return ( h('.flex-row', { key: 'leftArrow', - transForward: false, style: style, onClick: () => props.dispatch(actions.goBackToInitView()), }, [ @@ -515,14 +514,14 @@ App.prototype.renderCustomOption = function (rpcTarget) { label: 'Custom RPC', closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-question-circle.fa-lg'), }) default: return h(DropMenuItem, { label: `${rpcTarget}`, closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + icon: h('i.fa.fa-question-circle.fa-lg'), activeNetworkRender: 'custom', }) } 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'), ]) diff --git a/ui/app/send.js b/ui/app/send.js index cf1b43b1d..009866cf7 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -7,7 +7,7 @@ const actions = require('./actions') const util = require('./util') const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary -const EtherBalance = require('./components/eth-balance') +const EthBalance = require('./components/eth-balance') const ethUtil = require('ethereumjs-util') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -107,8 +107,7 @@ SendTransactionScreen.prototype.render = function () { // balance h('.flex-row.flex-center', [ - // h('div', formatBalance(account && account.balance)), - h(EtherBalance, { + h(EthBalance, { value: account && account.balance, }),