From 4cd33453dc14ae9e6a797c16cccb52598904941a Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 22:15:21 +0200
Subject: [WIP] Extract network dropdown into own component

---
 ui/app/components/dropdowns/network-dropdown.js | 276 ++++++++++++++++++++++++
 1 file changed, 276 insertions(+)
 create mode 100644 ui/app/components/dropdowns/network-dropdown.js

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
new file mode 100644
index 000000000..42ab53c60
--- /dev/null
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -0,0 +1,276 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Dropdown = require('../dropdown').Dropdown
+const DropdownMenuItem = require('../dropdown').DropdownMenuItem
+
+function mapStateToProps (state) {
+  return {
+    provider: state.metamask.provider,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: () => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target) => {
+      dispatch(actions.setRpcTarget(target))
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+    },
+    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
+    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+// renderNetworkDropdown
+// renderCustomOption
+// renderCommonRpc
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  console.log("RENDER")
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcList = props.frequentRpcList
+  const state = this.state || {}
+  console.log("this.state", state)
+  const isOpen = this.props.networkDropdownOpen
+
+  console.log("isOpen", isOpen)
+
+  return h(Dropdown, {
+    useCssTransition: true,
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isNotToggleElement = [
+        classList.contains('menu-icon'),
+        classList.contains('network-name'),
+        classList.contains('network-indicator'),
+      ].filter(bool => bool).length === 0
+      // classes from three constituent nodes of the toggle element
+
+      if (isNotToggleElement) {
+        this.props.hideNetworkDropdown()
+      }
+    },
+    zIndex: 11,
+    style: {
+      position: 'absolute',
+      right: '2px',
+      top: '38px',
+    },
+    innerStyle: {
+      padding: '2px 16px 2px 0px',
+    },
+  }, [
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('mainnet'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.diamond'),
+        'Main Ethereum Network',
+        providerType === 'mainnet' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('ropsten'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.red-dot'),
+        'Ropsten Test Network',
+        providerType === 'ropsten' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('kovan'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.hollow-diamond'),
+        'Kovan Test Network',
+        providerType === 'kovan' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => propssetProviderType('rinkeby'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.golden-square'),
+        'Rinkeby Test Network',
+        providerType === 'rinkeby' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setDefaultRpcTarget(),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Localhost 8545',
+        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.showConfigPage(),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Custom RPC',
+        activeNetwork === 'custom' ? h('.check', '✓') : null,
+      ]
+    ),
+
+  ])
+}
+
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+  const props = this.props
+  const rpcTarget = provider.rpcTarget
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc ? h('.check', '✓') : null,
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type } = provider
+  const props = this.props
+
+  if (type !== 'rpc') return null
+
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.setRpcTarget(rpcTarget),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
+  }
+}
+
+const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+module.exports = comp
-- 
cgit 


From d01a6633423e9b20f3ca8e73cd39655362190f64 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 22:18:08 +0200
Subject: Remove unused code - network dropdown components in app

---
 ui/app/components/dropdowns/network-dropdown.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 42ab53c60..eb41f6f9b 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -42,21 +42,16 @@ function NetworkDropdown () {
   Component.call(this)
 }
 
-// renderNetworkDropdown
-// renderCustomOption
-// renderCommonRpc
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
-  console.log("RENDER")
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const state = this.state || {}
-  console.log("this.state", state)
   const isOpen = this.props.networkDropdownOpen
 
-  console.log("isOpen", isOpen)
-
   return h(Dropdown, {
     useCssTransition: true,
     isOpen,
@@ -271,6 +266,3 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
       )
   }
 }
-
-const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
-module.exports = comp
-- 
cgit 


From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 14 Aug 2017 10:31:27 +0200
Subject: Lint and cleanup all scss

---
 ui/app/components/dropdowns/network-dropdown.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index eb41f6f9b..6228513c9 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -3,8 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const Dropdown = require('../dropdown').Dropdown
