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/tx-view.js | 53 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 ui/app/components/tx-view.js (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js new file mode 100644 index 000000000..b10589035 --- /dev/null +++ b/ui/app/components/tx-view.js @@ -0,0 +1,53 @@ +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 +// const Content = require('./wallet-content-display') + +module.exports = connect()(TxView) + +// function mapStateToProps (state) { +// return { +// network: state.metamask.network, +// } +// } + +inherits(TxView, Component) +function TxView () { + Component.call(this) +} + +TxView.prototype.render = function () { + return h('div.tx-view.flex-column', { + style: { + width: '66.666%', + height: '82vh', + background: '#FFFFFF', + } + }, [ + h('div.flex-row', { + }, [ + // tab + h('div.flex-column', { + + }, [ + h('div', {}, 'Transactions'), + h('div', { + style: { + height: '0.5em', + color: 'black', + width: '100%', + } + }) + ]), + + // tab2 + ]) + ]) + // column + // tab row + // divider + // item +} -- cgit From c7ace5b23d911512495edbd4f0ecb8e0190bc537 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:27:37 -0700 Subject: Add hyperscript for tx-view tabs --- ui/app/components/tx-view.js | 36 +++++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b10589035..06ee3bfc6 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -13,6 +13,15 @@ module.exports = connect()(TxView) // network: state.metamask.network, // } // } +// +const contentDivider = h('div', { + style: { + marginLeft: '1.3em', + marginRight: '1.3em', + height:'1px', + background:'#E7E7E7', // TODO: make custom color + }, +}) inherits(TxView, Component) function TxView () { @@ -28,23 +37,32 @@ TxView.prototype.render = function () { } }, [ h('div.flex-row', { + style: { + margin: '1.8em 1.3em', + } }, [ - // tab - h('div.flex-column', { + // tx-view-tab.js + h('div.flex-row', { }, [ - h('div', {}, 'Transactions'), + h('div', { style: { - height: '0.5em', - color: 'black', - width: '100%', + borderBottom: '0.07em solid black', + paddingBottom: '0.015em', } - }) - ]), + }, 'TRANSACTIONS'), + + h('div', { + style: { + marginLeft: '2em', + } + }, 'TOKENS'), - // tab2 + ]), ]) + + h('') ]) // column // tab row -- cgit From ce06fbd36debac144b4f4bf1d3948b35332e9c41 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:34:37 -0700 Subject: Add tx-view content divider component --- ui/app/components/tx-view.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 06ee3bfc6..1bc828c20 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -13,7 +13,7 @@ module.exports = connect()(TxView) // network: state.metamask.network, // } // } -// + const contentDivider = h('div', { style: { marginLeft: '1.3em', @@ -38,7 +38,7 @@ TxView.prototype.render = function () { }, [ h('div.flex-row', { style: { - margin: '1.8em 1.3em', + margin: '1.8em 1.3em 0.8em 1.3em', } }, [ @@ -55,14 +55,15 @@ TxView.prototype.render = function () { h('div', { style: { - marginLeft: '2em', + marginLeft: '1.25em', } }, 'TOKENS'), ]), - ]) + ]), + + contentDivider, - h('') ]) // column // tab row -- cgit From caab0b61ccb20a19fd97d4177698e9675d0b5451 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 22:00:18 -0700 Subject: Add rough layout for tx list items --- ui/app/components/tx-view.js | 60 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 1bc828c20..c32e9edcb 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -64,9 +64,69 @@ TxView.prototype.render = function () { contentDivider, + this.renderTransactionListItem(), + + contentDivider, + + this.renderTransactionListItem(), + + contentDivider, + ]) // column // tab row // divider // item } + +TxView.prototype.renderTransactionListItem = function () { + return h('div.flex-column', { + style: { + alignItems: 'stretch', + margin: '0.6em 1.3em 0.6em 1.3em', + } + }, [ + + h('div', { + style: { + flexGrow: 1, + marginTop: '0.3em', + } + }, 'Jul 01, 2017'), + + h('div.flex-row', { + style: { + alignItems: 'stretch', + } + }, [ + + h('div', { + style: { + flexGrow: 1, + } + }, 'icon'), + + h('div', { + style: { + flexGrow: 3, + } + }, 'Hash'), + + h('div', { + style: { + flexGrow: 5, + } + }, 'Status'), + + h('div', { + style: { + flexGrow: 2, + } + }, 'Details'), + + ]) + + ]) +} + + -- 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/tx-view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c32e9edcb..bcd30e6d8 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -31,7 +31,11 @@ function TxView () { TxView.prototype.render = function () { return h('div.tx-view.flex-column', { style: { - width: '66.666%', + // width: '66.666%', + flexGrow: 2, + flexShrink: 0, + flexBasis: '230px', // .666*345 + // flexBasis: '400px', height: '82vh', background: '#FFFFFF', } -- cgit From 22b03c62e650182951dce25a5ce9de982782a7fa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 12:29:07 -0700 Subject: Add burger icon and phone-visible media queries --- ui/app/components/tx-view.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index bcd30e6d8..c5c6484cc 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -40,6 +40,11 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ + + h('div.phone-visible.fa.fa-bars', { + + }, []), + h('div.flex-row', { style: { margin: '1.8em 1.3em 0.8em 1.3em', -- cgit From dfa10763e36f745d82fb62adc4ac42773d266da4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 13:32:02 -0700 Subject: Integrate slideout menu with tx view --- ui/app/components/tx-view.js | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c5c6484cc..b72abb084 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -2,17 +2,29 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits +const actions = require('../actions') +// slideout menu +const SlideoutMenu = require('react-burger-menu').slide +const WalletView = require('./wallet-view') + // const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') -module.exports = connect()(TxView) +module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) + +function mapStateToProps (state) { + return { + sidebarOpen: state.appState.sidebarOpen, + } +} -// function mapStateToProps (state) { -// return { -// network: state.metamask.network, -// } -// } +function mapDispatchToProps (dispatch) { + return { + showSidebar: () => {dispatch(actions.showSidebar())}, + hideSidebar: () => {dispatch(actions.hideSidebar())}, + } +} const contentDivider = h('div', { style: { @@ -40,9 +52,19 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ + // slideout - move to separate render func + h(SlideoutMenu, { + isOpen: this.props.sidebarOpen, + }, [ + h(WalletView, { + responsiveDisplayClassname: '.phone-visible' + }), + ]), h('div.phone-visible.fa.fa-bars', { - + onClick: () => { + this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() + } }, []), h('div.flex-row', { -- 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/tx-view.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b72abb084..2aaa32395 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -52,20 +52,13 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ - // slideout - move to separate render func - h(SlideoutMenu, { - isOpen: this.props.sidebarOpen, - }, [ - h(WalletView, { - responsiveDisplayClassname: '.phone-visible' - }), - ]), - h('div.phone-visible.fa.fa-bars', { onClick: () => { + console.log("click received") this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() } - }, []), + }, [ + ]), h('div.flex-row', { 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/tx-view.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 2aaa32395..dc86e7ea8 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -43,12 +43,9 @@ function TxView () { TxView.prototype.render = function () { return h('div.tx-view.flex-column', { style: { - // width: '66.666%', flexGrow: 2, flexShrink: 0, - flexBasis: '230px', // .666*345 - // flexBasis: '400px', - height: '82vh', + flexBasis: '230px', background: '#FFFFFF', } }, [ -- 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/tx-view.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index dc86e7ea8..c0e40e9b4 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -51,7 +51,6 @@ TxView.prototype.render = function () { }, [ h('div.phone-visible.fa.fa-bars', { onClick: () => { - console.log("click received") this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() } }, [ -- 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/tx-view.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c0e40e9b4..b2799a65f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -56,6 +56,44 @@ TxView.prototype.render = function () { }, [ ]), + h('div.flex-row.flex-wrap', { + style: { + margin: '1.8em 1.3em 0.8em 1.3em', + flex: '1 0 auto', + } + }, [ + + h('div.flex-column.flex-center', { + style: { + width: '100%', + } + }, [ + + h('div', {}, 'ETH LOGO'), + + h('div', {}, '1001.124 ETH'), + + h('div', {}, '$300,000 USD'), + + ]), + + h('div.flex-row.flex-center', { + style: { + width: '100%', + } + }, [ + h('button.btn-clear', { + textAlign: 'center' + }, 'BUY'), + + h('button.btn-clear', { + textAlign: 'center' + }, 'SEND'), + + ]), + + ]), + h('div.flex-row', { style: { margin: '1.8em 1.3em 0.8em 1.3em', -- cgit From 0171918407a1c04b8c04bb05f678b04acb4f53b0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 01:17:27 -0700 Subject: Add rough layout for flat layout tx details, add notes for breakpoints --- ui/app/components/tx-view.js | 59 +++++++++++++++++++++++++++++--------------- 1 file changed, 39 insertions(+), 20 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b2799a65f..dc9a7985f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -56,42 +56,61 @@ TxView.prototype.render = function () { }, [ ]), - h('div.flex-row.flex-wrap', { + h('div.flex-row', { style: { margin: '1.8em 1.3em 0.8em 1.3em', - flex: '1 0 auto', + // flex: '1 0 520px', } }, [ - h('div.flex-column.flex-center', { + // laptop: flex-row + // mobile: flex-column + h('div.flex-row.flex-center', { style: { - width: '100%', } }, [ - h('div', {}, 'ETH LOGO'), - - h('div', {}, '1001.124 ETH'), + // laptop: 50px 50px + // mobile: 100px 100px + h('img', { + src: '../images/eth_logo.svg', + width: '50px', + height: '50px', + style: { + borderRadius: '25px', + border: '1px solid', + } + }), - h('div', {}, '$300,000 USD'), + // laptop: 5vw? + // phone: 50vw? + h('div.flex-column.flex-center', { + style: {} + }, [ + h('div', {}, '1001.124 ETH'), - ]), + h('div', {}, '$300,000 USD'), + ]), - h('div.flex-row.flex-center', { - style: { - width: '100%', - } - }, [ - h('button.btn-clear', { - textAlign: 'center' - }, 'BUY'), + // laptop: 10vw? + // phone: 75vw? + h('div.flex-row.flex-center', { + style: { + width: '100%', + } + }, [ + h('button.btn-clear', { + textAlign: 'center' + }, 'BUY'), - h('button.btn-clear', { - textAlign: 'center' - }, 'SEND'), + h('button.btn-clear', { + textAlign: 'center' + }, 'SEND'), + ]), ]), + ]), h('div.flex-row', { -- cgit From 966b25573b04cc9562ba7eb5d345cf48789ddfd9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 14:03:44 -0700 Subject: Move remaining debug, fonts, reset, and transitions into inverted triangle --- ui/app/components/tx-view.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index dc9a7985f..36c22897e 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -100,11 +100,15 @@ TxView.prototype.render = function () { } }, [ h('button.btn-clear', { - textAlign: 'center' + style: { + textAlign: 'center', + }, }, 'BUY'), h('button.btn-clear', { - textAlign: 'center' + style: { + textAlign: 'center', + }, }, 'SEND'), ]), -- 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/tx-view.js | 47 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 6 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 36c22897e..75c8a2c11 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -7,7 +7,7 @@ const actions = require('../actions') const SlideoutMenu = require('react-burger-menu').slide const WalletView = require('./wallet-view') -// const Identicon = require('./identicon') +const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') @@ -41,6 +41,8 @@ function TxView () { } TxView.prototype.render = function () { + const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address + return h('div.tx-view.flex-column', { style: { flexGrow: 2, @@ -49,16 +51,49 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ - h('div.phone-visible.fa.fa-bars', { - onClick: () => { - this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() + + h('div.flex-row.phone-visible', { + style: { + margin: '1em 0.9em', + alignItems: 'center' } }, [ + // burger + h('div.fa.fa-bars', { + style: { + fontSize: '1.3em', + }, + onClick: () => { + this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() + } + }, []), + + //account display + h('.identicon-wrapper.select-none', { + style: { + marginLeft: '0.9em', + }, + }, [ + h(Identicon, { + diameter: 24, + address: selected, + }), + ]), + + h('span', { + style: { + fontSize: '1.2em', + marginLeft: '0.5em', // TODO: switch all units for this component to em + } + }, [ + 'Account 1' + ]), + ]), h('div.flex-row', { style: { - margin: '1.8em 1.3em 0.8em 1.3em', + margin: '1.8em 0.9em 0.8em 0.9em', // flex: '1 0 520px', } }, [ @@ -119,7 +154,7 @@ TxView.prototype.render = function () { h('div.flex-row', { style: { - margin: '1.8em 1.3em 0.8em 1.3em', + margin: '1.8em 0.9em 0.8em 0.9em', } }, [ -- cgit From 802c29c98642043cf679eb2658934e0420f8ecc7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 15:46:55 -0700 Subject: Implement hero balance UI, mobile --- ui/app/components/tx-view.js | 89 +++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 51 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 75c8a2c11..77ca87834 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -91,65 +91,52 @@ TxView.prototype.render = function () { ]), - h('div.flex-row', { - style: { - margin: '1.8em 0.9em 0.8em 0.9em', - // flex: '1 0 520px', - } + // laptop: flex-row, flex-center + // mobile: flex-column + h('div.hero-balance', { + style: {}, }, [ - // laptop: flex-row - // mobile: flex-column - h('div.flex-row.flex-center', { - style: { - } - }, [ - - // laptop: 50px 50px - // mobile: 100px 100px - h('img', { - src: '../images/eth_logo.svg', - width: '50px', - height: '50px', - style: { - borderRadius: '25px', - border: '1px solid', - } - }), - - // laptop: 5vw? - // phone: 50vw? - h('div.flex-column.flex-center', { + // laptop: 50px 50px + // mobile: 100px 100px + h('img.hero-balance-icon', { + src: '../images/eth_logo.svg', + width: '60px', + height: '60px', + style: {} + }), + + // laptop: 5vw? + // phone: 50vw? + h('div.hero-balance-display', {}, [ + h('div.token-amount', { style: {} - }, [ - h('div', {}, '1001.124 ETH'), + }, '1001.124 ETH'), - h('div', {}, '$300,000 USD'), - ]), + h('div.fiat-amount', { + style: {} + }, '$300,000 USD'), + ]), - // laptop: 10vw? - // phone: 75vw? - h('div.flex-row.flex-center', { + // laptop: 10vw? + // phone: 75vw? + h('div.flex-row.flex-center.hero-balance-buttons', { + style: {} + }, [ + h('button.btn-clear', { style: { - width: '100%', - } - }, [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, - }, 'BUY'), - - h('button.btn-clear', { - style: { - textAlign: 'center', - }, - }, 'SEND'), - - ]), - ]), + textAlign: 'center', + }, + }, 'BUY'), + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '1.4em', + }, + }, 'SEND'), + ]), ]), h('div.flex-row', { -- 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/tx-view.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 77ca87834..3652a43a6 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -45,9 +45,7 @@ TxView.prototype.render = function () { return h('div.tx-view.flex-column', { style: { - flexGrow: 2, - flexShrink: 0, - flexBasis: '230px', + flex: '62 0 62%', background: '#FFFFFF', } }, [ -- cgit From dc0f78c1b986a57313d465fd352235eb36bbe828 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:58:45 -0700 Subject: Fix font size of eth display for 576-780px vw --- ui/app/components/tx-view.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 3652a43a6..193abe8dc 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -99,8 +99,6 @@ TxView.prototype.render = function () { // mobile: 100px 100px h('img.hero-balance-icon', { src: '../images/eth_logo.svg', - width: '60px', - height: '60px', style: {} }), -- cgit From 403d9c52b506e31fa31b385b61fd167f81b5ff88 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 18:06:23 -0700 Subject: Add fine css tweaks to hero balance - laptop --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 193abe8dc..164684821 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -104,7 +104,7 @@ TxView.prototype.render = function () { // laptop: 5vw? // phone: 50vw? - h('div.hero-balance-display', {}, [ + h('div.flex-column.hero-balance-display', {}, [ h('div.token-amount', { style: {} }, '1001.124 ETH'), -- 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/tx-view.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 164684821..ed8f05e95 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -78,11 +78,8 @@ TxView.prototype.render = function () { }), ]), - h('span', { - style: { - fontSize: '1.2em', - marginLeft: '0.5em', // TODO: switch all units for this component to em - } + h('span.account-name', { + style: {} }, [ 'Account 1' ]), -- cgit From b3d7abd5d4c0900ce7646519174891b6a51a6ac7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:29:51 -0700 Subject: Allow clicks on account view to enable sidebar, not just burger --- ui/app/components/tx-view.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index ed8f05e95..2bc6daae5 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -54,16 +54,16 @@ TxView.prototype.render = function () { style: { margin: '1em 0.9em', alignItems: 'center' - } + }, + onClick: () => { + this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() + }, }, [ // burger h('div.fa.fa-bars', { style: { fontSize: '1.3em', }, - onClick: () => { - this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() - } }, []), //account display -- 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/tx-view.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 6b8e9e4dd..97b9a89f4 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -43,10 +43,7 @@ TxView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address return h('div.tx-view.flex-column', { - style: { - flex: '62 0 62%', - background: '#FFFFFF', - } + style: {}, }, [ h('div.flex-row.phone-visible', { -- cgit From e8ade42f2aa3af6e0091e939beef3fdf769a2606 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Tue, 8 Aug 2017 16:49:45 +0800 Subject: extracted balance component and renders to the format, also wired in the account name --- ui/app/components/tx-view.js | 49 +++++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 23 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 97b9a89f4..d0337fcb1 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -1,11 +1,15 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') // slideout menu const WalletView = require('./wallet-view') +// balance component +const BalanceComponent = require('./balance-component') + const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') @@ -15,13 +19,18 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) function mapStateToProps (state) { return { sidebarOpen: state.appState.sidebarOpen, + identities: state.metamask.identities, + accounts: state.metamask.accounts, + address: state.metamask.selectedAddress, + conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } function mapDispatchToProps (dispatch) { return { - showSidebar: () => {dispatch(actions.showSidebar())}, - hideSidebar: () => {dispatch(actions.hideSidebar())}, + showSidebar: () => { dispatch(actions.showSidebar()) }, + hideSidebar: () => { dispatch(actions.hideSidebar()) }, } } @@ -40,7 +49,13 @@ function TxView () { } TxView.prototype.render = function () { - const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address + + var props = this.props + var selected = props.address || Object.keys(props.accounts)[0] + var checksumAddress = selected && ethUtil.toChecksumAddress(selected) + var identity = props.identities[selected] + var account = props.accounts[selected] + const { conversionRate, currentCurrency } = props return h('div.tx-view.flex-column', { style: {}, @@ -62,7 +77,7 @@ TxView.prototype.render = function () { }, }, []), - //account display + // account display h('.identicon-wrapper.select-none', { style: { marginLeft: '0.9em', @@ -75,9 +90,9 @@ TxView.prototype.render = function () { ]), h('span.account-name', { - style: {} + style: {}, }, [ - 'Account 1' + identity.name, ]), ]), @@ -88,25 +103,13 @@ TxView.prototype.render = function () { style: {}, }, [ - // laptop: 50px 50px - // mobile: 100px 100px - h('img.hero-balance-icon', { - src: '../images/eth_logo.svg', - style: {} + h(BalanceComponent, { + balanceValue: account && account.balance, + conversionRate, + currentCurrency, + style: {}, }), - // laptop: 5vw? - // phone: 50vw? - h('div.flex-column.hero-balance-display', {}, [ - h('div.token-amount', { - style: {} - }, '1001.124 ETH'), - - h('div.fiat-amount', { - style: {} - }, '$300,000 USD'), - ]), - // laptop: 10vw? // phone: 75vw? h('div.flex-row.flex-center.hero-balance-buttons', { -- cgit From 29c8f448ca683f0dbdd2ef046463500121e5e24e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 13:37:52 -0700 Subject: Hook up global modal to Tx view, Buy button --- ui/app/components/tx-view.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index d0337fcb1..9d7bc9138 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -31,6 +31,7 @@ function mapDispatchToProps (dispatch) { return { showSidebar: () => { dispatch(actions.showSidebar()) }, hideSidebar: () => { dispatch(actions.hideSidebar()) }, + showModal: () => { dispatch(actions.showModal()) }, } } @@ -119,6 +120,9 @@ TxView.prototype.render = function () { style: { textAlign: 'center', }, + onClick: () => { + this.props.showModal() + }, }, 'BUY'), h('button.btn-clear', { -- cgit From 9d36b25c5f11fccd0f3517901ff9cfc583cc3816 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Wed, 9 Aug 2017 18:10:51 +0800 Subject: extracted transaction list --- ui/app/components/tx-view.js | 112 ++++--------------------------------------- 1 file changed, 10 insertions(+), 102 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 9d7bc9138..f0a93a2ab 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -10,6 +10,9 @@ const WalletView = require('./wallet-view') // balance component const BalanceComponent = require('./balance-component') +// tx list +const TxList = require('./tx-list') + const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') @@ -22,6 +25,8 @@ function mapStateToProps (state) { identities: state.metamask.identities, accounts: state.metamask.accounts, address: state.metamask.selectedAddress, + transactions: state.metamask.selectedAddressTxList || [], + shapeShiftTxList: state.metamask.shapeShiftTxList, conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, } @@ -35,15 +40,6 @@ function mapDispatchToProps (dispatch) { } } -const contentDivider = h('div', { - style: { - marginLeft: '1.3em', - marginRight: '1.3em', - height:'1px', - background:'#E7E7E7', // TODO: make custom color - }, -}) - inherits(TxView, Component) function TxView () { Component.call(this) @@ -56,7 +52,9 @@ TxView.prototype.render = function () { var checksumAddress = selected && ethUtil.toChecksumAddress(selected) var identity = props.identities[selected] var account = props.accounts[selected] - const { conversionRate, currentCurrency } = props + const { conversionRate, currentCurrency, transactions } = props + + console.log(transactions) return h('div.tx-view.flex-column', { style: {}, @@ -114,7 +112,7 @@ TxView.prototype.render = function () { // laptop: 10vw? // phone: 75vw? h('div.flex-row.flex-center.hero-balance-buttons', { - style: {} + style: {}, }, [ h('button.btn-clear', { style: { @@ -135,97 +133,7 @@ TxView.prototype.render = function () { ]), ]), - h('div.flex-row', { - style: { - margin: '1.8em 0.9em 0.8em 0.9em', - } - }, [ - - // tx-view-tab.js - h('div.flex-row', { - }, [ - - h('div', { - style: { - borderBottom: '0.07em solid black', - paddingBottom: '0.015em', - } - }, 'TRANSACTIONS'), - - h('div', { - style: { - marginLeft: '1.25em', - } - }, 'TOKENS'), - - ]), - ]), - - contentDivider, - - this.renderTransactionListItem(), - - contentDivider, - - this.renderTransactionListItem(), - - contentDivider, + h(TxList, {}), ]) - // column - // tab row - // divider - // item } - -TxView.prototype.renderTransactionListItem = function () { - return h('div.flex-column', { - style: { - alignItems: 'stretch', - margin: '0.6em 1.3em 0.6em 1.3em', - } - }, [ - - h('div', { - style: { - flexGrow: 1, - marginTop: '0.3em', - } - }, 'Jul 01, 2017'), - - h('div.flex-row', { - style: { - alignItems: 'stretch', - } - }, [ - - h('div', { - style: { - flexGrow: 1, - } - }, 'icon'), - - h('div', { - style: { - flexGrow: 3, - } - }, 'Hash'), - - h('div', { - style: { - flexGrow: 5, - } - }, 'Status'), - - h('div', { - style: { - flexGrow: 2, - } - }, 'Details'), - - ]) - - ]) -} - - -- cgit From 53c91591b34eea68e0f8b834e33c451ca48d3a7c Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Thu, 10 Aug 2017 11:17:39 +0800 Subject: redid tx-view and balance-component mapStateToProps logic --- ui/app/components/tx-view.js | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index f0a93a2ab..ba93aae8b 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -20,15 +20,21 @@ const Identicon = require('./identicon') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) function mapStateToProps (state) { + const sidebarOpen = state.appState.sidebarOpen + + const identities = state.metamask.identities + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) + const identity = identities[selectedAddress] + const account = accounts[selectedAddress] + return { - sidebarOpen: state.appState.sidebarOpen, - identities: state.metamask.identities, - accounts: state.metamask.accounts, - address: state.metamask.selectedAddress, - transactions: state.metamask.selectedAddressTxList || [], - shapeShiftTxList: state.metamask.shapeShiftTxList, - conversionRate: state.metamask.conversionRate, - currentCurrency: state.metamask.currentCurrency, + sidebarOpen, + selectedAddress, + checksumAddress, + identity, + account, } } @@ -47,14 +53,7 @@ function TxView () { TxView.prototype.render = function () { - var props = this.props - var selected = props.address || Object.keys(props.accounts)[0] - var checksumAddress = selected && ethUtil.toChecksumAddress(selected) - var identity = props.identities[selected] - var account = props.accounts[selected] - const { conversionRate, currentCurrency, transactions } = props - - console.log(transactions) + const { selectedAddress, identity, account } = this.props return h('div.tx-view.flex-column', { style: {}, @@ -63,7 +62,7 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { margin: '1em 0.9em', - alignItems: 'center' + alignItems: 'center', }, onClick: () => { this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() @@ -84,7 +83,7 @@ TxView.prototype.render = function () { }, [ h(Identicon, { diameter: 24, - address: selected, + address: selectedAddress, }), ]), @@ -104,8 +103,6 @@ TxView.prototype.render = function () { h(BalanceComponent, { balanceValue: account && account.balance, - conversionRate, - currentCurrency, style: {}, }), -- cgit From 96b186dfb2a96561d6a0ba50846cd610c484b688 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 19:35:10 -0700 Subject: Cleanup txList and txView components --- ui/app/components/tx-view.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index ba93aae8b..0d1f3fc31 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -4,18 +4,11 @@ const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') -// slideout menu -const WalletView = require('./wallet-view') -// balance component +const WalletView = require('./wallet-view') const BalanceComponent = require('./balance-component') - -// tx list const TxList = require('./tx-list') - const Identicon = require('./identicon') -// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns -// const Content = require('./wallet-content-display') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) @@ -68,14 +61,13 @@ TxView.prototype.render = function () { this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() }, }, [ - // burger + h('div.fa.fa-bars', { style: { fontSize: '1.3em', }, }, []), - // account display h('.identicon-wrapper.select-none', { style: { marginLeft: '0.9em', @@ -95,8 +87,6 @@ TxView.prototype.render = function () { ]), - // laptop: flex-row, flex-center - // mobile: flex-column h('div.hero-balance', { style: {}, }, [ @@ -106,8 +96,6 @@ TxView.prototype.render = function () { style: {}, }), - // laptop: 10vw? - // phone: 75vw? h('div.flex-row.flex-center.hero-balance-buttons', { style: {}, }, [ -- cgit From 4e9376ca7129611d12a7ec263741f1dee0e4d79c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 18:32:58 -0700 Subject: Extend modal implementation and state management to accomodate multiple modal types --- ui/app/components/tx-view.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 0d1f3fc31..265893104 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -35,7 +35,7 @@ function mapDispatchToProps (dispatch) { return { showSidebar: () => { dispatch(actions.showSidebar()) }, hideSidebar: () => { dispatch(actions.hideSidebar()) }, - showModal: () => { dispatch(actions.showModal()) }, + showModal: (payload) => { dispatch(actions.showModal(payload)) }, } } @@ -104,7 +104,9 @@ TxView.prototype.render = function () { textAlign: 'center', }, onClick: () => { - this.props.showModal() + this.props.showModal({ + name: 'BUY', + }) }, }, 'BUY'), -- cgit From b0759ddc1881179edaf27a6cd57e5fb27bdd2c31 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 12:53:15 -0700 Subject: Hook up send screen action to Send Button in TxView --- ui/app/components/tx-view.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 265893104..dbbf07710 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -36,6 +36,7 @@ function mapDispatchToProps (dispatch) { showSidebar: () => { dispatch(actions.showSidebar()) }, hideSidebar: () => { dispatch(actions.hideSidebar()) }, showModal: (payload) => { dispatch(actions.showModal(payload)) }, + showSendPage: () => { dispatch(actions.showSendPage()) }, } } @@ -115,6 +116,9 @@ TxView.prototype.render = function () { textAlign: 'center', marginLeft: '1.4em', }, + onClick: () => { + this.props.showSendPage() + }, }, 'SEND'), ]), -- cgit From 5b62f10a5f0fc87a731c9c353e99770f0f66d085 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 22 Aug 2017 21:12:17 -0230 Subject: Modify buy and send buttons color, border-radius and various size properties. (#1956) --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index dbbf07710..5ed103421 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -114,7 +114,7 @@ TxView.prototype.render = function () { h('button.btn-clear', { style: { textAlign: 'center', - marginLeft: '1.4em', + marginLeft: '0.8em', }, onClick: () => { this.props.showSendPage() -- 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/tx-view.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 5ed103421..9f75f7b31 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -5,7 +5,6 @@ const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') -const WalletView = require('./wallet-view') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') -- 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/tx-view.js | 75 +++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 36 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 9f75f7b31..d7e4a5b4b 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -4,10 +4,12 @@ const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') +const selectors = require('../selectors') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') +const TokenBalance = require('./token-balance') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) @@ -16,6 +18,7 @@ function mapStateToProps (state) { const identities = state.metamask.identities const accounts = state.metamask.accounts + const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) const identity = identities[selectedAddress] @@ -25,6 +28,8 @@ function mapStateToProps (state) { sidebarOpen, selectedAddress, checksumAddress, + selectedTokenAddress, + selectedToken: selectors.getSelectedToken(state), identity, account, } @@ -44,9 +49,41 @@ function TxView () { Component.call(this) } +TxView.prototype.renderHeroBalance = function () { + const {account, selectedToken, showModal, showSendPage } = this.props + + return h('div.hero-balance', {}, [ + + h(BalanceComponent, { + balanceValue: account && account.balance, + token: selectedToken, + }), + + h('div.flex-row.flex-center.hero-balance-buttons', {}, [ + h('button.btn-clear', { + style: { + textAlign: 'center', + }, + onClick: () => showModal({ + name: 'BUY', + }), + }, 'BUY'), + + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '0.8em', + }, + onClick: showSendPage, + }, 'SEND'), + + ]), + ]) +} + TxView.prototype.render = function () { - const { selectedAddress, identity, account } = this.props + const { selectedAddress, identity } = this.props return h('div.tx-view.flex-column', { style: {}, @@ -87,41 +124,7 @@ TxView.prototype.render = function () { ]), - h('div.hero-balance', { - style: {}, - }, [ - - h(BalanceComponent, { - balanceValue: account && account.balance, - style: {}, - }), - - h('div.flex-row.flex-center.hero-balance-buttons', { - style: {}, - }, [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, - onClick: () => { - this.props.showModal({ - name: 'BUY', - }) - }, - }, 'BUY'), - - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, - onClick: () => { - this.props.showSendPage() - }, - }, 'SEND'), - - ]), - ]), + this.renderHeroBalance(), h(TxList, {}), -- 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/tx-view.js | 73 ++++++++++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 29 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index d7e4a5b4b..c9be0d67d 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -9,7 +9,6 @@ const selectors = require('../selectors') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') -const TokenBalance = require('./token-balance') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) @@ -18,11 +17,11 @@ function mapStateToProps (state) { const identities = state.metamask.identities const accounts = state.metamask.accounts + const network = state.metamask.network const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) const identity = identities[selectedAddress] - const account = accounts[selectedAddress] return { sidebarOpen, @@ -31,7 +30,7 @@ function mapStateToProps (state) { selectedTokenAddress, selectedToken: selectors.getSelectedToken(state), identity, - account, + network, } } @@ -50,40 +49,55 @@ function TxView () { } TxView.prototype.renderHeroBalance = function () { - const {account, selectedToken, showModal, showSendPage } = this.props + const { selectedToken } = this.props return h('div.hero-balance', {}, [ - h(BalanceComponent, { - balanceValue: account && account.balance, - token: selectedToken, - }), + h(BalanceComponent, { token: selectedToken }), - h('div.flex-row.flex-center.hero-balance-buttons', {}, [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, - onClick: () => showModal({ - name: 'BUY', - }), - }, 'BUY'), - - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, - onClick: showSendPage, - }, 'SEND'), - - ]), + this.renderButtons(), ]) } -TxView.prototype.render = function () { +TxView.prototype.renderButtons = function () { + const {selectedToken, showModal, showSendPage } = this.props + + return !selectedToken + ? ( + h('div.flex-row.flex-center.hero-balance-buttons', [ + h('button.btn-clear', { + style: { + textAlign: 'center', + }, + onClick: () => showModal({ + name: 'BUY', + }), + }, 'BUY'), + + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '0.8em', + }, + onClick: showSendPage, + }, 'SEND'), + ]) + ) + : ( + h('div.flex-row.flex-center.hero-balance-buttons', [ + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '0.8em', + }, + onClick: showSendPage, + }, 'SEND'), + ]) + ) +} - const { selectedAddress, identity } = this.props +TxView.prototype.render = function () { + const { selectedAddress, identity, network } = this.props return h('div.tx-view.flex-column', { style: {}, @@ -113,6 +127,7 @@ TxView.prototype.render = function () { h(Identicon, { diameter: 24, address: selectedAddress, + network, }), ]), -- cgit From 8b919758e51e16536b6edaf33d4978d551363249 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 04:24:03 -0700 Subject: Send Token screen partial UI --- ui/app/components/tx-view.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c9be0d67d..f5ac6e2dc 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -40,6 +40,7 @@ function mapDispatchToProps (dispatch) { hideSidebar: () => { dispatch(actions.hideSidebar()) }, showModal: (payload) => { dispatch(actions.showModal(payload)) }, showSendPage: () => { dispatch(actions.showSendPage()) }, + showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) }, } } @@ -60,7 +61,7 @@ TxView.prototype.renderHeroBalance = function () { } TxView.prototype.renderButtons = function () { - const {selectedToken, showModal, showSendPage } = this.props + const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props return !selectedToken ? ( @@ -90,7 +91,7 @@ TxView.prototype.renderButtons = function () { textAlign: 'center', marginLeft: '0.8em', }, - onClick: showSendPage, + onClick: showSendTokenPage, }, 'SEND'), ]) ) -- cgit From ca69fa5d910351e1c813a431df9603b34cb7a901 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 11:38:21 -0700 Subject: Re-enable Contract tx list item --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index f5ac6e2dc..59f55d485 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -142,7 +142,7 @@ TxView.prototype.render = function () { this.renderHeroBalance(), - h(TxList, {}), + h(TxList), ]) } -- cgit From bef1405a50af219dc02108d7f437654690aec73e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 22 Oct 2017 22:59:55 -0700 Subject: Change all "Buy" to "Deposit" --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 59f55d485..d903998c0 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -73,7 +73,7 @@ TxView.prototype.renderButtons = function () { onClick: () => showModal({ name: 'BUY', }), - }, 'BUY'), + }, 'DEPOSIT'), h('button.btn-clear', { style: { -- cgit From 4401800a42eccbd77f11b332e1052431328401bb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:13:49 -0700 Subject: Account menu white check mark --- ui/app/components/tx-view.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index d903998c0..ebef22680 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -109,14 +109,15 @@ TxView.prototype.render = function () { margin: '1em 0.9em', alignItems: 'center', }, - onClick: () => { - this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() - }, }, [ h('div.fa.fa-bars', { style: { fontSize: '1.3em', + cursor: 'pointer', + }, + onClick: () => { + this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() }, }, []), -- cgit From 05c6789030791bd1b46434cf89c1817db37e8f38 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 21:18:08 -0330 Subject: Adds button for opening app in main browser window in extension. --- ui/app/components/tx-view.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index ebef22680..832f8e56a 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -107,6 +107,7 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { margin: '1em 0.9em', + justifyContent: 'space-between', alignItems: 'center', }, }, [ @@ -139,6 +140,10 @@ TxView.prototype.render = function () { identity.name, ]), + h('div.open-in-browser', { + onClick: () => global.platform.openExtensionInBrowser(), + }, [h('img', { src: 'images/open.svg' })]) + ]), this.renderHeroBalance(), -- cgit From 4b654669e692665aba88a14cb5804370dbfd4a80 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 21:52:31 -0330 Subject: Hide open in browser button on mobile (but still show on extension); adds a function to detect if viewing with mobile browser. --- ui/app/components/tx-view.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 832f8e56a..bd52ac4c2 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -3,6 +3,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits +const isMobileBrowser = require('../../lib/is-mobile-browser') const actions = require('../actions') const selectors = require('../selectors') @@ -140,9 +141,9 @@ TxView.prototype.render = function () { identity.name, ]), - h('div.open-in-browser', { + !isMobileBrowser() && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), - }, [h('img', { src: 'images/open.svg' })]) + }, [h('img', { src: 'images/open.svg' })]), ]), -- cgit From 57c91435a7357165441252acfffcdaff6e54e422 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 12 Dec 2017 16:21:05 -0330 Subject: Substitute isMascara check for explicit check if user is on mobile browser. --- ui/app/components/tx-view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index bd52ac4c2..0f8a54a74 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -15,6 +15,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen + const isMascara = state.appState.isMascara const identities = state.metamask.identities const accounts = state.metamask.accounts @@ -141,7 +142,7 @@ TxView.prototype.render = function () { identity.name, ]), - !isMobileBrowser() && h('div.open-in-browser', { + !isMascara && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), }, [h('img', { src: 'images/open.svg' })]), -- cgit From 515437a4c956e47a5f1d4522715a9021e08d3408 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 12 Dec 2017 12:22:22 -0800 Subject: Fix isMascara and update yarn.lock --- ui/app/components/tx-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 0f8a54a74..e42a20c85 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -3,7 +3,6 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits -const isMobileBrowser = require('../../lib/is-mobile-browser') const actions = require('../actions') const selectors = require('../selectors') @@ -33,6 +32,7 @@ function mapStateToProps (state) { selectedToken: selectors.getSelectedToken(state), identity, network, + isMascara, } } @@ -100,7 +100,7 @@ TxView.prototype.renderButtons = function () { } TxView.prototype.render = function () { - const { selectedAddress, identity, network } = this.props + const { selectedAddress, identity, network, isMascara } = this.props return h('div.tx-view.flex-column', { style: {}, -- cgit From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 10 Jan 2018 21:09:09 -0800 Subject: Update main view styling --- ui/app/components/tx-view.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index e42a20c85..7bddbbef4 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, + h('button.hero-balance-button', { onClick: () => showModal({ name: 'BUY', }), }, 'DEPOSIT'), - h('button.btn-clear', { + h('button.hero-balance-button', { style: { - textAlign: 'center', marginLeft: '0.8em', }, onClick: showSendPage, @@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, + h('button.hero-balance-button', { onClick: showSendTokenPage, }, 'SEND'), ]) -- 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/tx-view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 7bddbbef4..72183f0f7 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -68,13 +68,13 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { onClick: () => showModal({ name: 'BUY', }), }, 'DEPOSIT'), - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { style: { marginLeft: '0.8em', }, @@ -84,7 +84,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { onClick: showSendTokenPage, }, 'SEND'), ]) -- cgit From 5c1dcf3e9bdb317dd8b42aadb18657eb4bfa2e0f Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 12 Jan 2018 16:18:18 -0330 Subject: [NewUI-flat] New deposit ether modal UI. (#2642) * New deposit ether modal. * New deposit modal full screen on mobile, and other style fixes. * Hide shapeshift option from deposit modal for now. * Add shapeshift form to new deposit modal. * Store recipient address for shapeshift tx in background. * Use Simpledropdown to achieve desired styling in coin selector. * Lint fix * Fix typos and remove dead code. * Remove storage of shapeshift receiving address from background. * Fix typos --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index e42a20c85..949d91f6f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -73,7 +73,7 @@ TxView.prototype.renderButtons = function () { textAlign: 'center', }, onClick: () => showModal({ - name: 'BUY', + name: 'DEPOSIT_ETHER', }), }, 'DEPOSIT'), -- cgit From f8bf8cb527ae0e24ccf9d1c9f2f6baa457f2e659 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 17 Jan 2018 17:37:18 -0800 Subject: Update popout to fullscreen icon --- ui/app/components/tx-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/tx-view.js') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 0148b32a5..b25d8e0f9 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -100,7 +100,7 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { - margin: '1em 0.9em', + margin: '1.5em 1.2em 0', justifyContent: 'space-between', alignItems: 'center', }, @@ -136,7 +136,7 @@ TxView.prototype.render = function () { !isMascara && h('div.open-in-browser', { onClick: () => global.platform.openExtensionInBrowser(), - }, [h('img', { src: 'images/open.svg' })]), + }, [h('img', { src: 'images/popout.svg' })]), ]), -- cgit