aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/send/to-autocomplete.js55
-rw-r--r--ui/app/css/itcss/components/send.scss16
-rw-r--r--ui/app/send-v2.js25
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,
+ },
+ })
+ },
+ }),
+
+ ]),
]),