Disable Ledger Live toggle for Firefox users (#11169)

ui/components/ui/toggle-button/index.scss

@@ -33,4 +33,8 @@
       visibility: hidden;
     }
   }
+
+  &--disabled {
+    opacity: 0.5;
+  }
 }

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;

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>