Merge pull request #970 from MetaMask/network-indicator-refactor

Network indicator modifications

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Remove certain non-essential permissions from certain builds.
 - Add a check for when a tx is included in a block.
+- Minor modifications to network display.
+- Network now displays properly for pending transactions.
 - Implement replay attack protections allowed by EIP 155.
 - Fix bug where sometimes loading account data would fail by querying a future block.
 

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

ui/app/components/network.js

@@ -46,11 +46,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),
     }, [

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)
@@ -54,6 +57,10 @@ ConfirmTxScreen.prototype.render = function () {
           onClick: this.goHome.bind(this),
         }) : null,
         h('h2.page-subtitle', 'Confirm Transaction'),
+        isNotification ? h(NetworkIndicator, {
+          network: network,
+          provider: provider,
+        }) : null,
       ]),
 
       h('h3', {

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;