From a83d50a4895e3ea1d528d0adb633092f6242e59d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 28 Oct 2021 18:38:58 -0500
Subject: [PATCH] Provide instructions for users switching from Ledger Live to
 WebHID (#12519)

---
 app/_locales/en/messages.json                     |  3 +++
 .../advanced-tab/advanced-tab.component.js        | 15 +++++++++++++++
 ui/pages/settings/index.scss                      |  4 ++++
 3 files changed, 22 insertions(+)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 84121790f..9c658b2bc 100644
--- a/app/_locales/en/messages.json
+++ b/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."
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index b83b6956d..41027859e 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/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>
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index 2f178e7ef..cfb52a122 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -190,6 +190,10 @@
       cursor: not-allowed;
       opacity: 0.5;
     }
+
+    & .dialog {
+      margin-top: 10px;
+    }
   }
 
   &__content-label {