Merge pull request #926 from ethereum/indicator

ADD network indicator

src/app/tabs/run-tab.js

@@ -165,6 +165,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: 28px;
+    pointer-events: none;
+  }
+  .networkItem {
+    margin-right: 5px;
+  }
 `
 
 module.exports = runTab
@@ -378,33 +392,49 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
 ------------------------------------------------ */
 function settings (appAPI, appEvents) {
   // SETTINGS HTML
+  var net = yo`<span class=${css.network}></span>`
+  const updateNetwork = () => {
+    executionContext.detectNetwork((err, { id, name } = {}) => {
+      if (err) {
+        console.error(err)
+        net.innerHTML = 'can\'t detect network '
+      } else {
+        net.innerHTML = `<i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
+      }
+    })
+  }
+  setInterval(updateNetwork, 5000)
   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}">
-          <option id="vm-mode"
-            title="Execution environment does not connect to any node, everything is local and in memory only."
-            value="vm"
-            checked name="executionContext">
-            JavaScript VM
-          </option>
-          <option id="injected-mode"
-            title="Execution environment has been provided by Mist or similar provider."
-            value="injected"
-            checked name="executionContext">
-            Injected Web3
-          </option>
-          <option id="web3-mode"
-            title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
-            If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
-            value="web3"
-            name="executionContext">
-            Web3 Provider
-          </option>
-        </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"
+              checked name="executionContext">
+              JavaScript VM
+            </option>
+            <option id="injected-mode"
+              title="Execution environment has been provided by Mist or similar provider."
+              value="injected"
+              checked name="executionContext">
+              Injected Web3
+            </option>
+            <option id="web3-mode"
+              title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
+              If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
+              value="web3"
+              name="executionContext">
+              Web3 Provider
+            </option>
+          </select>
+          <a style="margin-left: 8px;" href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="fa fa-info"></i></a>
+        </div>
       </div>
       <div class="${css.crow}">
         <div class="${css.col1_1}">Account</div>

src/execution-context.js

@@ -74,6 +74,8 @@ vm.stateManager.checkpoint()
 var web3VM = new Web3VMProvider()
 web3VM.setVM(vm)
 
+var mainNetGenesisHash = '0xd4e56740f876aef8c010b86a40d5f56745a118d0906a34e69aec8c0db1cb8fa3'
+
 /*
   trigger contextChanged, web3EndpointChanged
 */
@@ -94,6 +96,34 @@ function ExecutionContext () {
     return this.isVM() ? web3VM : web3
   }
 
+  this.detectNetwork = function (callback) {
+    if (this.isVM()) {
+      callback(null, { id: '-', name: 'VM' })
+    } else {
+      this.web3().version.getNetwork((err, id) => {
+        var name = null
+        if (err) name = 'Unknown'
+        // https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md
+        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 = 'Custom'
+
+        if (id === '1') {
+          this.web3().eth.getBlock(0, (error, block) => {
+            if (error) console.log('cant query first block')
+            if (block && block.hash !== mainNetGenesisHash) name = 'Custom'
+            callback(err, { id, name })
+          })
+        } else {
+          callback(err, { id, name })
+        }
+      })
+    }
+  }
+
   this.internalWeb3 = function () {
     return web3
   }