Send v2 to autocomplete.

3 files changed, 94 insertions, 2 deletions

diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
new file mode 100644
index 000000000..3808bf496
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = ToAutoComplete
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+}
+
+ToAutoComplete.prototype.render = function () {
+  const { to, identities, onChange } = this.props
+
+  return h('div.send-v2__to-autocomplete', [
+
+    h('input.send-v2__to-autocomplete__input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Recipient Address',
+      value: to,
+      onChange,
+      // onBlur: () => {
+      //   this.setErrorsFor('to')
+      // },
+      onFocus: event => {
+        // this.clearErrorsFor('to')
+        to && event.target.select()
+      },
+    }),
+
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      ...Object.entries(identities).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      // Corresponds to previously sent-to addresses.
+      // ...addressBook.map(({ address, name }) => {
+      //   return h('option', {
+      //     value: address,
+      //     label: name,
+      //     key: address,
+      //   })
+      // }),
+    ]),
+
+  ])
+    
+}
+
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index dfeb83a0a..752d6ffea 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -552,6 +552,22 @@
     }
   }
 
+  &__to-autocomplete {
+    &__input {
+      height: 54px;
+      width: 240px;
+      border: 1px solid $alto;
+      border-radius: 4px;
+      background-color: $white;
+      color: $dusty-gray;
+      padding: 10px;
+      font-family: Roboto;
+      font-size: 16px;
+      line-height: 21px;
+      font-weight: 300;
+    }
+  }
+
   &__footer {
     height: 92px;
     width: 100%;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index e0d7c2394..dbc8a23d0 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -3,6 +3,7 @@ const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const FromDropdown = require('./components/send/from-dropdown')
+const ToAutoComplete = require('./components/send/to-autocomplete')
 
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
@@ -43,7 +44,8 @@ function SendTransactionScreen () {
 
 SendTransactionScreen.prototype.render = function () {
   const { accounts } = this.props
-  const { dropdownOpen } = this.state
+  const { dropdownOpen, newTx } = this.state
+  const { to } = newTx
 
   return (
 
@@ -81,7 +83,26 @@ SendTransactionScreen.prototype.render = function () {
             closeDropdown: () => this.setState({ dropdownOpen: false }),
           }),
 
-        ])
+        ]),
+
+        h('div.send-v2__form-row', [
+
+          h('div.send-v2__form-label', 'To:'),
+
+          h(ToAutoComplete, {
+            to,
+            identities: identities.map(({ identity }) => identity),
+            onChange: (event) => {
+              this.setState({
+                newTx: {
+                  ...this.state.newTx,
+                  to: event.target.value,
+                },
+              })
+            },
+          }),
+
+        ]),
 
       ]),