From 80463072b5c0c9e826582e066fbc962b667ee355 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 02:04:00 -0230 Subject: UI for readonly from component. From dropdown opening and closing. Mockdata. --- ui/app/components/send/from-dropdown.js | 94 +++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 ui/app/components/send/from-dropdown.js (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js new file mode 100644 index 000000000..c438cefd5 --- /dev/null +++ b/ui/app/components/send/from-dropdown.js @@ -0,0 +1,94 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('../identicon') + +module.exports = FromDropdown + +inherits(FromDropdown, Component) +function FromDropdown () { + Component.call(this) +} + +FromDropdown.prototype.renderSingleIdentity = function ( + account, + handleClick, + inList = false, + selectedIdentity = {} +) { + const { identity, balancesToRender } = account + const { name, address } = identity + const { primary, secondary } = balancesToRender + + const iconType = inList ? 'check' : 'caret-down' + const showIcon = !inList || address === selectedIdentity.address + + return h('div.send-v2__from-dropdown__account', { + onClick: () => handleClick(identity), + }, [ + + h('div.send-v2__from-dropdown__top-row', {}, [ + + h( + Identicon, + { + address, + diameter: 18, + className: 'send-v2__from-dropdown__identicon', + }, + ), + + h('div.send-v2__from-dropdown__account-name', {}, name), + + showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`), + + ]), + + h('div.send-v2__from-dropdown__account-primary-balance', {}, primary), + + h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary), + + ]) +} + +FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) { + return h('div', {}, [ + + h('div.send-v2__from-dropdown__close-area', { + onClick: closeDropdown, + }), + + h('div.send-v2__from-dropdown__list', {}, [ + + ...identities.map(identity => this.renderSingleIdentity( + identity, + () => console.log('Select identity'), + true, + selectedIdentity + )) + + ]), + + ]) +} + +FromDropdown.prototype.render = function () { + const { + identities, + selectedIdentity, + setFromField, + openDropdown, + closeDropdown, + dropdownOpen, + } = this.props + + return h('div.send-v2__from-dropdown', {}, [ + + this.renderSingleIdentity(selectedIdentity, openDropdown), + + dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown), + + ]) + +} + -- cgit From 71d6463984f040b2aa495a13429f6ea3505defaf Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Oct 2017 20:47:52 -0230 Subject: Refactor 'rendersingleidentity' to a stand alone account-list-item component. --- ui/app/components/send/from-dropdown.js | 69 ++++++++++----------------------- 1 file changed, 20 insertions(+), 49 deletions(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index c438cefd5..fb0a00cc2 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -2,6 +2,7 @@ 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 = FromDropdown @@ -10,48 +11,15 @@ function FromDropdown () { Component.call(this) } -FromDropdown.prototype.renderSingleIdentity = function ( - account, - handleClick, - inList = false, - selectedIdentity = {} -) { - const { identity, balancesToRender } = account - const { name, address } = identity - const { primary, secondary } = balancesToRender +FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) { + const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) - const iconType = inList ? 'check' : 'caret-down' - const showIcon = !inList || address === selectedIdentity.address - - return h('div.send-v2__from-dropdown__account', { - onClick: () => handleClick(identity), - }, [ - - h('div.send-v2__from-dropdown__top-row', {}, [ - - h( - Identicon, - { - address, - diameter: 18, - className: 'send-v2__from-dropdown__identicon', - }, - ), - - h('div.send-v2__from-dropdown__account-name', {}, name), - - showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`), - - ]), - - h('div.send-v2__from-dropdown__account-primary-balance', {}, primary), - - h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary), - - ]) + return currentAccount.identity.address === selectedAccount.identity.address + ? listItemIcon + : null } -FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) { +FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) { return h('div', {}, [ h('div.send-v2__from-dropdown__close-area', { @@ -60,12 +28,11 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, h('div.send-v2__from-dropdown__list', {}, [ - ...identities.map(identity => this.renderSingleIdentity( - identity, - () => console.log('Select identity'), - true, - selectedIdentity - )) + ...accounts.map(account => h(AccountListItem, { + account, + handleClick: () => console.log('Select identity'), + icon: this.getListItemIcon(account, selectedAccount), + })) ]), @@ -74,8 +41,8 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, FromDropdown.prototype.render = function () { const { - identities, - selectedIdentity, + accounts, + selectedAccount, setFromField, openDropdown, closeDropdown, @@ -84,9 +51,13 @@ FromDropdown.prototype.render = function () { return h('div.send-v2__from-dropdown', {}, [ - this.renderSingleIdentity(selectedIdentity, openDropdown), + h(AccountListItem, { + account: selectedAccount, + handleClick: openDropdown, + icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) + }), - dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown), + dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown), ]) -- 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/from-dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index fb0a00cc2..e8e1d43f0 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -14,7 +14,7 @@ function FromDropdown () { FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) { const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } }) - return currentAccount.identity.address === selectedAccount.identity.address + return currentAccount.address === selectedAccount.address ? listItemIcon : null } -- cgit From ac43872c1a1468057974648c8ae90bf1edd708d7 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 12 Oct 2017 14:59:03 -0230 Subject: Enable send-v2 functionality. --- ui/app/components/send/from-dropdown.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index e8e1d43f0..fd6fb7e64 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -19,7 +19,14 @@ FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccou : null } -FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) { +FromDropdown.prototype.renderDropdown = function () { + const { + accounts, + selectedAccount, + closeDropdown, + onSelect, + } = this.props + return h('div', {}, [ h('div.send-v2__from-dropdown__close-area', { @@ -30,7 +37,10 @@ FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, clo ...accounts.map(account => h(AccountListItem, { account, - handleClick: () => console.log('Select identity'), + handleClick: () => { + onSelect(account.address) + closeDropdown() + }, icon: this.getListItemIcon(account, selectedAccount), })) @@ -43,7 +53,6 @@ FromDropdown.prototype.render = function () { const { accounts, selectedAccount, - setFromField, openDropdown, closeDropdown, dropdownOpen, @@ -57,7 +66,7 @@ FromDropdown.prototype.render = function () { icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) }), - dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown), + dropdownOpen && this.renderDropdown(), ]) -- cgit From f81226fbe9f98d5a6c408e289fa0ea61a467e7dc Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 17 Oct 2017 14:52:23 -0230 Subject: Move all of send state to metamask state. --- ui/app/components/send/from-dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index fd6fb7e64..6f2b9da68 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -38,7 +38,7 @@ FromDropdown.prototype.renderDropdown = function () { ...accounts.map(account => h(AccountListItem, { account, handleClick: () => { - onSelect(account.address) + onSelect(account) closeDropdown() }, icon: this.getListItemIcon(account, selectedAccount), -- 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/from-dropdown.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index 6f2b9da68..b404dde14 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.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 = FromDropdown @@ -51,10 +50,8 @@ FromDropdown.prototype.renderDropdown = function () { FromDropdown.prototype.render = function () { const { - accounts, selectedAccount, openDropdown, - closeDropdown, dropdownOpen, } = this.props -- 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/from-dropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index b404dde14..bcae5ede8 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -35,13 +35,13 @@ FromDropdown.prototype.renderDropdown = function () { h('div.send-v2__from-dropdown__list', {}, [ ...accounts.map(account => h(AccountListItem, { - account, + account, handleClick: () => { onSelect(account) closeDropdown() - }, + }, icon: this.getListItemIcon(account, selectedAccount), - })) + })), ]), @@ -60,12 +60,12 @@ FromDropdown.prototype.render = function () { h(AccountListItem, { account: selectedAccount, handleClick: openDropdown, - icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }) + icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }), }), dropdownOpen && this.renderDropdown(), ]) - + } -- 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/from-dropdown.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/send/from-dropdown.js') diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js index bcae5ede8..0686fbe73 100644 --- a/ui/app/components/send/from-dropdown.js +++ b/ui/app/components/send/from-dropdown.js @@ -35,6 +35,7 @@ FromDropdown.prototype.renderDropdown = function () { h('div.send-v2__from-dropdown__list', {}, [ ...accounts.map(account => h(AccountListItem, { + className: 'account-list-item__dropdown', account, handleClick: () => { onSelect(account) -- cgit