From 3055db5c33dc68c92cf98d7153c5698f07404731 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 24 May 2021 16:11:17 -0500
Subject: [PATCH] Disable Ledger Live toggle for Firefox users (#11169)

---
 ui/components/ui/toggle-button/index.scss             |  4 ++++
 .../ui/toggle-button/toggle-button.component.js       | 11 ++++++++---
 .../settings/advanced-tab/advanced-tab.component.js   |  4 ++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/toggle-button/index.scss b/ui/components/ui/toggle-button/index.scss
index e37833c1c..57bbd4505 100644
--- a/ui/components/ui/toggle-button/index.scss
+++ b/ui/components/ui/toggle-button/index.scss
@@ -33,4 +33,8 @@
       visibility: hidden;
     }
   }
+
+  &--disabled {
+    opacity: 0.5;
+  }
 }
diff --git a/ui/components/ui/toggle-button/toggle-button.component.js b/ui/components/ui/toggle-button/toggle-button.component.js
index d16bcfcfc..2c935ad90 100644
--- a/ui/components/ui/toggle-button/toggle-button.component.js
+++ b/ui/components/ui/toggle-button/toggle-button.component.js
@@ -47,15 +47,19 @@ const colors = {
 };
 
 const ToggleButton = (props) => {
-  const { value, onToggle, offLabel, onLabel } = props;
+  const { value, onToggle, offLabel, onLabel, disabled } = props;
 
   const modifier = value ? 'on' : 'off';
 
   return (
-    <div className={classnames('toggle-button', `toggle-button--${modifier}`)}>
+    <div
+      className={classnames('toggle-button', `toggle-button--${modifier}`, {
+        'toggle-button--disabled': disabled,
+      })}
+    >
       <ReactToggleButton
         value={value}
-        onToggle={onToggle}
+        onToggle={disabled ? undefined : onToggle}
         activeLabel=""
         inactiveLabel=""
         trackStyle={value ? trackStyle : offTrackStyle}
@@ -76,6 +80,7 @@ ToggleButton.propTypes = {
   onToggle: PropTypes.func,
   offLabel: PropTypes.string,
   onLabel: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 export default ToggleButton;
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 49e0d99a7..09e70a303 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -7,6 +7,9 @@ import TextField from '../../../components/ui/text-field';
 import Button from '../../../components/ui/button';
 import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes';
 
+import { getPlatform } from '../../../../app/scripts/lib/util';
+import { PLATFORM_FIREFOX } from '../../../../shared/constants/app';
+
 export default class AdvancedTab extends PureComponent {
   static contextTypes = {
     t: PropTypes.func,
@@ -407,6 +410,7 @@ export default class AdvancedTab extends PureComponent {
               onToggle={(value) => setLedgerLivePreference(!value)}
               offLabel={t('off')}
               onLabel={t('on')}
+              disabled={getPlatform() === PLATFORM_FIREFOX}
             />
           </div>
         </div>