Merge pull request #245 from MetaMask/display_network

Display network

.gitignore

@@ -10,3 +10,4 @@ package
 
 .DS_Store
 builds/
+notes.txt

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Current Master
 
+- show network status in title bar
 - Added seed word recovery to config screen.
 
 ## 2.2.0 2016-06-02

app/scripts/background.js

@@ -76,13 +76,20 @@ var providerOpts = {
 var provider = MetaMaskProvider(providerOpts)
 var web3 = new Web3(provider)
 idStore.web3 = web3
-idStore.getNetwork(3)
+idStore.getNetwork()
 
 // log new blocks
 provider.on('block', function(block){
   console.log('BLOCK CHANGED:', '#'+block.number.toString('hex'), '0x'+block.hash.toString('hex'))
+
+  // Check network when restoring connectivity:
+  if (idStore._currentState.network === 'loading') {
+    idStore.getNetwork()
+  }
 })
 
+provider.on('error', idStore.getNetwork.bind(idStore))
+
 var ethStore = new EthStore(provider)
 idStore.setStore(ethStore)
 
@@ -292,13 +299,13 @@ function addUnconfirmedMsg(msgParams, cb){
 function setRpcTarget(rpcTarget){
   configManager.setRpcTarget(rpcTarget)
   chrome.runtime.reload()
-  idStore.getNetwork(3) // 3 retry attempts
+  idStore.getNetwork()
 }
 
 function setProviderType(type) {
   configManager.setProviderType(type)
   chrome.runtime.reload()
-  idStore.getNetwork(3)
+  idStore.getNetwork()
 }
 
 function useEtherscanProvider() {

app/scripts/lib/idStore.js

@@ -137,16 +137,22 @@ IdentityStore.prototype.revealAccount = function(cb) {
   cb(null)
 }
 
-IdentityStore.prototype.getNetwork = function(tries) {
-  if (tries === 0) {
-    this._currentState.network = 'error'
-    return
+IdentityStore.prototype.getNetwork = function(err) {
+
+  if (err) {
+    this._currentState.network = 'loading'
+    this._didUpdate()
   }
+
   this.web3.version.getNetwork((err, network) => {
     if (err) {
-      return this.getNetwork(tries - 1, cb)
+      this._currentState.network = 'loading'
+      return this._didUpdate()
     }
+
+    console.log('web3.getNetwork returned ' + network)
     this._currentState.network = network
+    this._didUpdate()
   })
 }
 

package.json

@@ -62,7 +62,7 @@
     "through2": "^2.0.1",
     "vreme": "^3.0.2",
     "web3": "ethereum/web3.js#0.16.0",
-    "web3-provider-engine": "^7.7.2",
+    "web3-provider-engine": "^7.8.1",
     "web3-stream-provider": "^2.0.1",
     "xtend": "^4.0.1"
   },

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) {

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,

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'}) ])
+  )
+}