diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/send/from-dropdown.js | 94 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/send.scss | 94 | ||||
| -rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 1 | ||||
| -rw-r--r-- | ui/app/send-v2.js | 38 |
4 files changed, 226 insertions, 1 deletions
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), + + ]) + +} + diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 72a01dc89..ddd22f9fd 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -495,6 +495,100 @@ width: 287px; } + &__form { + display: flex; + flex-direction: column; + margin-top: 13px; + width: 100%; + } + + &__form-row { + margin: 14.5px 18px 0px; + display: flex; + position: relative; + justify-content: space-between; + } + + &__form-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + margin-top: 16px; + } + + &__from-dropdown { + height: 73px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + color: $tundora; + + &__top-row { + display: flex; + margin-top: 10px; + margin-left: 8px; + position: relative; + } + + &__account-name { + font-size: 16px; + margin-left: 8px; + } + + &__caret-down, + &__check { + position: absolute; + right: 12px; + top: 1px; + } + + &__caret-down { + color: $alto; + } + + &__check { + color: $caribbean-green; + } + + &__account-primary-balance { + margin-left: 34px; + margin-top: 4px; + } + + &__account-secondary-balance { + margin-left: 34px; + color: $dusty-gray; + } + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 220px; + width: 240px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + margin-top: 11px; + margin-left: -1px; + overflow-y: scroll; + } + } + &__footer { height: 92px; width: 100%; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index b0ef86075..764d9c179 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -42,6 +42,7 @@ $tulip-tree: #ebb33f; $malibu-blue: #7ac9fd; $athens-grey: #e9edf0; $jaffa: #f28930; +$geyser: #d2d8dd; /* Z-Indicies diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index f423b90ff..53e63b784 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -3,11 +3,24 @@ const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') const connect = require('react-redux').connect const Identicon = require('./components/identicon') +const FromDropdown = require('./components/send/from-dropdown') module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { - return {} + const mockIdentities = Array.from(new Array(5)) + .map((v, i) => ({ + identity: { + name: `Test Account Name ${i}`, + address: `0x02f567704cc6569127e18e3d00d2c85bcbfa6f0${i}`, + }, + balancesToRender: { + primary: `100${i}.000001 ETH`, + secondary: `$30${i},000.00 USD`, + } + })) + + return { identities: mockIdentities } } inherits(SendTransactionScreen, PersistentForm) @@ -25,10 +38,14 @@ function SendTransactionScreen () { txData: null, memo: '', }, + dropdownOpen: false, } } SendTransactionScreen.prototype.render = function () { + const { identities } = this.props + const { dropdownOpen } = this.state + return ( h('div.send-v2__container', [ @@ -50,6 +67,25 @@ SendTransactionScreen.prototype.render = function () { h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'), + h('div.send-v2__form', {}, [ + + h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'From:'), + + h(FromDropdown, { + dropdownOpen, + identities, + selectedIdentity: identities[0], + setFromField: () => console.log('Set From Field'), + openDropdown: () => this.setState({ dropdownOpen: true }), + closeDropdown: () => this.setState({ dropdownOpen: false }), + }), + + ]) + + ]), + // Buttons underneath card h('div.send-v2__footer', [ h('button.send-v2__cancel-btn', {}, 'Cancel'), |