From d57c7bb0ae36ace09f58331245f68da4e178e8ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Van=20Eyck?=
 <sebastien.vaneyck@consensys.net>
Date: Mon, 4 Nov 2024 14:23:04 +0100
Subject: [PATCH] fix(11215): add tests and adjust margin

---
 .../Views/LedgerConnect/index.styles.ts       |  4 +++
 .../Views/LedgerConnect/index.test.tsx        | 29 ++++++++++++++++---
 app/components/Views/LedgerConnect/index.tsx  | 15 ++++++----
 locales/languages/en.json                     |  3 +-
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/components/Views/LedgerConnect/index.styles.ts b/app/components/Views/LedgerConnect/index.styles.ts
index 81db5332f03..3c962aad14c 100644
--- a/app/components/Views/LedgerConnect/index.styles.ts
+++ b/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,
     },
diff --git a/app/components/Views/LedgerConnect/index.test.tsx b/app/components/Views/LedgerConnect/index.test.tsx
index 8062817d5ce..0a36211b067 100644
--- a/app/components/Views/LedgerConnect/index.test.tsx
+++ b/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 { findByTestId } = renderWithProvider(
+      <LedgerConnect
+        onConnectLedger={onConfirmationComplete}
+        isSendingLedgerCommands={isSendingLedgerCommands}
+        isAppLaunchConfirmationNeeded={isAppLaunchConfirmationNeeded}
+        ledgerLogicToRun={ledgerLogicToRun}
+        ledgerError={undefined}
+        selectedDevice={selectedDevice}
+        setSelectedDevice={setSelectedDevice}
+      />,
+    );
+    await waitFor(() => {
+      expect(findByTestId('multiple-devices-error-message')).toBeDefined();
+    });
+  });
 });
diff --git a/app/components/Views/LedgerConnect/index.tsx b/app/components/Views/LedgerConnect/index.tsx
index 318fadaa7ba..3acd1c4e548 100644
--- a/app/components/Views/LedgerConnect/index.tsx
+++ b/app/components/Views/LedgerConnect/index.tsx
@@ -87,7 +87,8 @@ const LedgerConnect = ({
   const onDeviceSelected = (currentDevice: BluetoothDevice | undefined) => {
     const getStoredDeviceId = async () => {
       const storedDeviceId = await getDeviceId();
-      const isMatchingDeviceId = currentDevice?.id === storedDeviceId;
+      const isMatchingDeviceId =
+        !storedDeviceId || currentDevice?.id === storedDeviceId;
       setHasMatchingDeviceId(isMatchingDeviceId);
 
       if (isMatchingDeviceId) {
@@ -128,6 +129,11 @@ const LedgerConnect = ({
     });
   };
 
+  const getStylesWithMultipleDevicesErrorMessage = () =>
+    hasMatchingDeviceId
+      ? styles.bodyContainer
+      : styles.bodyContainerWhithErrorMessage;
+
   useEffect(() => {
     if (ledgerError) {
       setLoading(false);
@@ -272,13 +278,12 @@ const LedgerConnect = ({
             </Text>
           )}
           {!hasMatchingDeviceId && (
-            <Text red small>
-              Mutiple devices not supported yet, please forget your previous
-              device first before adding a new one
+            <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={onDeviceSelected}
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 961052a24c6..ac4d3952b2a 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -3318,7 +3318,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": "Mutiple devices not supported yet, please forget your previous device first before adding a new one"
   },
   "account_actions": {
     "edit_name": "Edit account name",