Stop setting 'currentCurrency' and use local state for active currency in send.js

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, '')