Merge pull request #245 from MetaMask/display_network

Display network

3 files changed, 55 insertions, 7 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 684d33f3d..dd38c5f0a 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -6,6 +6,8 @@ var actions = {
   toggleMenu: toggleMenu,
   SET_MENU_STATE: 'SET_MENU_STATE',
   closeMenu: closeMenu,
+  getNetworkStatus: 'getNetworkStatus',
+
   // remote state
   UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
   updateMetamaskState: updateMetamaskState,
@@ -135,6 +137,12 @@ function closeMenu() {
   }
 }
 
+function getNetworkStatus(){
+  return {
+    type: actions.getNetworkStatus,
+  }
+}
+
 // async actions
 
 function tryUnlockMetamask(password) {
diff --git a/ui/app/app.js b/ui/app/app.js
index 094cae76c..7d5d2108a 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -28,6 +28,7 @@ const txHelper = require('../lib/tx-helper')
 const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
+const NetworkIndicator = require('./components/network')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -47,6 +48,7 @@ function mapStateToProps(state) {
     unconfTxs: state.metamask.unconfTxs,
     unconfMsgs: state.metamask.unconfMsgs,
     menuOpen: state.appState.menuOpen,
+    network: state.metamask.network,
   }
 }
 
@@ -109,16 +111,10 @@ App.prototype.renderAppBar = function(){
         },
       }, state.isUnlocked && [
 
-        // mini logo
-        h('img', {
-          height: 24,
-          width: 24,
-          src: '/images/icon-128.png',
-        }),
+        h(NetworkIndicator, {network: this.props.network}),
 
         // metamask name
         h('h1', 'MetaMask'),
-
         // hamburger
         h(SandwichExpando, {
           width: 16,
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
new file mode 100644
index 000000000..37046fd30
--- /dev/null
+++ b/ui/app/components/network.js
@@ -0,0 +1,44 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = Network
+
+inherits(Network, Component)
+
+function Network() {
+  Component.call(this)
+}
+
+Network.prototype.render = function() {
+  const state = this.props
+  const networkNumber = state.network
+  let iconName, hoverText
+  const imagePath = "/images/"
+
+  if (networkNumber ==  'loading') {
+    return h('img', {
+      title: 'Attempting to connect to blockchain.',
+      style: {
+        width: '27px',
+        marginRight: '-16px'
+      },
+      src: 'images/loading.svg',
+    })
+  } else if (networkNumber ==  1) {
+    hoverText = 'Main Ethereum Network'
+    iconName = 'ethereum-network'
+  }else if (networkNumber ==  2) {
+    hoverText = "Morden Test Network"
+    iconName = 'morden-test-network'
+  }else {
+    hoverText = "Unknown Private Network"
+    iconName = 'unknown-private-network'
+  }
+  return (
+    h('#network_component.flex-center', {
+      style: { marginRight: '-16px' },
+      title: hoverText,
+    },[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ])
+  )
+}