Disable network dropdown on conf tx screen

3 files changed, 32 insertions, 9 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 35ff8603a..0cfbb5af5 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -203,6 +203,16 @@ App.prototype.renderSidebar = function () {
 }
 
 App.prototype.renderAppBar = function () {
+  const {
+    isUnlocked,
+    network,
+    provider,
+    networkDropdownOpen,
+    showNetworkDropdown,
+    hideNetworkDropdown,
+    currentView,
+  } = this.props
+
   if (window.METAMASK_UI_TYPE === 'notification') {
     return null
   }
@@ -243,22 +253,21 @@ App.prototype.renderAppBar = function () {
             }, [
               // Network Indicator
               h(NetworkIndicator, {
-                network: this.props.network,
-                provider: this.props.provider,
+                network,
+                provider,
+                disabled: currentView.name === 'confTx',
                 onClick: (event) => {
                   event.preventDefault()
                   event.stopPropagation()
-                  if (this.props.networkDropdownOpen === false) {
-                    this.props.showNetworkDropdown()
-                  } else {
-                    this.props.hideNetworkDropdown()
-                  }
+                  return networkDropdownOpen === false
+                    ? showNetworkDropdown()
+                    : hideNetworkDropdown()
                 },
               }),
 
             ]),
 
-            h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
+            isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
               h(Identicon, {
                 address: this.props.selectedAddress,
                 diameter: 32,
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index b24505750..229d02e36 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -64,13 +64,18 @@ Network.prototype.render = function () {
   return (
     h('div.network-component.pointer', {
       className: classnames('network-component pointer', {
+        'network-component--disabled': this.props.disabled,
         'ethereum-network': providerName === 'mainnet',
         'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
         'kovan-test-network': providerName === 'kovan',
         'rinkeby-test-network': providerName === 'rinkeby',
       }),
       title: hoverText,
-      onClick: (event) => this.props.onClick(event),
+      onClick: (event) => {
+        if (!this.props.disabled) {
+          this.props.onClick(event)
+        }
+      },
     }, [
       (function () {
         switch (iconName) {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 77a6a393d..0bc66ea1a 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -1,3 +1,12 @@
+.network-component--disabled {
+  border-color: transparent !important;
+  cursor: default;
+
+  .fa-caret-down {
+    opacity: 0;
+  }
+}
+
 .network-component.pointer {
   border: 1px solid $shark;
   border-radius: 82px;