⚡ (ledger-button): Wire getAccountWithBalance observable with frontend (#277)

Author: pdeville-ledger

packages/ledger-button-core/src/api/LedgerButtonCore.ts

@@ -1,6 +1,6 @@
 import { DeviceStatus } from "@ledgerhq/device-management-kit";
 import { Container, Factory } from "inversify";
-import { lastValueFrom, Observable, tap } from "rxjs";
+import { Observable, tap } from "rxjs";
 
 import { ButtonCoreContext } from "./model/ButtonCoreContext.js";
 import { JSONRPCRequest } from "./model/eip/EIPTypes.js";
@@ -19,6 +19,7 @@ import {
   Account,
   type AccountService,
 } from "../internal/account/service/AccountService.js";
+import { FetchAccountsUseCase } from "../internal/account/use-case/fetchAccountsUseCase.js";
 import { FetchAccountsWithBalanceUseCase } from "../internal/account/use-case/fetchAccountsWithBalanceUseCase.js";
 import type { GetDetailedSelectedAccountUseCase } from "../internal/account/use-case/getDetailedSelectedAccountUseCase.js";
 import { backendModuleTypes } from "../internal/backend/backendModuleTypes.js";
@@ -247,29 +248,20 @@ export class LedgerButtonCore {
       .execute({ type });
   }
 
-  // Account methods
-  async fetchAccounts(): Promise<Account[]> {
-    this._logger.debug("Fetching accounts");
-    const accounts = this.container
-      .get<FetchAccountsWithBalanceUseCase>(
-        accountModuleTypes.FetchAccountsWithBalanceUseCase,
-      )
+  async fetchAccountsFromCloudSync(): Promise<Account[]> {
+    this._logger.debug("Fetching accounts from CloudSync");
+    return this.container
+      .get<FetchAccountsUseCase>(accountModuleTypes.FetchAccountsUseCase)
       .execute();
-
-    const accountsWithBalance: Account[] = await lastValueFrom(accounts);
-
-    this.container
-      .get<AccountService>(accountModuleTypes.AccountService)
-      .setAccounts(accountsWithBalance);
-
-    return accountsWithBalance;
   }
 
-  getAccounts() {
-    this._logger.debug("Getting accounts");
+  getAccounts(): Observable<Account[]> {
+    this._logger.debug("Getting accounts with balance observable");
     return this.container
-      .get<AccountService>(accountModuleTypes.AccountService)
-      .getAccounts();
+      .get<FetchAccountsWithBalanceUseCase>(
+        accountModuleTypes.FetchAccountsWithBalanceUseCase,
+      )
+      .execute();
   }
 
   selectAccount(account: Account) {

packages/ledger-button-core/src/internal/account/use-case/fetchAccountsWithBalanceUseCase.test.ts

@@ -1,7 +1,7 @@
 import { lastValueFrom, toArray } from "rxjs";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import type { Account } from "../service/AccountService.js";
+import type { Account, AccountService } from "../service/AccountService.js";
 import { FetchAccountsUseCase } from "./fetchAccountsUseCase.js";
 import { FetchAccountsWithBalanceUseCase } from "./fetchAccountsWithBalanceUseCase.js";
 import { HydrateAccountWithBalanceUseCase } from "./HydrateAccountWithBalanceUseCase.js";
@@ -80,6 +80,9 @@ function createMockHydrateImplementation(
 }
 describe("FetchAccountsWithBalanceUseCase", () => {
   let useCase: FetchAccountsWithBalanceUseCase;
+  let mockAccountService: {
+    getAccounts: ReturnType<typeof vi.fn>;
+  };
   let mockFetchAccountsUseCase: {
     execute: ReturnType<typeof vi.fn>;
   };
@@ -88,6 +91,9 @@ describe("FetchAccountsWithBalanceUseCase", () => {
   };
 
   beforeEach(() => {
+    mockAccountService = {
+      getAccounts: vi.fn().mockReturnValue([]),
+    };
     mockFetchAccountsUseCase = {
       execute: vi.fn(),
     };
@@ -97,11 +103,13 @@ describe("FetchAccountsWithBalanceUseCase", () => {
 
     useCase = new FetchAccountsWithBalanceUseCase(
       createMockLoggerFactory(),
+      mockAccountService as unknown as AccountService,
       mockFetchAccountsUseCase as unknown as FetchAccountsUseCase,
       mockHydrateAccountWithBalanceUseCase as unknown as HydrateAccountWithBalanceUseCase,
     );
 
     vi.clearAllMocks();
+    mockAccountService.getAccounts.mockReturnValue([]);
   });
 
   describe("execute", () => {
@@ -224,5 +232,28 @@ describe("FetchAccountsWithBalanceUseCase", () => {
       // account-2 should have balance loaded
       expect(finalEmission[1].balance).toBe(USDT_BALANCE);
     });
+
+    it("should use existing accounts from AccountService and stream balances without calling FetchAccountsUseCase", async () => {
+      const account1 = createMockAccount(mockEthAccountValue);
+      const account2 = createMockAccount(mockUsdtAccountValue);
+      const existingAccounts = [account1, account2];
+
+      mockAccountService.getAccounts.mockReturnValue(existingAccounts);
+      mockHydrateAccountWithBalanceUseCase.execute.mockImplementation(
+        createMockHydrateImplementation(ETH_BALANCE, USDT_BALANCE),
+      );
+
+      const emissions = await lastValueFrom(useCase.execute().pipe(toArray()));
+
+      expect(mockFetchAccountsUseCase.execute).not.toHaveBeenCalled();
+      expect(emissions.length).toBeGreaterThan(0);
+      expect(emissions[0]).toHaveLength(2);
+      expect(emissions[0][0].balance).toBeUndefined();
+      expect(emissions[0][1].balance).toBeUndefined();
+
+      const finalEmission = emissions[emissions.length - 1];
+      expect(finalEmission[0].balance).toBe(ETH_BALANCE);
+      expect(finalEmission[1].balance).toBe(USDT_BALANCE);
+    });
   });
 });

packages/ledger-button-core/src/internal/account/use-case/fetchAccountsWithBalanceUseCase.ts

@@ -14,7 +14,11 @@ import {
 import { loggerModuleTypes } from "../../logger/loggerModuleTypes.js";
 import { LoggerPublisher } from "../../logger/service/LoggerPublisher.js";
 import { accountModuleTypes } from "../accountModuleTypes.js";
-import type { Account, AccountUpdate } from "../service/AccountService.js";
+import type {
+  Account,
+  AccountService,
+  AccountUpdate,
+} from "../service/AccountService.js";
 import { FetchAccountsUseCase } from "./fetchAccountsUseCase.js";
 import { HydrateAccountWithBalanceUseCase } from "./HydrateAccountWithBalanceUseCase.js";
 
@@ -25,6 +29,8 @@ export class FetchAccountsWithBalanceUseCase {
   constructor(
     @inject(loggerModuleTypes.LoggerPublisher)
     loggerFactory: Factory<LoggerPublisher>,
+    @inject(accountModuleTypes.AccountService)
+    private readonly accountService: AccountService,
     @inject(accountModuleTypes.FetchAccountsUseCase)
     private readonly fetchAccountsUseCase: FetchAccountsUseCase,
     @inject(accountModuleTypes.HydrateAccountWithBalanceUseCase)
@@ -34,7 +40,13 @@ export class FetchAccountsWithBalanceUseCase {
   }
 
   execute(): Observable<Account[]> {
-    return from(this.fetchAccountsUseCase.execute()).pipe(
+    const existingAccounts = this.accountService.getAccounts();
+    const accountsSource =
+      existingAccounts.length > 0
+        ? of(existingAccounts)
+        : from(this.fetchAccountsUseCase.execute());
+
+    return accountsSource.pipe(
       switchMap((accounts) => {
         const initialAccounts =
           this.initializeAccountsWithEmptyBalances(accounts);

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

@@ -16,7 +16,7 @@ export class LedgerSkeleton extends LitElement {
     return html`
       <div
         data-slot="skeleton"
-        class="lb-h-full lb-w-full lb-animate-pulse lb-rounded-[inherit] lb-bg-muted"
+        class="lb-h-full lb-w-full lb-animate-pulse lb-rounded-[inherit] lb-bg-muted-transparent"
         role="presentation"
         aria-hidden="true"
       ></div>

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

@@ -143,7 +143,9 @@ export class LedgerAccountItemMolecule extends LitElement {
     if (this.isBalanceLoading) {
       return html`
         <div class="lb-flex lb-items-center lb-justify-center">
-          <ledger-skeleton class="lb-h-16 lb-w-80"></ledger-skeleton>
+          <ledger-skeleton
+            class="lb-h-16 lb-w-80 lb-rounded-full"
+          ></ledger-skeleton>
         </div>
       `;
     }
@@ -175,7 +177,9 @@ export class LedgerAccountItemMolecule extends LitElement {
         <div
           class="lb-flex lb-items-center lb-justify-between lb-border lb-border-b-0 lb-border-l-0 lb-border-r-0 lb-border-muted-subtle lb-bg-muted lb-p-12"
         >
-          <ledger-skeleton class="lb-h-16 lb-w-112"></ledger-skeleton>
+          <ledger-skeleton
+            class="lb-h-16 lb-w-112 lb-rounded-full"
+          ></ledger-skeleton>
         </div>
       `;
     }

packages/ledger-button/src/domain/account-tokens/account-token-controller.ts

@@ -1,12 +1,14 @@
 import { Account } from "@ledgerhq/ledger-wallet-provider-core";
 import { ReactiveController, ReactiveControllerHost } from "lit";
+import { Subscription } from "rxjs";
 
 import { CoreContext } from "../../context/core-context";
 import { Navigation } from "../../shared/navigation";
 import { RootNavigationComponent } from "../../shared/root-navigation";
 
 export class AccountTokenController implements ReactiveController {
   account: Account | null = null;
+  private accountsSubscription?: Subscription;
 
   constructor(
     private readonly host: ReactiveControllerHost,
@@ -22,22 +24,41 @@ export class AccountTokenController implements ReactiveController {
     this.getAccount();
   }
 
+  hostDisconnected() {
+    if (this.accountsSubscription) {
+      this.accountsSubscription.unsubscribe();
+      this.accountsSubscription = undefined;
+    }
+  }
+
   getAccount() {
     const targetId = this.core.getPendingAccountId();
     if (!targetId) {
       this.navigation.navigateBack();
       return;
     }
-    this.account = this.core
-      .getAccounts()
-      .find((acc) => acc.id === targetId) as Account | null;
 
-    // If the account is not found, navigate back to account list
-    if (!this.account) {
-      this.navigation.navigateBack();
+    if (this.accountsSubscription) {
+      this.accountsSubscription.unsubscribe();
     }
 
-    this.host.requestUpdate();
+    this.accountsSubscription = this.core.getAccounts().subscribe({
+      next: (accounts) => {
+        this.account =
+          accounts.find((acc: Account) => acc.id === targetId) ?? null;
+
+        if (!this.account) {
+          this.navigation.navigateBack();
+        }
+
+        this.host.requestUpdate();
+      },
+      error: (error) => {
+        console.error("Failed to fetch accounts", error);
+        this.navigation.navigateBack();
+        this.host.requestUpdate();
+      },
+    });
   }
 
   handleConnect = () => {

packages/ledger-button/src/domain/onboarding/retrieving-accounts/retrieving-accounts-controller.ts

@@ -35,7 +35,7 @@ export class RetrievingAccountsController implements ReactiveController {
 
   async fetchAccounts() {
     try {
-      const accounts = await this.core.fetchAccounts();
+      const accounts = await this.core.fetchAccountsFromCloudSync();
       this.host.requestUpdate();
 
       if (!accounts || accounts.length === 0) {

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

@@ -2,13 +2,20 @@ import "../../../shared/root-navigation.js";
 
 import { Account } from "@ledgerhq/ledger-wallet-provider-core";
 import { ReactiveController, ReactiveControllerHost } from "lit";
+import { Subscription } from "rxjs";
 
 import type { AccountItemClickEventDetail } from "../../../components/molecule/account-item/ledger-account-item.js";
 import { CoreContext } from "../../../context/core-context.js";
 import { Navigation } from "../../../shared/navigation.js";
 import { RootNavigationComponent } from "../../../shared/root-navigation.js";
+
+type BalanceLoadingState = "loading" | "loaded" | "error";
+
 export class SelectAccountController implements ReactiveController {
   accounts: Account[] = [];
+  isAccountsLoading = false;
+  balanceLoadingStates = new Map<string, BalanceLoadingState>();
+  private accountsSubscription?: Subscription;
 
   get isBalanceLoading(): boolean {
     return this.accounts.some((account) => account.balance === undefined);
@@ -26,10 +33,72 @@ export class SelectAccountController implements ReactiveController {
     this.getAccounts();
   }
 
-  async getAccounts() {
-    const accounts = await this.core.getAccounts();
-    this.accounts = accounts ?? [];
+  hostDisconnected() {
+    if (this.accountsSubscription) {
+      this.accountsSubscription.unsubscribe();
+      this.accountsSubscription = undefined;
+    }
+  }
+
+  getAccounts() {
+    console.log("select-account-controller: getAccounts");
+
+    if (this.accountsSubscription) {
+      this.accountsSubscription.unsubscribe();
+    }
+
+    this.isAccountsLoading = true;
     this.host.requestUpdate();
+
+    this.accountsSubscription = this.core.getAccounts().subscribe({
+      next: (accounts) => {
+        this.accounts = accounts;
+        this.updateBalanceLoadingStates(accounts);
+        if (this.isAccountsLoading) {
+          this.isAccountsLoading = false;
+        }
+        this.host.requestUpdate();
+      },
+      error: (error) => {
+        this.isAccountsLoading = false;
+        console.error("Failed to fetch accounts with balance", error);
+        this.host.requestUpdate();
+      },
+    });
+  }
+
+  private updateBalanceLoadingStates(accounts: Account[]) {
+    for (const account of accounts) {
+      if (account.balance !== undefined) {
+        this.balanceLoadingStates.set(account.id, "loaded");
+      } else {
+        const currentState = this.balanceLoadingStates.get(account.id);
+        if (currentState !== "error") {
+          this.balanceLoadingStates.set(account.id, "loading");
+        }
+      }
+    }
+  }
+
+  setBalanceLoadingState(accountId: string, state: BalanceLoadingState): void {
+    this.balanceLoadingStates.set(accountId, state);
+    this.host.requestUpdate();
+  }
+
+  getBalanceLoadingState(accountId: string): BalanceLoadingState | undefined {
+    return this.balanceLoadingStates.get(accountId);
+  }
+
+  isAccountBalanceLoading(accountId: string): boolean {
+    return this.balanceLoadingStates.get(accountId) === "loading";
+  }
+
+  isAccountBalanceLoaded(accountId: string): boolean {
+    return this.balanceLoadingStates.get(accountId) === "loaded";
+  }
+
+  hasAccountBalanceError(accountId: string): boolean {
+    return this.balanceLoadingStates.get(accountId) === "error";
   }
 
   selectAccount(account: Account) {
@@ -42,9 +111,9 @@ export class SelectAccountController implements ReactiveController {
   handleAccountItemClick = (
     event: CustomEvent<AccountItemClickEventDetail>,
   ) => {
-    const account = this.core
-      .getAccounts()
-      .find((acc) => acc.id === event.detail.ledgerId);
+    const account = this.accounts.find(
+      (acc: Account) => acc.id === event.detail.ledgerId,
+    );
 
     if (account) {
       this.selectAccount(account);
@@ -67,9 +136,9 @@ export class SelectAccountController implements ReactiveController {
   handleAccountItemShowTokensClick = (
     event: CustomEvent<AccountItemClickEventDetail>,
   ) => {
-    const account = this.core
-      .getAccounts()
-      .find((acc) => acc.id === event.detail.ledgerId);
+    const account = this.accounts.find(
+      (acc: Account) => acc.id === event.detail.ledgerId,
+    );
 
     if (account) {
       this.core.setPendingAccountId(account.id);