Send refactor: fix error handling and form disabling in send form.

8 files changed, 37 insertions, 47 deletions

diff --git a/ui/app/components/send_/send-footer/send-footer.component.js b/ui/app/components/send_/send-footer/send-footer.component.js
index 7ff44c9d5..6471ae1a3 100644
--- a/ui/app/components/send_/send-footer/send-footer.component.js
+++ b/ui/app/components/send_/send-footer/send-footer.component.js
@@ -77,9 +77,9 @@ export default class SendFooter extends Component {
   }
 
   formShouldBeDisabled () {
-    const { inError, selectedToken, tokenBalance, gasTotal } = this.props
+    const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props
     const missingTokenBalance = selectedToken && !tokenBalance
-    return inError || !gasTotal || missingTokenBalance
+    return inError || !gasTotal || missingTokenBalance || !to
   }
 
   render () {
diff --git a/ui/app/components/send_/send-footer/send-footer.container.js b/ui/app/components/send_/send-footer/send-footer.container.js
index 64e4b4bd3..260ff40bc 100644
--- a/ui/app/components/send_/send-footer/send-footer.container.js
+++ b/ui/app/components/send_/send-footer/send-footer.container.js
@@ -20,9 +20,11 @@ import {
   getSendToAccounts,
   getTokenBalance,
   getUnapprovedTxs,
-  isSendFormInError,
 } from '../send.selectors'
 import {
+  isSendFormInError,
+} from './send-footer.selectors'
+import {
   addressIsNew,
   constructTxParams,
   constructUpdatedTx,
diff --git a/ui/app/components/send_/send-footer/send-footer.selectors.js b/ui/app/components/send_/send-footer/send-footer.selectors.js
index 15a053ae0..e20addfdc 100644
--- a/ui/app/components/send_/send-footer/send-footer.selectors.js
+++ b/ui/app/components/send_/send-footer/send-footer.selectors.js
@@ -7,6 +7,5 @@ const selectors = {
 module.exports = selectors
 
 function isSendFormInError (state) {
-  const { amount, to } = getSendErrors(state)
-  return Boolean(amount || to !== null)
+  return Object.values(getSendErrors(state)).some(n => n)
 }
diff --git a/ui/app/components/send_/send-footer/tests/send-footer-component.test.js b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js
index a74b6195c..e071fe54f 100644
--- a/ui/app/components/send_/send-footer/tests/send-footer-component.test.js
+++ b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js
@@ -86,6 +86,12 @@ describe('SendFooter Component', function () {
         gasTotal: false,
         expectedResult: true,
       },
+      'should return true if to is truthy': {
+        to: '0xsomevalidAddress',
+        inError: false,
+        gasTotal: false,
+        expectedResult: true,
+      },
       'should return true if selectedToken is truthy and tokenBalance is falsy': {
         selectedToken: true,
         tokenBalance: null,
diff --git a/ui/app/components/send_/send-footer/tests/send-footer-container.test.js b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js
index 9a616777e..39d6a7686 100644
--- a/ui/app/components/send_/send-footer/tests/send-footer-container.test.js
+++ b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js
@@ -39,9 +39,8 @@ proxyquire('../send-footer.container.js', {
     getSendToAccounts: (s) => `mockToAccounts:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
     getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
-    isSendFormInError: (s) => `mockInError:${s}`,
   },
-  './send-footer.selectors': { isSendFormInError: () => {} },
+  './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
   './send-footer.utils': utilsStubs,
 })
 
diff --git a/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js
new file mode 100644
index 000000000..8de032f57
--- /dev/null
+++ b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js
@@ -0,0 +1,24 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+const {
+  isSendFormInError,
+} = proxyquire('../send-footer.selectors', {
+  '../send.selectors': {
+    getSendErrors: (mockState) => mockState.errors,
+  },
+})
+
+describe('send-footer selectors', () => {
+
+  describe('getTitleKey()', () => {
+    it('should return true if any of the values of the object returned by getSendErrors are truthy', () => {
+      assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true)
+    })
+
+    it('should return false if all of the values of the object returned by getSendErrors are falsy', () => {
+      assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false)
+    })
+  })
+
+})
diff --git a/ui/app/components/send_/send.selectors.js b/ui/app/components/send_/send.selectors.js
index 476e77cac..c5ae1ab7f 100644
--- a/ui/app/components/send_/send.selectors.js
+++ b/ui/app/components/send_/send.selectors.js
@@ -39,7 +39,6 @@ const selectors = {
   getTokenBalance,
   getTokenExchangeRate,
   getUnapprovedTxs,
-  isSendFormInError,
   transactionsSelector,
 }
 
@@ -251,11 +250,6 @@ function getUnapprovedTxs (state) {
   return state.metamask.unapprovedTxs
 }
 
-function isSendFormInError (state) {
-  const { amount, to } = getSendErrors(state)
-  return Boolean(amount || to !== null)
-}
-
 function transactionsSelector (state) {
   const { network, selectedTokenAddress } = state.metamask
   const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
diff --git a/ui/app/components/send_/tests/send-selectors.test.js b/ui/app/components/send_/tests/send-selectors.test.js
index 9dc207ead..977fe2a47 100644
--- a/ui/app/components/send_/tests/send-selectors.test.js
+++ b/ui/app/components/send_/tests/send-selectors.test.js
@@ -36,7 +36,6 @@ const {
   getTokenBalance,
   getTokenExchangeRate,
   getUnapprovedTxs,
-  isSendFormInError,
   transactionsSelector,
 } = selectors
 import mockState from './send-selectors-test-data'
@@ -546,39 +545,6 @@ describe('send selectors', () => {
     })
   })
 
-  describe('isSendFormInError()', () => {
-    it('should return true if amount or to errors are truthy', () => {
-      const editedMockState1 = {
-        send: Object.assign({}, mockState.send, {
-          errors: { amount: true },
-        }),
-      }
-      assert.deepEqual(
-        isSendFormInError(editedMockState1),
-        true
-      )
-      const editedMockState2 = {
-        send: Object.assign({}, mockState.send, {
-          errors: { to: true },
-        }),
-      }
-      assert.deepEqual(
-        isSendFormInError(editedMockState2),
-        true
-      )
-    })
-
-    it('should return false if amount is falsy and to is null', () => {
-      const editedMockState = {
-        send: Object.assign({}, mockState.send, { errors: { amount: false, to: null } }),
-      }
-      assert.deepEqual(
-        isSendFormInError(editedMockState),
-        false
-      )
-    })
-  })
-
   describe('transactionsSelector()', () => {
     it('should return the selected addresses selected token transactions', () => {
       assert.deepEqual(