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, + }, + }) + }, + }), + + ]), ]),