Handles errors with to field and renders warnings from backend in send token.

1 files changed, 17 insertions, 11 deletions

diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index 72fb593be..7adbf48dc 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -6,6 +6,7 @@ const classnames = require('classnames')
 const inherits = require('util').inherits
 const actions = require('../../actions')
 const selectors = require('../../selectors')
+const { isValidAddress } = require('../../util')
 
 // const BalanceComponent = require('./balance-component')
 const Identicon = require('../identicon')
@@ -14,12 +15,12 @@ const CurrencyToggle = require('../send/currency-toggle')
 const GasTooltip = require('../send/gas-tooltip')
 const GasFeeDisplay = require('../send/gas-fee-display')
 
-
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen)
 
 function mapStateToProps (state) {
   // const sidebarOpen = state.appState.sidebarOpen
 
+  const { warning } = state.appState
   const identities = state.metamask.identities
   const addressBook = state.metamask.addressBook
   const conversionRate = state.metamask.conversionRate
@@ -34,6 +35,7 @@ function mapStateToProps (state) {
   const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
   // const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
   // const identity = identities[selectedAddress]
+
   return {
     // sidebarOpen,
     selectedAddress,
@@ -45,6 +47,7 @@ function mapStateToProps (state) {
     tokenExchangeRate,
     currentBlockGasLimit,
     selectedToken,
+    warning,
     // selectedToken: selectors.getSelectedToken(state),
     // identity,
     // network,
@@ -106,13 +109,6 @@ SendTokenScreen.prototype.validate = function () {
   const gasLimit = parseInt(hexGasLimit, 16) / 1000000000
   const amount = Number(stringAmount)
 
-  if (to && amount && gasPrice && gasLimit) {
-    return {
-      isValid: true,
-      errors: {},
-    }
-  }
-
   const errors = {
     to: !to ? 'Required' : null,
     amount: !amount ? 'Required' : null,
@@ -120,9 +116,14 @@ SendTokenScreen.prototype.validate = function () {
     gasLimit: !gasLimit ? 'Gas Limit Required' : null,
   }
 
+  if(to && !isValidAddress(to)) {
+    errors.to = 'Invalid address'
+  }
+
+  const isValid = Object.entries(errors).every(([key, value]) => value === null)
   return {
-    isValid: false,
-    errors,
+    isValid,
+    errors: isValid ? {} : errors,
   }
 }
 
@@ -145,7 +146,6 @@ SendTokenScreen.prototype.submit = function () {
   } = this.props
 
   const { nickname = ' ' } = identities[to] || {}
-
   const { isValid, errors } = this.validate()
 
   if (!isValid) {
@@ -340,6 +340,7 @@ SendTokenScreen.prototype.render = function () {
   const {
     selectedTokenAddress,
     selectedToken,
+    warning,
   } = this.props
 
   return h('div.send-token', [
@@ -359,6 +360,11 @@ SendTokenScreen.prototype.render = function () {
       this.renderAmountInput(),
       this.renderGasInput(),
       this.renderMemoInput(),
+      warning && h('div.send-screen-input-wrapper--error', {}, 
+        h('div.send-screen-input-wrapper__error-message', [
+          warning,
+        ])
+      ),
     ]),
     this.renderButtons(),
   ])