From a8a37e4d40ac543025f7f7d111a59dc17c6f3a8c Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Wed, 4 Jan 2017 14:30:14 -0800 Subject: Make network somewhat more modular, add new network indicator. --- ui/app/app.js | 24 +++++++++++++++--------- ui/app/components/network.js | 7 ++----- ui/app/conf-tx.js | 7 +++++++ ui/app/css/index.css | 3 --- 4 files changed, 24 insertions(+), 17 deletions(-) (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 6da0c3b1d..bd235998b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -141,15 +141,21 @@ 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 }) - }, - }), + h('#network-spacer.flex-center', { + style: { + marginRight: '-72px', + } + }, [ + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + }, + }), + ]), ]), // metamask name diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 43dc747b3..5fd7424b3 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -13,6 +13,7 @@ function Network () { Network.prototype.render = function () { const props = this.props const networkNumber = props.network + const style = props.style let providerName try { providerName = props.provider.type @@ -46,11 +47,7 @@ Network.prototype.render = function () { } return ( - h('#network_component.flex-center.pointer', { - style: { - marginRight: '-27px', - marginLeft: '-3px', - }, + h('#network_component.pointer', { title: hoverText, onClick: (event) => this.props.onClick(event), }, [ diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 0b1dcac45..f3aad0fb8 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -4,6 +4,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('./actions') +const NetworkIndicator = require('./components/network') const txHelper = require('../lib/tx-helper') const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification') const ethUtil = require('ethereumjs-util') @@ -24,6 +25,7 @@ function mapStateToProps (state) { index: state.appState.currentView.context, warning: state.appState.warning, network: state.metamask.network, + provider: state.metamask.provider, } } @@ -36,6 +38,7 @@ ConfirmTxScreen.prototype.render = function () { var state = this.props var network = state.network + var provider = state.provider var unconfTxs = state.unconfTxs var unconfMsgs = state.unconfMsgs var unconfTxList = txHelper(unconfTxs, unconfMsgs, network) @@ -53,6 +56,10 @@ ConfirmTxScreen.prototype.render = function () { !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { onClick: this.goHome.bind(this), }) : null, + isNotification ? h(NetworkIndicator, { + network: network, + provider: provider, + }) : null, h('h2.page-subtitle', 'Confirm Transaction'), ]), diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 975a5289b..16e1dbe7e 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -165,9 +165,6 @@ textarea.twelve-word-phrase { } .network-name { - position: absolute; - top: 8px; - left: 60px; width: 5.2em; line-height: 9px; text-rendering: geometricPrecision; -- cgit From b8d312f8b92c2edf88348196297b67b5f9fa3b2a Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Wed, 4 Jan 2017 15:04:51 -0800 Subject: Linting. --- ui/app/app.js | 2 +- ui/app/components/network.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index bd235998b..9efe95874 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -144,7 +144,7 @@ App.prototype.renderAppBar = function () { h('#network-spacer.flex-center', { style: { marginRight: '-72px', - } + }, }, [ h(NetworkIndicator, { network: this.props.network, diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 5fd7424b3..77805fd57 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -13,7 +13,6 @@ function Network () { Network.prototype.render = function () { const props = this.props const networkNumber = props.network - const style = props.style let providerName try { providerName = props.provider.type -- cgit From af61bb90653b873cba6678db43dc4997cb47b505 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Thu, 5 Jan 2017 08:31:54 -0800 Subject: Switch order of header and indicator. --- ui/app/conf-tx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index f3aad0fb8..52b7a7ae4 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -56,11 +56,11 @@ ConfirmTxScreen.prototype.render = function () { !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { onClick: this.goHome.bind(this), }) : null, + h('h2.page-subtitle', 'Confirm Transaction'), isNotification ? h(NetworkIndicator, { network: network, provider: provider, }) : null, - h('h2.page-subtitle', 'Confirm Transaction'), ]), h('h3', { -- cgit