3 files changed, 21 insertions, 13 deletions
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index d56c119f1..f7fbb2379 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -28,16 +28,12 @@ function resetCaretIfPastEnd (value, event) {
   }
 }
 
-CurrencyDisplay.prototype.handleChangeInHexWei = function (value) {
-  const { handleChange } = this.props
-
-  const valueInHexWei = conversionUtil(value, {
+function toHexWei (value) {
+  return conversionUtil(value, {
     fromNumericBase: 'dec',
     toNumericBase: 'hex',
     toDenomination: 'WEI',
   })
-
-  handleChange(valueInHexWei)
 }
 
 CurrencyDisplay.prototype.render = function () {
@@ -51,7 +47,10 @@ CurrencyDisplay.prototype.render = function () {
     convertedPrefix = '',
     placeholder = '0',
     readOnly = false,
+    inError = false,
     value: initValue,
+    handleChange,
+    validate,
   } = this.props
   const { value } = this.state
 
@@ -73,6 +72,9 @@ CurrencyDisplay.prototype.render = function () {
 
   return h('div', {
     className,
+    style: {
+      borderColor: inError ? 'red' : null,
+    },
   }, [
 
     h('div.currency-display__primary-row', [
@@ -100,8 +102,13 @@ CurrencyDisplay.prototype.render = function () {
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => !readOnly && this.handleChangeInHexWei(event.target.value.split(' ')[0]),
-          onKeyUp: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onKeyUp: event => {
+            if (!readOnly) {
+              validate(toHexWei(value || initValueToRender))
+              resetCaretIfPastEnd(value || initValueToRender, event)
+            }
+          },
           onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
         }),
 
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index dcf764048..f20d80073 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -76,5 +76,6 @@ function mapDispatchToProps (dispatch) {
     updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
+    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
   }
 }
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 1bf1e1907..686a7a23e 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -11,7 +11,7 @@ function ToAutoComplete () {
 }
 
 ToAutoComplete.prototype.render = function () {
-  const { to, accounts, onChange } = this.props
+  const { to, accounts, onChange, inError } = this.props
 
   return h('div.send-v2__to-autocomplete', [
 
@@ -19,15 +19,15 @@ ToAutoComplete.prototype.render = function () {
       name: 'address',
       list: 'addresses',
       placeholder: 'Recipient Address',
+      className: inError ? `send-v2__error-border` : '', 
       value: to,
       onChange,
-      // onBlur: () => {
-      //   this.setErrorsFor('to')
-      // },
       onFocus: event => {
-        // this.clearErrorsFor('to')
         to && event.target.select()
       },
+      style: {
+        borderColor: inError ? 'red' : null,
+      }
     }),
 
     h('datalist#addresses', [