-const DropdownMenuItem = require('../dropdown').DropdownMenuItem
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 
 function mapStateToProps (state) {
   return {
-- 
cgit 


From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 12:20:48 -0230
Subject: Lint fixes

---
 ui/app/components/dropdowns/network-dropdown.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 6228513c9..0c002b2f0 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -23,6 +23,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.setProviderType(type))
     },
     setDefaultRpcTarget: () => {
+      // TODO: type is not defined. Is it needed?
       dispatch(actions.setDefaultRpcTarget(type))
     },
     setRpcTarget: (target) => {
@@ -31,8 +32,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
-    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
+    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
+    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
   }
 }
 
@@ -49,7 +50,6 @@ NetworkDropdown.prototype.render = function () {
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
-  const state = this.state || {}
   const isOpen = this.props.networkDropdownOpen
 
   return h(Dropdown, {
@@ -135,7 +135,7 @@ NetworkDropdown.prototype.render = function () {
       {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => propssetProviderType('rinkeby'),
+        onClick: () => props.setProviderType('rinkeby'),
         style: {
           fontSize: '18px',
         },
-- 
cgit 


From b1fc290bed26ae0ea8d182340854c82cc1f3d12d Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Thu, 31 Aug 2017 04:08:11 -0700
Subject: Fix menu style

---
 ui/app/components/dropdowns/network-dropdown.js | 83 ++++++++++++++++---------
 1 file changed, 53 insertions(+), 30 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0c002b2f0..3f4ea6274 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) {
     setProviderType: (type) => {
       dispatch(actions.setProviderType(type))
     },
-    setDefaultRpcTarget: () => {
-      // TODO: type is not defined. Is it needed?
+    setDefaultRpcTarget: type => {
       dispatch(actions.setDefaultRpcTarget(type))
     },
     setRpcTarget: (target) => {
@@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () {
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontFamily: 'DIN OT',
+    fontSize: '16px',
+    lineHeight: '20px',
+  };
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () {
       position: 'absolute',
       right: '2px',
       top: '38px',
+      minWidth: '309px',
     },
     innerStyle: {
-      padding: '2px 16px 2px 0px',
+      padding: '10px 8px',
     },
   }, [
 
@@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.diamond'),
-        'Main Ethereum Network',
-        providerType === 'mainnet' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Main Ethereum Network'),
       ]
     ),
 
@@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'ropsten',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('ropsten'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.red-dot'),
-        'Ropsten Test Network',
-        providerType === 'ropsten' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Ropsten Test Network'),
       ]
     ),
 
@@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'kovan',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('kovan'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.hollow-diamond'),
-        'Kovan Test Network',
-        providerType === 'kovan' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Kovan Test Network'),
       ]
     ),
 
@@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('rinkeby'),
+<<<<<<< HEAD
         style: {
           fontSize: '18px',
         },
+=======
+        style: dropdownMenuItemStyle,
+>>>>>>> Fix menu style
       },
       [
+        providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.golden-square'),
-        'Rinkeby Test Network',
-        providerType === 'rinkeby' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Rinkeby Test Network'),
       ]
     ),
 
@@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setDefaultRpcTarget(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Localhost 8545',
-        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Localhost 8545'),
       ]
     ),
 
@@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () {
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => this.props.showConfigPage(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Custom RPC',
-        activeNetwork === 'custom' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Custom RPC'),
       ]
     ),
 
-- 
cgit 


From 9213789c44beaf4bf734bc6192dc646d706d5c44 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 4 Sep 2017 14:50:12 -0700
Subject: Fix merge conflict

---
 ui/app/components/dropdowns/network-dropdown.js | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 3f4ea6274..23af3f7e4 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -147,13 +147,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('rinkeby'),
-<<<<<<< HEAD
-        style: {
-          fontSize: '18px',
-        },
-=======
         style: dropdownMenuItemStyle,
->>>>>>> Fix menu style
       },
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-- 
cgit 


From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 4 Sep 2017 15:55:14 -0700
Subject: Fix header style; Address comments

---
 ui/app/components/dropdowns/network-dropdown.js | 28 ++++++++++++-------------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 23af3f7e4..fa0bb899e 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () {
     fontFamily: 'DIN OT',
     fontSize: '16px',
     lineHeight: '20px',
-  };
+  }
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () {
         this.props.hideNetworkDropdown()
       }
     },
