Merge pull request #370 from MetaMask/networkIndication

Network indication

2 files changed, 51 insertions, 9 deletions

diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index 5531ebf9f..69294c94d 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -25,5 +25,25 @@ DropMenuItem.prototype.render = function () {
   }, [
     this.props.icon,
     this.props.label,
+    this.activeNetworkRender(),
   ])
 }
+
+DropMenuItem.prototype.activeNetworkRender = function () {
+  var activeNetwork = this.props.activeNetworkRender
+  if (activeNetwork === undefined) return
+
+  switch (this.props.label) {
+    case 'Main Ethereum Network':
+      if (activeNetwork === '1') return h('.check', '	✓')
+      break
+    case 'Morden Test Network':
+      if (activeNetwork === '2') return h('.check', '	✓')
+      break
+    case 'Localhost 8545':
+      if (activeNetwork === 'http://localhost:8545') return h('.check', '	✓')
+      break
+    default:
+      if (activeNetwork === 'custom') return h('.check', '	✓')
+  }
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 9f7287371..032e71699 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -47,17 +47,39 @@ Network.prototype.render = function () {
       (function () {
         switch (iconName) {
           case 'ethereum-network':
-            return h('.menu-icon.diamond')
+            return h('.network-indicator', [
+              h('.menu-icon.diamond'),
+              h('.network-name', {
+                style: {
+                  color: '#039396',
+                }},
+              'Etherum Main Net'),
+            ])
           case 'morden-test-network':
-            return h('.menu-icon.red-dot')
+            return h('.network-indicator', [
+              h('.menu-icon.red-dot'),
+              h('.network-name', {
+                style: {
+                  color: '#ff6666',
+                }},
+              'Morden Test Net'),
+            ])
           default:
-            return h('i.fa.fa-question-circle.fa-lg', {
-              ariaHidden: true,
-              style: {
-                margin: '10px',
-                color: 'rgb(125, 128, 130)',
-              },
-            })
+            return h('.network-indicator', [
+              h('i.fa.fa-question-circle.fa-lg', {
+                ariaHidden: true,
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              }),
+
+              h('.network-name', {
+                style: {
+                  color: '#AEAEAE',
+                }},
+              'Private Network'),
+            ])
         }
       })(),
     ])