1 files changed, 154 insertions, 40 deletions

diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
index 5f0c9c9f2..cb07dcb59 100644
--- a/ui/app/pages/send/send.component.js
+++ b/ui/app/pages/send/send.component.js
@@ -7,10 +7,14 @@ import {
   getToAddressForGasUpdate,
   doesAmountErrorRequireUpdate,
 } from './send.utils'
-
+import debounce from 'lodash.debounce'
+import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient'
 import SendHeader from './send-header'
+import AddRecipient from './send-content/add-recipient'
 import SendContent from './send-content'
 import SendFooter from './send-footer'
+import EnsInput from './send-content/add-recipient/ens-input'
+
 
 export default class SendTransactionScreen extends PersistentForm {
 
@@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm {
     gasLimit: PropTypes.string,
     gasPrice: PropTypes.string,
     gasTotal: PropTypes.string,
+    to: PropTypes.string,
     history: PropTypes.object,
     network: PropTypes.string,
     primaryCurrency: PropTypes.string,
     recentBlocks: PropTypes.array,
     selectedAddress: PropTypes.string,
     selectedToken: PropTypes.object,
+    tokens: PropTypes.array,
     tokenBalance: PropTypes.string,
     tokenContract: PropTypes.object,
     fetchBasicGasEstimates: PropTypes.func,
@@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm {
     scanQrCode: PropTypes.func,
     qrCodeDetected: PropTypes.func,
     qrCodeData: PropTypes.object,
+    ensResolution: PropTypes.string,
+    ensResolutionError: PropTypes.string,
   }
 
   static contextTypes = {
     t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  state = {
+    query: '',
+    toError: null,
+    toWarning: null,
+  }
+
+  constructor (props) {
+    super(props)
+    this.dValidate = debounce(this.validate, 1000)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm {
     }
   }
 
-  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
-    const {
-      amount,
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken = {},
-      to: currentToAddress,
-      updateAndSetGasLimit,
-    } = this.props
-
-    updateAndSetGasLimit({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
-      value: value || amount,
-      data,
-    })
-  }
-
   componentDidUpdate (prevProps) {
     const {
       amount,
@@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm {
       updateSendErrors,
       updateSendTokenBalance,
       tokenContract,
+      to,
+      toNickname,
+      addressBook,
+      updateToNicknameIfNecessary,
     } = this.props
 
     const {
@@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm {
           tokenContract,
           address,
         })
+        updateToNicknameIfNecessary(to, toNickname, addressBook)
         this.updateGas()
       }
     }
@@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm {
 
   componentDidMount () {
     this.props.fetchBasicGasEstimates()
-    .then(() => {
-      this.updateGas()
-    })
+      .then(() => {
+        this.updateGas()
+      })
   }
 
   componentWillMount () {
@@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm {
     this.props.resetSendState()
   }
 
+  onRecipientInputChange = query => {
+    if (query) {
+      this.dValidate(query)
+    } else {
+      this.validate(query)
+    }
+
+    this.setState({
+      query,
+    })
+  }
+
+  validate (query) {
+    const {
+      hasHexData,
+      tokens,
+      selectedToken,
+      network,
+    } = this.props
+
+    if (!query) {
+      return this.setState({ toError: '', toWarning: '' })
+    }
+
+    const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network)
+    const toWarningObject = getToWarningObject(query, null, tokens, selectedToken)
+
+    this.setState({
+      toError: toErrorObject.to,
+      toWarning: toWarningObject.to,
+    })
+  }
+
   updateSendToken () {
     const {
       from: { address },
@@ -211,20 +241,104 @@ export default class SendTransactionScreen extends PersistentForm {
     })
   }
 
+  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
+    const {
+      amount,
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken = {},
+      to: currentToAddress,
+      updateAndSetGasLimit,
+    } = this.props
+
+    updateAndSetGasLimit({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
+      value: value || amount,
+      data,
+    })
+  }
+
   render () {
-    const { history, showHexData } = this.props
+    const { history, to } = this.props
+    let content
+
+    if (to) {
+      content = this.renderSendContent()
+    } else {
+      content = this.renderAddRecipient()
+    }
 
     return (
       <div className="page-container">
-        <SendHeader history={history}/>
-        <SendContent
-          updateGas={(updateData) => this.updateGas(updateData)}
-          scanQrCode={_ => this.props.scanQrCode()}
-          showHexData={showHexData}
-        />
-        <SendFooter history={history}/>
+        <SendHeader history={history} />
+        { this.renderInput() }
+        { content }
       </div>
     )
   }
 
+  renderInput () {
+    return (
+      <EnsInput
+        className="send__to-row"
+        scanQrCode={_ => {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Edit Screen',
+              name: 'Used QR scanner',
+            },
+          })
+          this.props.scanQrCode()
+        }}
+        onChange={this.onRecipientInputChange}
+        onValidAddressTyped={(address) => this.props.updateSendTo(address, '')}
+        onPaste={text => this.props.updateSendTo(text)}
+        onReset={() => this.props.updateSendTo('', '')}
+        updateEnsResolution={this.props.updateSendEnsResolution}
+        updateEnsResolutionError={this.props.updateSendEnsResolutionError}
+      />
+    )
+  }
+
+  renderAddRecipient () {
+    const { scanQrCode } = this.props
+    const { toError, toWarning } = this.state
+
+    return (
+      <AddRecipient
+        updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
+        scanQrCode={scanQrCode}
+        query={this.state.query}
+        toError={toError}
+        toWarning={toWarning}
+      />
+    )
+  }
+
+  renderSendContent () {
+    const { history, showHexData, scanQrCode } = this.props
+
+    return [
+      <SendContent
+        key="send-content"
+        updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
+        scanQrCode={scanQrCode}
+        showHexData={showHexData}
+      />,
+      <SendFooter key="send-footer" history={history} />,
+    ]
+  }
+
 }