Merge branch 'develop' into removeNonceTrackerFunction

27 files changed, 275 insertions, 42 deletions

diff --git a/ui/app/components/send_/send-content/index.js b/ui/app/components/send_/send-content/index.js
index 10b3c850e..891c17e6a 100644
--- a/ui/app/components/send_/send-content/index.js
+++ b/ui/app/components/send_/send-content/index.js
@@ -1 +1 @@
-export { default } from './send-content.component'
\ No newline at end of file
+export { default } from './send-content.component'
diff --git a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js
index 548b51f33..ee8271494 100644
--- a/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js
+++ b/ui/app/components/send_/send-content/send-amount-row/amount-max-button/index.js
@@ -1 +1 @@
-export { default } from './amount-max-button.container'
\ No newline at end of file
+export { default } from './amount-max-button.container'
diff --git a/ui/app/components/send_/send-content/send-amount-row/index.js b/ui/app/components/send_/send-content/send-amount-row/index.js
index 94a7da56f..abc6852fe 100644
--- a/ui/app/components/send_/send-content/send-amount-row/index.js
+++ b/ui/app/components/send_/send-content/send-amount-row/index.js
@@ -1 +1 @@
-export { default } from './send-amount-row.container'
\ No newline at end of file
+export { default } from './send-amount-row.container'
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
index 8da36d3b7..e13b95555 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
@@ -21,6 +21,7 @@ export default class SendAmountRow extends Component {
     selectedToken: PropTypes.object,
     setMaxModeTo: PropTypes.func,
     tokenBalance: PropTypes.string,
+    updateGasFeeError: PropTypes.func,
     updateSendAmount: PropTypes.func,
     updateSendAmountError: PropTypes.func,
     updateGas: PropTypes.func,
@@ -35,6 +36,7 @@ export default class SendAmountRow extends Component {
       primaryCurrency,
       selectedToken,
       tokenBalance,
+      updateGasFeeError,
       updateSendAmountError,
     } = this.props
 
@@ -48,6 +50,19 @@ export default class SendAmountRow extends Component {
       selectedToken,
       tokenBalance,
     })
