✨ (core) [LBD-30]: Device switch (#230)

Author: pdeville-ledger

packages/ledger-button/src/components/atom/chip/ledger-chip.ts

@@ -16,7 +16,7 @@ export interface LedgerChipAttributes {
 
 const chipContainerVariants = cva([
   "lb-flex lb-h-40 lb-max-w-208 lb-cursor-pointer lb-items-center lb-justify-center lb-gap-8 lb-rounded-full lb-px-16 lb-py-8",
-  "bg-muted-transparent hover:bg-muted-transparent-hover active:bg-muted-transparent-pressed",
+  "lb-bg-muted-transparent hover:lb-bg-muted-transparent-hover active:lb-bg-muted-transparent-pressed",
 ]);
 
 const chipLabelVariants = cva(["body-2 lb-text-ellipsis lb-text-base"]);

packages/ledger-button/src/components/molecule/device-item/ledger-device-item.ts

@@ -144,11 +144,30 @@ export class LedgerDeviceItem extends LitElement {
   }
 
   private renderDeviceIcon() {
+    return html`
+      <div class="lb-relative">
+        <div
+          class="lb-rounded-full lb-bg-muted-transparent lb-p-8 lb-drop-shadow-md"
+        >
+          <device-icon .modelId=${this.deviceModelId}></device-icon>
+        </div>
+        ${this.renderConnectionBadge()}
+      </div>
+    `;
+  }
+
+  private renderConnectionBadge() {
+    if (!this.connectionType) return "";
+
     return html`
       <div
-        class="lb-rounded-full lb-bg-muted-transparent lb-p-8 lb-drop-shadow-md"
+        class="lb-absolute -lb-bottom-2 -lb-right-2 lb-flex lb-h-20 lb-w-20 lb-items-center lb-justify-center lb-rounded-full lb-bg-base lb-shadow-sm"
       >
-        <device-icon .modelId=${this.deviceModelId}></device-icon>
+        <ledger-icon
+          type=${this.connectionType}
+          size="small"
+          fillColor="var(--color-foreground)"
+        ></ledger-icon>
       </div>
     `;
   }

packages/ledger-button/src/components/molecule/toolbar/ledger-toolbar.ts

@@ -83,22 +83,24 @@ export class LedgerToolbar extends LitElement {
       <div
         class="lb-relative lb-flex lb-w-full lb-min-w-full lb-items-center lb-justify-between lb-px-24 lb-py-16"
       >
-        <div class="lb-flex lb-h-32 lb-w-32 lb-items-center lb-justify-center">
-          <slot name="left-icon">
-            ${this.canGoBack
-              ? html`
-                  <ledger-button
-                    data-testid="close-button"
-                    .icon=${true}
-                    variant="noBackground"
-                    iconType="back"
-                    size="xs"
-                    @click=${this.handleGoBackClick}
-                  >
-                  </ledger-button>
-                `
-              : html` <ledger-icon type="ledger" size="medium"></ledger-icon> `}
-          </slot>
+        <div class="lb-flex lb-w-72 lb-items-center lb-justify-start">
+          <div class="lb-flex lb-h-32 lb-w-32 lb-items-center lb-justify-center">
+            <slot name="left-icon">
+              ${this.canGoBack
+                ? html`
+                    <ledger-button
+                      data-testid="close-button"
+                      .icon=${true}
+                      variant="noBackground"
+                      iconType="back"
+                      size="xs"
+                      @click=${this.handleGoBackClick}
+                    >
+                    </ledger-button>
+                  `
+                : html` <ledger-icon type="ledger" size="medium"></ledger-icon> `}
+            </slot>
+          </div>
         </div>
         <div
           class="lb-pointer-events-none lb-absolute lb-left-0 lb-right-0 lb-flex lb-items-center lb-justify-center"
@@ -120,7 +122,7 @@ export class LedgerToolbar extends LitElement {
           </div>
         </div>
 
-        <div class="lb-flex lb-items-center lb-gap-8">
+        <div class="lb-flex lb-w-72 lb-items-center lb-justify-end lb-gap-8">
           ${this.showSettings
             ? html`
                 <div

packages/ledger-button/src/domain/device-switch/device-switch-controller.ts

@@ -1,73 +1,26 @@
-import type { DiscoveredDevice } from "@ledgerhq/ledger-wallet-provider-core";
-import { LitElement } from "lit";
-
 import type { DeviceModelId } from "../../components/atom/icon/device-icon/device-icon.js";
 import type { CoreContext } from "../../context/core-context.js";
 import type { Navigation } from "../../shared/navigation.js";
 import type { Destinations } from "../../shared/routes.js";
 
 export class DeviceSwitchController {
-  private devices: DiscoveredDevice[] = [];
-
   constructor(
-    private readonly host: LitElement,
     private readonly coreContext: CoreContext,
     private readonly navigation: Navigation,
     private readonly destinations: Destinations,
   ) {}
 
-  async hostConnected() {
-    await this.loadAvailableDevices();
-  }
-
-  async loadAvailableDevices() {
-    try {
-      this.devices = await this.coreContext.listAvailableDevices();
-
-      this.host.requestUpdate();
-    } catch {
-      this.devices = [];
-      this.host.requestUpdate();
-    }
-  }
-
-  getDevices(): DiscoveredDevice[] {
-    return this.devices;
-  }
-
-  async connectToDevice(detail: {
-    title: string;
-    connectionType: "bluetooth" | "usb" | "";
-    timestamp: number;
-  }) {
-    const connectionType = detail.connectionType;
-    if (!connectionType) {
-      return;
-    }
-
-    // Navigate to connection status screen to show device animation
-    this.navigation.navigateTo(this.destinations.deviceConnectionStatus);
+  async connectNewDevice(connectionType: "bluetooth" | "usb") {
+    await this.coreContext.disconnectFromDevice();
 
     try {
       await this.coreContext.connectToDevice(connectionType);
-
-      const pendingTransactionParams =
-        this.coreContext.getPendingTransactionParams();
-
-      if (pendingTransactionParams) {
-        this.navigation.navigateTo(this.destinations.signTransaction);
-      } else {
-        this.navigation.navigateTo(this.destinations.ledgerSync);
-      }
+      this.navigation.navigateTo(this.destinations.onboardingFlow);
     } catch {
       this.navigation.navigateTo(this.destinations.onboardingFlow);
     }
   }
 
-  async addNewDevice() {
-    this.navigation.navigateTo(this.destinations.onboardingFlow);
-  }
-
   getConnectionTypeFromTransport(transport: string): "bluetooth" | "usb" | "" {
     const transportLower = transport.toLowerCase();
 

packages/ledger-button/src/domain/device-switch/device-switch.ts

@@ -2,9 +2,9 @@ import "../../components/index.js";
 
 import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
-import type { DeviceItemClickEventDetail } from "../../components/molecule/device-item/ledger-device-item.js";
+import type { ConnectionItemClickEventDetail } from "../../components/molecule/connection-item/ledger-connection-item.js";
 import { CoreContext, coreContext } from "../../context/core-context.js";
 import {
   langContext,
@@ -58,93 +58,50 @@ export class DeviceSwitchScreen extends LitElement {
   @property({ attribute: false })
   public languageContext!: LanguageContext;
 
-  @state()
-  private isLoading = true;
-
   controller!: DeviceSwitchController;
 
   override connectedCallback() {
     super.connectedCallback();
 
     this.controller = new DeviceSwitchController(
-      this,
       this.coreContext,
       this.navigation,
       this.destinations,
     );
-
-    this.controller.hostConnected().finally(() => {
-      this.isLoading = false;
-      this.requestUpdate();
-    });
   }
 
-  handleDeviceItemClick = (e: CustomEvent<DeviceItemClickEventDetail>) => {
-    this.controller.connectToDevice({
-      title: e.detail.title,
-      connectionType: e.detail.connectionType,
-      timestamp: e.detail.timestamp,
-    });
-  };
+  handleConnectionItemClick = (
+    e: CustomEvent<ConnectionItemClickEventDetail>,
+  ) => {
+    const connectionType = e.detail.connectionType;
 
-  handleAddNewDevice = () => {
-    this.controller.addNewDevice();
+    if (connectionType) {
+      this.controller.connectNewDevice(connectionType);
+    }
   };
 
-  private renderDeviceList() {
-    const devices = this.controller?.getDevices() || [];
-
-    if (this.isLoading) {
-      return html`
-        <div class="lb-flex lb-items-center lb-justify-center lb-p-24">
-          <div
-            class="lb-border-primary lb-h-32 lb-w-32 lb-animate-spin lb-rounded-full lb-border-b-2"
-          ></div>
-        </div>
-      `;
-    }
+  private renderConnectedDevice() {
+    const connectedDevice = this.coreContext.getConnectedDevice();
 
-    if (devices.length === 0) {
-      return html`
-        <div
-          class="lb-flex lb-flex-col lb-items-center lb-gap-16 lb-p-24 lb-text-center"
-        >
-          <div class="lb-text-muted lb-body-2">
-            ${this.languageContext.currentTranslation.deviceSwitch.noDevices}
-          </div>
-        </div>
-      `;
+    if (!connectedDevice) {
+      return "";
     }
 
+    const deviceModelId = this.controller.mapDeviceModelId(
+      connectedDevice.modelId,
+    );
+    const lang = this.languageContext.currentTranslation;
+
     return html`
       <div class="lb-flex lb-flex-col lb-gap-12 lb-p-24 lb-pt-0">
-        ${devices.map((device) => {
-          const connectionType = this.controller.getConnectionTypeFromTransport(
-            device.transport,
-          );
-          const connectedDevice = this.coreContext.getConnectedDevice();
-          const isConnected =
-            connectedDevice && connectedDevice.name === device.name;
-          const status = isConnected ? "connected" : "available";
-          const deviceModelId = this.controller.mapDeviceModelId(
-            device.deviceModel?.model,
-          );
-
-          const lang = this.languageContext.currentTranslation;
-
-          return html`
-            <ledger-device-item
-              device-id=${device.id}
-              title=${device.name}
-              connection-type=${connectionType}
-              device-model-id=${deviceModelId}
-              status=${status}
-              connected-text=${lang.deviceSwitch.status.connected}
-              available-text=${lang.deviceSwitch.status.available}
-              @device-item-click=${this.handleDeviceItemClick}
-            ></ledger-device-item>
-          `;
-        })}
+        <ledger-device-item
+          title=${connectedDevice.name}
+          device-model-id=${deviceModelId}
+          status="connected"
+          .clickable=${false}
+          connected-text=${lang.deviceSwitch.status.connected}
+          available-text=${lang.deviceSwitch.status.available}
+        ></ledger-device-item>
       </div>
     `;
   }
@@ -163,19 +120,21 @@ export class DeviceSwitchScreen extends LitElement {
   }
 
   private renderAddNewDeviceSection() {
+    const lang = this.languageContext.currentTranslation;
+
     return html`
       <div class="lb-flex lb-flex-col lb-gap-12 lb-p-24">
         <ledger-connection-item
-          title="${this.languageContext.currentTranslation.deviceSwitch
-            .connectBluetooth}"
+          title="${lang.deviceSwitch.connectBluetooth}"
+          hint="${lang.deviceSwitch.connectBluetoothHint}"
           connection-type="bluetooth"
-          @connection-item-click=${this.handleAddNewDevice}
+          @connection-item-click=${this.handleConnectionItemClick}
         ></ledger-connection-item>
         <ledger-connection-item
-          title="${this.languageContext.currentTranslation.deviceSwitch
-            .connectUsb}"
+          title="${lang.deviceSwitch.connectUsb}"
+          hint="${lang.deviceSwitch.connectUsbHint}"
           connection-type="usb"
-          @connection-item-click=${this.handleAddNewDevice}
+          @connection-item-click=${this.handleConnectionItemClick}
         ></ledger-connection-item>
       </div>
     `;
@@ -184,7 +143,7 @@ export class DeviceSwitchScreen extends LitElement {
   override render() {
     return html`
       <div class="lb-flex lb-flex-col">
-        ${this.renderDeviceList()} ${this.renderSeparator()}
+        ${this.renderConnectedDevice()} ${this.renderSeparator()}
         ${this.renderAddNewDeviceSection()}
       </div>
     `;

packages/ledger-button/src/domain/onboarding/select-device/select-device-controller.ts

@@ -131,4 +131,5 @@ export class SelectDeviceController implements ReactiveController {
       this.mapErrors(error);
     }
   }
+
 }

packages/ledger-button/src/i18n/en.json

@@ -67,7 +67,9 @@
     "noDevices": "No previously connected devices found",
     "connectAnother": "Or connect another Ledger",
     "connectBluetooth": "Connect a Bluetooth",
+    "connectBluetoothHint": "Power on and unlock your device",
     "connectUsb": "Connect with USB",
+    "connectUsbHint": "Plug in and unlock your device",
     "status": {
       "connected": "Connected",
       "available": "Available"