From 5a7e4c4e76fd92b9f797fd2088b00ce6dc4fd47a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 11:39:07 -0230 Subject: Move gas fee to a separate component. --- ui/app/components/send/gas-fee-display.js | 53 +++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 ui/app/components/send/gas-fee-display.js (limited to 'ui/app/components/send/gas-fee-display.js') diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js new file mode 100644 index 000000000..3add95394 --- /dev/null +++ b/ui/app/components/send/gas-fee-display.js @@ -0,0 +1,53 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const EthBalance = require('../eth-balance') +const FiatValue = require('../fiat-value') +const { getTxFeeBn } = require('../../util') + +module.exports = GasFeeDisplay + +inherits(GasFeeDisplay, Component) +function GasFeeDisplay () { + Component.call(this) +} + +GasFeeDisplay.prototype.render = function () { + const { + currentCurrency, + conversionRate, + gas, + gasPrice, + blockGasLimit, + } = this.props + + const renderableCurrencies = { + USD: h(FiatValue, { + value: getTxFeeBn(gas, gasPrice, blockGasLimit), + conversionRate, + currentCurrency, + style: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }), + ETH: h(EthBalance, { + value: getTxFeeBn(gas, gasPrice, blockGasLimit), + currentCurrency, + conversionRate, + showFiat: false, + hideTooltip: true, + styleOveride: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }), + } + + return renderableCurrencies[currentCurrency]; +} + -- cgit From 3ea841e27621a8e9972677e46dbd8e3f0c002632 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 16:07:46 -0230 Subject: Refactor gas-fee-display to include usd and eth fee displays as separate components. --- ui/app/components/send/gas-fee-display.js | 51 +++++++++++++------------------ 1 file changed, 21 insertions(+), 30 deletions(-) (limited to 'ui/app/components/send/gas-fee-display.js') diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js index 3add95394..5336be8a3 100644 --- a/ui/app/components/send/gas-fee-display.js +++ b/ui/app/components/send/gas-fee-display.js @@ -1,9 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const EthBalance = require('../eth-balance') -const FiatValue = require('../fiat-value') -const { getTxFeeBn } = require('../../util') +const USDFeeDisplay = require('./usd-fee-display') +const EthFeeDisplay = require('./eth-fee-display') module.exports = GasFeeDisplay @@ -21,33 +20,25 @@ GasFeeDisplay.prototype.render = function () { blockGasLimit, } = this.props - const renderableCurrencies = { - USD: h(FiatValue, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - conversionRate, - currentCurrency, - style: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px' - } - }), - ETH: h(EthBalance, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - currentCurrency, - conversionRate, - showFiat: false, - hideTooltip: true, - styleOveride: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px' - } - }), + switch (currentCurrency) { + case 'USD': + return h(USDFeeDisplay, { + currentCurrency, + conversionRate, + gas, + gasPrice, + blockGasLimit, + }) + case 'ETH': + return h(EthFeeDisplay, { + currentCurrency, + conversionRate, + gas, + gasPrice, + blockGasLimit, + }) + default: + return h('noscript'); } - - return renderableCurrencies[currentCurrency]; } -- cgit From 8f31b05ac5b7d8383c720b8b0c9f7f3cecc937f5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 13 Sep 2017 01:25:39 -0700 Subject: Add token exchange rates --- ui/app/components/send/gas-fee-display.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'ui/app/components/send/gas-fee-display.js') diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js index 5336be8a3..979062882 100644 --- a/ui/app/components/send/gas-fee-display.js +++ b/ui/app/components/send/gas-fee-display.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const USDFeeDisplay = require('./usd-fee-display') const EthFeeDisplay = require('./eth-fee-display') +const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util') module.exports = GasFeeDisplay @@ -11,6 +12,20 @@ function GasFeeDisplay () { Component.call(this) } +GasFeeDisplay.prototype.getTokenValue = function () { + const { + tokenExchangeRate, + gas, + gasPrice, + blockGasLimit, + } = this.props + + const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true) + const [ethNumber] = value.split(' ') + + return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6) +} + GasFeeDisplay.prototype.render = function () { const { currentCurrency, @@ -38,7 +53,10 @@ GasFeeDisplay.prototype.render = function () { blockGasLimit, }) default: - return h('noscript'); + return h('div.token-gas', [ + h('div.token-gas__amount', this.getTokenValue()), + h('div.token-gas__symbol', currentCurrency), + ]) } } -- cgit From ca46bd200b24456d692cf1ede47506be5fdcc76d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 15:27:15 -0230 Subject: Stop setting 'currentCurrency' and use local state for active currency in send.js --- ui/app/components/send/gas-fee-display.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/components/send/gas-fee-display.js') diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js index 979062882..a9a3f3f49 100644 --- a/ui/app/components/send/gas-fee-display.js +++ b/ui/app/components/send/gas-fee-display.js @@ -28,17 +28,17 @@ GasFeeDisplay.prototype.getTokenValue = function () { GasFeeDisplay.prototype.render = function () { const { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, blockGasLimit, } = this.props - switch (currentCurrency) { + switch (activeCurrency) { case 'USD': return h(USDFeeDisplay, { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -46,7 +46,7 @@ GasFeeDisplay.prototype.render = function () { }) case 'ETH': return h(EthFeeDisplay, { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -55,7 +55,7 @@ GasFeeDisplay.prototype.render = function () { default: return h('div.token-gas', [ h('div.token-gas__amount', this.getTokenValue()), - h('div.token-gas__symbol', currentCurrency), + h('div.token-gas__symbol', activeCurrency), ]) } } -- cgit