+
+    if (selectedToken) {
+      updateGasFeeError({
+        amount,
+        amountConversionRate,
+        balance,
+        conversionRate,
+        gasTotal,
+        primaryCurrency,
+        selectedToken,
+        tokenBalance,
+      })
+    }
   }
 
   updateAmount (amount) {
@@ -95,6 +110,7 @@ export default class SendAmountRow extends Component {
           primaryCurrency={primaryCurrency || 'ETH'}
           selectedToken={selectedToken}
           value={amount}
+          step="any"
         />
       </SendRowWrapper>
     )
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
index bbbf56971..3504d1b73 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.container.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import {
   getAmountConversionRate,
   getConversionRate,
-  getConvertedCurrency,
+  getCurrentCurrency,
   getGasTotal,
   getPrimaryCurrency,
   getSelectedToken,
@@ -13,7 +13,7 @@ import {
 import {
   sendAmountIsInError,
 } from './send-amount-row.selectors'
-import { getAmountErrorObject } from '../../send.utils'
+import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils'
 import {
   setMaxModeTo,
   updateSendAmount,
@@ -31,7 +31,7 @@ function mapStateToProps (state) {
     amountConversionRate: getAmountConversionRate(state),
     balance: getSendFromBalance(state),
     conversionRate: getConversionRate(state),
-    convertedCurrency: getConvertedCurrency(state),
+    convertedCurrency: getCurrentCurrency(state),
     gasTotal: getGasTotal(state),
     inError: sendAmountIsInError(state),
     primaryCurrency: getPrimaryCurrency(state),
@@ -44,6 +44,9 @@ function mapDispatchToProps (dispatch) {
   return {
     setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
     updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
+    updateGasFeeError: (amountDataObject) => {
+        dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
+    },
     updateSendAmountError: (amountDataObject) => {
         dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
     },
diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 579e18585..95c000a34 100644
--- a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -13,6 +13,7 @@ const propsMethodSpies = {
   updateSendAmount: sinon.spy(),
   updateSendAmountError: sinon.spy(),
   updateGas: sinon.spy(),
+  updateGasFeeError: sinon.spy(),
 }
 
 sinon.spy(SendAmountRow.prototype, 'updateAmount')
@@ -36,6 +37,7 @@ describe('SendAmountRow Component', function () {
       selectedToken={ { address: 'mockTokenAddress' } }
       setMaxModeTo={propsMethodSpies.setMaxModeTo}
       tokenBalance={'mockTokenBalance'}
+      updateGasFeeError={propsMethodSpies.updateGasFeeError}
       updateSendAmount={propsMethodSpies.updateSendAmount}
       updateSendAmountError={propsMethodSpies.updateSendAmountError}
       updateGas={propsMethodSpies.updateGas}
@@ -47,6 +49,7 @@ describe('SendAmountRow Component', function () {
     propsMethodSpies.setMaxModeTo.resetHistory()
     propsMethodSpies.updateSendAmount.resetHistory()
     propsMethodSpies.updateSendAmountError.resetHistory()
+    propsMethodSpies.updateGasFeeError.resetHistory()
     SendAmountRow.prototype.validateAmount.resetHistory()
     SendAmountRow.prototype.updateAmount.resetHistory()
   })
@@ -72,6 +75,32 @@ describe('SendAmountRow Component', function () {
       )
     })
 
+    it('should call updateGasFeeError if selectedToken is truthy', () => {
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+      instance.validateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateGasFeeError.getCall(0).args,
+        [{
+          amount: 'someAmount',
+          amountConversionRate: 'mockAmountConversionRate',
+          balance: 'mockBalance',
+          conversionRate: 7,
+          gasTotal: 'mockGasTotal',
+          primaryCurrency: 'mockPrimaryCurrency',
+          selectedToken: { address: 'mockTokenAddress' },
+          tokenBalance: 'mockTokenBalance',
+        }]
+      )
+    })
+
+    it('should call not updateGasFeeError if selectedToken is falsey', () => {
+      wrapper.setProps({ selectedToken: null })
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+      instance.validateAmount('someAmount')
+      assert.equal(propsMethodSpies.updateGasFeeError.callCount, 0)
+    })
+
   })
 
   describe('updateAmount', () => {
diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js
index e4c913c69..52e351aee 100644
--- a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-container.test.js
@@ -24,7 +24,7 @@ proxyquire('../send-amount-row.container.js', {
   '../../send.selectors': {
     getAmountConversionRate: (s) => `mockAmountConversionRate:${s}`,
     getConversionRate: (s) => `mockConversionRate:${s}`,
-    getConvertedCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
     getGasTotal: (s) => `mockGasTotal:${s}`,
     getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`,
     getSelectedToken: (s) => `mockSelectedToken:${s}`,
@@ -33,7 +33,10 @@ proxyquire('../send-amount-row.container.js', {
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
   },
   './send-amount-row.selectors': { sendAmountIsInError: (s) => `mockInError:${s}` },
-  '../../send.utils': { getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }) },
+  '../../send.utils': {
+    getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }),
+    getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }),
+  },
   '../../../../actions': actionSpies,
   '../../../../ducks/send.duck': duckActionSpies,
 })
@@ -66,6 +69,7 @@ describe('send-amount-row container', () => {
     beforeEach(() => {
       dispatchSpy = sinon.spy()
       mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+      duckActionSpies.updateSendErrors.resetHistory()
     })
 
     describe('setMaxModeTo()', () => {
@@ -92,6 +96,18 @@ describe('send-amount-row container', () => {
       })
     })
 
+    describe('updateGasFeeError()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' })
+        assert(dispatchSpy.calledOnce)
+        assert(duckActionSpies.updateSendErrors.calledOnce)
+        assert.deepEqual(
+          duckActionSpies.updateSendErrors.getCall(0).args[0],
+          { some: 'data', mockGasFeeErrorChange: true }
+        )
+      })
+    })
+
     describe('updateSendAmountError()', () => {
       it('should dispatch an action', () => {
         mapDispatchToPropsObject.updateSendAmountError({ some: 'data' })
diff --git a/ui/app/components/send_/send-content/send-dropdown-list/index.js b/ui/app/components/send_/send-content/send-dropdown-list/index.js
index ee7736376..04af6536c 100644
--- a/ui/app/components/send_/send-content/send-dropdown-list/index.js
+++ b/ui/app/components/send_/send-content/send-dropdown-list/index.js
@@ -1 +1 @@
-export { default } from './send-dropdown-list.component'
\ No newline at end of file
+export { default } from './send-dropdown-list.component'
diff --git a/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js b/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js
index 6ab9a157a..2314ef4e3 100644
--- a/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js
+++ b/ui/app/components/send_/send-content/send-from-row/from-dropdown/index.js
@@ -1 +1 @@
-export { default } from './from-dropdown.component'
\ No newline at end of file
+export { default } from './from-dropdown.component'
diff --git a/ui/app/components/send_/send-content/send-from-row/index.js b/ui/app/components/send_/send-content/send-from-row/index.js
index 4a0916dba..0a79726b2 100644
--- a/ui/app/components/send_/send-content/send-from-row/index.js
+++ b/ui/app/components/send_/send-content/send-from-row/index.js
@@ -1 +1 @@
-export { default } from './send-from-row.container'
\ No newline at end of file
+export { default } from './send-from-row.container'
diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
new file mode 100644
index 000000000..c8d619be5
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../../send/currency-display'
+
+
+export default class GasFeeDisplay extends Component {
+
+  static propTypes = {
+    conversionRate: PropTypes.number,
+    primaryCurrency: PropTypes.string,
+    convertedCurrency: PropTypes.string,
+    gasLoadingError: PropTypes.bool,
+    gasTotal: PropTypes.string,
+    onClick: PropTypes.func,
+  };
+
+  render () {
+    const {
+      conversionRate,
+      gasTotal,
+      onClick,
+      primaryCurrency = 'ETH',
+      convertedCurrency,
+      gasLoadingError,
+    } = this.props
+
+    return (
+      <div className="send-v2__gas-fee-display">
+        {gasTotal
+          ? <CurrencyDisplay
+              primaryCurrency={primaryCurrency}
+              convertedCurrency={convertedCurrency}
+              value={gasTotal}
+              conversionRate={conversionRate}
+              gasLoadingError={gasLoadingError}
+              convertedPrefix={'$'}
+              readOnly
+            />
+          : gasLoadingError
+            ? <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            : <div className="currency-display">
+                {this.context.t('loading')}
+              </div>
+        }
+        <button
+          className="sliders-icon-container"
+          onClick={onClick}
+          disabled={!gasTotal && !gasLoadingError}
+        >
+          <i className="fa fa-sliders sliders-icon" />
+        </button>
+      </div>
+    )
+  }
+}
+
+GasFeeDisplay.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js
new file mode 100644
index 000000000..dba0edb7b
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js
@@ -0,0 +1 @@
+export { default } from './gas-fee-display.component'
diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
new file mode 100644
index 000000000..7cbe8d0df
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import assert from 'assert'
+import {shallow} from 'enzyme'
+import GasFeeDisplay from '../gas-fee-display.component'
+import CurrencyDisplay from '../../../../../send/currency-display'
+import sinon from 'sinon'
+
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+}
+
+describe('SendGasRow Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasFeeDisplay
+      conversionRate={20}
+      gasTotal={'mockGasTotal'}
+      onClick={propsMethodSpies.showCustomizeGasModal}
+      primaryCurrency={'mockPrimaryCurrency'}
+      convertedCurrency={'mockConvertedCurrency'}
+    />, {context: {t: str => str + '_t'}})
+  })
+
+  afterEach(() => {
+    propsMethodSpies.showCustomizeGasModal.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a CurrencyDisplay component', () => {
+      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+    })
+
+    it('should render the CurrencyDisplay with the correct props', () => {
+      const {
+        conversionRate,
+        convertedCurrency,
+        value,
+      } = wrapper.find(CurrencyDisplay).props()
+      assert.equal(conversionRate, 20)
+      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      assert.equal(value, 'mockGasTotal')
+    })
+
+    it('should render the Button with the correct props', () => {
+      const {
+        onClick,
+      } = wrapper.find('button').props()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/send_/send-content/send-gas-row/index.js b/ui/app/components/send_/send-content/send-gas-row/index.js
index 060ed7fd3..3c7ff1d5f 100644
--- a/ui/app/components/send_/send-content/send-gas-row/index.js
+++ b/ui/app/components/send_/send-content/send-gas-row/index.js
@@ -1 +1 @@
-export { default } from './send-gas-row.container'
\ No newline at end of file
+export { default } from './send-gas-row.container'
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
index c80d8c0bb..ba5c22a47 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import SendRowWrapper from '../send-row-wrapper/'
-import GasFeeDisplay from '../../../send/gas-fee-display-v2'
+import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
 
 export default class SendGasRow extends Component {
 
   static propTypes = {
     conversionRate: PropTypes.number,
     convertedCurrency: PropTypes.string,
+    gasFeeError: PropTypes.bool,
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
     showCustomizeGasModal: PropTypes.func,
@@ -19,11 +20,16 @@ export default class SendGasRow extends Component {
       convertedCurrency,
       gasLoadingError,
       gasTotal,
+      gasFeeError,
       showCustomizeGasModal,
     } = this.props
 
     return (
-      <SendRowWrapper label={`${this.context.t('gasFee')}:`}>
+      <SendRowWrapper
+        label={`${this.context.t('gasFee')}:`}
+        showError={gasFeeError}
+        errorType={'gasFee'}
+      >
         <GasFeeDisplay
           conversionRate={conversionRate}
           convertedCurrency={convertedCurrency}
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
index 20d3daa59..8f8e3e4dd 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.container.js
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux'
 import {
     getConversionRate,
-    getConvertedCurrency,
+    getCurrentCurrency,
     getGasTotal,
 } from '../../send.selectors.js'
-import { sendGasIsInError } from './send-gas-row.selectors.js'
+import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js'
 import { showModal } from '../../../../actions'
 import SendGasRow from './send-gas-row.component'
 
@@ -13,9 +13,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow)
 function mapStateToProps (state) {
   return {
     conversionRate: getConversionRate(state),
-    convertedCurrency: getConvertedCurrency(state),
+    convertedCurrency: getCurrentCurrency(state),
     gasTotal: getGasTotal(state),
-    gasLoadingError: sendGasIsInError(state),
+    gasFeeError: gasFeeIsInError(state),
+    gasLoadingError: getGasLoadingError(state),
   }
 }
 
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
index d069ae8c6..96f6293c2 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.selectors.js
@@ -1,9 +1,14 @@
 const selectors = {
-  sendGasIsInError,
+  gasFeeIsInError,
+  getGasLoadingError,
 }
 
 module.exports = selectors
 
-function sendGasIsInError (state) {
+function getGasLoadingError (state) {
   return state.send.errors.gasLoading
 }
+
+function gasFeeIsInError (state) {
+  return Boolean(state.send.errors.gasFee)
+}
diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
index e4f05d708..54a92bd2d 100644
--- a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -5,7 +5,7 @@ import sinon from 'sinon'
 import SendGasRow from '../send-gas-row.component.js'
 
 import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import GasFeeDisplay from '../../../../send/gas-fee-display-v2'
+import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
 
 const propsMethodSpies = {
   showCustomizeGasModal: sinon.spy(),
@@ -18,6 +18,7 @@ describe('SendGasRow Component', function () {
     wrapper = shallow(<SendGasRow
       conversionRate={20}
       convertedCurrency={'mockConvertedCurrency'}
+      gasFeeError={'mockGasFeeError'}
       gasLoadingError={false}
       gasTotal={'mockGasTotal'}
       showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
@@ -36,9 +37,13 @@ describe('SendGasRow Component', function () {
     it('should pass the correct props to SendRowWrapper', () => {
       const {
         label,
+        showError,
+        errorType,
       } = wrapper.find(SendRowWrapper).props()
 
       assert.equal(label, 'gasFee_t:')
+      assert.equal(showError, 'mockGasFeeError')
+      assert.equal(errorType, 'gasFee')
     })
 
     it('should render a GasFeeDisplay as a child of the SendRowWrapper', () => {
diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js
index 9135524d1..2ce062505 100644
--- a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-container.test.js
@@ -19,10 +19,13 @@ proxyquire('../send-gas-row.container.js', {
   },
   '../../send.selectors.js': {
     getConversionRate: (s) => `mockConversionRate:${s}`,
-    getConvertedCurrency: (s) => `mockConvertedCurrency:${s}`,
+    getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
     getGasTotal: (s) => `mockGasTotal:${s}`,
   },
-  './send-gas-row.selectors.js': { sendGasIsInError: (s) => `mockGasLoadingError:${s}` },
+  './send-gas-row.selectors.js': {
+    getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
+    gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
+  },
   '../../../../actions': actionSpies,
 })
 
@@ -35,6 +38,7 @@ describe('send-gas-row container', () => {
         conversionRate: 'mockConversionRate:mockState',
         convertedCurrency: 'mockConvertedCurrency:mockState',
         gasTotal: 'mockGasTotal:mockState',
+        gasFeeError: 'mockGasFeeError:mockState',
         gasLoadingError: 'mockGasLoadingError:mockState',
       })
     })
diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
index a5196334e..d46dd9d8b 100644
--- a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
@@ -1,11 +1,12 @@
 import assert from 'assert'
 import {
-  sendGasIsInError,
+  gasFeeIsInError,
+  getGasLoadingError,
 } from '../send-gas-row.selectors.js'
 
 describe('send-gas-row selectors', () => {
 
-  describe('sendGasIsInError()', () => {
+  describe('getGasLoadingError()', () => {
     it('should return send.errors.gasLoading', () => {
       const state = {
         send: {
@@ -15,7 +16,33 @@ describe('send-gas-row selectors', () => {
         },
       }
 
-      assert.equal(sendGasIsInError(state), 'abc')
+      assert.equal(getGasLoadingError(state), 'abc')
+    })
+  })
+
+  describe('gasFeeIsInError()', () => {
+    it('should return true if send.errors.gasFee is truthy', () => {
+      const state = {
+        send: {
+          errors: {
+            gasFee: 'def',
+          },
+        },
+      }
+
+      assert.equal(gasFeeIsInError(state), true)
+    })
+
+    it('should return false send.errors.gasFee is falsely', () => {
+      const state = {
+        send: {
+          errors: {
+            gasFee: null,
+          },
+        },
+      }
+
+      assert.equal(gasFeeIsInError(state), false)
     })
   })
 
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/index.js b/ui/app/components/send_/send-content/send-row-wrapper/index.js
index 5715f55c6..d17545dcc 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/index.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/index.js
@@ -1 +1 @@
-export { default } from './send-row-wrapper.component'
\ No newline at end of file
+export { default } from './send-row-wrapper.component'
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js
index bf49c55bd..c00617f83 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/send-row-error-message/index.js
@@ -1 +1 @@
-export { default } from './send-row-error-message.container'
\ No newline at end of file
+export { default } from './send-row-error-message.container'
diff --git a/ui/app/components/send_/send-content/send-to-row/index.js b/ui/app/components/send_/send-content/send-to-row/index.js
index 4e7aa9747..121f15148 100644
--- a/ui/app/components/send_/send-content/send-to-row/index.js
+++ b/ui/app/components/send_/send-content/send-to-row/index.js
@@ -1 +1 @@
-export { default } from './send-to-row.container'
\ No newline at end of file
+export { default } from './send-to-row.container'
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
index 0a83186a5..1c2ecdf9c 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.component.js
@@ -19,9 +19,9 @@ export default class SendToRow extends Component {
     updateSendToError: PropTypes.func,
   };
 
-  handleToChange (to, nickname = '') {
+  handleToChange (to, nickname = '', toError) {
     const { updateSendTo, updateSendToError, updateGas } = this.props
-    const toErrorObject = getToErrorObject(to)
+    const toErrorObject = getToErrorObject(to, toError)
     updateSendTo(to, nickname)
     updateSendToError(toErrorObject)
     if (toErrorObject.to === null) {
@@ -53,7 +53,7 @@ export default class SendToRow extends Component {
           inError={inError}
           name={'address'}
           network={network}
-          onChange={(newTo, newNickname) => this.handleToChange(newTo, newNickname)}
+          onChange={({ toAddress, nickname, toError }) => this.handleToChange(toAddress, nickname, toError)}
           openDropdown={() => openToDropdown()}
           placeholder={this.context.t('recipientAddress')}
           to={to}
diff --git a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
index cea51ee20..6b90a9f09 100644
--- a/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
+++ b/ui/app/components/send_/send-content/send-to-row/send-to-row.utils.js
@@ -4,12 +4,10 @@ const {
 } = require('../../send.constants')
 const { isValidAddress } = require('../../../../util')
 
-function getToErrorObject (to) {
-  let toError = null
-
+function getToErrorObject (to, toError = null) {
   if (!to) {
     toError = REQUIRED_ERROR
-  } else if (!isValidAddress(to)) {
+  } else if (!isValidAddress(to) && !toError) {
     toError = INVALID_RECIPIENT_ADDRESS_ERROR
   }
 
diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
index 58fe51dcf..781371004 100644
--- a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
@@ -6,8 +6,8 @@ import proxyquire from 'proxyquire'
 
 const SendToRow = proxyquire('../send-to-row.component.js', {
   './send-to-row.utils.js': {
-    getToErrorObject: (to) => ({
-      to: to === false ? null : `mockToErrorObject:${to}`,
+    getToErrorObject: (to, toError) => ({
+      to: to === false ? null : `mockToErrorObject:${to}${toError}`,
     }),
   },
 }).default
@@ -67,11 +67,11 @@ describe('SendToRow Component', function () {
 
     it('should call updateSendToError', () => {
       assert.equal(propsMethodSpies.updateSendToError.callCount, 0)
-      instance.handleToChange('mockTo2')
+      instance.handleToChange('mockTo2', '', 'mockToError')
       assert.equal(propsMethodSpies.updateSendToError.callCount, 1)
       assert.deepEqual(
         propsMethodSpies.updateSendToError.getCall(0).args,
-        [{ to: 'mockToErrorObject:mockTo2' }]
+        [{ to: 'mockToErrorObject:mockTo2mockToError' }]
       )
     })
 
@@ -138,11 +138,11 @@ describe('SendToRow Component', function () {
       openDropdown()
       assert.equal(propsMethodSpies.openToDropdown.callCount, 1)
       assert.equal(SendToRow.prototype.handleToChange.callCount, 0)
-      onChange('mockNewTo', 'mockNewNickname')
+      onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError' })
       assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
       assert.deepEqual(
         SendToRow.prototype.handleToChange.getCall(0).args,
-        ['mockNewTo', 'mockNewNickname']
+        ['mockNewTo', 'mockNewNickname', 'mockToError']
       )
     })
   })
diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js
index 615c9581b..4d2447c32 100644
--- a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -40,6 +40,12 @@ describe('send-to-row utils', () => {
         to: null,
       })
     })
+
+    it('should return the passed error if to is truthy but invalid if to is truthy and valid', () => {
+      assert.deepEqual(getToErrorObject('invalid #$ 345878', 'someExplicitError'), {
+        to: 'someExplicitError',
+      })
+    })
   })
 
 })