💄 (smpl) [DSDK-518]: Update device selection according to figma

.changeset/good-humans-serve.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-sdk-sample": patch
+---
+
+Select device in a drawer

apps/sample/playwright/cases/device-action_list-apps.spec.ts

@@ -25,7 +25,7 @@ test.describe("device action: list apps", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute list apps via device action", async () => {

apps/sample/playwright/cases/device-action_open-app.spec.ts

@@ -24,7 +24,7 @@ test.describe("device action: open bitcoin app", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute open app via device action", async () => {

apps/sample/playwright/cases/device-command_close-bitcoin-app.spec.ts

@@ -27,7 +27,7 @@ test.describe("device command: close bitcoin app", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute open app via device command", async () => {

apps/sample/playwright/cases/device-command_get-app-and-version.spec.ts

@@ -38,7 +38,7 @@ test.describe("device command: get app and version", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute open app via device command", async () => {

apps/sample/playwright/cases/device-command_open-bitcoin-app.spec.ts

@@ -26,7 +26,7 @@ test.describe("device command: open bitcoin app", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute open app via device command", async () => {

apps/sample/playwright/cases/device-connection.spec.ts

@@ -1,8 +1,11 @@
 /* eslint-disable no-restricted-imports */
 import { test } from "@playwright/test";
 
-import { thenDeviceIsConnected } from "../utils/thenHandlers";
-import { whenConnectingDevice } from "../utils/whenHandlers";
+import {
+  thenDeviceIsConnected,
+  thenDeviceIsListedAndConnected,
+} from "../utils/thenHandlers";
+import { whenCloseDrawer, whenConnectingDevice } from "../utils/whenHandlers";
 
 test.describe("device connection", () => {
   test.beforeEach(async ({ page }) => {
@@ -13,21 +16,22 @@ test.describe("device connection", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
   });
 
   test("second device should connect", async ({ page }) => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Given second device is connected", async () => {
-      await whenConnectingDevice(page);
+      await whenConnectingDevice(page, false);
 
-      await thenDeviceIsConnected(page, 1);
+      await thenDeviceIsListedAndConnected(page, 1);
+      await whenCloseDrawer(page);
     });
   });
 });

apps/sample/playwright/cases/device-disconnection.spec.ts

@@ -3,11 +3,15 @@ import { test } from "@playwright/test";
 
 import {
   thenDeviceIsConnected,
+  thenDeviceIsListedAndConnected,
   thenNoDeviceIsConnected,
 } from "../utils/thenHandlers";
 import {
+  whenCloseDrawer,
   whenConnectingDevice,
   whenDisconnectDevice,
+  whenDisconnectListedDevice,
+  whenOpenSelectDeviceDrawer,
 } from "../utils/whenHandlers";
 
 test.describe("device disconnection", () => {
@@ -19,7 +23,7 @@ test.describe("device disconnection", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then disconnect device", async () => {
@@ -33,19 +37,25 @@ test.describe("device disconnection", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Given second device is connected", async () => {
-      await whenConnectingDevice(page);
+      await whenConnectingDevice(page, false);
+
+      await thenDeviceIsListedAndConnected(page, 1);
 
-      await thenDeviceIsConnected(page, 1);
+      await whenCloseDrawer(page);
     });
 
     await test.step("Then disconnect device", async () => {
-      await whenDisconnectDevice(page);
+      await whenOpenSelectDeviceDrawer(page);
 
-      await whenDisconnectDevice(page);
+      await whenDisconnectListedDevice(page);
+
+      await whenDisconnectListedDevice(page);
+
+      await whenCloseDrawer(page);
 
       await thenNoDeviceIsConnected(page);
     });

apps/sample/playwright/cases/eth_get-address_happy-paths.spec.ts

@@ -36,7 +36,7 @@ test.describe("ETH Signer: get address, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: get address", async () => {
@@ -71,7 +71,7 @@ test.describe("ETH Signer: get address, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: get address with checkOnDevice on", async () => {
@@ -121,7 +121,7 @@ test.describe("ETH Signer: get address, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute ETH: get address", async () => {

apps/sample/playwright/cases/eth_get-address_unhappy-paths.spec.ts

@@ -32,7 +32,7 @@ test.describe("ETH Signer: get address, unhappy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("Then execute ETH: get address with malformed derivation paths", async () => {

apps/sample/playwright/cases/eth_sign-message_happy-paths.spec.ts

@@ -33,7 +33,7 @@ test.describe("ETH Signer: sign message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign message", async () => {
@@ -71,7 +71,7 @@ test.describe("ETH Signer: sign message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign message", async () => {
@@ -133,7 +133,7 @@ test.describe("ETH Signer: sign message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign message", async () => {

apps/sample/playwright/cases/eth_sign-message_unhappy-paths.spec.ts

@@ -33,7 +33,7 @@ test.describe("ETH Signer: sign message, unhappy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign message with malformed derivation paths", async () => {

apps/sample/playwright/cases/eth_sign-transaction_happy-paths.spec.ts

@@ -36,7 +36,7 @@ test.describe("ETH Signer: sign transaction, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign transaction", async () => {
@@ -75,7 +75,7 @@ test.describe("ETH Signer: sign transaction, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign transaction", async () => {

apps/sample/playwright/cases/eth_sign-transaction_unhappy-paths.spec.ts

@@ -33,7 +33,7 @@ test.describe("ETH Signer: sign transaction, unhappy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign transaction with malformed derivation paths", async () => {

apps/sample/playwright/cases/eth_sign-typed-message-happy-paths.spec.ts

@@ -33,7 +33,7 @@ test.describe("ETH Signer: sign EIP712 message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign EIP712 message", async () => {
@@ -72,7 +72,7 @@ test.describe("ETH Signer: sign EIP712 message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign EIP712 message", async () => {
@@ -135,7 +135,7 @@ test.describe("ETH Signer: sign EIP712 message, happy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign EIP712 message", async () => {

apps/sample/playwright/cases/eth_sign-typed-message-unhappy-paths.spec.ts

@@ -33,7 +33,7 @@ test.describe("ETH Signer: sign EIP712 message, unhappy paths", () => {
     await test.step("Given first device is connected", async () => {
       await whenConnectingDevice(page);
 
-      await thenDeviceIsConnected(page, 0);
+      await thenDeviceIsConnected(page);
     });
 
     await test.step("When execute ETH: sign typed message with malformed derivation paths", async () => {

apps/sample/playwright/utils/thenHandlers.ts

@@ -2,8 +2,13 @@ import { expect, Locator, Page } from "@playwright/test";
 
 import { asyncPipe } from "@/utils/pipes";
 
-const getDeviceLocator =
-  (deviceIndex: number = 0) =>
+const getDeviceLocator = (page: Page): Page => {
+  const targetChild = page.getByTestId("container_main-device").locator("> *");
+  return targetChild as unknown as Page;
+};
+
+const getListedDeviceLocator =
+  (deviceIndex: number) =>
   (page: Page): Page => {
     const targetChild = page
       .getByTestId("container_devices")
@@ -24,11 +29,14 @@ const verifyDeviceConnectedStatus = async (
   return locator;
 };
 
-export const thenDeviceIsConnected = (
+export const thenDeviceIsConnected = (page: Page): Promise<Locator> =>
+  asyncPipe(getDeviceLocator, verifyDeviceConnectedStatus)(page);
+
+export const thenDeviceIsListedAndConnected = (
   page: Page,
-  deviceIndex: number = 0,
+  index: number,
 ): Promise<Locator> =>
-  asyncPipe(getDeviceLocator(deviceIndex), verifyDeviceConnectedStatus)(page);
+  asyncPipe(getListedDeviceLocator(index), verifyDeviceConnectedStatus)(page);
 
 const getAllDeviceNames = async (page: Page): Promise<string[]> => {
   return page

apps/sample/playwright/utils/whenHandlers.ts

@@ -44,8 +44,20 @@ const fillInputFields =
     return page;
   };
 
-export const whenConnectingDevice = (page: Page): Promise<Page> =>
-  clickByTestId("CTA_select-device")(page);
+export const whenOpenSelectDeviceDrawer = async (page: Page): Promise<Page> =>
+  await clickByTestId("CTA_open-select-device-drawer")(page);
+
+export const whenConnectingDevice = async (
+  page: Page,
+  closeDrawer: boolean = true,
+): Promise<Page> => {
+  await whenOpenSelectDeviceDrawer(page);
+  const newPage = await clickByTestId("CTA_select-device")(page);
+  if (closeDrawer) {
+    return whenCloseDrawer(page);
+  }
+  return newPage;
+};
 
 export const whenClicking = (page: Page, ctaSelector: string): Promise<Page> =>
   clickByTestId(ctaSelector)(page);
@@ -88,6 +100,9 @@ export const whenExecute =
 export const whenExecuteDeviceAction = whenExecute("device-action", true);
 export const whenExecuteDeviceCommand = whenExecute("device-command", true);
 
+const getMainDevice = (page: Page): Locator =>
+  page.getByTestId("container_main-device").locator("> *").first();
+
 const getFirstDevice = (page: Page): Locator =>
   page.getByTestId("container_devices").locator("> *").first();
 
@@ -98,6 +113,9 @@ const clickDeviceOptionAndDisconnect = async (page: Page): Promise<Page> => {
 };
 
 export const whenDisconnectDevice = (page: Page): Promise<Page> =>
+  asyncPipe(getMainDevice, clickDeviceOptionAndDisconnect)(page);
+
+export const whenDisconnectListedDevice = (page: Page): Promise<Page> =>
   asyncPipe(getFirstDevice, clickDeviceOptionAndDisconnect)(page);
 
 const drawerCloseButtonSelector =

apps/sample/src/app/client-layout.tsx

@@ -19,6 +19,7 @@ import { SdkProvider } from "@/providers/DeviceSdkProvider";
 import { DeviceSessionsProvider } from "@/providers/DeviceSessionsProvider";
 import { SdkConfigProvider } from "@/providers/SdkConfig";
 import { GlobalStyle } from "@/styles/globalstyles";
+import { DeviceSelectionProvider } from "@/providers/DeviceSelectionProvider";
 
 const Root = styled(Flex)`
   flex-direction: row;
@@ -44,11 +45,13 @@ const ClientRootLayout: React.FC<PropsWithChildren> = ({ children }) => {
             <body>
               <Root>
                 <DeviceSessionsProvider>
-                  <Sidebar />
-                  <PageContainer>
-                    <Header />
-                    {children}
-                  </PageContainer>
+                  <DeviceSelectionProvider>
+                    <Sidebar />
+                    <PageContainer>
+                      <Header />
+                      {children}
+                    </PageContainer>
+                  </DeviceSelectionProvider>
                 </DeviceSessionsProvider>
               </Root>
             </body>