ADD network indicator

src/app/tabs/run-tab.js

@@ -1,6 +1,7 @@
 'use strict'
 var $ = require('jquery')
 var yo = require('yo-yo')
+var detectNetwork = require('../../lib/detect-network')
 var helper = require('../../lib/helper.js')
 var txExecution = require('../execution/txExecution')
 var txFormat = require('../execution/txFormat')
@@ -165,6 +166,20 @@ var css = csjs`
     padding-left: 10px;
     display: inline;
   }
+  .network {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    color: grey;
+    width: 100%;
+    height: 100%;
+    padding-right: 20px;
+    pointer-events: none;
+  }
+  .networkItem {
+    margin-right: 5px;
+  }
 `
 
 module.exports = runTab
@@ -366,13 +381,26 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
 ------------------------------------------------ */
 function settings (appAPI, appEvents) {
   // SETTINGS HTML
+  var net = yo`<span class=${css.network}></span>`
+  const updateNetwork = () => {
+    detectNetwork((err, { id, name } = {}) => {
+      if (err) console.error(err)
+      console.log(`update network[${id}] name: ${name}`)
+      net.innerHTML = `
+        <i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name}(${id || '-'})
+      `
+    })
+  }
+  updateNetwork()
   var el = yo`
     <div class="${css.settings}">
       <div class="${css.crow}">
         <div id="selectExEnv" class="${css.col1_1}">
           Environment
         </div>
-        <select id="selectExEnvOptions" class="${css.select}">
+        <div style="position: relative;">
+          ${net}
+          <select id="selectExEnvOptions" onchange=${updateNetwork} class="${css.select}">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm"
@@ -394,6 +422,7 @@ function settings (appAPI, appEvents) {
             </option>
           </select>
         </div>
+      </div>
       <div class="${css.crow}">
         <div class="${css.col1_1}">Account</div>
         <select name="txorigin" class="${css.select}" id="txorigin"></select>

src/lib/detect-network.js

@@ -0,0 +1,19 @@
+var executionContext = require('../execution-context')
+window.executionContext = executionContext
+module.exports = detectNetwork
+
+function detectNetwork (callback) {
+  var web3provider = executionContext.web3()
+  var get = web3provider.version ? web3provider.version.getNetwork : web3provider.web3.version.getNetwork
+  get((err, id) => {
+    var name = null
+    if (err) name = 'Unknown'
+    else if (id === '1') name = 'Main'
+    else if (id === '2') name = 'Morden (deprecated)'
+    else if (id === '3') name = 'Ropsten'
+    else if (id === '4') name = 'Rinkeby'
+    else if (id === '42') name = 'Kovan'
+    else name = 'Unknown'
+    callback(err, { id, name })
+  })
+}