Merge pull request #246 from MetaMask/ProviderMenu

Provider menu

CHANGELOG.md

@@ -2,8 +2,9 @@
 
 ## Current Master
 
-- show network status in title bar
+- Show network status in title bar
 - Added seed word recovery to config screen.
+- Clicking network status indicator now reveals a provider menu.
 
 ## 2.2.0 2016-06-02
 

ui/app/app.js

@@ -53,10 +53,9 @@ function mapStateToProps(state) {
 }
 
 App.prototype.render = function() {
-  // const { selectedReddit, posts, isFetching, lastUpdated } = this.props
-  var state = this.props
-  var view = state.currentView.name
-  var transForward = state.transForward
+  var props = this.props
+  var view = props.currentView.name
+  var transForward = props.transForward
 
   return (
 
@@ -71,6 +70,7 @@ App.prototype.render = function() {
 
       // app bar
       this.renderAppBar(),
+      this.renderNetworkDropdown(),
       this.renderDropdown(),
 
       // panel content
@@ -94,7 +94,9 @@ App.prototype.render = function() {
 }
 
 App.prototype.renderAppBar = function(){
-  var state = this.props
+  const props = this.props
+  const state = this.state || {}
+  const isNetworkMenuOpen = state.isNetworkMenuOpen || false
 
   return (
 
@@ -103,15 +105,22 @@ App.prototype.renderAppBar = function(){
       h('.app-header.flex-row.flex-space-between', {
         style: {
           alignItems: 'center',
-          visibility: state.isUnlocked ? 'visible' : 'none',
-          background: state.isUnlocked ? 'white' : 'none',
+          visibility: props.isUnlocked ? 'visible' : 'none',
+          background: props.isUnlocked ? 'white' : 'none',
           height: '36px',
           position: 'relative',
           zIndex: 1,
         },
-      }, state.isUnlocked && [
+      }, props.isUnlocked && [
 
-        h(NetworkIndicator, {network: this.props.network}),
+        h(NetworkIndicator, {
+          network: this.props.network,
+          onClick:(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
+          }
+        }),
 
         // metamask name
         h('h1', 'MetaMask'),
@@ -120,7 +129,7 @@ App.prototype.renderAppBar = function(){
           width: 16,
           barHeight: 2,
           padding: 0,
-          isOpen: state.menuOpen,
+          isOpen: props.menuOpen,
           color: 'rgb(247,146,30)',
           onClick: (event) => {
             event.preventDefault()
@@ -133,6 +142,56 @@ App.prototype.renderAppBar = function(){
   )
 }
 
+App.prototype.renderNetworkDropdown = function() {
+  const props = this.props
+  const state = this.state || {}
+  const isOpen = state.isNetworkMenuOpen
+
+  const checked = h('i.fa.fa-check.fa-lg', { ariaHidden: true })
+
+  return h(MenuDroppo, {
+    isOpen,
+    onClickOutside:(event) => {
+      this.setState({ isNetworkMenuOpen: !isOpen })
+    },
+    style: {
+      position: 'fixed',
+      left: 0,
+      zIndex: 0,
+    },
+    innerStyle: {
+      background: 'white',
+      boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
+    },
+  }, [ // DROP MENU ITEMS
+    h('style', `
+      .drop-menu-item:hover { background:rgb(235, 235, 235); }
+      .drop-menu-item i { margin: 11px; }
+    `),
+
+    h(DropMenuItem, {
+      label: 'Main Ethereum Network',
+      closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+      action:() => props.dispatch(actions.setProviderType('mainnet')),
+      icon: h('.menu-icon.ether-icon'),
+    }),
+
+    h(DropMenuItem, {
+      label: 'Morden Test Network',
+      closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+      action:() => props.dispatch(actions.setProviderType('testnet')),
+      icon: h('.menu-icon.morden-icon'),
+    }),
+
+    h(DropMenuItem, {
+      label: 'Localhost 8545',
+      closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+      action:() => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
+      icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+    }),
+  ])
+}
+
 App.prototype.renderDropdown = function() {
   const props = this.props
   return h(MenuDroppo, {

ui/app/components/network.js

@@ -21,14 +21,14 @@ Network.prototype.render = function() {
       title: 'Attempting to connect to blockchain.',
       style: {
         width: '27px',
-        marginRight: '-16px'
+        marginRight: '-27px'
       },
       src: 'images/loading.svg',
     })
-  } else if (networkNumber ==  1) {
+  } else if (parseInt(networkNumber) ==  1) {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
-  }else if (networkNumber ==  2) {
+  }else if (parseInt(networkNumber) ==  2) {
     hoverText = "Morden Test Network"
     iconName = 'morden-test-network'
   }else {
@@ -36,9 +36,30 @@ Network.prototype.render = function() {
     iconName = 'unknown-private-network'
   }
   return (
-    h('#network_component.flex-center', {
-      style: { marginRight: '-16px' },
+    h('#network_component.flex-center.pointer', {
+      style: {
+        marginRight: '-27px',
+        marginLeft: '-3px',
+      },
       title: hoverText,
-    },[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ])
+      onClick:(event) => this.props.onClick(event),
+    },[
+        function() {
+          switch (iconName) {
+            case 'ethereum-network':
+              return h('.menu-icon.ether-icon')
+            case 'morden-test-network':
+              return h('.menu-icon.morden-icon')
+            default:
+              return h('i.fa.fa-question-circle.fa-lg', {
+                ariaHidden: true,
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              })
+          }
+        }()
+    ])
   )
 }

ui/app/css/lib.css

@@ -199,3 +199,22 @@ hr.horizontal-line {
   display: flex;
   align-items: center;
 }
+
+.menu-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin: 13px;
+}
+.ether-icon {
+  background: rgb(0, 163, 68);
+  border-radius: 20px;
+}
+.morden-icon {
+  background: #E20202;
+}
+
+.drop-menu-item {
+  display: flex;
+  align-items: center;
+}