Provide instructions for users switching from Ledger Live to WebHID (#12519)

app/_locales/en/messages.json

@@ -1290,6 +1290,9 @@
   "ledgerTimeout": {
     "message": "Ledger Live is taking too long to respond or connection timeout. Make sure Ledger Live app is opened and your device is unlocked."
   },
+  "ledgerTransportChangeWarning": {
+    "message": "If your Ledger Live app is open, please disconnect any open Ledger Live connection and close the Ledger Live app."
+  },
   "ledgerWebHIDNotConnectedErrorMessage": {
     "message": "The ledger device was not connected. If you wish to connect your Ledger, please click 'Continue' again and approve HID connection",
     "description": "An error message shown to the user during the hardware connect flow."

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -7,6 +7,7 @@ import TextField from '../../../components/ui/text-field';
 import Button from '../../../components/ui/button';
 import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes';
 import Dropdown from '../../../components/ui/dropdown';
+import Dialog from '../../../components/ui/dialog';
 
 import {
   LEDGER_TRANSPORT_TYPES,
@@ -53,6 +54,7 @@ export default class AdvancedTab extends PureComponent {
     lockTimeError: '',
     ipfsGateway: this.props.ipfsGateway,
     ipfsGatewayError: '',
+    showLedgerTransportWarning: false,
   };
 
   renderMobileSync() {
@@ -489,6 +491,12 @@ export default class AdvancedTab extends PureComponent {
               options={transportTypeOptions}
               selectedOption={ledgerTransportType}
               onChange={async (transportType) => {
+                if (
+                  ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE &&
+                  transportType === LEDGER_TRANSPORT_TYPES.WEBHID
+                ) {
+                  this.setState({ showLedgerTransportWarning: true });
+                }
                 setLedgerLivePreference(transportType);
                 if (
                   transportType === LEDGER_TRANSPORT_TYPES.WEBHID &&
@@ -500,6 +508,13 @@ export default class AdvancedTab extends PureComponent {
                 }
               }}
             />
+            {this.state.showLedgerTransportWarning ? (
+              <Dialog type="message">
+                <div className="settings-page__content-item-dialog">
+                  {t('ledgerTransportChangeWarning')}
+                </div>
+              </Dialog>
+            ) : null}
           </div>
         </div>
       </div>

ui/pages/settings/index.scss

@@ -190,6 +190,10 @@
       cursor: not-allowed;
       opacity: 0.5;
     }
+
+    & .dialog {
+      margin-top: 10px;
+    }
   }
 
   &__content-label {