From 0796fc58e4638df9e448654b199b661cb2a492aa Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 29 Jun 2018 14:49:40 -0230
Subject: Improve send token error ux.

---
 .../send-gas-row/send-gas-row.component.js         |  8 +++++-
 .../send-gas-row/send-gas-row.container.js         |  5 ++--
 .../send-gas-row/send-gas-row.selectors.js         |  9 ++++--
 .../tests/send-gas-row-component.test.js           |  5 ++++
 .../tests/send-gas-row-container.test.js           |  6 +++-
 .../tests/send-gas-row-selectors.test.js           | 33 ++++++++++++++++++++--
 6 files changed, 57 insertions(+), 9 deletions(-)

(limited to 'ui/app/components/send_/send-content/send-gas-row')

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 17cea3d4e..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
@@ -8,6 +8,7 @@ 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 6e6fbc8a8..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
@@ -4,7 +4,7 @@ import {
     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'
 
@@ -15,7 +15,8 @@ function mapStateToProps (state) {
     conversionRate: getConversionRate(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 db37f18be..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
@@ -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 e928c8aba..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
@@ -22,7 +22,10 @@ proxyquire('../send-gas-row.container.js', {
     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)
     })
   })
 
-- 
cgit