From fbab0f3a1f1bf78fdaf6b5639fb6a23d996f3645 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 08:00:45 -0230 Subject: Send v2 to autocomplete. --- ui/app/components/send/to-autocomplete.js | 55 +++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 ui/app/components/send/to-autocomplete.js (limited to 'ui/app/components/send/to-autocomplete.js') 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, + // }) + // }), + ]), + + ]) + +} + -- cgit From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/components/send/to-autocomplete.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 3808bf496..1bf1e1907 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -11,7 +11,7 @@ function ToAutoComplete () { } ToAutoComplete.prototype.render = function () { - const { to, identities, onChange } = this.props + const { to, accounts, onChange } = this.props return h('div.send-v2__to-autocomplete', [ @@ -32,7 +32,7 @@ ToAutoComplete.prototype.render = function () { h('datalist#addresses', [ // Corresponds to the addresses owned. - ...Object.entries(identities).map(([key, { address, name }]) => { + ...Object.entries(accounts).map(([key, { address, name }]) => { return h('option', { value: address, label: name, -- cgit From 60eda592b5979ac1fdbfb6d5b3418a4924abc14d Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 17 Oct 2017 17:43:20 -0230 Subject: Handling to and amount errors. --- ui/app/components/send/to-autocomplete.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 1bf1e1907..686a7a23e 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -11,7 +11,7 @@ function ToAutoComplete () { } ToAutoComplete.prototype.render = function () { - const { to, accounts, onChange } = this.props + const { to, accounts, onChange, inError } = this.props return h('div.send-v2__to-autocomplete', [ @@ -19,15 +19,15 @@ ToAutoComplete.prototype.render = function () { name: 'address', list: 'addresses', placeholder: 'Recipient Address', + className: inError ? `send-v2__error-border` : '', value: to, onChange, - // onBlur: () => { - // this.setErrorsFor('to') - // }, onFocus: event => { - // this.clearErrorsFor('to') to && event.target.select() }, + style: { + borderColor: inError ? 'red' : null, + } }), h('datalist#addresses', [ -- cgit From 07c4c92db64ffaaefbb9eb661d24bbb4c8c5ddb6 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 23 Oct 2017 13:54:47 -0230 Subject: Style dropdown of to-autocomplete. --- ui/app/components/send/to-autocomplete.js | 126 +++++++++++++++++++++++------- 1 file changed, 99 insertions(+), 27 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 686a7a23e..081b85ab7 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -2,54 +2,126 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('../identicon') +const AccountListItem = require('./account-list-item') module.exports = ToAutoComplete inherits(ToAutoComplete, Component) function ToAutoComplete () { Component.call(this) + + this.state = { accountsToRender: [] } +} + +ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) { + const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) + + return toAddress && listItemAddress === toAddress + ? listItemIcon + : null +} + +ToAutoComplete.prototype.renderDropdown = function () { + const { + accounts, + closeDropdown, + onChange, + to, + } = this.props + const { accountsToRender } = this.state + + return accountsToRender.length && h('div', {}, [ + + h('div.send-v2__from-dropdown__close-area', { + onClick: closeDropdown, + }), + + h('div.send-v2__from-dropdown__list', {}, [ + + ...accountsToRender.map(account => h(AccountListItem, { + account, + handleClick: () => { + onChange(account.address) + closeDropdown() + }, + icon: this.getListItemIcon(account.address, to), + displayBalance: false, + displayAddress: true, + })) + + ]), + + ]) +} + +ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) { + const { + to, + accounts, + closeDropdown, + openDropdown, + } = this.props + + const matchingAccounts = accounts.filter(({ address }) => address.match(to)) + + if (!to) { + this.setState({ accountsToRender: accounts }) + openDropdown() + } + else if (matchingAccounts.length === 1 && matchingAccounts[0].address === to) { + this.setState({ accountsToRender: [] }) + event.target && event.target.select() + closeDropdown() + } + else if (matchingAccounts.length) { + this.setState({ accountsToRender: matchingAccounts }) + openDropdown() + } + else { + this.setState({ accountsToRender: [] }) + event.target && event.target.select() + closeDropdown() + } + cb && cb(event.target.value) +} + +ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) { + if (this.props.to !== nextProps.to) { + this.handleInputEvent() + } } ToAutoComplete.prototype.render = function () { - const { to, accounts, onChange, inError } = this.props + const { + to, + accounts, + openDropdown, + closeDropdown, + dropdownOpen, + onChange, + inError, + } = this.props - return h('div.send-v2__to-autocomplete', [ + return h('div.to-autocomplete', {}, [ h('input.send-v2__to-autocomplete__input', { - name: 'address', - list: 'addresses', placeholder: 'Recipient Address', className: inError ? `send-v2__error-border` : '', value: to, - onChange, - onFocus: event => { - to && event.target.select() - }, + onChange: event => onChange(event.target.value), + onFocus: event => this.handleInputEvent(event), style: { borderColor: inError ? 'red' : null, } }), - h('datalist#addresses', [ - // Corresponds to the addresses owned. - ...Object.entries(accounts).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, - // }) - // }), - ]), + !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { + style: { color: '#dedede' }, + onClick: () => this.handleInputEvent(), + }), + + dropdownOpen && this.renderDropdown(), ]) - } -- cgit From ef2b0d848582788c6cf69a11e17a12358bb2aa7b Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 24 Oct 2017 12:56:42 -0230 Subject: Simply logic for rendering matching accounts in to-autocomplete dropdown. --- ui/app/components/send/to-autocomplete.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 081b85ab7..ab490155b 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -62,26 +62,18 @@ ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) { openDropdown, } = this.props - const matchingAccounts = accounts.filter(({ address }) => address.match(to)) + const matchingAccounts = accounts.filter(({ address }) => address.match(to || '')) + const matches = matchingAccounts.length - if (!to) { - this.setState({ accountsToRender: accounts }) - openDropdown() - } - else if (matchingAccounts.length === 1 && matchingAccounts[0].address === to) { + if (!matches || matchingAccounts[0].address === to) { this.setState({ accountsToRender: [] }) event.target && event.target.select() closeDropdown() } - else if (matchingAccounts.length) { + else { this.setState({ accountsToRender: matchingAccounts }) openDropdown() } - else { - this.setState({ accountsToRender: [] }) - event.target && event.target.select() - closeDropdown() - } cb && cb(event.target.value) } -- cgit From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/send/to-autocomplete.js | 5 ----- 1 file changed, 5 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index ab490155b..ebc63a7c5 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -1,7 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const Identicon = require('../identicon') const AccountListItem = require('./account-list-item') module.exports = ToAutoComplete @@ -23,7 +22,6 @@ ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) ToAutoComplete.prototype.renderDropdown = function () { const { - accounts, closeDropdown, onChange, to, @@ -86,9 +84,6 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) { ToAutoComplete.prototype.render = function () { const { to, - accounts, - openDropdown, - closeDropdown, dropdownOpen, onChange, inError, -- cgit From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/send/to-autocomplete.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index ebc63a7c5..df43fcc4a 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -37,15 +37,15 @@ ToAutoComplete.prototype.renderDropdown = function () { h('div.send-v2__from-dropdown__list', {}, [ ...accountsToRender.map(account => h(AccountListItem, { - account, + account, handleClick: () => { onChange(account.address) closeDropdown() - }, + }, icon: this.getListItemIcon(account.address, to), displayBalance: false, displayAddress: true, - })) + })), ]), @@ -67,8 +67,7 @@ ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) { this.setState({ accountsToRender: [] }) event.target && event.target.select() closeDropdown() - } - else { + } else { this.setState({ accountsToRender: matchingAccounts }) openDropdown() } @@ -93,13 +92,13 @@ ToAutoComplete.prototype.render = function () { h('input.send-v2__to-autocomplete__input', { placeholder: 'Recipient Address', - className: inError ? `send-v2__error-border` : '', + className: inError ? `send-v2__error-border` : '', value: to, onChange: event => onChange(event.target.value), onFocus: event => this.handleInputEvent(event), style: { borderColor: inError ? 'red' : null, - } + }, }), !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { -- cgit From dc0b3255cf908320b5b46f02765ea03b5b4db6b7 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 20:09:27 -0230 Subject: Fixes width of from and to dropdowns in extension and on mobile views. --- ui/app/components/send/to-autocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index ab490155b..fdb093baa 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -94,7 +94,7 @@ ToAutoComplete.prototype.render = function () { inError, } = this.props - return h('div.to-autocomplete', {}, [ + return h('div.send-v2__to-autocomplete', {}, [ h('input.send-v2__to-autocomplete__input', { placeholder: 'Recipient Address', -- cgit From 08d9ecc0454c729356f3f7a6d91156ee96c66959 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Nov 2017 16:15:43 -0330 Subject: Cursor pointer and hover background on from and to dropdown items. --- ui/app/components/send/to-autocomplete.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/send/to-autocomplete.js') diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index fef8d5ccb..e0cdd0a58 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -38,6 +38,7 @@ ToAutoComplete.prototype.renderDropdown = function () { ...accountsToRender.map(account => h(AccountListItem, { account, + className: 'account-list-item__dropdown', handleClick: () => { onChange(account.address) closeDropdown() -- cgit