Make network somewhat more modular, add new network indicator.

4 files changed, 24 insertions, 17 deletions

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;