From 3ce69e1b65dc4e12c51400d01b973cb0d0c79e7a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 10:24:58 -0230 Subject: [PATCH] Clean up send.js and eth-balance.js with es6. --- ui/app/actions.js | 6 +- ui/app/components/eth-balance.js | 58 ++++++++----------- ui/app/send.js | 99 +++++++++++++++++++------------- 3 files changed, 87 insertions(+), 76 deletions(-) diff --git a/ui/app/actions.js b/ui/app/actions.js index 110e77ada..ffe4ca0cd 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -352,16 +352,16 @@ function showInfoPage () { function setCurrentCurrency (currencyCode) { return (dispatch) => { - dispatch(this.showLoadingIndication()) + dispatch(actions.showLoadingIndication()) log.debug(`background.setCurrentCurrency`) background.setCurrentCurrency(currencyCode, (err, data) => { - dispatch(this.hideLoadingIndication()) + dispatch(actions.hideLoadingIndication()) if (err) { log.error(err.stack) return dispatch(actions.displayWarning(err.message)) } dispatch({ - type: this.SET_CURRENT_FIAT, + type: actions.SET_CURRENT_FIAT, value: { currentCurrency: data.currentCurrency, conversionRate: data.conversionRate, diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 32ff4efdf..84b719315 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -1,8 +1,10 @@ -const Component = require('react').Component +const { Component } = require('react') const h = require('react-hyperscript') -const inherits = require('util').inherits -const formatBalance = require('../util').formatBalance -const generateBalanceObject = require('../util').generateBalanceObject +const { inherits } = require('util') +const { + formatBalance, + generateBalanceObject +} = require('../util') const Tooltip = require('./tooltip.js') const FiatValue = require('./fiat-value.js') @@ -14,11 +16,10 @@ function EthBalanceComponent () { } EthBalanceComponent.prototype.render = function () { - var props = this.props - let { value } = props - const { style, width } = props - var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true - value = value ? formatBalance(value, 6, needsParse) : '...' + const props = this.props + const { value, style, width, needsParse = true } = props + + const formattedValue = value ? formatBalance(value, 6, needsParse) : '...' return ( @@ -30,13 +31,15 @@ EthBalanceComponent.prototype.render = function () { display: 'inline', width, }, - }, this.renderBalance(value)), + }, this.renderBalance(formattedValue)), ]) ) } EthBalanceComponent.prototype.renderBalance = function (value) { - var props = this.props + if (value === 'None') return value + if (value === '...') return value + const { conversionRate, shorten, @@ -44,34 +47,22 @@ EthBalanceComponent.prototype.renderBalance = function (value) { currentCurrency, hideTooltip, styleOveride, - } = props - + showFiat = true, + } = this.props const { fontSize, color, fontFamily, lineHeight } = styleOveride - if (value === 'None') return value - if (value === '...') return value - var balanceObj = generateBalanceObject(value, 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 (shorten) { - balance = balanceObj.shortBalance - } else { - balance = balanceObj.balance - } + const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3) + const balanceToRender = shorten ? shortBalance : balance - var label = balanceObj.label - const tooltipProps = hideTooltip ? {} : { + const [ethNumber, ethSuffix] = value.split(' ') + const containerProps = hideTooltip ? {} : { position: 'bottom', title: `${ethNumber} ${ethSuffix}`, }; return ( h(hideTooltip ? 'div' : Tooltip, - tooltipProps, + containerProps, h('div.flex-column', [ h('.flex-row', { style: { @@ -88,7 +79,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) { fontSize: fontSize || 'inherit', color: color || 'inherit', }, - }, incoming ? `+${balance}` : balance), + }, incoming ? `+${balanceToRender}` : balanceToRender), h('div', { style: { color: color || '#AEAEAE', @@ -98,7 +89,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) { }, label), ]), - showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null, - ])) + showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null, + ]) + ) ) } diff --git a/ui/app/send.js b/ui/app/send.js index 848f53f7c..b099c0251 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -1,49 +1,68 @@ -const inherits = require('util').inherits +const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') -const actions = require('./actions') -const util = require('./util') -const ethUtil = require('ethereumjs-util') -const BN = ethUtil.BN const hexToBn = require('../../app/scripts/lib/hex-to-bn') -const numericBalance = require('./util').numericBalance -const addressSummary = require('./util').addressSummary -const bnMultiplyByFraction = require('./util').bnMultiplyByFraction -const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') -const FiatValue = require('./components/fiat-value.js') -const GasTooltip = require('./components/gas-tooltip.js') +const FiatValue = require('./components/fiat-value') +const GasTooltip = require('./components/gas-tooltip') const { getSelectedIdentity } = require('./selectors') -const getTxFeeBn = require('./util').getTxFeeBn + +const { + setCurrentCurrency, + showAccountsPage, + backToAccountDetail, + displayWarning, + hideWarning, + addToAddressBook, + signTx, +} = require('./actions') +const { stripHexPrefix, addHexPrefix, BN } = require('ethereumjs-util') +const { + addressSummary, + bnMultiplyByFraction, + getTxFeeBn, + isHex, + numericBalance, +} = require('./util') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { - var result = { - selectedIdentity: getSelectedIdentity(state), - address: state.metamask.selectedAddress, - accounts: state.metamask.accounts, - identities: state.metamask.identities, - warning: state.appState.warning, - network: state.metamask.network, - addressBook: state.metamask.addressBook, - conversionRate: state.metamask.conversionRate, - currentCurrency: state.metamask.currentCurrency, - blockGasLimit: state.metamask.currentBlockGasLimit, - } - - result.error = result.warning && result.warning.split('.')[0] - - result.account = result.accounts[result.address] - result.identity = result.identities[result.address] - result.balance = result.account ? numericBalance(result.account.balance) : null + const { + selectedAddress: address, + accounts, + identities, + network, + addressBook, + conversionRate, + currentCurrency, + currentBlockGasLimit: blockGasLimit, + } = state.metamask + const { warning } = state.appState + const selectedIdentity = getSelectedIdentity(state) + const account = accounts[address] - return result + return { + address, + accounts, + identities, + network, + addressBook, + conversionRate, + currentCurrency, + blockGasLimit, + warning, + selectedIdentity, + error: warning && warning.split('.')[0], + account, + identity: identities[address], + balance: account ? numericBalance(account.balance) : null, + } } inherits(SendTransactionScreen, PersistentForm) @@ -588,17 +607,17 @@ SendTransactionScreen.prototype.closeTooltip = function () { } SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { - this.props.dispatch(actions.setCurrentCurrency(newCurrency)) + this.props.dispatch(setCurrentCurrency(newCurrency)) } SendTransactionScreen.prototype.navigateToAccounts = function (event) { event.stopPropagation() - this.props.dispatch(actions.showAccountsPage()) + this.props.dispatch(showAccountsPage()) } SendTransactionScreen.prototype.back = function () { var address = this.props.address - this.props.dispatch(actions.backToAccountDetail(address)) + this.props.dispatch(backToAccountDetail(address)) } SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) { @@ -644,14 +663,14 @@ SendTransactionScreen.prototype.onSubmit = function () { // return this.props.dispatch(actions.displayWarning(message)) // } - if (txData && !isHex(ethUtil.stripHexPrefix(txData))) { + if (txData && !isHex(stripHexPrefix(txData))) { message = 'Transaction data must be hex string.' - return this.props.dispatch(actions.displayWarning(message)) + return this.props.dispatch(displayWarning(message)) } - this.props.dispatch(actions.hideWarning()) + this.props.dispatch(hideWarning()) - this.props.dispatch(actions.addToAddressBook(recipient, nickname)) + this.props.dispatch(addToAddressBook(recipient, nickname)) // var txParams = { // // from: this.props.address, @@ -672,8 +691,8 @@ SendTransactionScreen.prototype.onSubmit = function () { value: '0x0', } - if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) + if (recipient) txParams.to = addHexPrefix(recipient) if (txData) txParams.data = txData - this.props.dispatch(actions.signTx(txParams)) + this.props.dispatch(signTx(txParams)) }