Merge pull request #370 from MetaMask/networkIndication

Network indication

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Current Master
 
+- Added a network indicator mark in dropdown menu
+- Added network name next to network indicator
 - Add copy transaction hash button to completed transaction list items.
 - Unify wording for transaction approve/reject options on notifications and the extension.
 

ui/app/app.js

@@ -140,7 +140,7 @@ App.prototype.renderAppBar = function () {
         h('h1', {
           style: {
             position: 'relative',
-            left: '3px',
+            left: '9px',
           },
         }, 'MetaMask'),
 
@@ -216,6 +216,7 @@ App.prototype.renderNetworkDropdown = function () {
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setProviderType('mainnet')),
       icon: h('.menu-icon.diamond'),
+      activeNetworkRender: props.network,
     }),
 
     h(DropMenuItem, {
@@ -223,6 +224,7 @@ App.prototype.renderNetworkDropdown = function () {
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setProviderType('testnet')),
       icon: h('.menu-icon.red-dot'),
+      activeNetworkRender: props.network,
     }),
 
     h(DropMenuItem, {
@@ -230,6 +232,7 @@ App.prototype.renderNetworkDropdown = function () {
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
       icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+      activeNetworkRender: props.provider.rpcTarget,
     }),
     this.renderCustomOption(props.provider.rpcTarget),
   ])
@@ -369,12 +372,20 @@ App.prototype.renderCustomOption = function (rpcTarget) {
         action: () => this.props.dispatch(actions.showConfigPage()),
         icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
       })
+    case 'http://localhost:8545':
+      return h(DropMenuItem, {
+        label: 'Custom RPC',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+        action: () => this.props.dispatch(actions.showConfigPage()),
+        icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+      })
 
     default:
       return h(DropMenuItem, {
         label: `${rpcTarget}`,
         closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+        activeNetworkRender: 'custom',
       })
   }
 }

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

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

ui/app/css/index.css

@@ -141,6 +141,23 @@ textarea.twelve-word-phrase {
   resize: none;
 }
 
+.network-indicator {
+  display: flex;
+  align-items: center;
+  font-size: 0.6em;
+
+}
+
+.network-name {
+  position: absolute;
+  top: 8px;
+  width: 5.2em;
+  line-height: 9px;
+}
+
+.check {
+  color: #F7861C;
+}
 /*
 app sections
 */