From cbd53d4601f1af5aa4337e86ea8875606406e803 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:25:32 -0700 Subject: Add containers for wallet view and dropdown UI --- ui/app/components/wallet-view.js | 81 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 ui/app/components/wallet-view.js (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js new file mode 100644 index 000000000..fed227d6b --- /dev/null +++ b/ui/app/components/wallet-view.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('./identicon') +const AccountDropdowns = require('./account-dropdowns').AccountDropdowns + +module.exports = connect(mapStateToProps)(WalletView) + +function mapStateToProps (state) { + return { + network: state.metamask.network, + } +} + + +inherits(WalletView, Component) +function WalletView () { + Component.call(this) +} + +const noop = () => {} + +WalletView.prototype.render = function () { + const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' + const { network } = this.props + + return h('div.wallet-view.flex-column', { + style: { + flexGrow: 1, + height: '82vh', + background: '#FAFAFA', + } + }, [ + + h('div.flex-row.flex-center', { + style: { + // marginLeft: '5px', + // marginRight: '5px', + // marginTop: '10px', + // alignItems: 'center', + } + }, [ + + h('.identicon-wrapper.select-none', [ + h(Identicon, { + diameter: 24, + address: selected, + }), + ]), + + h('span', { + style: { + fontSize: '1.5em', + marginLeft: '5px', + } + }, [ + 'Account 1' + ]), + + h( + AccountDropdowns, + { + style: { + marginRight: '8px', + marginLeft: 'auto', + cursor: 'pointer', + }, + selected, + network, + identities: {}, + }, + ), + + ]) + + // wallet display 1 + // token display 1 + + ]) +} -- cgit From ddbf5613b3b7cf7b7b637f33cac87f5bbe69e7a7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:35:41 -0700 Subject: Add note for later on isolating components --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index fed227d6b..3a08705be 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -67,7 +67,7 @@ WalletView.prototype.render = function () { cursor: 'pointer', }, selected, - network, + network, // TODO: this prop could be in the account dropdown container identities: {}, }, ), -- cgit From 0ca50dfb1b990dadc702b178fad7e6434b71167a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:53:13 -0700 Subject: Center account name and dropdowns --- ui/app/components/wallet-view.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3a08705be..f425ec3d1 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -35,10 +35,9 @@ WalletView.prototype.render = function () { h('div.flex-row.flex-center', { style: { - // marginLeft: '5px', - // marginRight: '5px', - // marginTop: '10px', - // alignItems: 'center', + marginLeft: '35px', + marginRight: '35px', + marginTop: '35px', } }, [ @@ -52,7 +51,7 @@ WalletView.prototype.render = function () { h('span', { style: { fontSize: '1.5em', - marginLeft: '5px', + marginLeft: '10px', // TODO: switch all units for this component to em } }, [ 'Account 1' -- cgit From 610d6da8aee2c32bb142b1ff93f6a0a685adf46c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:10:59 -0700 Subject: Add hyperscript for wallet display component --- ui/app/components/wallet-view.js | 52 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 4 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index f425ec3d1..c06c4133b 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -29,10 +29,11 @@ WalletView.prototype.render = function () { style: { flexGrow: 1, height: '82vh', - background: '#FAFAFA', + background: '#FAFAFA', // TODO: add to reusable colors } }, [ + // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { marginLeft: '35px', @@ -71,10 +72,53 @@ WalletView.prototype.render = function () { }, ), - ]) + ]), - // wallet display 1 - // token display 1 + // TODO: Separate component: wallet contents + h('div.flex-column', { + style: { + marginLeft: '35px', + marginTop: '15px', + alignItems: 'flex-start', + } + }, [ + + h('span', { + style: { + fontSize: '1.1em', + }, + }, 'Wallet'), + + h('span', { + style: { + fontSize: '1.8em', + margin: '10px 0px', + }, + }, '1001.124 ETH'), + + h('span', { + style: { + fontSize: '1.3em', + }, + }, '$300,000.00 USD'), + + h('div', { + style: { + position: 'absolute', + marginLeft: '-35px', + height: '6em', + width: '4px', + background: '#D8D8D8', // TODO: add to resuable colors + } + }, [ + ]) + ]), + + // Buy Buttons + + + + // Wallet contents ]) } -- cgit From 7d4927c975554b091d72f6c24e7dd9e824f32548 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:25:20 -0700 Subject: Add layout for Buy and Send buttons --- ui/app/components/wallet-view.js | 45 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index c06c4133b..b61b53447 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -115,7 +115,50 @@ WalletView.prototype.render = function () { ]), // Buy Buttons - + // for index.css + // + // TODO: move into a class + // div.wallet-btn { + // border: 1px solid rgb(91, 93, 103); + // border-radius: 2px; + // height: 30px; + // width: 75px; + // font-size: 0.8em; + // text-align: center; + // line-height: 25px; + // } + + h('div.flex-row', { + style: { + marginLeft: '35px', + marginTop: '10px', + } + }, [ + h('div', { + style: { + border: '1px solid rgb(91, 93, 103)', + borderRadius: '2px', + height: '30px', + width: '75px', + fontSize: '0.8em', + textAlign: 'center', + lineHeight: '25px', + } + }, 'BUY'), + h('div.wallet-btn', { + style: { + border: '1px solid rgb(91, 93, 103)', + borderRadius: '2px', + height: '30px', + width: '75px', + fontSize: '0.8em', + textAlign: 'center', + lineHeight: '25px', + // spacing... + marginLeft: '15px', + } + }, 'SEND'), + ]), // Wallet contents -- cgit From 0c1aea97c74e6ac0c263a654510faca73a2dc949 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:30:55 -0700 Subject: Isolate wallet-content-display component --- ui/app/components/wallet-view.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b61b53447..1c3f3b7f9 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns +const Content = require('./wallet-content-display') module.exports = connect(mapStateToProps)(WalletView) @@ -74,7 +75,7 @@ WalletView.prototype.render = function () { ]), - // TODO: Separate component: wallet contents + // TODO: Separate component: wallet-content-account h('div.flex-column', { style: { marginLeft: '35px', @@ -160,8 +161,13 @@ WalletView.prototype.render = function () { }, 'SEND'), ]), - // Wallet contents + h(Content, { + title: "Total Token Balance", + amount: "45.439 ETH", + fiatValue: "$13,000.00 USD", + active: false, + }) ]) } -- cgit From 3797b9921fc227c1bcf9681cffa73588cc7afb44 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 20:22:15 -0700 Subject: Adjust popup size to 545x450; refactor wallet view to fit --- ui/app/components/wallet-view.js | 74 +++++++++++----------------------------- 1 file changed, 20 insertions(+), 54 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 1c3f3b7f9..0c5bd5c4f 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -37,9 +37,7 @@ WalletView.prototype.render = function () { // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { - marginLeft: '35px', - marginRight: '35px', - marginTop: '35px', + margin: '1.8em 1.3em', } }, [ @@ -52,8 +50,8 @@ WalletView.prototype.render = function () { h('span', { style: { - fontSize: '1.5em', - marginLeft: '10px', // TODO: switch all units for this component to em + fontSize: '1.2em', + marginLeft: '0.6em', // TODO: switch all units for this component to em } }, [ 'Account 1' @@ -63,7 +61,6 @@ WalletView.prototype.render = function () { AccountDropdowns, { style: { - marginRight: '8px', marginLeft: 'auto', cursor: 'pointer', }, @@ -75,49 +72,15 @@ WalletView.prototype.render = function () { ]), - // TODO: Separate component: wallet-content-account - h('div.flex-column', { - style: { - marginLeft: '35px', - marginTop: '15px', - alignItems: 'flex-start', - } - }, [ - - h('span', { - style: { - fontSize: '1.1em', - }, - }, 'Wallet'), - - h('span', { - style: { - fontSize: '1.8em', - margin: '10px 0px', - }, - }, '1001.124 ETH'), - - h('span', { - style: { - fontSize: '1.3em', - }, - }, '$300,000.00 USD'), - - h('div', { - style: { - position: 'absolute', - marginLeft: '-35px', - height: '6em', - width: '4px', - background: '#D8D8D8', // TODO: add to resuable colors - } - }, [ - ]) - ]), + h(Content, { + title: 'Wallet', + amount: '1001.124 ETH', + fiatValue: '$300,000.00 USD', + active: true, + }), // Buy Buttons // for index.css - // // TODO: move into a class // div.wallet-btn { // border: 1px solid rgb(91, 93, 103); @@ -131,32 +94,32 @@ WalletView.prototype.render = function () { h('div.flex-row', { style: { - marginLeft: '35px', - marginTop: '10px', + marginLeft: '1.3em', + marginTop: '0.8em', } }, [ h('div', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '30px', - width: '75px', + height: '28px', + width: '70px', fontSize: '0.8em', textAlign: 'center', lineHeight: '25px', + marginLeft: '.6em', } }, 'BUY'), h('div.wallet-btn', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '30px', - width: '75px', + height: '28px', + width: '70px', fontSize: '0.8em', textAlign: 'center', lineHeight: '25px', - // spacing... - marginLeft: '15px', + marginLeft: '.6em', } }, 'SEND'), ]), @@ -167,6 +130,9 @@ WalletView.prototype.render = function () { amount: "45.439 ETH", fiatValue: "$13,000.00 USD", active: false, + style: { + marginTop: '1.3em', + } }) ]) -- cgit From 92bd783e0c61e05772cc494a386bb5f21e9dbbb3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 20:54:04 -0700 Subject: Adjust button styles to left align with wallet text --- ui/app/components/wallet-view.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 0c5bd5c4f..e61346290 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -102,23 +102,20 @@ WalletView.prototype.render = function () { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '28px', - width: '70px', + height: '20px', + width: '50px', fontSize: '0.8em', textAlign: 'center', - lineHeight: '25px', - marginLeft: '.6em', } }, 'BUY'), h('div.wallet-btn', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '28px', - width: '70px', + height: '20px', + width: '50px', fontSize: '0.8em', textAlign: 'center', - lineHeight: '25px', marginLeft: '.6em', } }, 'SEND'), -- cgit From c876428044c8e6eec300ceeb0d7ab0c44e68f8d3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:16:07 -0700 Subject: Add TxView, use width percentages instead of flex-grow for layout --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index e61346290..b8ea633db 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -28,7 +28,7 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column', { style: { - flexGrow: 1, + width: '33.333%', height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors } -- cgit From a7fc5126502a9c69aaa727178997ea4ed703c2d6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 23:07:58 -0700 Subject: Implement mobile-friendly responsive layout with flex wrap --- ui/app/components/wallet-view.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b8ea633db..60c2cb5c6 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -28,7 +28,10 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column', { style: { - width: '33.333%', + // width: '33.333%', + flexGrow: 1, + flexShrink: 0, + flexBasis: '230px', // .333*345 height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors } -- cgit From 6f4bee45997862b3ca52785b9d62489969f070f5 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 23:21:11 -0700 Subject: Hook up send button to Send Token screen --- ui/app/components/wallet-view.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 60c2cb5c6..091a5cd7c 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -5,8 +5,9 @@ const inherits = require('util').inherits const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') +const actions = require('../actions') -module.exports = connect(mapStateToProps)(WalletView) +module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { return { @@ -14,6 +15,12 @@ function mapStateToProps (state) { } } +function mapDispatchToProps (dispatch) { + return { + showSendPage: () => {dispatch(actions.showSendPage())}, + } +} + inherits(WalletView, Component) function WalletView () { @@ -112,6 +119,10 @@ WalletView.prototype.render = function () { } }, 'BUY'), h('div.wallet-btn', { + onClick: () => { + console.log("SHOW"); + this.props.showSendPage(); + }, style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', -- cgit From 41c585c796a9049c2413036e7b23bf07330daa82 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 12:18:29 -0700 Subject: Make wallet view visible iff vw above 575px --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 091a5cd7c..97c881483 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -33,7 +33,7 @@ WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' const { network } = this.props - return h('div.wallet-view.flex-column', { + return h('div.wallet-view.flex-column.lap-visible', { style: { // width: '33.333%', flexGrow: 1, -- cgit From 7767f9f7ad7321d88a0b738d2c272961cc1ce286 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 13:03:36 -0700 Subject: Hook up responsive sidebar --- ui/app/components/wallet-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 97c881483..63335dd93 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -31,9 +31,9 @@ const noop = () => {} WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' - const { network } = this.props + const { network, responsiveDisplayClassname } = this.props - return h('div.wallet-view.flex-column.lap-visible', { + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { // width: '33.333%', flexGrow: 1, -- cgit From 9ebdc343aa32c36bdff9debcecc3c75485939e2a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 14:17:58 -0700 Subject: Implement custom sidebar, with close button --- ui/app/components/wallet-view.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 63335dd93..2a626a930 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -12,16 +12,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { return { network: state.metamask.network, + sidebarOpen: state.appState.sidebarOpen, } } function mapDispatchToProps (dispatch) { return { showSendPage: () => {dispatch(actions.showSendPage())}, + hideSidebar: () => {dispatch(actions.hideSidebar())}, } } - inherits(WalletView, Component) function WalletView () { Component.call(this) @@ -31,7 +32,7 @@ const noop = () => {} WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' - const { network, responsiveDisplayClassname } = this.props + const { network, responsiveDisplayClassname, style } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { @@ -41,9 +42,18 @@ WalletView.prototype.render = function () { flexBasis: '230px', // .333*345 height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors + ...style, } }, [ + h('div.phone-visible.fa.fa-bars', { + onClick: () => { + console.log("click received-inwalletview") + this.props.hideSidebar() + } + }, [ + ]), + // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { -- cgit From 01788376d5b7a0437b9073c8e8e0284a2cead6e4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 23:07:35 -0700 Subject: Finalize height for main screens, excluding sidebar --- ui/app/components/wallet-view.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 2a626a930..8fd555ccb 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -36,11 +36,9 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { - // width: '33.333%', flexGrow: 1, flexShrink: 0, flexBasis: '230px', // .333*345 - height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors ...style, } -- cgit From 3ed81847d1b6f00e208dbcb973cafcc633c268ad Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 23:54:21 -0700 Subject: Isolate routing logic for isUnlocked, remove stray logs --- ui/app/components/wallet-view.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 8fd555ccb..4d1ac1a49 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -46,7 +46,6 @@ WalletView.prototype.render = function () { h('div.phone-visible.fa.fa-bars', { onClick: () => { - console.log("click received-inwalletview") this.props.hideSidebar() } }, [ @@ -128,7 +127,6 @@ WalletView.prototype.render = function () { }, 'BUY'), h('div.wallet-btn', { onClick: () => { - console.log("SHOW"); this.props.showSendPage(); }, style: { -- cgit From 267d12646c93931c76a1c0fa1ccabd61f8e0dcd6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 00:43:24 -0700 Subject: Implement 'clear buttons' for tx view --- ui/app/components/wallet-view.js | 45 ---------------------------------------- 1 file changed, 45 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 4d1ac1a49..d57ab39d9 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -96,51 +96,6 @@ WalletView.prototype.render = function () { active: true, }), - // Buy Buttons - // for index.css - // TODO: move into a class - // div.wallet-btn { - // border: 1px solid rgb(91, 93, 103); - // border-radius: 2px; - // height: 30px; - // width: 75px; - // font-size: 0.8em; - // text-align: center; - // line-height: 25px; - // } - - h('div.flex-row', { - style: { - marginLeft: '1.3em', - marginTop: '0.8em', - } - }, [ - h('div', { - style: { - border: '1px solid rgb(91, 93, 103)', - borderRadius: '2px', - height: '20px', - width: '50px', - fontSize: '0.8em', - textAlign: 'center', - } - }, 'BUY'), - h('div.wallet-btn', { - onClick: () => { - this.props.showSendPage(); - }, - style: { - border: '1px solid rgb(91, 93, 103)', - borderRadius: '2px', - height: '20px', - width: '50px', - fontSize: '0.8em', - textAlign: 'center', - marginLeft: '.6em', - } - }, 'SEND'), - ]), - // Wallet contents h(Content, { title: "Total Token Balance", -- cgit From 17de77f24a11bfcd26f8472628d6ead28ce8dced Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 14:55:28 -0700 Subject: Position account display and burger in mobile tx view --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index d57ab39d9..2518a1213 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -31,7 +31,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' + const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address const { network, responsiveDisplayClassname, style } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { -- cgit From c1b85179590e824e9af93da5c1c67ef3a5eb1d06 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:37:41 -0700 Subject: Normalize sidebar dimensions and adjust hero button responsiveness --- ui/app/components/wallet-view.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 2518a1213..e0bc34b49 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -36,9 +36,7 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { - flexGrow: 1, - flexShrink: 0, - flexBasis: '230px', // .333*345 + flex: '28 0 28%', background: '#FAFAFA', // TODO: add to reusable colors ...style, } -- cgit From 850d2124c81ee81b98f23be1f49db13ca5e8aa27 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:26:52 -0700 Subject: Refactor account name css - mobile views --- ui/app/components/wallet-view.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index e0bc34b49..9b27f1cca 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -63,11 +63,8 @@ WalletView.prototype.render = function () { }), ]), - h('span', { - style: { - fontSize: '1.2em', - marginLeft: '0.6em', // TODO: switch all units for this component to em - } + h('span.account-name', { + style: {} }, [ 'Account 1' ]), -- cgit From fd36d95c506db55afa33a251c6c187c194a55854 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:50:14 -0700 Subject: Cleanup before rebase on NewUI - need new version of AccountDropdowns --- ui/app/components/wallet-view.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 9b27f1cca..cb1448598 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -42,18 +42,9 @@ WalletView.prototype.render = function () { } }, [ - h('div.phone-visible.fa.fa-bars', { - onClick: () => { - this.props.hideSidebar() - } - }, [ - ]), - // TODO: Separate component: wallet account details - h('div.flex-row.flex-center', { - style: { - margin: '1.8em 1.3em', - } + h('div.flex-column', { + style: {} }, [ h('.identicon-wrapper.select-none', [ -- cgit From 29662ff7b48c9cc8fc68cae6ba1e5a1f81ddf1c0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 20:47:59 -0700 Subject: Move tx and wallet view styles to component classes --- ui/app/components/wallet-view.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index cb1448598..1c7330193 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -35,11 +35,7 @@ WalletView.prototype.render = function () { const { network, responsiveDisplayClassname, style } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { - style: { - flex: '28 0 28%', - background: '#FAFAFA', // TODO: add to reusable colors - ...style, - } + style: {}, }, [ // TODO: Separate component: wallet account details -- cgit From ba50411bb2247d783667142cc5e7efff1bf839de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 21:54:42 -0700 Subject: Position account icon, name, and caret --- ui/app/components/wallet-view.js | 64 ++++++++++++++++++++++++++++++++++------ 1 file changed, 55 insertions(+), 9 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 1c7330193..c96819ab9 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -13,6 +13,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, sidebarOpen: state.appState.sidebarOpen, + identities: state.metamask.identities, } } @@ -32,7 +33,7 @@ const noop = () => {} WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address - const { network, responsiveDisplayClassname, style } = this.props + const { network, responsiveDisplayClassname, style, identities } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -43,19 +44,64 @@ WalletView.prototype.render = function () { style: {} }, [ - h('.identicon-wrapper.select-none', [ - h(Identicon, { - diameter: 24, - address: selected, - }), + h('div.flex-row.account-options-menu', { + }, [ + + h(AccountDropdowns, { + // selected, + // network, + // identities: props.identities, + enableAccountOptions: true, + }, []), + ]), - h('span.account-name', { - style: {} + h('div.flex-column.flex-center', { + }, [ - 'Account 1' + + h('.identicon-wrapper.select-none', { + style: { + marginBottom: '1%', + }, + }, [ + h(Identicon, { + diameter: 54, + address: selected, + }), + ]), + + h('span.account-name', { + style: {} + }, [ + 'Account 1' + ]), + + // h(AccountDropdowns, { + // style: { + // // position: 'absolute', + // // left: '58.5%', + // // top: '10.25%', + // }, + // selected, + // network, + // identities, + // enableAccountsSelector: true, + // }, []), + h('div.flex-column.flex-center,', { + style: { + position: 'absolute', + marginLeft: '42px', + marginTop: '-10px', + }, + }, h('i.fa.fa-angle-down', {}, [])), + ]), + // position: absolute; + // left: 58.5%; + // top: 10.25%; + h( AccountDropdowns, { -- cgit From 0f140c5db59e72836ec437063314b39f33bae100 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 22:30:27 -0700 Subject: Improve positioning of caret and add reusable color for wallet view --- ui/app/components/wallet-view.js | 33 ++++++++++++--------------------- 1 file changed, 12 insertions(+), 21 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index c96819ab9..ad84ee6a8 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -57,7 +57,10 @@ WalletView.prototype.render = function () { ]), h('div.flex-column.flex-center', { - + style: { + // constrains size of absolutely positioned wrappers + position: 'relative', + }, }, [ h('.identicon-wrapper.select-none', { @@ -77,31 +80,19 @@ WalletView.prototype.render = function () { 'Account 1' ]), - // h(AccountDropdowns, { - // style: { - // // position: 'absolute', - // // left: '58.5%', - // // top: '10.25%', - // }, - // selected, - // network, - // identities, - // enableAccountsSelector: true, - // }, []), - h('div.flex-column.flex-center,', { + h(AccountDropdowns, { style: { position: 'absolute', - marginLeft: '42px', - marginTop: '-10px', + left: '66.5%', + top: '19.5%', }, - }, h('i.fa.fa-angle-down', {}, [])), - + selected, + network, + identities, + enableAccountsSelector: true, + }, []), ]), - // position: absolute; - // left: 58.5%; - // top: 10.25%; - h( AccountDropdowns, { -- cgit From d8fff0fc8c25d1bd0a287502ca633a44a7844911 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 23:12:40 -0700 Subject: Opt for calculated values in absolutely positioned caret --- ui/app/components/wallet-view.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index ad84ee6a8..3c331a100 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -58,7 +58,7 @@ WalletView.prototype.render = function () { h('div.flex-column.flex-center', { style: { - // constrains size of absolutely positioned wrappers + // constrains size of absolutely positioned wrappers position: 'relative', }, }, [ @@ -83,7 +83,10 @@ WalletView.prototype.render = function () { h(AccountDropdowns, { style: { position: 'absolute', - left: '66.5%', + left: 'calc(50% + 28px + 5.5px)', + // left: '42px', + // top: '-10px' + // left: '66.5%', top: '19.5%', }, selected, -- cgit From 779be75370e10ea9b248686790127200badc3f65 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 9 Aug 2017 21:40:21 -0700 Subject: [WIP] Position account potions dropdown correctly and hook up to action creators --- ui/app/components/wallet-view.js | 51 ++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 26 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3c331a100..56aac1f13 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -6,14 +6,20 @@ const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') +const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { + return { network: state.metamask.network, sidebarOpen: state.appState.sidebarOpen, identities: state.metamask.identities, + accounts: state.metamask.accounts, + selectedAddress: selectors.getSelectedAddress(state), + selectedIdentity: selectors.getSelectedIdentity(state), + selectedAccount: selectors.getSelectedAccount(state), } } @@ -32,8 +38,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address - const { network, responsiveDisplayClassname, style, identities } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -45,20 +50,32 @@ WalletView.prototype.render = function () { }, [ h('div.flex-row.account-options-menu', { + style: { + position: 'relative', + }, }, [ h(AccountDropdowns, { - // selected, - // network, - // identities: props.identities, + selected: selectedAddress, + network, + identities, enableAccountOptions: true, + dropdownWrapperStyle: { + padding: '1px 15px', + marginLeft: '-25px', + position: 'absolute', + width: '122%', //TODO, refactor all of this component out into media queries + }, + menuItemStyles: { + padding: '0px 0px', + margin: '22px 0px', + } }, []), ]), h('div.flex-column.flex-center', { style: { - // constrains size of absolutely positioned wrappers position: 'relative', }, }, [ @@ -70,7 +87,7 @@ WalletView.prototype.render = function () { }, [ h(Identicon, { diameter: 54, - address: selected, + address: selectedAddress, }), ]), @@ -84,31 +101,14 @@ WalletView.prototype.render = function () { style: { position: 'absolute', left: 'calc(50% + 28px + 5.5px)', - // left: '42px', - // top: '-10px' - // left: '66.5%', top: '19.5%', }, - selected, + selected: selectedAddress, network, identities, enableAccountsSelector: true, }, []), ]), - - h( - AccountDropdowns, - { - style: { - marginLeft: 'auto', - cursor: 'pointer', - }, - selected, - network, // TODO: this prop could be in the account dropdown container - identities: {}, - }, - ), - ]), h(Content, { @@ -128,6 +128,5 @@ WalletView.prototype.render = function () { marginTop: '1.3em', } }) - ]) } -- cgit From a3f96951c2d6f2c8607e4fa270b5484e838b2e42 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Thu, 10 Aug 2017 11:34:26 +0800 Subject: connected wallet view dropdown button with real data --- ui/app/components/wallet-view.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 56aac1f13..7d4b8cd51 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -11,7 +11,6 @@ const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { - return { network: state.metamask.network, sidebarOpen: state.appState.sidebarOpen, @@ -25,8 +24,8 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - showSendPage: () => {dispatch(actions.showSendPage())}, - hideSidebar: () => {dispatch(actions.hideSidebar())}, + showSendPage: () => { dispatch(actions.showSendPage()) }, + hideSidebar: () => { dispatch(actions.hideSidebar()) }, } } @@ -38,7 +37,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedIdentity } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -46,7 +45,7 @@ WalletView.prototype.render = function () { // TODO: Separate component: wallet account details h('div.flex-column', { - style: {} + style: {}, }, [ h('div.flex-row.account-options-menu', { @@ -92,9 +91,9 @@ WalletView.prototype.render = function () { ]), h('span.account-name', { - style: {} + style: {}, }, [ - 'Account 1' + selectedIdentity.name, ]), h(AccountDropdowns, { @@ -103,30 +102,31 @@ WalletView.prototype.render = function () { left: 'calc(50% + 28px + 5.5px)', top: '19.5%', }, - selected: selectedAddress, + selectedAddress, network, identities, enableAccountsSelector: true, }, []), ]), + ]), h(Content, { - title: 'Wallet', - amount: '1001.124 ETH', - fiatValue: '$300,000.00 USD', - active: true, + title: 'Wallet', + amount: '1001.124 ETH', + fiatValue: '$300,000.00 USD', + active: true, }), // Wallet contents h(Content, { - title: "Total Token Balance", - amount: "45.439 ETH", - fiatValue: "$13,000.00 USD", + title: 'Total Token Balance', + amount: '45.439 ETH', + fiatValue: '$13,000.00 USD', active: false, style: { marginTop: '1.3em', - } - }) + }, + }), ]) } -- cgit From 708d8398f41f6bafe1e4678baebd18fb40999fc5 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Thu, 10 Aug 2017 14:48:05 +0800 Subject: reverted my changes --- ui/app/components/wallet-view.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 7d4b8cd51..56aac1f13 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -11,6 +11,7 @@ const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { + return { network: state.metamask.network, sidebarOpen: state.appState.sidebarOpen, @@ -24,8 +25,8 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - showSendPage: () => { dispatch(actions.showSendPage()) }, - hideSidebar: () => { dispatch(actions.hideSidebar()) }, + showSendPage: () => {dispatch(actions.showSendPage())}, + hideSidebar: () => {dispatch(actions.hideSidebar())}, } } @@ -37,7 +38,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedIdentity } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -45,7 +46,7 @@ WalletView.prototype.render = function () { // TODO: Separate component: wallet account details h('div.flex-column', { - style: {}, + style: {} }, [ h('div.flex-row.account-options-menu', { @@ -91,9 +92,9 @@ WalletView.prototype.render = function () { ]), h('span.account-name', { - style: {}, + style: {} }, [ - selectedIdentity.name, + 'Account 1' ]), h(AccountDropdowns, { @@ -102,31 +103,30 @@ WalletView.prototype.render = function () { left: 'calc(50% + 28px + 5.5px)', top: '19.5%', }, - selectedAddress, + selected: selectedAddress, network, identities, enableAccountsSelector: true, }, []), ]), - ]), h(Content, { - title: 'Wallet', - amount: '1001.124 ETH', - fiatValue: '$300,000.00 USD', - active: true, + title: 'Wallet', + amount: '1001.124 ETH', + fiatValue: '$300,000.00 USD', + active: true, }), // Wallet contents h(Content, { - title: 'Total Token Balance', - amount: '45.439 ETH', - fiatValue: '$13,000.00 USD', + title: "Total Token Balance", + amount: "45.439 ETH", + fiatValue: "$13,000.00 USD", active: false, style: { marginTop: '1.3em', - }, - }), + } + }) ]) } -- cgit From 95eda70efedd47ac5be8e790d6cf89cb219f4161 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Thu, 10 Aug 2017 16:52:26 +0800 Subject: added logging for account balance --- ui/app/components/wallet-view.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 56aac1f13..5622505c8 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -38,7 +38,9 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props + + console.log(selectedAccount) return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, -- cgit From 0fab1b54820aec01d3b4e7c2c351da57769647ee Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:31:06 -0700 Subject: Implement responsive wallet balances --- ui/app/components/wallet-view.js | 146 ++++++++++++++++++++++++++++++++++----- 1 file changed, 129 insertions(+), 17 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 5622505c8..4f6a67994 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -6,6 +6,7 @@ const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') +const BalanceComponent = require('./balance-component') const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) @@ -113,22 +114,133 @@ WalletView.prototype.render = function () { ]), ]), - h(Content, { - title: 'Wallet', - amount: '1001.124 ETH', - fiatValue: '$300,000.00 USD', - active: true, - }), - - // Wallet contents - h(Content, { - title: "Total Token Balance", - amount: "45.439 ETH", - fiatValue: "$13,000.00 USD", - active: false, - style: { - marginTop: '1.3em', - } - }) + //'Wallet' - Title + // Not visible on mobile + h('div.flex-column.wallet-view-title-wrapper', {}, [ + h('span.wallet-view-title', {}, [ + 'Wallet', + ]) + ]), + + //Wallet Balances + h('div.flex-column.wallet-balance-wrapper-active', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + ]) } -- cgit From 9954c95b4a582d13c3b184b4e18f240865bc45f9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:42:44 -0700 Subject: [WIP] Begin fixing responsive layout with many wallets --- ui/app/components/wallet-view.js | 51 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 4f6a67994..db69b5faa 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -242,5 +242,56 @@ WalletView.prototype.render = function () { ]), + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + + h('div.flex-column', {}, [ + + h('div', {}, [ + + h('div.wallet-balance', {}, [ + + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + + ]), + + ]) + + ]), + ]) } -- cgit From 9b48e0aa53ff73fe526c4788c929b0ffe5a2d499 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 09:17:14 -0700 Subject: Implement infinite scrolls (no lazy loading) for wallet view --- ui/app/components/wallet-view.js | 170 ++++++--------------------------------- 1 file changed, 23 insertions(+), 147 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index db69b5faa..cf7f74e49 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -41,14 +41,24 @@ const noop = () => {} WalletView.prototype.render = function () { const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props + // temporary logs + fake extra wallets console.log(selectedAccount) + const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [ + h('div.wallet-balance', {}, [ + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + ]), + ]) + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, }, [ // TODO: Separate component: wallet account details - h('div.flex-column', { + h('div.flex-column.wallet-view-account-details', { style: {} }, [ @@ -123,9 +133,7 @@ WalletView.prototype.render = function () { ]), //Wallet Balances - h('div.flex-column.wallet-balance-wrapper-active', {}, [ - - h('div', {}, [ + h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [ h('div.wallet-balance', {}, [ @@ -136,13 +144,9 @@ WalletView.prototype.render = function () { ]), - ]) - ]), - h('div.flex-column', {}, [ - - h('div', {}, [ + h('div.flex-column.wallet-balance-wrapper', {}, [ h('div.wallet-balance', {}, [ @@ -153,145 +157,17 @@ WalletView.prototype.render = function () { ]), - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - - ]), - - h('div.flex-column', {}, [ - - h('div', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]) - ]), + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, + extraWallet, ]) } -- cgit From b900da885ebb5b5581a670d9ca85761cecaa648f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 07:33:43 +0200 Subject: Fix odd relative position conflict so main icon is rounded - See flyswatter/jazzicon/issues/1 --- ui/app/components/wallet-view.js | 41 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 22 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index cf7f74e49..38b2787d5 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -88,39 +88,36 @@ WalletView.prototype.render = function () { ]), h('div.flex-column.flex-center', { - style: { - position: 'relative', - }, }, [ - - h('.identicon-wrapper.select-none', { + h('div', { style: { - marginBottom: '1%', - }, + position: 'relative', + } }, [ - h(Identicon, { - diameter: 54, - address: selectedAddress, - }), + h(AccountDropdowns, { + style: { + position: 'absolute', + left: 'calc(50% + 28px + 5.5px)', + top: '14px', + }, + selected: selectedAddress, + network, + identities, + enableAccountsSelector: true, + }, []), ]), + h(Identicon, { + diameter: 54, + address: selectedAddress, + }), + h('span.account-name', { style: {} }, [ 'Account 1' ]), - h(AccountDropdowns, { - style: { - position: 'absolute', - left: 'calc(50% + 28px + 5.5px)', - top: '19.5%', - }, - selected: selectedAddress, - network, - identities, - enableAccountsSelector: true, - }, []), ]), ]), -- cgit From 88665ba150c74955ef11a1b3fbc0f158a1c321de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:31:49 +0200 Subject: Extract dropdown component into components/dropdowns, hook up to app --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 38b2787d5..2b3b55b6a 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -3,7 +3,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') -const AccountDropdowns = require('./account-dropdowns').AccountDropdowns +const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') const BalanceComponent = require('./balance-component') -- cgit From 1743ccbdb5df504eab8e3c46c18172b176578be1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:50:49 +0200 Subject: Center account selection dropdown and specify useCssTransition prop --- ui/app/components/wallet-view.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 2b3b55b6a..6bde2d9f4 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -72,6 +72,7 @@ WalletView.prototype.render = function () { selected: selectedAddress, network, identities, + useCssTransition: true, enableAccountOptions: true, dropdownWrapperStyle: { padding: '1px 15px', @@ -100,6 +101,7 @@ WalletView.prototype.render = function () { left: 'calc(50% + 28px + 5.5px)', top: '14px', }, + useCssTransition: true, selected: selectedAddress, network, identities, -- cgit From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 03:27:11 -0700 Subject: Implement new dropdown design, integrate account balances --- ui/app/components/wallet-view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 6bde2d9f4..a92ec418e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -39,7 +39,7 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props + const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts } = this.props // temporary logs + fake extra wallets console.log(selectedAccount) @@ -96,11 +96,15 @@ WalletView.prototype.render = function () { } }, [ h(AccountDropdowns, { + accounts, style: { position: 'absolute', left: 'calc(50% + 28px + 5.5px)', top: '14px', }, + innerStyle: { + padding: '2px 16px', + }, useCssTransition: true, selected: selectedAddress, network, -- cgit From c2636143c3c3f297c8b00e407596841908376331 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:51:55 -0700 Subject: Hook up selected account label display to main wallet view --- ui/app/components/wallet-view.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index a92ec418e..9fe827da2 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -39,10 +39,9 @@ function WalletView () { const noop = () => {} WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts } = this.props - + const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts, selectedIdentity } = this.props // temporary logs + fake extra wallets - console.log(selectedAccount) + console.log("walletview, selectedAccount:", selectedAccount) const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [ h('div.wallet-balance', {}, [ @@ -121,7 +120,7 @@ WalletView.prototype.render = function () { h('span.account-name', { style: {} }, [ - 'Account 1' + selectedIdentity.name ]), ]), -- cgit From 9dce1b6fd5cdf8e5e14240bbcf1088f23e92c285 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 15:24:48 -0700 Subject: Remove fake transactions and balances from tx-list and wallet-view, respectively --- ui/app/components/wallet-view.js | 42 ++++++++++------------------------------ 1 file changed, 10 insertions(+), 32 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 9fe827da2..59859a8e0 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -43,15 +43,6 @@ WalletView.prototype.render = function () { // temporary logs + fake extra wallets console.log("walletview, selectedAccount:", selectedAccount) - const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [ - h('div.wallet-balance', {}, [ - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - ]), - ]) - return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, }, [ @@ -148,28 +139,15 @@ WalletView.prototype.render = function () { ]), - h('div.flex-column.wallet-balance-wrapper', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - ]), - - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, - extraWallet, ]) } + +// TODO: Extra wallets, for dev testing. Remove when PRing to master. +// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [ +// h('div.wallet-balance', {}, [ +// h(BalanceComponent, { +// balanceValue: selectedAccount.balance, +// style: {}, +// }), +// ]), +// ]) -- cgit From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/components/wallet-view.js | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 59859a8e0..6f9269389 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -4,7 +4,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns -const Content = require('./wallet-content-display') const actions = require('../actions') const BalanceComponent = require('./balance-component') const selectors = require('../selectors') @@ -26,8 +25,8 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - showSendPage: () => {dispatch(actions.showSendPage())}, - hideSidebar: () => {dispatch(actions.hideSidebar())}, + showSendPage: () => { dispatch(actions.showSendPage()) }, + hideSidebar: () => { dispatch(actions.hideSidebar()) }, } } @@ -36,12 +35,10 @@ function WalletView () { Component.call(this) } -const noop = () => {} - WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts, selectedIdentity } = this.props + const { network, responsiveDisplayClassname, identities, selectedAddress, selectedAccount, accounts, selectedIdentity } = this.props // temporary logs + fake extra wallets - console.log("walletview, selectedAccount:", selectedAccount) + console.log('walletview, selectedAccount:', selectedAccount) return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -49,7 +46,7 @@ WalletView.prototype.render = function () { // TODO: Separate component: wallet account details h('div.flex-column.wallet-view-account-details', { - style: {} + style: {}, }, [ h('div.flex-row.account-options-menu', { @@ -68,12 +65,12 @@ WalletView.prototype.render = function () { padding: '1px 15px', marginLeft: '-25px', position: 'absolute', - width: '122%', //TODO, refactor all of this component out into media queries + width: '122%', // TODO, refactor all of this component out into media queries }, menuItemStyles: { padding: '0px 0px', margin: '22px 0px', - } + }, }, []), ]), @@ -83,7 +80,7 @@ WalletView.prototype.render = function () { h('div', { style: { position: 'relative', - } + }, }, [ h(AccountDropdowns, { accounts, @@ -109,23 +106,23 @@ WalletView.prototype.render = function () { }), h('span.account-name', { - style: {} + style: {}, }, [ - selectedIdentity.name + selectedIdentity.name, ]), ]), ]), - //'Wallet' - Title + // 'Wallet' - Title // Not visible on mobile h('div.flex-column.wallet-view-title-wrapper', {}, [ h('span.wallet-view-title', {}, [ 'Wallet', - ]) + ]), ]), - //Wallet Balances + // Wallet Balances h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [ h('div.wallet-balance', {}, [ -- cgit From b1fc290bed26ae0ea8d182340854c82cc1f3d12d Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Thu, 31 Aug 2017 04:08:11 -0700 Subject: Fix menu style --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 6f9269389..48971a29e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -90,7 +90,7 @@ WalletView.prototype.render = function () { top: '14px', }, innerStyle: { - padding: '2px 16px', + padding: '10px 16px', }, useCssTransition: true, selected: selectedAddress, -- cgit From 06b2a04a4259a0bc7dff4004328441d353c296de Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 5 Sep 2017 01:48:52 -0700 Subject: Implement tokens list UI --- ui/app/components/wallet-view.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 48971a29e..304b5daba 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -6,6 +6,7 @@ const Identicon = require('./identicon') const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns const actions = require('../actions') const BalanceComponent = require('./balance-component') +const TokenList = require('./token-list') const selectors = require('../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) @@ -17,6 +18,7 @@ function mapStateToProps (state) { sidebarOpen: state.appState.sidebarOpen, identities: state.metamask.identities, accounts: state.metamask.accounts, + tokens: state.metamask.tokens, selectedAddress: selectors.getSelectedAddress(state), selectedIdentity: selectors.getSelectedIdentity(state), selectedAccount: selectors.getSelectedAccount(state), @@ -35,8 +37,23 @@ function WalletView () { Component.call(this) } +WalletView.prototype.renderTokenBalances = function () { + // const { tokens = [] } = this.props + // return tokens.map(({ address, decimals, symbol }) => ( + // h(BalanceComponent, { + // balanceValue: 0, + // style: {}, + // }) + // )) + return h(TokenList) +} + WalletView.prototype.render = function () { - const { network, responsiveDisplayClassname, identities, selectedAddress, selectedAccount, accounts, selectedIdentity } = this.props + const { + network, responsiveDisplayClassname, identities, + selectedAddress, selectedAccount, accounts, + selectedIdentity, + } = this.props // temporary logs + fake extra wallets console.log('walletview, selectedAccount:', selectedAccount) @@ -134,8 +151,11 @@ WalletView.prototype.render = function () { ]), + ]), + this.renderTokenBalances(), + ]) } -- cgit From f1fb9e10a06d1811d97f61b6369684979b7ecf70 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 03:17:49 -0700 Subject: Adding Token transaction detail screen --- ui/app/components/wallet-view.js | 48 ++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 24 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 304b5daba..f9710ea4c 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -22,6 +22,7 @@ function mapStateToProps (state) { selectedAddress: selectors.getSelectedAddress(state), selectedIdentity: selectors.getSelectedIdentity(state), selectedAccount: selectors.getSelectedAccount(state), + selectedTokenAddress: state.metamask.selectedTokenAddress, } } @@ -29,6 +30,7 @@ function mapDispatchToProps (dispatch) { return { showSendPage: () => { dispatch(actions.showSendPage()) }, hideSidebar: () => { dispatch(actions.hideSidebar()) }, + unsetSelectedToken: () => dispatch(actions.setSelectedToken()), } } @@ -37,15 +39,26 @@ function WalletView () { Component.call(this) } -WalletView.prototype.renderTokenBalances = function () { - // const { tokens = [] } = this.props - // return tokens.map(({ address, decimals, symbol }) => ( - // h(BalanceComponent, { - // balanceValue: 0, - // style: {}, - // }) - // )) - return h(TokenList) +WalletView.prototype.renderWalletBalance = function () { + const { selectedTokenAddress, selectedAccount, unsetSelectedToken } = this.props + const selectedClass = selectedTokenAddress + ? '' + : 'wallet-balance-wrapper--active' + const className = `flex-column wallet-balance-wrapper ${selectedClass}` + + return h('div', { className }, [ + h('div.wallet-balance', + { + onClick: () => unsetSelectedToken(), + }, + [ + h(BalanceComponent, { + balanceValue: selectedAccount.balance, + style: {}, + }), + ] + ), + ]) } WalletView.prototype.render = function () { @@ -139,22 +152,9 @@ WalletView.prototype.render = function () { ]), ]), - // Wallet Balances - h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [ - - h('div.wallet-balance', {}, [ - - h(BalanceComponent, { - balanceValue: selectedAccount.balance, - style: {}, - }), - - ]), - - - ]), + this.renderWalletBalance(), - this.renderTokenBalances(), + h(TokenList), ]) } -- cgit From 14b2f3e391752cca02c05ae0137e490bfdcdd7a7 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 23:03:23 -0700 Subject: Show token balance and identicon --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index f9710ea4c..08c28f1dc 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -49,7 +49,7 @@ WalletView.prototype.renderWalletBalance = function () { return h('div', { className }, [ h('div.wallet-balance', { - onClick: () => unsetSelectedToken(), + onClick: unsetSelectedToken, }, [ h(BalanceComponent, { -- cgit From 983fa2a11721aa7d1307ef76d516e25a50d0eedf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 03:14:53 -0700 Subject: Add Contract Tx List Item; Update Token Tx on select --- ui/app/components/wallet-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 08c28f1dc..b306fb7d4 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -64,11 +64,11 @@ WalletView.prototype.renderWalletBalance = function () { WalletView.prototype.render = function () { const { network, responsiveDisplayClassname, identities, - selectedAddress, selectedAccount, accounts, + selectedAddress, accounts, selectedIdentity, } = this.props // temporary logs + fake extra wallets - console.log('walletview, selectedAccount:', selectedAccount) + // console.log('walletview, selectedAccount:', selectedAccount) return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, -- cgit From b55a40c7f144645a29569294996893cb1b519779 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 28 Sep 2017 09:25:04 -0230 Subject: Close sidebar on token selection. --- ui/app/components/wallet-view.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b306fb7d4..00c86298d 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -40,7 +40,13 @@ function WalletView () { } WalletView.prototype.renderWalletBalance = function () { - const { selectedTokenAddress, selectedAccount, unsetSelectedToken } = this.props + const { + selectedTokenAddress, + selectedAccount, + unsetSelectedToken, + hideSidebar, + sidebarOpen + } = this.props const selectedClass = selectedTokenAddress ? '' : 'wallet-balance-wrapper--active' @@ -49,7 +55,10 @@ WalletView.prototype.renderWalletBalance = function () { return h('div', { className }, [ h('div.wallet-balance', { - onClick: unsetSelectedToken, + onClick: () => { + unsetSelectedToken() + selectedTokenAddress && sidebarOpen && hideSidebar() + }, }, [ h(BalanceComponent, { -- cgit From 7caa9142235cc0eca20d638a066d666d8cfaabee Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 16 Oct 2017 01:27:51 -0400 Subject: Fix Import Account link not hiding sidebar --- ui/app/components/wallet-view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 00c86298d..54d90b7ac 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -45,8 +45,9 @@ WalletView.prototype.renderWalletBalance = function () { selectedAccount, unsetSelectedToken, hideSidebar, - sidebarOpen + sidebarOpen, } = this.props + const selectedClass = selectedTokenAddress ? '' : 'wallet-balance-wrapper--active' -- cgit From 5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 16 Oct 2017 01:28:25 -0400 Subject: wip --- ui/app/components/wallet-view.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 54d90b7ac..f06c4d512 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -136,7 +136,6 @@ WalletView.prototype.render = function () { selected: selectedAddress, network, identities, - enableAccountsSelector: true, }, []), ]), -- cgit From 376ae032fedb99d22b7c71438ec9482d2013c78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 19 Oct 2017 12:47:44 -0700 Subject: Fix selectors --- ui/app/components/wallet-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index f06c4d512..a870a24e3 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -47,7 +47,7 @@ WalletView.prototype.renderWalletBalance = function () { hideSidebar, sidebarOpen, } = this.props - + console.log({ selectedAccount }) const selectedClass = selectedTokenAddress ? '' : 'wallet-balance-wrapper--active' @@ -63,7 +63,7 @@ WalletView.prototype.renderWalletBalance = function () { }, [ h(BalanceComponent, { - balanceValue: selectedAccount.balance, + balanceValue: selectedAccount ? selectedAccount.balance : '', style: {}, }), ] -- cgit From a63373401b9983b991d4b2a0e28eec8d66c18e78 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 23 Oct 2017 23:59:21 -0700 Subject: New Sidebar uplift --- ui/app/components/wallet-view.js | 92 ++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 56 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index a870a24e3..06123fd0e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -3,7 +3,8 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') -const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns +// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns +const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') @@ -19,6 +20,7 @@ function mapStateToProps (state) { identities: state.metamask.identities, accounts: state.metamask.accounts, tokens: state.metamask.tokens, + keyrings: state.metamask.keyrings, selectedAddress: selectors.getSelectedAddress(state), selectedIdentity: selectors.getSelectedIdentity(state), selectedAccount: selectors.getSelectedAccount(state), @@ -28,9 +30,12 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - showSendPage: () => { dispatch(actions.showSendPage()) }, - hideSidebar: () => { dispatch(actions.hideSidebar()) }, + showSendPage: () => dispatch(actions.showSendPage()), + hideSidebar: () => dispatch(actions.hideSidebar()), unsetSelectedToken: () => dispatch(actions.setSelectedToken()), + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, } } @@ -47,7 +52,7 @@ WalletView.prototype.renderWalletBalance = function () { hideSidebar, sidebarOpen, } = this.props - console.log({ selectedAccount }) + const selectedClass = selectedTokenAddress ? '' : 'wallet-balance-wrapper--active' @@ -73,13 +78,24 @@ WalletView.prototype.renderWalletBalance = function () { WalletView.prototype.render = function () { const { - network, responsiveDisplayClassname, identities, - selectedAddress, accounts, + responsiveDisplayClassname, + selectedAddress, selectedIdentity, + keyrings, + showAccountDetailModal, + hideSidebar, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) + const keyring = keyrings.find((kr) => { + return kr.accounts.includes(selectedAddress) || + kr.accounts.includes(selectedIdentity.address) + }) + + const type = keyring.type + const isLoose = type !== 'HD Key Tree' + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, }, [ @@ -88,57 +104,15 @@ WalletView.prototype.render = function () { h('div.flex-column.wallet-view-account-details', { style: {}, }, [ + h('div.wallet-view__sidebar-close', { + onClick: hideSidebar, + }), - h('div.flex-row.account-options-menu', { - style: { - position: 'relative', - }, - }, [ - - h(AccountDropdowns, { - selected: selectedAddress, - network, - identities, - useCssTransition: true, - enableAccountOptions: true, - dropdownWrapperStyle: { - padding: '1px 15px', - marginLeft: '-25px', - position: 'absolute', - width: '122%', // TODO, refactor all of this component out into media queries - }, - menuItemStyles: { - padding: '0px 0px', - margin: '22px 0px', - }, - }, []), - - ]), + h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), h('div.flex-column.flex-center', { + style: { margin: '0 auto' }, }, [ - h('div', { - style: { - position: 'relative', - }, - }, [ - h(AccountDropdowns, { - accounts, - style: { - position: 'absolute', - left: 'calc(50% + 28px + 5.5px)', - top: '14px', - }, - innerStyle: { - padding: '10px 16px', - }, - useCssTransition: true, - selected: selectedAddress, - network, - identities, - }, []), - ]), - h(Identicon, { diameter: 54, address: selectedAddress, @@ -149,14 +123,20 @@ WalletView.prototype.render = function () { }, [ selectedIdentity.name, ]), - ]), ]), + h('button.wallet-view__details-button', { onClick: showAccountDetailModal }, 'DETAILS'), + + h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ + `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), + ]), + // 'Wallet' - Title // Not visible on mobile - h('div.flex-column.wallet-view-title-wrapper', {}, [ - h('span.wallet-view-title', {}, [ + h('div.flex-column.wallet-view-title-wrapper', [ + h('span.wallet-view-title', [ 'Wallet', ]), ]), -- cgit From 2871beebe61418ce148069c932301d89e85923fa Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:29:20 -0700 Subject: Add "Add Token" button to side bar --- ui/app/components/wallet-view.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 06123fd0e..580ac54aa 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -36,6 +36,7 @@ function mapDispatchToProps (dispatch) { showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, + showAddTokenPage: () => dispatch(actions.showAddTokenPage()), } } @@ -84,6 +85,7 @@ WalletView.prototype.render = function () { keyrings, showAccountDetailModal, hideSidebar, + showAddTokenPage, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) @@ -145,6 +147,9 @@ WalletView.prototype.render = function () { h(TokenList), + h('button.wallet-view__add-token-button', { + onClick: showAddTokenPage, + }, 'Add Token'), ]) } -- cgit From 966e4cfd1189f7c115cfc552796c1353060d2125 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:54:49 -0700 Subject: Change clickable area for account detail; change network dot size --- ui/app/components/wallet-view.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 580ac54aa..215103396 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -112,8 +112,9 @@ WalletView.prototype.render = function () { h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), - h('div.flex-column.flex-center', { + h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, + onClick: showAccountDetailModal, }, [ h(Identicon, { diameter: 54, @@ -125,10 +126,11 @@ WalletView.prototype.render = function () { }, [ selectedIdentity.name, ]), + + h('button.wallet-view__details-button', 'DETAILS'), ]), ]), - h('button.wallet-view__details-button', { onClick: showAccountDetailModal }, 'DETAILS'), h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, -- cgit From 3f1ae92bb7d4ca4629995f32dc03f37e6460a864 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 16:55:02 -0700 Subject: Hide sidebar on add token --- ui/app/components/wallet-view.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 215103396..9c11ca4a5 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -150,7 +150,10 @@ WalletView.prototype.render = function () { h(TokenList), h('button.wallet-view__add-token-button', { - onClick: showAddTokenPage, + onClick: () => { + showAddTokenPage() + hideSidebar() + }, }, 'Add Token'), ]) } -- cgit From 630ab79cc313fa280e6a3d6a2655dafacb6b9659 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 20:04:29 -0700 Subject: Styling and UX changes on sidebar --- ui/app/components/wallet-view.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 9c11ca4a5..3cb7a8b76 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) { inherits(WalletView, Component) function WalletView () { Component.call(this) + this.state = { + hasCopied: false, + } } WalletView.prototype.renderWalletBalance = function () { @@ -132,19 +135,18 @@ WalletView.prototype.render = function () { ]), - h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ - `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + h('div.wallet-view__address', { + onClick: () => { + copyToClipboard(selectedAddress) + this.setState({ hasCopied: true }) + setTimeout(() => this.setState({ hasCopied: false }), 3000) + }, + }, [ + this.state.hasCopied && 'Copied to Clipboard', + !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), ]), - // 'Wallet' - Title - // Not visible on mobile - h('div.flex-column.wallet-view-title-wrapper', [ - h('span.wallet-view-title', [ - 'Wallet', - ]), - ]), - this.renderWalletBalance(), h(TokenList), -- cgit From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: Update styling for buttons, font weights --- ui/app/components/wallet-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3cb7a8b76..b1ef83cee 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -130,7 +130,7 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.wallet-view__details-button', 'DETAILS'), + h('button.btn-clear.wallet-view__details-button', 'DETAILS'), ]), ]), @@ -151,7 +151,7 @@ WalletView.prototype.render = function () { h(TokenList), - h('button.wallet-view__add-token-button', { + h('button.btn-clear.wallet-view__add-token-button', { onClick: () => { showAddTokenPage() hideSidebar() -- cgit From 78bce55858916ba9d3189f76db440768e6ae95b1 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 31 Jan 2018 20:57:35 -0330 Subject: [NewUI] Use tooltip for copy to clipboard helper text on main screen. (#3120) * Use tooltip for display of helper text in wallet views copy to clipboard feature. * Use react-tippy in wallet-view.js; center arrow tooltip throughout tooltip text change. * Remove unnecessary tabIndex attribute from wallet view address element. --- ui/app/components/wallet-view.js | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) (limited to 'ui/app/components/wallet-view.js') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b1ef83cee..34f27ca2a 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -2,8 +2,10 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits +const classnames = require('classnames') const Identicon = require('./identicon') // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns +const Tooltip = require('./tooltip-v2.js') const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const BalanceComponent = require('./balance-component') @@ -45,6 +47,7 @@ function WalletView () { Component.call(this) this.state = { hasCopied: false, + copyToClipboardPressed: false, } } @@ -134,17 +137,30 @@ WalletView.prototype.render = function () { ]), ]), - - h('div.wallet-view__address', { - onClick: () => { - copyToClipboard(selectedAddress) - this.setState({ hasCopied: true }) - setTimeout(() => this.setState({ hasCopied: false }), 3000) - }, + h(Tooltip, { + position: 'bottom', + title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard', + wrapperClassName: 'wallet-view__tooltip', }, [ - this.state.hasCopied && 'Copied to Clipboard', - !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, - h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), + h('button.wallet-view__address', { + className: classnames({ + 'wallet-view__address__pressed': this.state.copyToClipboardPressed, + }), + onClick: () => { + copyToClipboard(selectedAddress) + this.setState({ hasCopied: true }) + setTimeout(() => this.setState({ hasCopied: false }), 3000) + }, + onMouseDown: () => { + this.setState({ copyToClipboardPressed: true }) + }, + onMouseUp: () => { + this.setState({ copyToClipboardPressed: false }) + }, + }, [ + `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), + ]), ]), this.renderWalletBalance(), -- cgit