+    containerClassName: 'network-droppo',
     zIndex: 11,
     style: {
       position: 'absolute',
-      right: '2px',
       top: '38px',
       minWidth: '309px',
     },
@@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.diamond'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Main Ethereum Network'),
       ]
@@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.red-dot'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Ropsten Test Network'),
       ]
@@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.hollow-diamond'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Kovan Test Network'),
       ]
@@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.golden-square'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Rinkeby Test Network'),
       ]
@@ -171,9 +171,9 @@ NetworkDropdown.prototype.render = function () {
       [
         activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Localhost 8545'),
       ]
@@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () {
       [
         activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Custom RPC'),
       ]
-- 
cgit 


From 6a3c59e409cf4467ca2c59a0303f2df85ffde73f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:07:48 -0230
Subject: Highlighted circle icons for the network menu.

---
 ui/app/components/dropdowns/network-dropdown.js | 35 ++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index fa0bb899e..f1c6f8221 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 
 function mapStateToProps (state) {
   return {
@@ -94,7 +95,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.diamond'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#038789', // $blue-lagoon
+          nonSelectBackgroundColor: '#15afb2',
+          isSelected: providerType === 'mainnet',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
@@ -113,7 +118,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.red-dot'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#e91550', // $crimson
+          nonSelectBackgroundColor: '#ec2c50',
+          isSelected: providerType === 'ropsten',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
@@ -132,7 +141,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.hollow-diamond'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#690496', // $purple
+          nonSelectBackgroundColor: '#b039f3',
+          isSelected: providerType === 'kovan',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
@@ -151,7 +164,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.golden-square'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#ebb33f', // $tulip-tree
+          nonSelectBackgroundColor: '#ecb23e',
+          isSelected: providerType === 'rinkeby',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
@@ -170,7 +187,10 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'http://localhost:8545',
+          innerBorder: '1px solid #9b9b9b',
+        }),
         h('span.network-name-item', {
           style: {
             color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
@@ -191,7 +211,10 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'custom',
+          innerBorder: '1px solid #9b9b9b',
+        }),
         h('span.network-name-item', {
           style: {
             color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
-- 
cgit 


From 99047e3ef4650ee982d6c7ed606cdaacd4965d64 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:26:54 -0230
Subject: Adds title, divider and descriptive text to network dropdown.

---
 ui/app/components/dropdowns/network-dropdown.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index f1c6f8221..f79c8b29a 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -85,6 +85,17 @@ NetworkDropdown.prototype.render = function () {
     },
   }, [
 
+    h('div.network-dropdown-header', {}, [
+      h('div.network-dropdown-title', {}, 'Networks'),
+
+      h('div.network-dropdown-divider'),
+
+      h('div.network-dropdown-content',
+        {},
+        'The default network for Ether transactions is Main Net.'
+      ),
+    ]),
+
     h(
       DropdownMenuItem,
       {
-- 
cgit 


From 6beb1b33bb20a5bb2bf38b030a5838cf9edff413 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:27:29 -0230
Subject: Replace checkmark with font-awesome equivalent.

---
 ui/app/components/dropdowns/network-dropdown.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index f79c8b29a..1b6bd2385 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -105,7 +105,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#038789', // $blue-lagoon
           nonSelectBackgroundColor: '#15afb2',
@@ -128,7 +128,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#e91550', // $crimson
           nonSelectBackgroundColor: '#ec2c50',
@@ -151,7 +151,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#690496', // $purple
           nonSelectBackgroundColor: '#b039f3',
@@ -174,7 +174,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#ebb33f', // $tulip-tree
           nonSelectBackgroundColor: '#ecb23e',
@@ -197,7 +197,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           isSelected: activeNetwork === 'http://localhost:8545',
           innerBorder: '1px solid #9b9b9b',
@@ -221,7 +221,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
+        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           isSelected: activeNetwork === 'custom',
           innerBorder: '1px solid #9b9b9b',
-- 
cgit 


From 8342c20b58a0b90806a592992b6212ee6fa6f0ad Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 7 Sep 2017 21:17:07 -0230
Subject: Cleaner css for circle icon.

---
 ui/app/components/dropdowns/network-dropdown.js | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 1b6bd2385..4c578fbeb 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -108,7 +108,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#038789', // $blue-lagoon
-          nonSelectBackgroundColor: '#15afb2',
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#e91550', // $crimson
-          nonSelectBackgroundColor: '#ec2c50',
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#690496', // $purple
-          nonSelectBackgroundColor: '#b039f3',
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#ebb33f', // $tulip-tree
-          nonSelectBackgroundColor: '#ecb23e',
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
-- 
cgit 


From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 12 Oct 2017 18:46:09 -0400
Subject: Various styling fixes

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 4c578fbeb..567bf07a0 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: dropdownMenuItemStyle,
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
       },
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-- 
cgit 


From a84014eff8e008fff6db5ebba7323bb52a2d2d9f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 13 Oct 2017 16:25:33 -0400
Subject: Fix Localhost 8545 option in network dropdown (#2357)

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 567bf07a0..c64e7a1d1 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -189,7 +189,7 @@ NetworkDropdown.prototype.render = function () {
       {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setDefaultRpcTarget(),
+        onClick: () => props.setRpcTarget('http://localhost:8545'),
         style: dropdownMenuItemStyle,
       },
       [
-- 
cgit 


From 03685c64b8e45d893c86478869200933de043da8 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 17 Oct 2017 22:42:56 -0700
Subject: Network dropdown update

---
 ui/app/components/dropdowns/network-dropdown.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index c64e7a1d1..736019c39 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -55,6 +55,7 @@ NetworkDropdown.prototype.render = function () {
     fontFamily: 'DIN OT',
     fontSize: '16px',
     lineHeight: '20px',
+    padding: '12px 0',
   }
 
   return h(Dropdown, {
@@ -81,7 +82,7 @@ NetworkDropdown.prototype.render = function () {
       minWidth: '309px',
     },
     innerStyle: {
-      padding: '10px 8px',
+      padding: '18px 8px',
     },
   }, [
 
-- 
cgit 


From 79be956be9f5297d6d601941e50d5ae4eca58560 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 19 Oct 2017 14:10:29 -0700
Subject: Fix network dropdown styles

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 736019c39..20dfca590 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -78,7 +78,7 @@ NetworkDropdown.prototype.render = function () {
     zIndex: 11,
     style: {
       position: 'absolute',
-      top: '38px',
+      top: '58px',
       minWidth: '309px',
     },
     innerStyle: {
-- 
cgit 


From 62f2aebe1d9c3efd6ace8785fc96bb43ae08afe8 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 9 Nov 2017 13:17:10 -0330
Subject: Network loading does not block network loading.

---
 ui/app/components/dropdowns/network-dropdown.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 20dfca590..0908faf01 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -75,11 +75,12 @@ NetworkDropdown.prototype.render = function () {
       }
     },
     containerClassName: 'network-droppo',
-    zIndex: 11,
+    zIndex: 55,
     style: {
       position: 'absolute',
       top: '58px',
       minWidth: '309px',
+      zIndex: '55px',
     },
     innerStyle: {
       padding: '18px 8px',
-- 
cgit 


From 7dba114feb428f7f2f78fee5611377b04bff5be6 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 1 Dec 2017 14:19:53 -0800
Subject: Update font weights to 300, remove animation from network dropdown,
 fix network dropdown not closing from certain click-areas

---
 ui/app/components/dropdowns/network-dropdown.js | 27 +++++++++++++++----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/dropdowns/network-dropdown.js')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0908faf01..dfaa6b22c 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,6 +6,16 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
 
 function mapStateToProps (state) {
   return {
@@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
-    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
 }
 
@@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () {
   }
 
   return h(Dropdown, {
-    useCssTransition: true,
     isOpen,
     onClickOutside: (event) => {
       const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
-
-      if (isNotToggleElement) {
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+      if (notToggleElementIndex === -1) {
         this.props.hideNetworkDropdown()
       }
     },
-- 
cgit