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/currency-toggle.js | 6 +++--- ui/app/components/send/eth-fee-display.js | 4 ++-- ui/app/components/send/gas-fee-display.js | 10 +++++----- ui/app/components/send/usd-fee-display.js | 4 ++-- ui/app/send.js | 28 +++++++++++++--------------- 5 files changed, 25 insertions(+), 27 deletions(-) diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index d777f0aea..7aaccd490 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -13,20 +13,20 @@ function CurrencyToggle () { const defaultCurrencies = [ 'ETH', 'USD' ] CurrencyToggle.prototype.renderToggles = function () { - const { onClick, currentCurrency } = this.props + const { onClick, activeCurrency } = this.props const [currencyA, currencyB] = this.props.currencies || defaultCurrencies return [ h('span', { className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyA === currentCurrency, + 'currency-toggle__item--selected': currencyA === activeCurrency, }), onClick: () => onClick(currencyA), }, [ currencyA ]), '<>', h('span', { className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyB === currentCurrency, + 'currency-toggle__item--selected': currencyB === activeCurrency, }), onClick: () => onClick(currencyB), }, [ currencyB ]), diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js index 3dcb711ce..8b4cec16c 100644 --- a/ui/app/components/send/eth-fee-display.js +++ b/ui/app/components/send/eth-fee-display.js @@ -13,7 +13,7 @@ function EthFeeDisplay () { EthFeeDisplay.prototype.render = function () { const { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -22,7 +22,7 @@ EthFeeDisplay.prototype.render = function () { return h(EthBalance, { value: getTxFeeBn(gas, gasPrice, blockGasLimit), - currentCurrency, + currentCurrency: activeCurrency, conversionRate, showFiat: false, hideTooltip: true, 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), ]) } } diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js index 012bda550..6ee38f1b5 100644 --- a/ui/app/components/send/usd-fee-display.js +++ b/ui/app/components/send/usd-fee-display.js @@ -13,7 +13,7 @@ function USDFeeDisplay () { USDFeeDisplay.prototype.render = function () { const { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -23,7 +23,7 @@ USDFeeDisplay.prototype.render = function () { return h(FiatValue, { value: getTxFeeBn(gas, gasPrice, blockGasLimit), conversionRate, - currentCurrency, + currentCurrency: activeCurrency, style: { color: '#5d5d5d', fontSize: '16px', diff --git a/ui/app/send.js b/ui/app/send.js index d223db96f..8969e5fa3 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -10,7 +10,6 @@ const GasFeeDisplay = require('./components/send/gas-fee-display') const { getSelectedIdentity } = require('./selectors') const { - setCurrentCurrency, showAccountsPage, backToAccountDetail, displayWarning, @@ -35,7 +34,6 @@ function mapStateToProps (state) { network, addressBook, conversionRate, - currentCurrency, currentBlockGasLimit: blockGasLimit, } = state.metamask const { warning } = state.appState @@ -49,7 +47,6 @@ function mapStateToProps (state) { network, addressBook, conversionRate, - currentCurrency, blockGasLimit, warning, selectedIdentity, @@ -77,6 +74,7 @@ function SendTransactionScreen () { txData: null, memo: '', }, + activeCurrency: 'USD', tooltipIsOpen: false, } @@ -84,7 +82,7 @@ function SendTransactionScreen () { this.closeTooltip = this.closeTooltip.bind(this) this.onSubmit = this.onSubmit.bind(this) this.recipientDidChange = this.recipientDidChange.bind(this) - this.setCurrentCurrency = this.setCurrentCurrency.bind(this) + this.setActiveCurrency = this.setActiveCurrency.bind(this) this.toggleTooltip = this.toggleTooltip.bind(this) } @@ -98,12 +96,11 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, conversionRate, - currentCurrency, } = props - const { blockGasLimit, newTx } = this.state + const { blockGasLimit, newTx, activeCurrency } = this.state const { gas, gasPrice } = newTx - + console.log(`activeCurrency`, activeCurrency); console.log({ selectedIdentity, identities }) console.log('SendTransactionScreen state:', this.state) @@ -238,8 +235,8 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), h(CurrencyToggle, { - currentCurrency, - onClick: (newCurrency) => this.setCurrentCurrency(newCurrency), + activeCurrency, + onClick: (newCurrency) => this.setActiveCurrency(newCurrency), }), // holding on icon from design ]), @@ -296,7 +293,7 @@ SendTransactionScreen.prototype.render = function () { // TODO: handle loading time when switching to USD h('div.large-input.send-screen-gas-input', {}, [ h(GasFeeDisplay, { - currentCurrency, + activeCurrency, conversionRate, gas, gasPrice, @@ -356,8 +353,8 @@ SendTransactionScreen.prototype.render = function () { // Buttons underneath card h('section.flex-column.flex-center', [ - h('button.btn-light', { - onClick: this.onSubmit, + h('div.btn-light.send-screen-send-button', { + onClick: (event) => this.onSubmit(event), style: { marginTop: '8px', width: '8em', @@ -603,8 +600,8 @@ SendTransactionScreen.prototype.closeTooltip = function () { this.setState({ tooltipIsOpen: false }) } -SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { - this.props.dispatch(setCurrentCurrency(newCurrency)) +SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { + this.setState({ activeCurrency: newCurrency }) } SendTransactionScreen.prototype.navigateToAccounts = function (event) { @@ -624,7 +621,8 @@ SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickna }) } -SendTransactionScreen.prototype.onSubmit = function () { +SendTransactionScreen.prototype.onSubmit = function (event) { + event.preventDefault() const state = this.state || {} // const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') -- cgit