From 8c5be547228c9801ab616beb5054b888509463f9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 12:21:10 -0700 Subject: Rearrange header components: closer to redesigned UI --- ui/app/app.js | 49 ++++++++++++++++++------------------------------- 1 file changed, 18 insertions(+), 31 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 8fad0f7d6..6537e2f56 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -82,7 +82,7 @@ App.prototype.render = function () { // app bar this.renderAppBar(), this.renderNetworkDropdown(), - this.renderDropdown(), + // this.renderDropdown(), h(Loading, { isLoading: isLoading || isLoadingNetwork, @@ -120,7 +120,7 @@ App.prototype.renderAppBar = function () { style: { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', - background: props.isUnlocked ? 'white' : 'none', + background: '#EFEFEF', // $gallery height: '38px', position: 'relative', zIndex: 12, @@ -134,7 +134,6 @@ App.prototype.renderAppBar = function () { alignItems: 'center', }, }, [ - // mini logo h('img', { height: 24, @@ -142,46 +141,34 @@ App.prototype.renderAppBar = function () { src: '/images/icon-128.png', }), - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + // metamask name + h('h1', { + style: { + position: 'relative', + left: '9px', }, - }), - ]), + }, 'MetaMask'), - // metamask name - props.isUnlocked && h('h1', { - style: { - position: 'relative', - left: '9px', - }, - }, 'MetaMask'), + ]), - props.isUnlocked && h('div', { + h('div', { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', }, }, [ - - // hamburger - props.isUnlocked && h(SandwichExpando, { - width: 16, - barHeight: 2, - padding: 0, - isOpen: state.isMainMenuOpen, - color: 'rgb(247,146,30)', + // Network Indicator + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, onClick: (event) => { event.preventDefault() event.stopPropagation() - this.setState({ isMainMenuOpen: !state.isMainMenuOpen }) + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) }, }), + ]), ]), ]) @@ -213,8 +200,8 @@ App.prototype.renderNetworkDropdown = function () { zIndex: 11, style: { position: 'absolute', - left: '2px', - top: '36px', + right: '2px', + top: '38px', }, innerStyle: { padding: '2px 16px 2px 0px', -- cgit From c0483fc230ec1893f15c6f8994f63e318474846e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 13:31:53 -0700 Subject: Add token logo to send screen --- ui/app/app.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 6537e2f56..2eb037460 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -171,6 +171,16 @@ App.prototype.renderAppBar = function () { ]), ]), + + h('.app-header', { + style: { + visibility: props.isUnlocked ? 'visible' : 'none', + background: '#EFEFEF', // $gallery + height: '38px', + position: 'relative', + zIndex: 12, + }, + }) ]) ) } -- cgit From 970988167982a79c131331a7585512b5e53c9a95 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 18:54:21 -0700 Subject: Center send token content; hook up 'Next' and 'Cancel' buttons --- ui/app/app.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 2eb037460..0f26f8add 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,15 +172,17 @@ App.prototype.renderAppBar = function () { ]), ]), - h('.app-header', { - style: { - visibility: props.isUnlocked ? 'visible' : 'none', - background: '#EFEFEF', // $gallery - height: '38px', - position: 'relative', - zIndex: 12, - }, - }) + // extra app-header space + + // h('.app-header', { + // style: { + // visibility: props.isUnlocked ? 'visible' : 'none', + // background: '#EFEFEF', // $gallery + // height: '38px', + // position: 'relative', + // zIndex: 12, + // }, + // }) ]) ) } -- cgit From dd3766242dcdfd334f79367793d2b27bfcc36eb6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 19:52:27 -0700 Subject: Adjust dimensions of popup.html and app bar to match --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 0f26f8add..7f844560c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -121,7 +121,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '38px', + height: '11%', position: 'relative', zIndex: 12, }, -- cgit From b15575b4530d4c1830af0471e9fb5bc1ee689ee3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 20:02:42 -0700 Subject: Remove old header space --- ui/app/app.js | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7f844560c..4d70f9df9 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,17 +172,6 @@ App.prototype.renderAppBar = function () { ]), ]), - // extra app-header space - - // h('.app-header', { - // style: { - // visibility: props.isUnlocked ? 'visible' : 'none', - // background: '#EFEFEF', // $gallery - // height: '38px', - // position: 'relative', - // zIndex: 12, - // }, - // }) ]) ) } -- cgit From ca1a4b309676c3d10473acf4869b398d4ed50fb7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 20:42:12 -0700 Subject: Add layout for main container elements --- ui/app/app.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 4d70f9df9..4f877bc51 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,7 @@ const NewKeyChainScreen = require('./new-keychain') // unlock const UnlockScreen = require('./unlock') // accounts -const AccountDetailScreen = require('./account-detail') +const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice @@ -90,13 +90,7 @@ App.prototype.render = function () { }), // panel content - h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { - style: { - maxWidth: '850px', - }, - }, [ - this.renderPrimary(), - ]), + this.renderPrimary(), ]) ) } @@ -121,7 +115,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '11%', + height: '11vh', position: 'relative', zIndex: 12, }, @@ -132,6 +126,7 @@ App.prototype.renderAppBar = function () { display: 'flex', flexDirection: 'row', alignItems: 'center', + marginBottom: '1.8em', }, }, [ // mini logo @@ -156,6 +151,7 @@ App.prototype.renderAppBar = function () { display: 'flex', flexDirection: 'row', alignItems: 'center', + marginBottom: '1.8em', }, }, [ // Network Indicator @@ -419,8 +415,8 @@ App.prototype.renderPrimary = function () { switch (props.currentView.name) { case 'accountDetail': - log.debug('rendering account detail screen') - return h(AccountDetailScreen, {key: 'account-detail'}) + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) case 'sendTransaction': log.debug('rendering send tx screen') @@ -488,7 +484,7 @@ App.prototype.renderPrimary = function () { default: log.debug('rendering default, account detail screen') - return h(AccountDetailScreen, {key: 'account-detail'}) + return h(MainContainer, {key: 'account-detail'}) } } -- 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/app.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 4f877bc51..021ef5f27 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -73,7 +73,9 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { // Windows was showing a vertical scroll bar: - overflow: 'hidden', + overflowX: 'hidden', + // TODO: check with dev who committed L75, see if this still happens, and whether auto is enough + // overflowY: 'auto', position: 'relative', alignItems: 'center', }, -- 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/app.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 021ef5f27..2a07b57d3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -39,6 +39,7 @@ function App () { Component.call(this) } function mapStateToProps (state) { return { // state from plugin + sidebarOpen: state.appState.sidebarOpen, isLoading: state.appState.isLoading, loadingMessage: state.appState.loadingMessage, noActiveNotices: state.metamask.noActiveNotices, -- 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/app.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 2a07b57d3..7cf000d76 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -15,6 +15,11 @@ const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./components/notice') const generateLostAccountsNotice = require('../lib/lost-accounts-notice') + +// slideout menu +const WalletView = require('./components/wallet-view') +const SlideoutMenu = require('react-burger-menu').slide + // other views const ConfigScreen = require('./config') const AddTokenScreen = require('./add-token') @@ -63,7 +68,7 @@ function mapStateToProps (state) { App.prototype.render = function () { var props = this.props - const { isLoading, loadingMessage, transForward, network } = props + const { isLoading, loadingMessage, transForward, network, sidebarOpen } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null @@ -82,8 +87,23 @@ App.prototype.render = function () { }, }, [ + // app bar this.renderAppBar(), + + // slideout - move to separate render func + this.renderSidebar(), + // h('div.phone-visible', {} ,[ + // h(SlideoutMenu, { + // isOpen: false, + // }, [ + // h(WalletView, { + // responsiveDisplayClassname: '.phone-visible', + // }), + // ]), + // ]) + + // network dropdown this.renderNetworkDropdown(), // this.renderDropdown(), @@ -98,6 +118,52 @@ App.prototype.render = function () { ) } +App.prototype.renderSidebar = function() { + if (!this.props.sidebarOpen) { + return null; + } + + return h('div.phone-visible', {}, [ + // content + h(WalletView, { + responsiveDisplayClassname: '.phone-visible', + style: { + zIndex: 26, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + transition: 'transform 0.3s ease-out', + willChange: 'transform', + transform: 'translateX(0%)', + overflowY: 'auto', + boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', + width: '85%', + height: '100%', + }, + }), + + // overlay + h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) + ]) +} + App.prototype.renderAppBar = function () { if (window.METAMASK_UI_TYPE === 'notification') { return null -- cgit From 84aba21ae9f00d5d82d8087de6938fa9526bd3d4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 14:19:13 -0700 Subject: Add notes for overlay click action --- ui/app/app.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7cf000d76..3279e0333 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -147,6 +147,7 @@ App.prototype.renderSidebar = function() { }), // overlay + // TODO: add onClick for overlay to close sidebar h('div', { style: { zIndex: 25, -- cgit From 8a39ef03c298f846171173c38912d3386d688af2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 17:49:04 -0700 Subject: Hook up css animation --- ui/app/app.js | 109 ++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 68 insertions(+), 41 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 3279e0333..9bda4966d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -35,6 +35,7 @@ const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const ReactCSSTransitionGroup = require('react-addons-css-transition-group') module.exports = connect(mapStateToProps)(App) @@ -119,49 +120,75 @@ App.prototype.render = function () { } App.prototype.renderSidebar = function() { - if (!this.props.sidebarOpen) { - return null; - } + // if (!this.props.sidebarOpen) { + // return null; + // } - return h('div.phone-visible', {}, [ - // content - h(WalletView, { - responsiveDisplayClassname: '.phone-visible', - style: { - zIndex: 26, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'transform 0.3s ease-out', - willChange: 'transform', - transform: 'translateX(0%)', - overflowY: 'auto', - boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', - width: '85%', - height: '100%', - }, - }), - - // overlay - // TODO: add onClick for overlay to close sidebar - h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', - backgroundColor: 'rgba(0, 0, 0, 0.3)', + return h('div', { + }, [ + h('style', ` + .sidebar-enter { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 500ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 500ms ease-in-out; + transform: translateX(0%); } - }, []) + .sidebar-leave.sidebar-leave-active { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 500, + transitionLeaveTimeout: 500, + }, [ + // content + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: { + zIndex: 26, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'transform 1s ease-in', + willChange: 'transform', + // transform: 'translateX(300px)', + overflowY: 'auto', + boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', + width: '85%', + height: '100%', + }, + }) : undefined, + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) : undefined, + ]) ]) } -- cgit From c312f341199b8d05e7e78c4203d7953bdf5a184e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 17:50:27 -0700 Subject: Move overlay out of transition area --- ui/app/app.js | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 9bda4966d..8552282ad 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,23 +172,24 @@ App.prototype.renderSidebar = function() { }, }) : undefined, - // overlay - // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', - backgroundColor: 'rgba(0, 0, 0, 0.3)', - } - }, []) : undefined, - ]) + ]), + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) : undefined, ]) } -- cgit From 49e37137042ba2f23dd48db92365f468f9d59e13 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 18:24:48 -0700 Subject: Cleanup send, move send token into separate func to make room for send ETH --- ui/app/app.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 8552282ad..53801ed52 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -202,6 +202,7 @@ App.prototype.renderAppBar = function () { const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false + console.log("___rendering app header;;;") return ( h('.full-width', { -- cgit From 61b4b1f947230a8d5157fab27ee8ec82e0826e02 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:13:17 -0700 Subject: Ensure app-header is rendered in responsive layout --- ui/app/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 53801ed52..7a855813f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '11vh', + height: '12vh', + maxHeight: '60px', position: 'relative', zIndex: 12, }, -- cgit From dd4586ee84ea0e6a74ad4cd6b6f058169ddd9129 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:26:46 -0700 Subject: Adjust sidebar transition using @cjeria\'s feedback --- ui/app/app.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7a855813f..21eb44b8b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -128,27 +128,27 @@ App.prototype.renderSidebar = function() { }, [ h('style', ` .sidebar-enter { - transition: transform 500ms ease-in-out; + transition: transform 300ms ease-in-out; transform: translateX(-100%); } .sidebar-enter.sidebar-enter-active { - transition: transform 500ms ease-in-out; + transition: transform 300ms ease-in-out; transform: translateX(0%); } .sidebar-leave { - transition: transform 500ms ease-in-out; + transition: transform 200ms ease-out; transform: translateX(0%); } .sidebar-leave.sidebar-leave-active { - transition: transform 500ms ease-in-out; + transition: transform 200ms ease-out; transform: translateX(-100%); } `), h(ReactCSSTransitionGroup, { transitionName: 'sidebar', - transitionEnterTimeout: 500, - transitionLeaveTimeout: 500, + transitionEnterTimeout: 300, + transitionLeaveTimeout: 200, }, [ // content this.props.sidebarOpen ? h(WalletView, { @@ -162,9 +162,7 @@ App.prototype.renderSidebar = function() { bottom: '0px', opacity: '1', visibility: 'visible', - // transition: 'transform 1s ease-in', willChange: 'transform', - // transform: 'translateX(300px)', overflowY: 'auto', boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', width: '85%', @@ -186,7 +184,6 @@ App.prototype.renderSidebar = function() { bottom: '0px', opacity: '1', visibility: 'visible', - // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', backgroundColor: 'rgba(0, 0, 0, 0.3)', } }, []) : undefined, @@ -202,7 +199,6 @@ App.prototype.renderAppBar = function () { const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false - console.log("___rendering app header;;;") return ( h('.full-width', { -- cgit From 41250f9769d3224e0b42821058cd6445fa7efaca Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:48:33 -0700 Subject: Adjust header spacing for 500px and 900px heights --- ui/app/app.js | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 21eb44b8b..19d80a728 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -88,21 +88,11 @@ App.prototype.render = function () { }, }, [ - // app bar this.renderAppBar(), - // slideout - move to separate render func + // sidebar this.renderSidebar(), - // h('div.phone-visible', {} ,[ - // h(SlideoutMenu, { - // isOpen: false, - // }, [ - // h(WalletView, { - // responsiveDisplayClassname: '.phone-visible', - // }), - // ]), - // ]) // network dropdown this.renderNetworkDropdown(), @@ -113,7 +103,7 @@ App.prototype.render = function () { loadingMessage: loadMessage, }), - // panel content + // content this.renderPrimary(), ]) ) @@ -202,7 +192,7 @@ App.prototype.renderAppBar = function () { return ( h('.full-width', { - height: '38px', + style: {} }, [ h('.app-header.flex-row.flex-space-between', { @@ -210,6 +200,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery + paddingTop: '1.5vh', height: '12vh', maxHeight: '60px', position: 'relative', -- cgit From c7ac20ff659bce3dbde67ad5ee4923eab8f00528 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 23:14:53 -0700 Subject: Finalize sidebar dimensions --- ui/app/app.js | 30 +++--------------------------- 1 file changed, 3 insertions(+), 27 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 19d80a728..c8ae28b8c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -143,39 +143,15 @@ App.prototype.renderSidebar = function() { // content this.props.sidebarOpen ? h(WalletView, { responsiveDisplayClassname: '.sidebar', - style: { - zIndex: 26, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - willChange: 'transform', - overflowY: 'auto', - boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', - width: '85%', - height: '100%', - }, + style: {}, }) : undefined, ]), // overlay // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - backgroundColor: 'rgba(0, 0, 0, 0.3)', - } + this.props.sidebarOpen ? h('div.sidebar-overlay', { + style: {} }, []) : undefined, ]) } -- 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/app.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index c8ae28b8c..4a6e7491c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -458,20 +458,10 @@ App.prototype.renderPrimary = function () { // show unlock screen if (!props.isUnlocked) { - switch (props.currentView.name) { - - case 'restoreVault': - log.debug('rendering restore vault screen') - return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - - case 'config': - log.debug('rendering config screen from unlock screen.') - return h(ConfigScreen, {key: 'config'}) - - default: - log.debug('rendering locked screen') - return h(UnlockScreen, {key: 'locked'}) - } + return h(MainContainer, { + currentViewName: props.currentView.name, + isUnlocked: props.isUnlocked, + }) } // show current view -- cgit From 0e631f6ac0b769bdc4d6d40ce4524de36e2817fc Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 00:22:41 -0700 Subject: Add notes for @Zanibar, with props.isUnlocked and currentView.name logs --- ui/app/app.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 4a6e7491c..2214809e2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -464,6 +464,10 @@ App.prototype.renderPrimary = function () { }) } + // Note for @Zanibar - isUnlocked stays true. + // console.log("props.isUnlocked", props.isUnlocked) + // console.log("props.isUnlocked", props.currentView.name) + // show current view switch (props.currentView.name) { -- cgit From a7017b824d108bbf81b8dbc994d451829c2413db Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 18:50:23 -0700 Subject: Refactor app-header css, including box shadow and z-index --- ui/app/app.js | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 2214809e2..6196040b6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,25 +172,11 @@ App.prototype.renderAppBar = function () { }, [ h('.app-header.flex-row.flex-space-between', { - style: { - alignItems: 'center', - visibility: props.isUnlocked ? 'visible' : 'none', - background: '#EFEFEF', // $gallery - paddingTop: '1.5vh', - height: '12vh', - maxHeight: '60px', - position: 'relative', - zIndex: 12, - }, + style: {}, }, [ - h('div.left-menu-section', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: '1.8em', - }, + h('div.left-menu-wrapper', { + style: {}, }, [ // mini logo h('img', { @@ -209,13 +195,8 @@ App.prototype.renderAppBar = function () { ]), - h('div', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: '1.8em', - }, + h('div.network-component-wrapper', { + style: {}, }, [ // Network Indicator h(NetworkIndicator, { -- cgit From 7cb031eeb95f031935fcb3b9c000cbc8edc4ee92 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:03:38 -0700 Subject: Add sidebar click handler to overlay --- ui/app/app.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 6196040b6..339e13fd7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -37,7 +37,7 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') -module.exports = connect(mapStateToProps)(App) +module.exports = connect(mapStateToProps, mapDispatchToProps)(App) inherits(App, Component) function App () { Component.call(this) } @@ -67,6 +67,12 @@ function mapStateToProps (state) { } } +function mapDispatchToProps (dispatch) { + return { + hideSidebar: () => {dispatch(actions.hideSidebar())}, + } +} + App.prototype.render = function () { var props = this.props const { isLoading, loadingMessage, transForward, network, sidebarOpen } = props @@ -151,7 +157,10 @@ App.prototype.renderSidebar = function() { // overlay // TODO: add onClick for overlay to close sidebar this.props.sidebarOpen ? h('div.sidebar-overlay', { - style: {} + style: {}, + onClick: () => { + this.props.hideSidebar() + }, }, []) : undefined, ]) } -- cgit From f72f57dc6c75f6c0abfd90765073e41487f6f584 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 13:37:41 -0700 Subject: Implement global modal --- ui/app/app.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 660a68230..71e767b91 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -36,6 +36,7 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns +const Modal = require('./components/modal') module.exports = connect(mapStateToProps, mapDispatchToProps)(App) @@ -105,6 +106,9 @@ App.prototype.render = function () { }, }, [ + // global modal + this.renderGlobalModal(), + // app bar this.renderAppBar(), @@ -126,6 +130,12 @@ App.prototype.render = function () { ) } +App.prototype.renderGlobalModal = function() { + return h(Modal, { + ref: "modalRef", + }, ['test modal']) +} + App.prototype.renderSidebar = function() { // if (!this.props.sidebarOpen) { // return null; -- cgit From 928adae1042addb8cf123879dd8ec50928ac456f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:11:25 -0700 Subject: Implement modal content for buy flow - mobile view --- ui/app/app.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 71e767b91..e842d6297 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -133,7 +133,55 @@ App.prototype.render = function () { App.prototype.renderGlobalModal = function() { return h(Modal, { ref: "modalRef", - }, ['test modal']) + }, [ + h('div.modal-contents.transfers-subview', { + + }, [ + h('div.flex-column.flex-center', { + style: { + justifyContent: 'space-around', + width: '100%', + height: '100px', + }, + }, [ + h('div', { + style: { + fontSize: '26px', + marginTop: '15px', + }, + }, 'Transfers'), + h('div', {}, 'How would you like to buy Ether?'), + ]), + + h('div.buy-options.flex-column.flex-center', {}, [ + + h('div.buy-option', {}, [ + h('div.buy-option-title', {}, 'Coinbase'), + h('div.buy-option-subtitle', {}, 'Buy with Fiat'), + + ]), + + h('div.buy-option', {}, [ + h('div.buy-option-title', {}, 'Shapeshift'), + h('div.buy-option-subtitle', {}, 'Trade any digital asset for any other'), + ]), + + h('div.buy-option', {}, [ + h('div.buy-option-title', {}, 'Coinbase'), + h('div.buy-option-subtitle', {}, 'Deposit from another account'), + ]), + + ]), + + h('div', { + style: { + textTransform: 'uppercase', + width: '100%', + height: '50px', + } + }, 'Cancel'), + ]) + ]) } App.prototype.renderSidebar = function() { -- cgit From b97dcf09ac56a2dba30c62c01244100de453a1e2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:51:06 -0700 Subject: Move inline styles out into explicitly named BEM classes --- ui/app/app.js | 45 +++++++++++++++++---------------------------- 1 file changed, 17 insertions(+), 28 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index e842d6297..6ab793524 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -134,51 +134,40 @@ App.prototype.renderGlobalModal = function() { return h(Modal, { ref: "modalRef", }, [ - h('div.modal-contents.transfers-subview', { + h('div.modal-content.transfers-subview', { }, [ - h('div.flex-column.flex-center', { - style: { - justifyContent: 'space-around', - width: '100%', - height: '100px', - }, + h('div.modal-content-title-wrapper.flex-column.flex-center', { + style: {}, }, [ - h('div', { - style: { - fontSize: '26px', - marginTop: '15px', - }, + h('div.modal-content-title', { + style: {}, }, 'Transfers'), h('div', {}, 'How would you like to buy Ether?'), ]), - h('div.buy-options.flex-column.flex-center', {}, [ + h('div.modal-content-options.flex-column.flex-center', {}, [ - h('div.buy-option', {}, [ - h('div.buy-option-title', {}, 'Coinbase'), - h('div.buy-option-subtitle', {}, 'Buy with Fiat'), + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - h('div.buy-option', {}, [ - h('div.buy-option-title', {}, 'Shapeshift'), - h('div.buy-option-subtitle', {}, 'Trade any digital asset for any other'), + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Shapeshift'), + h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.buy-option', {}, [ - h('div.buy-option-title', {}, 'Coinbase'), - h('div.buy-option-subtitle', {}, 'Deposit from another account'), + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), - h('div', { - style: { - textTransform: 'uppercase', - width: '100%', - height: '50px', - } + h('div.modal-content-footer', { + style: {}, }, 'Cancel'), ]) ]) -- cgit From eab5718a40e121c6b8597df6968c25733e794c6f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 18:12:50 -0700 Subject: Add an additional font-size breakpoint for buy modal on the largest screens --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 6ab793524..f6acd89a9 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -160,7 +160,7 @@ App.prototype.renderGlobalModal = function() { ]), h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-option-title', {}, 'Direct Deposit'), h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), ]), -- cgit From dc702705bff055ecdc67897680a5d345b03a5faa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 18:34:04 -0700 Subject: Move buy view into its own component - BuyOptions --- ui/app/app.js | 38 ++------------------------------------ 1 file changed, 2 insertions(+), 36 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index f6acd89a9..5c594c8cf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -37,6 +37,7 @@ const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns const Modal = require('./components/modal') +const BuyOptions = require('./components/buy-options') module.exports = connect(mapStateToProps, mapDispatchToProps)(App) @@ -134,42 +135,7 @@ App.prototype.renderGlobalModal = function() { return h(Modal, { ref: "modalRef", }, [ - h('div.modal-content.transfers-subview', { - - }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.modal-content-title', { - style: {}, - }, 'Transfers'), - h('div', {}, 'How would you like to buy Ether?'), - ]), - - h('div.modal-content-options.flex-column.flex-center', {}, [ - - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), - - ]), - - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), - ]), - - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), - - ]), - - h('div.modal-content-footer', { - style: {}, - }, 'Cancel'), - ]) + h(BuyOptions, {}, []), ]) } -- cgit From bdf5436c2d26304b226734e4295ee319ed67b954 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 18:44:20 -0700 Subject: Add minor comments and cleanup for new components --- ui/app/app.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 5c594c8cf..3ffa9f0d5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -98,10 +98,7 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { - // Windows was showing a vertical scroll bar: overflowX: 'hidden', - // TODO: check with dev who committed L75, see if this still happens, and whether auto is enough - // overflowY: 'auto', position: 'relative', alignItems: 'center', }, @@ -140,9 +137,6 @@ App.prototype.renderGlobalModal = function() { } App.prototype.renderSidebar = function() { - // if (!this.props.sidebarOpen) { - // return null; - // } return h('div', { }, [ @@ -170,7 +164,7 @@ App.prototype.renderSidebar = function() { transitionEnterTimeout: 300, transitionLeaveTimeout: 200, }, [ - // content + // A second instance of Walletview is used for non-mobile viewports this.props.sidebarOpen ? h(WalletView, { responsiveDisplayClassname: '.sidebar', style: {}, @@ -502,10 +496,6 @@ App.prototype.renderPrimary = function () { }) } - // Note for @Zanibar - isUnlocked stays true. - // console.log("props.isUnlocked", props.isUnlocked) - // console.log("props.isUnlocked", props.currentView.name) - // show current view switch (props.currentView.name) { -- cgit From 25184a3901f96e3c4fea94ed0bd135fbe7597148 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 10:24:51 -0700 Subject: Move global modals into own pod, inside components/modals --- ui/app/app.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 3ffa9f0d5..42e67c6db 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -36,8 +36,9 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns -const Modal = require('./components/modal') -const BuyOptions = require('./components/buy-options') + +// Global Modals +const BuyModal = require('./components/modals/index').BuyModal module.exports = connect(mapStateToProps, mapDispatchToProps)(App) @@ -105,7 +106,7 @@ App.prototype.render = function () { }, [ // global modal - this.renderGlobalModal(), + h(BuyModal, {}, []), // app bar this.renderAppBar(), -- cgit From e39c600a45a4cf28b5429231dd6c57442d467075 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 10:49:41 -0700 Subject: [WIP] Extract network dropdown out of main app render function --- ui/app/app.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 42e67c6db..ea9104d7d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -385,6 +385,8 @@ App.prototype.renderNetworkDropdown = function () { ]) } + +// TODO: Remove if will be dead code in NewUI App.prototype.renderDropdown = function () { const state = this.state || {} const isOpen = state.isMainMenuOpen -- cgit From 4cd33453dc14ae9e6a797c16cccb52598904941a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:15:21 +0200 Subject: [WIP] Extract network dropdown into own component --- ui/app/app.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index ea9104d7d..8ca60fee1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -36,6 +36,8 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns +const NetworkDropdown = require('./components/dropdowns/network-dropdown') +console.log('imported:', NetworkDropdown) // Global Modals const BuyModal = require('./components/modals/index').BuyModal @@ -55,6 +57,7 @@ function mapStateToProps (state) { return { // state from plugin + networkDropdownOpen: state.appState.networkDropdownOpen, sidebarOpen: state.appState.sidebarOpen, isLoading: state.appState.isLoading, loadingMessage: state.appState.loadingMessage, @@ -81,9 +84,11 @@ function mapStateToProps (state) { } } -function mapDispatchToProps (dispatch) { +function mapDispatchToProps (dispatch, ownProps) { return { hideSidebar: () => {dispatch(actions.hideSidebar())}, + showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())}, + hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())}, } } @@ -115,7 +120,11 @@ App.prototype.render = function () { this.renderSidebar(), // network dropdown - this.renderNetworkDropdown(), + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), + // this.renderNetworkDropdown(), // this.renderDropdown(), h(Loading, { @@ -233,7 +242,14 @@ App.prototype.renderAppBar = function () { onClick: (event) => { event.preventDefault() event.stopPropagation() - this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + console.log("NI CLICK:", this.props.networkDropdownOpen) + if (this.props.networkDropdownOpen === false) { + this.props.showNetworkDropdown() + } else { + this.props.hideNetworkDropdown() + } + // this.props.toggleNetworkOpen() + // this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) }, }), @@ -249,6 +265,7 @@ App.prototype.renderNetworkDropdown = function () { const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList const state = this.state || {} + console.log("this.state:", state) const isOpen = state.isNetworkMenuOpen return h(Dropdown, { -- cgit From c60ea60ec9c83b199a1502315015529a0d5dcdc1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:16:22 +0200 Subject: Remove deprecated feature: main app settings dropdown --- ui/app/app.js | 48 ------------------------------------------------ 1 file changed, 48 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 8ca60fee1..99eabec51 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -37,7 +37,6 @@ const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns const NetworkDropdown = require('./components/dropdowns/network-dropdown') -console.log('imported:', NetworkDropdown) // Global Modals const BuyModal = require('./components/modals/index').BuyModal @@ -124,8 +123,6 @@ App.prototype.render = function () { provider: this.props.provider, frequentRpcList: this.props.frequentRpcList, }, []), - // this.renderNetworkDropdown(), - // this.renderDropdown(), h(Loading, { isLoading: isLoading || isLoadingNetwork, @@ -402,51 +399,6 @@ App.prototype.renderNetworkDropdown = function () { ]) } - -// TODO: Remove if will be dead code in NewUI -App.prototype.renderDropdown = function () { - const state = this.state || {} - const isOpen = state.isMainMenuOpen - - return h(Dropdown, { - useCssTransition: true, - isOpen: isOpen, - zIndex: 11, - onClickOutside: (event) => { - const classList = event.target.classList - const parentClassList = event.target.parentElement.classList - - const isToggleElement = classList.contains('sandwich-expando') || - parentClassList.contains('sandwich-expando') - - if (isOpen && !isToggleElement) { - this.setState({ isMainMenuOpen: false }) - } - }, - style: { - position: 'absolute', - right: '2px', - top: '38px', - }, - innerStyle: {}, - }, [ - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.showConfigPage()) }, - }, 'Settings'), - - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.lockMetamask()) }, - }, 'Lock'), - - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.showInfoPage()) }, - }, 'Info/Help'), - ]) -} - App.prototype.renderBackButton = function (style, justArrow = false) { var props = this.props return ( -- cgit From d01a6633423e9b20f3ca8e73cd39655362190f64 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 22:18:08 +0200 Subject: Remove unused code - network dropdown components in app --- ui/app/app.js | 204 ---------------------------------------------------------- 1 file changed, 204 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 99eabec51..4ee082f29 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -239,14 +239,11 @@ App.prototype.renderAppBar = function () { onClick: (event) => { event.preventDefault() event.stopPropagation() - console.log("NI CLICK:", this.props.networkDropdownOpen) if (this.props.networkDropdownOpen === false) { this.props.showNetworkDropdown() } else { this.props.hideNetworkDropdown() } - // this.props.toggleNetworkOpen() - // this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) }, }), @@ -257,148 +254,6 @@ App.prototype.renderAppBar = function () { ) } -App.prototype.renderNetworkDropdown = function () { - const props = this.props - const { provider: { type: providerType, rpcTarget: activeNetwork } } = props - const rpcList = props.frequentRpcList - const state = this.state || {} - console.log("this.state:", state) - const isOpen = state.isNetworkMenuOpen - - return h(Dropdown, { - useCssTransition: true, - isOpen, - onClickOutside: (event) => { - const { classList } = event.target - const isNotToggleElement = [ - classList.contains('menu-icon'), - classList.contains('network-name'), - classList.contains('network-indicator'), - ].filter(bool => bool).length === 0 - // classes from three constituent nodes of the toggle element - - if (isNotToggleElement) { - this.setState({ isNetworkMenuOpen: false }) - } - }, - zIndex: 11, - style: { - position: 'absolute', - right: '2px', - top: '38px', - }, - innerStyle: { - padding: '2px 16px 2px 0px', - }, - }, [ - - h( - DropdownMenuItem, - { - key: 'main', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('mainnet')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.diamond'), - 'Main Ethereum Network', - providerType === 'mainnet' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'ropsten', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('ropsten')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.red-dot'), - 'Ropsten Test Network', - providerType === 'ropsten' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'kovan', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('kovan')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.hollow-diamond'), - 'Kovan Test Network', - providerType === 'kovan' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'rinkeby', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('rinkeby')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.golden-square'), - 'Rinkeby Test Network', - providerType === 'rinkeby' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'default', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setDefaultRpcTarget()), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Localhost 8545', - activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, - ] - ), - - this.renderCustomOption(props.provider), - this.renderCommonRpc(rpcList, props.provider), - - h( - DropdownMenuItem, - { - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showConfigPage()), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Custom RPC', - activeNetwork === 'custom' ? h('.check', '✓') : null, - ] - ), - - ]) -} - App.prototype.renderBackButton = function (style, justArrow = false) { var props = this.props return ( @@ -557,40 +412,6 @@ App.prototype.toggleMetamaskActive = function () { } } -App.prototype.renderCustomOption = function (provider) { - const { rpcTarget, type } = provider - const props = this.props - - if (type !== 'rpc') return null - - // Concatenate long URLs - let label = rpcTarget - if (rpcTarget.length > 31) { - label = label.substr(0, 34) + '...' - } - - switch (rpcTarget) { - - case 'http://localhost:8545': - return null - - default: - return h( - DropdownMenuItem, - { - key: rpcTarget, - onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - label, - h('.check', '✓'), - ] - ) - } -} - App.prototype.getNetworkName = function () { const { provider } = this.props const providerName = provider.type @@ -611,28 +432,3 @@ App.prototype.getNetworkName = function () { return name } - -App.prototype.renderCommonRpc = function (rpcList, provider) { - const props = this.props - const rpcTarget = provider.rpcTarget - - return rpcList.map((rpc) => { - if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { - return null - } else { - return h( - DropdownMenuItem, - { - key: `common${rpc}`, - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - onClick: () => props.dispatch(actions.setRpcTarget(rpc)), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - rpc, - rpcTarget === rpc ? h('.check', '✓') : null, - ] - ) - } - }) -} -- cgit From f2f2d35992dd2e47dc4ad53c20abc8de37cbba1f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:40:25 +0200 Subject: Remove unnecessary imports, and account-detail.js --- ui/app/app.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 4ee082f29..c6777ca16 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -26,8 +26,6 @@ const Import = require('./accounts/import') const InfoScreen = require('./info') const Loading = require('./components/loading') const SandwichExpando = require('sandwich-expando') -const Dropdown = require('./components/dropdown').Dropdown -const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkIndicator = require('./components/network') const BuyView = require('./components/buy-button-subview') const QrView = require('./components/qr-code') @@ -35,7 +33,6 @@ const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') -const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns const NetworkDropdown = require('./components/dropdowns/network-dropdown') // Global Modals -- 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/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index c6777ca16..064595ba3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -36,7 +36,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') // Global Modals -const BuyModal = require('./components/modals/index').BuyModal +const Modal = require('./components/modals/index').Modal module.exports = connect(mapStateToProps, mapDispatchToProps)(App) @@ -107,7 +107,7 @@ App.prototype.render = function () { }, [ // global modal - h(BuyModal, {}, []), + h(Modal, {}, []), // app bar this.renderAppBar(), -- 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/app.js | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 064595ba3..87477d773 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -6,8 +6,6 @@ const actions = require('./actions') // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') -// unlock -const UnlockScreen = require('./unlock') // accounts const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') @@ -25,7 +23,6 @@ const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') const InfoScreen = require('./info') const Loading = require('./components/loading') -const SandwichExpando = require('sandwich-expando') const NetworkIndicator = require('./components/network') const BuyView = require('./components/buy-button-subview') const QrView = require('./components/qr-code') @@ -82,15 +79,15 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch, ownProps) { return { - hideSidebar: () => {dispatch(actions.hideSidebar())}, - showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())}, - hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())}, + hideSidebar: () => { dispatch(actions.hideSidebar()) }, + showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, + hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, } } App.prototype.render = function () { var props = this.props - const { isLoading, loadingMessage, transForward, network, sidebarOpen } = props + const { isLoading, loadingMessage, network } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null @@ -132,15 +129,15 @@ App.prototype.render = function () { ) } -App.prototype.renderGlobalModal = function() { +App.prototype.renderGlobalModal = function () { return h(Modal, { - ref: "modalRef", + ref: 'modalRef', }, [ - h(BuyOptions, {}, []), + // h(BuyOptions, {}, []), ]) } -App.prototype.renderSidebar = function() { +App.prototype.renderSidebar = function () { return h('div', { }, [ @@ -192,14 +189,10 @@ App.prototype.renderAppBar = function () { return null } - const props = this.props - const state = this.state || {} - const isNetworkMenuOpen = state.isNetworkMenuOpen || false - return ( h('.full-width', { - style: {} + style: {}, }, [ h('.app-header.flex-row.flex-space-between', { -- cgit From 799627189d62296cdec8f9604169d661123dec38 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 21:32:13 -0230 Subject: Fix margin, padding, height for header. --- ui/app/app.js | 81 ++++++++++++++++++++++++++++++----------------------------- 1 file changed, 41 insertions(+), 40 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 87477d773..7041e2d1c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -198,46 +198,47 @@ App.prototype.renderAppBar = function () { h('.app-header.flex-row.flex-space-between', { style: {}, }, [ - - h('div.left-menu-wrapper', { - style: {}, - }, [ - // mini logo - h('img', { - height: 24, - width: 24, - src: '/images/icon-128.png', - }), - - // metamask name - h('h1', { - style: { - position: 'relative', - left: '9px', - }, - }, 'MetaMask'), - - ]), - - h('div.network-component-wrapper', { - style: {}, - }, [ - // Network Indicator - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - if (this.props.networkDropdownOpen === false) { - this.props.showNetworkDropdown() - } else { - this.props.hideNetworkDropdown() - } - }, - }), - - ]), + h('div.app-header-contents', {}, [ + h('div.left-menu-wrapper', { + style: {}, + }, [ + // mini logo + h('img', { + height: 24, + width: 24, + src: '/images/icon-128.png', + }), + + // metamask name + h('h1', { + style: { + position: 'relative', + left: '9px', + }, + }, 'MetaMask'), + + ]), + + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + if (this.props.networkDropdownOpen === false) { + this.props.showNetworkDropdown() + } else { + this.props.hideNetworkDropdown() + } + }, + }), + + ]), + ]) ]), ]) -- 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/app.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7041e2d1c..32c9cffb2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -79,9 +79,10 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch, ownProps) { return { - hideSidebar: () => { dispatch(actions.hideSidebar()) }, - showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) }, - hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) }, + dispatch, + hideSidebar: () => dispatch(actions.hideSidebar()), + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), } } -- cgit From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 4 Sep 2017 15:55:14 -0700 Subject: Fix header style; Address comments --- ui/app/app.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 32c9cffb2..9ad85d85d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () { h('h1', { style: { position: 'relative', - left: '9px', + paddingLeft: '9px', + color: '#5B5D67', }, }, 'MetaMask'), @@ -239,7 +240,7 @@ App.prototype.renderAppBar = function () { }), ]), - ]) + ]), ]), ]) -- 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/app.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 9ad85d85d..1ca59e406 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,6 +9,7 @@ const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') +const SendTokenScreen = require('./components/send-token') const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./components/notice') @@ -327,6 +328,10 @@ App.prototype.renderPrimary = function () { log.debug('rendering send tx screen') return h(SendTransactionScreen, {key: 'send-transaction'}) + case 'sendToken': + log.debug('rendering send token screen') + return h(SendTokenScreen, {key: 'sendToken'}) + case 'newKeychain': log.debug('rendering new keychain screen') return h(NewKeyChainScreen, {key: 'new-keychain'}) -- cgit From 35d8671843ff15822488ae39310c8c12818fb1a3 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 09:56:40 -0700 Subject: Add responsive UI to send ether modal --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 1ca59e406..01a67250a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -99,7 +99,7 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { - overflowX: 'hidden', + overflow: 'hidden', position: 'relative', alignItems: 'center', }, -- cgit From 7d76e404f2992fcf932ece22fddeabfe230afe0d Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 11:45:59 -0700 Subject: Make send token responsive; fix desktop send modal height --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 01a67250a..1ca59e406 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -99,7 +99,7 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { - overflow: 'hidden', + overflowX: 'hidden', position: 'relative', alignItems: 'center', }, -- cgit From 06292107d756f0b25805f819cd276e4b6303ccb0 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 16:13:53 -0700 Subject: Always set currency to USD on app mount --- ui/app/app.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 14e6a26e2..7468551eb 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -86,9 +86,14 @@ function mapDispatchToProps (dispatch, ownProps) { hideSidebar: () => dispatch(actions.hideSidebar()), showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), } } +App.prototype.componentWillMount = function () { + this.props.setCurrentCurrencyToUSD() +} + App.prototype.render = function () { var props = this.props const { isLoading, loadingMessage, network } = props -- cgit From 7c4d8c45624ef840b8806589b47997e7c7c396f3 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 12:20:09 -0230 Subject: Enables the old shapeshift UI within new ui. --- ui/app/app.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7468551eb..cf9850f9f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -72,6 +72,7 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], + Qr: state.appState.Qr, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -395,7 +396,10 @@ App.prototype.renderPrimary = function () { width: '285px', }, }, [ - h(QrView, {key: 'qr'}), + h(QrView, { + key: 'qr', + Qr: props.Qr, + }), ]), ]) -- cgit From ff64fe98dde7746775396cbf94d63a1a0e91d069 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 13:10:57 -0230 Subject: Shapeshift deposit tx modal. --- ui/app/app.js | 33 --------------------------------- 1 file changed, 33 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index cf9850f9f..583497cb3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -26,7 +26,6 @@ const InfoScreen = require('./info') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const BuyView = require('./components/buy-button-subview') -const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') @@ -72,7 +71,6 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], - Qr: state.appState.Qr, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -372,37 +370,6 @@ App.prototype.renderPrimary = function () { log.debug('rendering buy ether screen') return h(BuyView, {key: 'buyEthView'}) - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, { - key: 'qr', - Qr: props.Qr, - }), - ]), - ]) - default: log.debug('rendering default, account detail screen') return h(MainContainer, {key: 'account-detail'}) -- cgit From bbe893a0d8d759ba750ba78ff8aed0f0876a43ff Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 5 Oct 2017 13:14:45 -0230 Subject: UI for send screen container without form rows. --- ui/app/app.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index f1a671ab1..ac017da05 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,6 +9,7 @@ const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') +const SendTransactionScreen2 = require('./send-v2.js') const SendTokenScreen = require('./components/send-token') const ConfirmTxScreen = require('./conf-tx') // notice @@ -333,7 +334,15 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - return h(SendTransactionScreen, {key: 'send-transaction'}) + // Below param and ternary operator used for feature toggle + // Remove before merged to master + const windowParam = window.location.search.substr(1).split('=') + + const SendComponentToRender = windowParam[0] === "ft" && windowParam[1] === "send-v2" + ? SendTransactionScreen2 + : SendTransactionScreen + + return h(SendComponentToRender, {key: 'send-transaction'}) case 'sendToken': log.debug('rendering send token screen') -- cgit From 49f76d27a9967cbeff0ba5b3d41277c558999472 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 00:04:01 -0230 Subject: Adds checkFeatureToggle util. --- ui/app/app.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index ac017da05..fb57775b6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const { checkFeatureToggle } = require('../lib/feature-toggle-utils') const actions = require('./actions') // init const InitializeMenuScreen = require('./first-time/init-menu') @@ -334,11 +335,8 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - // Below param and ternary operator used for feature toggle - // Remove before merged to master - const windowParam = window.location.search.substr(1).split('=') - const SendComponentToRender = windowParam[0] === "ft" && windowParam[1] === "send-v2" + const SendComponentToRender = checkFeatureToggle('send-v2') ? SendTransactionScreen2 : SendTransactionScreen -- cgit From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: Various styling fixes --- ui/app/app.js | 45 +++++++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 18 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index fb57775b6..360ba04cf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -27,6 +27,7 @@ const Import = require('./accounts/import') const InfoScreen = require('./info') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') +const Identicon = require('./components/identicon') const BuyView = require('./components/buy-button-subview') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') @@ -60,6 +61,7 @@ function mapStateToProps (state) { noActiveNotices: state.metamask.noActiveNotices, isInitialized: state.metamask.isInitialized, isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, currentView: state.appState.currentView, activeAddress: state.appState.activeAddress, transForward: state.appState.transForward, @@ -198,7 +200,7 @@ App.prototype.renderAppBar = function () { if (window.METAMASK_UI_TYPE === 'notification') { return null } - + console.log(this.props) return ( h('.full-width', { @@ -230,24 +232,31 @@ App.prototype.renderAppBar = function () { ]), - h('div.network-component-wrapper', { - style: {}, - }, [ - // Network Indicator - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - if (this.props.networkDropdownOpen === false) { - this.props.showNetworkDropdown() - } else { - this.props.hideNetworkDropdown() - } - }, + h('div.header__right-actions', [ + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + if (this.props.networkDropdownOpen === false) { + this.props.showNetworkDropdown() + } else { + this.props.hideNetworkDropdown() + } + }, + }), + + ]), + + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, }), - ]), ]), ]), -- cgit From 81f62a7443d47461b5f9b20f442392562458c79a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 13 Oct 2017 02:10:58 -0400 Subject: Adding Account Dropdown V2 --- ui/app/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 360ba04cf..92fc5e697 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -34,6 +34,7 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') +const AccountMenu = require('./components/account-menu') // Global Modals const Modal = require('./components/modals/index').Modal @@ -130,6 +131,8 @@ App.prototype.render = function () { frequentRpcList: this.props.frequentRpcList, }, []), + h(AccountMenu), + h(Loading, { isLoading: isLoading || isLoadingNetwork, loadingMessage: loadMessage, @@ -344,7 +347,7 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - + const SendComponentToRender = checkFeatureToggle('send-v2') ? SendTransactionScreen2 : SendTransactionScreen -- cgit From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/app.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 92fc5e697..08d24d86c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -10,7 +10,7 @@ const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') -const SendTransactionScreen2 = require('./send-v2.js') +const SendTransactionScreen2 = require('./components/send/send-v2-container') const SendTokenScreen = require('./components/send-token') const ConfirmTxScreen = require('./conf-tx') // notice @@ -356,7 +356,12 @@ App.prototype.renderPrimary = function () { case 'sendToken': log.debug('rendering send token screen') - return h(SendTokenScreen, {key: 'sendToken'}) + + const SendTokenComponentToRender = checkFeatureToggle('send-v2') + ? SendTransactionScreen2 + : SendTokenScreen + + return h(SendTokenComponentToRender, {key: 'sendToken'}) case 'newKeychain': log.debug('rendering new keychain screen') -- 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/app.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 08d24d86c..3f27b36c7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -91,6 +91,7 @@ function mapDispatchToProps (dispatch, ownProps) { showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), + toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), } } @@ -256,10 +257,12 @@ App.prototype.renderAppBar = function () { ]), - h(Identicon, { - address: this.props.selectedAddress, - diameter: 32, - }), + h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, + }), + ]), ]), ]), ]), -- cgit From 6e73eacd5fffa70045e0a0c920795e70cc0337aa Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 23:53:57 -0230 Subject: Turn off feature toggle. --- ui/app/app.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 3f27b36c7..76cf1bae1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -351,20 +351,22 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - const SendComponentToRender = checkFeatureToggle('send-v2') - ? SendTransactionScreen2 - : SendTransactionScreen + // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // const SendComponentToRender = checkFeatureToggle('send-v2') + // ? SendTransactionScreen2 + // : SendTransactionScreen - return h(SendComponentToRender, {key: 'send-transaction'}) + return h(SendTransactionScreen2, {key: 'send-transaction'}) case 'sendToken': log.debug('rendering send token screen') - const SendTokenComponentToRender = checkFeatureToggle('send-v2') - ? SendTransactionScreen2 - : SendTokenScreen + // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // ? SendTransactionScreen2 + // : SendTokenScreen - return h(SendTokenComponentToRender, {key: 'sendToken'}) + return h(SendTransactionScreen2, {key: 'sendToken'}) case 'newKeychain': log.debug('rendering new keychain screen') -- cgit From 332c7441b656ec82ebfba863e3feb4dbf365d67b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 23:39:26 -0230 Subject: Get currency from state in account details, send and confirm screens. --- ui/app/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 76cf1bae1..de6a06a58 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -76,6 +76,7 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -96,7 +97,9 @@ function mapDispatchToProps (dispatch, ownProps) { } App.prototype.componentWillMount = function () { - this.props.setCurrentCurrencyToUSD() + if (!this.props.currentCurrency) { + this.props.setCurrentCurrencyToUSD() + } } App.prototype.render = function () { -- 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/app.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index de6a06a58..cf82248e4 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -207,7 +207,6 @@ App.prototype.renderAppBar = function () { if (window.METAMASK_UI_TYPE === 'notification') { return null } - console.log(this.props) return ( h('.full-width', { -- cgit From 5a93ec02523e8b54222cc44cba5b80dcf8f07a7a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 19 Oct 2017 21:06:14 -0700 Subject: Fix loading animation not showing on network change --- ui/app/app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index cf82248e4..ae38fad7f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -137,8 +137,7 @@ App.prototype.render = function () { h(AccountMenu), - h(Loading, { - isLoading: isLoading || isLoadingNetwork, + (isLoading || isLoadingNetwork) && h(Loading, { loadingMessage: loadMessage, }), -- cgit From 0264ecaad77330b151f4bf4248b66f4659a67cce Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Fri, 18 Aug 2017 04:11:26 -0700 Subject: Adding CreatePasswordScreen --- ui/app/app.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 613577913..57e3d3366 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -3,6 +3,8 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') +// mascara +const MascaraFirstTime = require('../../mascara/src/app/first-time').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -43,6 +45,10 @@ function mapStateToProps (state) { accounts, address, keyrings, + isMascara, + isInitialized, + noActiveNotices, + seedWords } = state.metamask const selected = address || Object.keys(accounts)[0] @@ -56,6 +62,8 @@ function mapStateToProps (state) { currentView: state.appState.currentView, activeAddress: state.appState.activeAddress, transForward: state.appState.transForward, + isMascara: state.metamask.isMascara, + isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), seedWords: state.metamask.seedWords, unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, @@ -123,6 +131,11 @@ App.prototype.renderAppBar = function () { const props = this.props const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false + const {isMascara, isOnboarding} = props + + if (isMascara && isOnboarding) { + return null + } return ( @@ -407,9 +420,20 @@ App.prototype.renderBackButton = function (style, justArrow = false) { ) } +App.prototype.renderMascaraFirstTime = function () { + return 'hi' +} + App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props + const {isMascara, isOnboarding} = props + + if (isMascara && isOnboarding) { + return h(MascaraFirstTime, { + screenType: MascaraFirstTime.getScreenType(props) + }) + } // notices if (!props.noActiveNotices) { -- cgit From e1497fafa64b5f8e25407611709920dc5e0eaf77 Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Mon, 21 Aug 2017 04:56:09 -0700 Subject: Add UniqueImageScreen --- ui/app/app.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 57e3d3366..ec36eb22e 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -106,10 +106,7 @@ App.prototype.render = function () { this.renderNetworkDropdown(), this.renderDropdown(), - h(Loading, { - isLoading: isLoading || isLoadingNetwork, - loadingMessage: loadMessage, - }), + this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), // panel content h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { @@ -401,6 +398,17 @@ App.prototype.renderDropdown = function () { ]) } +App.prototype.renderLoadingIndicator = function({ isLoading, isLoadingNetwork, loadMessage }) { + const { isMascara } = this.props; + + return isMascara + ? null + : h(Loading, { + isLoading: isLoading || isLoadingNetwork, + loadingMessage: loadMessage, + }) +} + App.prototype.renderBackButton = function (style, justArrow = false) { var props = this.props return ( @@ -420,19 +428,13 @@ App.prototype.renderBackButton = function (style, justArrow = false) { ) } -App.prototype.renderMascaraFirstTime = function () { - return 'hi' -} - App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props const {isMascara, isOnboarding} = props if (isMascara && isOnboarding) { - return h(MascaraFirstTime, { - screenType: MascaraFirstTime.getScreenType(props) - }) + return h(MascaraFirstTime) } // notices -- cgit From 85e485128ff3ca4e458bd5d99d15dc295de70f43 Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Wed, 30 Aug 2017 01:30:55 -0700 Subject: Add Go to Coinbase; Show Buy Ether after signup --- ui/app/app.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index ec36eb22e..362d9cf27 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -5,6 +5,7 @@ const h = require('react-hyperscript') const actions = require('./actions') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default +const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -130,10 +131,16 @@ App.prototype.renderAppBar = function () { const isNetworkMenuOpen = state.isNetworkMenuOpen || false const {isMascara, isOnboarding} = props + // Do not render header if user is in mascara onboarding if (isMascara && isOnboarding) { return null } + // Do not render header if user is in mascara buy ether + if (isMascara && props.currentView.name === 'buyEth') { + return null + } + return ( h('.full-width', { @@ -433,9 +440,9 @@ App.prototype.renderPrimary = function () { var props = this.props const {isMascara, isOnboarding} = props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) - } + // if (isMascara && isOnboarding) { + // return h(MascaraFirstTime) + // } // notices if (!props.noActiveNotices) { @@ -534,7 +541,9 @@ App.prototype.renderPrimary = function () { case 'buyEth': log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) + return isMascara + ? h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + : h(BuyView, {key: 'buyEthView'}) case 'qr': log.debug('rendering show qr screen') -- cgit From 638bbe04283ec885997db8be6482343b7283bf7b Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Wed, 30 Aug 2017 02:05:45 -0700 Subject: Shuffle tokens --- ui/app/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 362d9cf27..36241b942 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -440,9 +440,9 @@ App.prototype.renderPrimary = function () { var props = this.props const {isMascara, isOnboarding} = props - // if (isMascara && isOnboarding) { - // return h(MascaraFirstTime) - // } + if (isMascara && isOnboarding) { + return h(MascaraFirstTime) + } // notices if (!props.noActiveNotices) { -- cgit From c6a3d00d80e1fa6ca1426246d9a3e03b7ad4ecbb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 18 Sep 2017 15:41:25 -0700 Subject: Fix merge conflict; separate onboarding buy screen --- ui/app/app.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 36241b942..bd0ccb0a2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -46,10 +46,9 @@ function mapStateToProps (state) { accounts, address, keyrings, - isMascara, isInitialized, noActiveNotices, - seedWords + seedWords, } = state.metamask const selected = address || Object.keys(accounts)[0] @@ -405,8 +404,8 @@ App.prototype.renderDropdown = function () { ]) } -App.prototype.renderLoadingIndicator = function({ isLoading, isLoadingNetwork, loadMessage }) { - const { isMascara } = this.props; +App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { + const { isMascara } = this.props return isMascara ? null @@ -541,9 +540,11 @@ App.prototype.renderPrimary = function () { case 'buyEth': log.debug('rendering buy ether screen') - return isMascara - ? h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - : h(BuyView, {key: 'buyEthView'}) + return h(BuyView, {key: 'buyEthView'}) + + case 'onboardingBuyEth': + log.debug('rendering onboarding buy ether screen') + return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) case 'qr': log.debug('rendering show qr screen') -- cgit From 2c032e0df44a2d589aae62d3fc532df82441580b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 22 Oct 2017 22:40:03 -0700 Subject: Update settings screen to new UI --- ui/app/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index ae38fad7f..35ff8603a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -21,7 +21,7 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice') const WalletView = require('./components/wallet-view') // other views -const ConfigScreen = require('./config') +const Settings = require('./settings') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') const InfoScreen = require('./info') @@ -383,7 +383,7 @@ App.prototype.renderPrimary = function () { case 'config': log.debug('rendering config screen') - return h(ConfigScreen, {key: 'config'}) + return h(Settings, {key: 'config'}) case 'import-menu': log.debug('rendering import screen') -- cgit From 6daa8343234cf2a0bc32ed434ee3acae6100fd38 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 01:07:51 -0700 Subject: Disable network dropdown on conf tx screen --- ui/app/app.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 35ff8603a..0cfbb5af5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -203,6 +203,16 @@ App.prototype.renderSidebar = function () { } App.prototype.renderAppBar = function () { + const { + isUnlocked, + network, + provider, + networkDropdownOpen, + showNetworkDropdown, + hideNetworkDropdown, + currentView, + } = this.props + if (window.METAMASK_UI_TYPE === 'notification') { return null } @@ -243,22 +253,21 @@ App.prototype.renderAppBar = function () { }, [ // Network Indicator h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, + network, + provider, + disabled: currentView.name === 'confTx', onClick: (event) => { event.preventDefault() event.stopPropagation() - if (this.props.networkDropdownOpen === false) { - this.props.showNetworkDropdown() - } else { - this.props.hideNetworkDropdown() - } + return networkDropdownOpen === false + ? showNetworkDropdown() + : hideNetworkDropdown() }, }), ]), - h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ h(Identicon, { address: this.props.selectedAddress, diameter: 32, -- cgit From 8d3a317b91fd440e2e405df780cb0f88e4683547 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 00:34:12 -0700 Subject: Show home page when metafox is clicked --- ui/app/app.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7cf5c7b9d..31d11b4e0 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -253,12 +253,14 @@ App.prototype.renderAppBar = function () { }, [ h('div.app-header-contents', {}, [ h('div.left-menu-wrapper', { - style: {}, + onClick: () => { + props.dispatch(actions.backToAccountDetail(props.activeAddress)) + }, }, [ // mini logo - h('img', { - height: 24, - width: 24, + h('img.metafox-icon', { + height: 29, + width: 29, src: '/images/icon-128.png', }), -- cgit From 3d8182f5d54730d3908a210c3deb71b49dd08100 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 09:26:05 -0700 Subject: Add Info section --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 31d11b4e0..7264c79c7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -448,7 +448,7 @@ App.prototype.renderPrimary = function () { case 'info': log.debug('rendering info screen') - return h(InfoScreen, {key: 'info'}) + return h(Settings, {key: 'info', tab: 'info'}) case 'buyEth': log.debug('rendering buy ether screen') -- cgit From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/app.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7264c79c7..1470e1ecf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -2,7 +2,6 @@ const inherits = require('util').inherits const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') -const { checkFeatureToggle } = require('../lib/feature-toggle-utils') const actions = require('./actions') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default @@ -12,9 +11,7 @@ const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') -const SendTransactionScreen = require('./send') const SendTransactionScreen2 = require('./components/send/send-v2-container') -const SendTokenScreen = require('./components/send-token') const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./components/notice') @@ -27,7 +24,6 @@ const WalletView = require('./components/wallet-view') const Settings = require('./settings') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') -const InfoScreen = require('./info') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') @@ -38,6 +34,7 @@ const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') const AccountMenu = require('./components/account-menu') +const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal @@ -228,8 +225,6 @@ App.prototype.renderAppBar = function () { } const props = this.props - const state = this.state || {} - const isNetworkMenuOpen = state.isNetworkMenuOpen || false const {isMascara, isOnboarding} = props // Do not render header if user is in mascara onboarding -- cgit From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 1470e1ecf..e90c3e98e 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -145,7 +145,7 @@ App.prototype.render = function () { (isLoading || isLoadingNetwork) && h(Loading, { loadingMessage: loadMessage, }), - + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), // content -- cgit From 7f795240706c013dc4a9ece0e9c9e33897c7fc71 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:55 -0330 Subject: Add UI selection --- ui/app/app.js | 60 +++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 34 insertions(+), 26 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index e90c3e98e..7e1eb200f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -116,40 +116,41 @@ App.prototype.render = function () { log.debug('Main ui render function') return ( + h('.new-ui', [ + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ - - // global modal - h(Modal, {}, []), + // global modal + h(Modal, {}, []), - // app bar - this.renderAppBar(), + // app bar + this.renderAppBar(), - // sidebar - this.renderSidebar(), + // sidebar + this.renderSidebar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - h(AccountMenu), + h(AccountMenu), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - // content - this.renderPrimary(), + // content + this.renderPrimary(), + ]) ]) ) } @@ -268,6 +269,13 @@ App.prototype.renderAppBar = function () { }, }, 'MetaMask'), + h('span', { + style: {}, + onClick: () => { + props.dispatch(actions.setFeatureFlag('betaUI', false)) + }, + }, 'Leave Beta') + ]), h('div.header__right-actions', [ -- cgit From 84321b2d9b08a2b0f3e773cfb6f6d11dff9f7d4c Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 16 Nov 2017 15:58:59 -0330 Subject: Lint fix --- ui/app/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7e1eb200f..7cee07ea5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -150,7 +150,7 @@ App.prototype.render = function () { // content this.renderPrimary(), - ]) + ]), ]) ) } @@ -274,7 +274,7 @@ App.prototype.renderAppBar = function () { onClick: () => { props.dispatch(actions.setFeatureFlag('betaUI', false)) }, - }, 'Leave Beta') + }, 'Leave Beta'), ]), -- cgit From 730d7f84ca8c202674677a6a6a94290e57ad9e3a Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 15:30:45 -0330 Subject: Update newUI UI for switching back to old UI. --- ui/app/app.js | 7 ------- 1 file changed, 7 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7cee07ea5..88a5c8458 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -269,13 +269,6 @@ App.prototype.renderAppBar = function () { }, }, 'MetaMask'), - h('span', { - style: {}, - onClick: () => { - props.dispatch(actions.setFeatureFlag('betaUI', false)) - }, - }, 'Leave Beta'), - ]), h('div.header__right-actions', [ -- cgit From 4e0485938a84f665aef466ef34e90299c5863ff4 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 12:36:32 -0330 Subject: Fix height of login screen --- ui/app/app.js | 52 +++++++++++++++++++++++++--------------------------- 1 file changed, 25 insertions(+), 27 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 88a5c8458..1f40eccbe 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -116,41 +116,39 @@ App.prototype.render = function () { log.debug('Main ui render function') return ( - h('.new-ui', [ - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - // global modal - h(Modal, {}, []), + // global modal + h(Modal, {}, []), - // app bar - this.renderAppBar(), + // app bar + this.renderAppBar(), - // sidebar - this.renderSidebar(), + // sidebar + this.renderSidebar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - h(AccountMenu), + h(AccountMenu), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - // content - this.renderPrimary(), - ]), + // content + this.renderPrimary(), ]) ) } -- cgit From 4a598fc7ac59ccf4c6cc0290956bb4985fafa8a5 Mon Sep 17 00:00:00 2001 From: Renier Oosthuizen Date: Tue, 2 Jan 2018 21:07:48 +0200 Subject: Fixes #2834 --- ui/app/app.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index bd0ccb0a2..2a2438d97 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -460,11 +460,6 @@ App.prototype.renderPrimary = function () { }) } - if (props.seedWords) { - log.debug('rendering seed words') - return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) - } - // show initialize screen if (!props.isInitialized || props.forgottenPassword) { // show current view @@ -499,6 +494,12 @@ App.prototype.renderPrimary = function () { } } + //Show seed words screen + if (props.seedWords) { + log.debug('rendering seed words') + return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + } + // show current view switch (props.currentView.name) { -- cgit From 1da385f78b9e61e7a17c19164558779a37376868 Mon Sep 17 00:00:00 2001 From: oosthuizenr Date: Tue, 2 Jan 2018 21:29:26 +0200 Subject: fix comment --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 2a2438d97..bc198b482 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -494,7 +494,7 @@ App.prototype.renderPrimary = function () { } } - //Show seed words screen + // show seed words screen if (props.seedWords) { log.debug('rendering seed words') return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) -- 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/app.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index c6fce0e47..73e5c06db 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -253,19 +253,13 @@ App.prototype.renderAppBar = function () { }, [ // mini logo h('img.metafox-icon', { - height: 29, - width: 29, - src: '/images/icon-128.png', + height: 42, + width: 42, + src: '/images/metamask-fox.svg', }), // metamask name - h('h1', { - style: { - position: 'relative', - paddingLeft: '9px', - color: '#5B5D67', - }, - }, 'MetaMask'), + h('h1', 'MetaMask'), ]), -- cgit From bdcee058dc278c46c828f376476f121417481385 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 9 Jan 2018 16:45:39 -0800 Subject: Fix styling in initialization --- ui/app/app.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index c6fce0e47..3fca8ccc1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -3,6 +3,8 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') +const classnames = require('classnames') + // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default @@ -243,7 +245,9 @@ App.prototype.renderAppBar = function () { }, [ h('.app-header.flex-row.flex-space-between', { - style: {}, + className: classnames({ + 'app-header--initialized': !isOnboarding, + }), }, [ h('div.app-header-contents', {}, [ h('div.left-menu-wrapper', { -- cgit From 980e1bfcf82361185f6d1b22abd9593ba166825e Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 10 Jan 2018 14:55:38 -0330 Subject: New add account page with create and import options. --- ui/app/app.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index e24ab7109..866801dd5 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -26,6 +26,7 @@ const WalletView = require('./components/wallet-view') const Settings = require('./settings') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') +const NewAccount = require('./accounts/new-account') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') @@ -435,6 +436,10 @@ App.prototype.renderPrimary = function () { log.debug('rendering import screen') return h(Import, {key: 'import-menu'}) + case 'new-account-page': + log.debug('rendering new account screen') + return h(NewAccount, {key: 'new-account'}) + case 'reveal-seed-conf': log.debug('rendering reveal seed confirmation screen') return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) -- cgit From 58be1742e1fbfc6ae73e50256849f2e673989446 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 15 Jan 2018 16:04:49 -0800 Subject: Rename lock to log out Fixes #2475 --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index bc198b482..f0dfef34f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -395,7 +395,7 @@ App.prototype.renderDropdown = function () { h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), onClick: () => { this.props.dispatch(actions.lockMetamask()) }, - }, 'Lock'), + }, 'Log Out'), h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), -- cgit From 7f151b861cc3a565d3feefc50b3be25ab4490ac8 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 7 Feb 2018 21:08:55 -0330 Subject: [NewUI] Opens to full screen when restoring from seed. (#3201) * Opens to full screen when restoring from seed. * Remove redundant parameter in actions.markPasswordForgotten call. --- ui/app/app.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index df9eab03c..20dc65df3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -80,7 +80,7 @@ function mapStateToProps (state) { menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, + forgottenPassword: state.metamask.forgottenPassword, lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], @@ -358,20 +358,12 @@ App.prototype.renderPrimary = function () { }) } - // show initialize screen - if (!props.isInitialized || props.forgottenPassword) { - // show current view - log.debug('rendering an initialize screen') - switch (props.currentView.name) { - - case 'restoreVault': - log.debug('rendering restore vault screen') - return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - - default: - log.debug('rendering menu screen') - return h(InitializeMenuScreen, {key: 'menuScreenInit'}) - } + if (props.isInitialized && props.forgottenPassword) { + log.debug('rendering restore vault screen') + return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + } else if (!props.isInitialized) { + log.debug('rendering menu screen') + return h(InitializeMenuScreen, {key: 'menuScreenInit'}) } // show unlock screen -- cgit From fe2ed68f1139046d163ec3d85f31d61ae5fbd989 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 12 Feb 2018 14:15:53 -0330 Subject: Remove chrome focus outline for mouse users. (#3230) --- ui/app/app.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 20dc65df3..cdb0c8c61 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -85,6 +85,7 @@ function mapStateToProps (state) { lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, + isMouseUser: state.appState.isMouseUser, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -101,6 +102,7 @@ function mapDispatchToProps (dispatch, ownProps) { hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)), } } @@ -112,7 +114,13 @@ App.prototype.componentWillMount = function () { App.prototype.render = function () { var props = this.props - const { isLoading, loadingMessage, network } = props + const { + isLoading, + loadingMessage, + network, + isMouseUser, + setMouseUserState, + } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null @@ -120,11 +128,19 @@ App.prototype.render = function () { return ( h('.flex-column.full-height', { + className: classnames({ 'mouse-user-styles': isMouseUser }), style: { overflowX: 'hidden', position: 'relative', alignItems: 'center', }, + tabIndex: '0', + onClick: () => setMouseUserState(true), + onKeyDown: (e) => { + if (e.keyCode === 9) { + setMouseUserState(false) + } + }, }, [ // global modal -- cgit From 170c7602b70e475e75fbd1c7181d03e22465ae24 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 16 Feb 2018 06:15:09 -0330 Subject: [NewUI] Adds the mascara first time flow to betaUI extension (#3257) * Adds the mascara first time flow to the extension when opened in browser. * Fix tests after addition of mascara first time flow to new ui. --- ui/app/app.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index cdb0c8c61..5ffd263d1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,7 @@ const classnames = require('classnames') const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init -const InitializeMenuScreen = require('./first-time/init-menu') +const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') @@ -74,6 +74,7 @@ function mapStateToProps (state) { transForward: state.appState.transForward, isMascara: state.metamask.isMascara, isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + isPopup: state.metamask.isPopup, seedWords: state.metamask.seedWords, unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, @@ -85,7 +86,8 @@ function mapStateToProps (state) { lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, - isMouseUser: state.appState.isMouseUser, + isMouseUser: state.appState.isMouseUser, + betaUI: state.metamask.featureFlags.betaUI, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -351,9 +353,9 @@ App.prototype.renderBackButton = function (style, justArrow = false) { App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props - const {isMascara, isOnboarding} = props + const {isMascara, isOnboarding, betaUI} = props - if (isMascara && isOnboarding) { + if ((isMascara || betaUI) && isOnboarding && !props.isPopup) { return h(MascaraFirstTime) } -- cgit From 81eb5c8796b3a044c1b1e66f509bb14870f7ba92 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 16 Feb 2018 19:21:16 -0330 Subject: Ensures that mascara initialize screen is not shown in popup. (#3279) --- ui/app/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 5ffd263d1..1a64bb1a4 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,6 +9,7 @@ const classnames = require('classnames') const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init +const OldUIInitializeMenuScreen = require('./first-time/init-menu') const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') // accounts @@ -381,7 +382,9 @@ App.prototype.renderPrimary = function () { return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) } else if (!props.isInitialized) { log.debug('rendering menu screen') - return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + return props.isPopup + ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) + : h(InitializeMenuScreen, {key: 'menuScreenInit'}) } // show unlock screen -- cgit From c26e0d555b7cb89e88713041714206abd8f4275e Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 19 Feb 2018 22:46:18 -0330 Subject: Fix Import Existing DEN in popup New UI first time flow. --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 1a64bb1a4..58e38a077 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -380,7 +380,7 @@ App.prototype.renderPrimary = function () { if (props.isInitialized && props.forgottenPassword) { log.debug('rendering restore vault screen') return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - } else if (!props.isInitialized) { + } else if (!props.isInitialized && !props.isUnlocked) { log.debug('rendering menu screen') return props.isPopup ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) -- cgit From def369ba079fb3596c126fe9b622eda46afa54f6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 13:43:22 -0330 Subject: Move beta warning to app header. --- ui/app/app.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 58e38a077..7490c63b1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -239,6 +239,9 @@ App.prototype.renderAppBar = function () { showNetworkDropdown, hideNetworkDropdown, currentView, + isInitialized, + betaUI, + isPopup, } = this.props if (window.METAMASK_UI_TYPE === 'notification') { @@ -317,6 +320,9 @@ App.prototype.renderAppBar = function () { ]), ]), + !isInitialized && !isPopup && betaUI && h('h2.alpha-warning', + 'Please be aware that this version is still under development'), + ]) ) } -- cgit From 0739d3507bb560c7991c52d16cdcf4790d65c4c5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 13:59:33 -0330 Subject: Adds beta label to Metamask name in full screen app bar. --- ui/app/app.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 7490c63b1..5d37b9bdf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -288,6 +288,8 @@ App.prototype.renderAppBar = function () { // metamask name h('h1', 'MetaMask'), + h('div.beta-label', 'BETA'), + ]), h('div.header__right-actions', [ -- cgit From 0d97ff221017b78ccfa02defdb7a52ad701981a5 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 2 Mar 2018 22:44:05 -0330 Subject: Fix NewUI reveal seed flow. (#3410) --- ui/app/app.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 5d37b9bdf..bfa8d8aa7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -89,6 +89,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, betaUI: state.metamask.featureFlags.betaUI, + isRevealingSeedWords: state.metamask.isRevealingSeedWords, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -362,9 +363,16 @@ App.prototype.renderBackButton = function (style, justArrow = false) { App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props - const {isMascara, isOnboarding, betaUI} = props + const { + isMascara, + isOnboarding, + betaUI, + isRevealingSeedWords, + } = props + const isMascaraOnboarding = isMascara && isOnboarding + const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords - if ((isMascara || betaUI) && isOnboarding && !props.isPopup) { + if (isMascaraOnboarding || isBetaUIOnboarding) { return h(MascaraFirstTime) } @@ -388,7 +396,7 @@ App.prototype.renderPrimary = function () { if (props.isInitialized && props.forgottenPassword) { log.debug('rendering restore vault screen') return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - } else if (!props.isInitialized && !props.isUnlocked) { + } else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) { log.debug('rendering menu screen') return props.isPopup ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) -- cgit From 1bd18cebd7e08edbbcf35407b962e71dcd2c3399 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 5 Mar 2018 13:33:46 -0330 Subject: Fixes shapeshift coin selection dropdown. (#3416) --- ui/app/app.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index bfa8d8aa7..d243e72a4 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -90,6 +90,7 @@ function mapStateToProps (state) { isMouseUser: state.appState.isMouseUser, betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, + Qr: state.appState.Qr, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -368,6 +369,7 @@ App.prototype.renderPrimary = function () { isOnboarding, betaUI, isRevealingSeedWords, + Qr, } = props const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords @@ -508,7 +510,7 @@ App.prototype.renderPrimary = function () { width: '285px', }, }, [ - h(QrView, {key: 'qr'}), + h(QrView, {key: 'qr', Qr}), ]), ]) -- cgit From 5f8a632fec0e83b148e4e0b7fc95339fb870d804 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 6 Mar 2018 09:14:57 -0800 Subject: Fix seed phrase validation clearing form (#3417) * Fix seed phrase validation clearing form * Make new ui import seed error feedback live, and allow newlines with and without carriage returns. --- ui/app/app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index d243e72a4..4e6da24c3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -288,10 +288,10 @@ App.prototype.renderAppBar = function () { }), // metamask name - h('h1', 'MetaMask'), - - h('div.beta-label', 'BETA'), - + h('.flex-row', [ + h('h1', 'MetaMask'), + h('div.beta-label', 'BETA'), + ]), ]), h('div.header__right-actions', [ -- cgit From f06bca1151b07d908cd90f6efd97064e288e5f27 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 6 Mar 2018 15:32:35 -0800 Subject: Implemented feedback to make i18n work on mac --- ui/app/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index df9eab03c..3205baebb 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -4,6 +4,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') const classnames = require('classnames') +const t = require('../i18n') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default @@ -264,7 +265,7 @@ App.prototype.renderAppBar = function () { }), // metamask name - h('h1', 'MetaMask'), + h('h1', t('appName')), ]), -- cgit From 91c890041c685db8ff7f7ac87009225fa31b3042 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Mar 2018 14:01:21 -0330 Subject: Add welcome screen to new-ui browser first time flow. --- ui/app/app.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 4e6da24c3..11b761639 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -12,6 +12,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe const OldUIInitializeMenuScreen = require('./first-time/init-menu') const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') +const WelcomeScreen = require('./welcome-screen').default + // accounts const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') @@ -91,6 +93,7 @@ function mapStateToProps (state) { betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, Qr: state.appState.Qr, + welcomeScreenSeen: state.metamask.welcomeScreenSeen, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -244,6 +247,7 @@ App.prototype.renderAppBar = function () { isInitialized, betaUI, isPopup, + welcomeScreenSeen, } = this.props if (window.METAMASK_UI_TYPE === 'notification') { @@ -269,7 +273,7 @@ App.prototype.renderAppBar = function () { style: {}, }, [ - h('.app-header.flex-row.flex-space-between', { + (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', { className: classnames({ 'app-header--initialized': !isOnboarding, }), @@ -324,8 +328,12 @@ App.prototype.renderAppBar = function () { ]), ]), - !isInitialized && !isPopup && betaUI && h('h2.alpha-warning', - 'Please be aware that this version is still under development'), + !isInitialized && !isPopup && betaUI && h('h2', { + className: classnames({ + 'alpha-warning': welcomeScreenSeen, + 'alpha-warning-welcome-screen': !welcomeScreenSeen, + }), + }, 'Please be aware that this version is still under development'), ]) ) @@ -369,11 +377,18 @@ App.prototype.renderPrimary = function () { isOnboarding, betaUI, isRevealingSeedWords, + welcomeScreenSeen, Qr, + isInitialized, + isUnlocked, } = props const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords + if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + return h(WelcomeScreen) + } + if (isMascaraOnboarding || isBetaUIOnboarding) { return h(MascaraFirstTime) } -- cgit From 0dad6db9736f2b90000c489b0b452c8d2fa02bb3 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Mar 2018 14:29:26 -0230 Subject: Styling fixes to welcome; hide network component on create password; shown welcoem in popup. --- ui/app/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 11b761639..50514bd3b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -298,7 +298,7 @@ App.prototype.renderAppBar = function () { ]), ]), - h('div.header__right-actions', [ + betaUI && isInitialized && h('div.header__right-actions', [ h('div.network-component-wrapper', { style: {}, }, [ @@ -385,7 +385,7 @@ App.prototype.renderPrimary = function () { const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords - if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) { return h(WelcomeScreen) } -- cgit