fix(11215): show error message when user selects a new ledger device

app/components/Views/LedgerConnect/index.styles.ts

@@ -50,6 +50,10 @@ const createStyles = (colors: Colors) =>
       flex: 1,
       marginTop: Device.getDeviceHeight() * 0.025,
     },
+    bodyContainerWhithErrorMessage: {
+      flex: 1,
+      marginTop: Device.getDeviceHeight() * 0.01,
+    },
     textContainer: {
       marginTop: Device.getDeviceHeight() * 0.05,
     },

app/components/Views/LedgerConnect/index.test.tsx

@@ -6,7 +6,7 @@ import useBluetooth from '../../hooks/Ledger/useBluetooth';
 import useBluetoothDevices, {
   BluetoothDevice,
 } from '../../hooks/Ledger/useBluetoothDevices';
-import { fireEvent } from '@testing-library/react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
 import {
   useNavigation,
   NavigationProp,
@@ -35,9 +35,6 @@ interface UseBluetoothDevicesHook {
   deviceScanError: boolean;
 }
 
-jest.mock('../../hooks/useBluetoothPermissions');
-jest.mock('../../hooks/Ledger/useBluetooth');
-jest.mock('../../hooks/Ledger/useBluetoothDevices');
 jest.mock('../../hooks/Ledger/useLedgerBluetooth');
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
@@ -62,6 +59,11 @@ jest.mock('../../../util/device', () => ({
   getDeviceHeight: jest.fn(),
 }));
 
+jest.mock('../../../core/Ledger/Ledger', () => ({
+  ...jest.requireActual('../../../core/Ledger/Ledger'),
+  getDeviceId: jest.fn().mockResolvedValue('device-id'),
+}));
+
 jest.mock('../../../core/Engine', () => ({
   context: {
     KeyringController: {
@@ -366,4 +368,23 @@ describe('LedgerConnect', () => {
 
     expect(ledgerLogicToRun).toHaveBeenCalled();
   });
+
+  it('shows error message about multiple devices support', async () => {
+    isSendingLedgerCommands = true;
+    isAppLaunchConfirmationNeeded = false;
+    const { getByTestId } = renderWithProvider(
+      <LedgerConnect
+        onConnectLedger={onConfirmationComplete}
+        isSendingLedgerCommands={isSendingLedgerCommands}
+        isAppLaunchConfirmationNeeded={isAppLaunchConfirmationNeeded}
+        ledgerLogicToRun={ledgerLogicToRun}
+        ledgerError={undefined}
+        selectedDevice={selectedDevice}
+        setSelectedDevice={setSelectedDevice}
+      />,
+    );
+    await waitFor(() => {
+      expect(getByTestId('multiple-devices-error-message')).toBeDefined();
+    });
+  });
 });

app/components/Views/LedgerConnect/index.tsx

@@ -34,7 +34,11 @@ import { getSystemVersion } from 'react-native-device-info';
 import { LedgerCommunicationErrors } from '../../../core/Ledger/ledgerErrors';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import createStyles from './index.styles';
-import { BluetoothInterface } from '../../hooks/Ledger/useBluetoothDevices';
+import {
+  BluetoothDevice,
+  BluetoothInterface,
+} from '../../hooks/Ledger/useBluetoothDevices';
+import { getDeviceId } from '../../../core/Ledger/Ledger';
 
 interface LedgerConnectProps {
   onConnectLedger: () => void;
@@ -62,9 +66,9 @@ const LedgerConnect = ({
   const styles = useMemo(() => createStyles(theme.colors), [theme]);
   const [errorDetail, setErrorDetails] = useState<LedgerConnectionErrorProps>();
   const [loading, setLoading] = useState(false);
+  const [hasMatchingDeviceId, setHasMatchingDeviceId] = useState(true);
   const [retryTimes, setRetryTimes] = useState(0);
   const dispatch = useDispatch();
-
   const deviceOSVersion = Number(getSystemVersion()) || 0;
 
   useEffect(() => {
@@ -80,6 +84,20 @@ const LedgerConnect = ({
     });
   };
 
+  const onDeviceSelected = (currentDevice: BluetoothDevice | undefined) => {
+    const getStoredDeviceId = async () => {
+      const storedDeviceId = await getDeviceId();
+      const isMatchingDeviceId =
+        !storedDeviceId || currentDevice?.id === storedDeviceId;
+      setHasMatchingDeviceId(isMatchingDeviceId);
+
+      if (isMatchingDeviceId) {
+        setSelectedDevice(currentDevice);
+      }
+    };
+    getStoredDeviceId();
+  };
+
   const handleErrorWithRetry = (errorTitle: string, errorSubtitle: string) => {
     setErrorDetails({
       errorTitle,
@@ -111,6 +129,11 @@ const LedgerConnect = ({
     });
   };
 
+  const getStylesWithMultipleDevicesErrorMessage = () =>
+    hasMatchingDeviceId
+      ? styles.bodyContainer
+      : styles.bodyContainerWhithErrorMessage;
+
   useEffect(() => {
     if (ledgerError) {
       setLoading(false);
@@ -254,13 +277,16 @@ const LedgerConnect = ({
               <Text bold>{strings('ledger.open_eth_app_message_two')} </Text>
             </Text>
           )}
+          {!hasMatchingDeviceId && (
+            <Text red small testID={'multiple-devices-error-message'}>
+              {strings('ledger.multiple_devices_error_message')}
+            </Text>
+          )}
         </View>
-        <View style={styles.bodyContainer}>
+        <View style={getStylesWithMultipleDevicesErrorMessage()}>
           {!isAppLaunchConfirmationNeeded ? (
             <Scan
-              onDeviceSelected={(ledgerDevice) =>
-                setSelectedDevice(ledgerDevice)
-              }
+              onDeviceSelected={onDeviceSelected}
               onScanningErrorStateChanged={(error) => setErrorDetails(error)}
               ledgerError={ledgerError}
             />
@@ -271,7 +297,9 @@ const LedgerConnect = ({
                 type="confirm"
                 onPress={connectLedger}
                 testID={'add-network-button'}
-                disabled={loading || isSendingLedgerCommands}
+                disabled={
+                  !hasMatchingDeviceId || loading || isSendingLedgerCommands
+                }
               >
                 {loading || isSendingLedgerCommands ? (
                   <ActivityIndicator color={styles.loader.color} />

locales/languages/en.json

@@ -3366,7 +3366,8 @@
     "blind_sign_error": "Blind signing error",
     "blind_sign_error_message": "Blind signing is not enabled on your Ledger device. Please enable it in the settings.",
     "user_reject_transaction": "User rejected the transaction",
-    "user_reject_transaction_message": "The user has rejected the transaction on the Ledger device."
+    "user_reject_transaction_message": "The user has rejected the transaction on the Ledger device.",
+    "multiple_devices_error_message": "Multiple devices aren’t supported yet. To add a new Ledger device, you’ll need to remove an older one."
   },
   "account_actions": {
     "edit_name": "Edit account name",