@hsuite/native-connect-angular 1.0.0

package/src/lib/components/account-selector/account-selector.service.ts

@@ -0,0 +1,501 @@
+/**
+ * HSuite Native Connect
+ * Copyright 2024-2025 HSuite (https://hsuite.finance)
+ *
+ * SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+ *
+ * This file is part of HSuite Native Connect. For commercial licensing,
+ * visit https://hsuite.finance/licensing
+ */
+
+/**
+ * @file account-selector.service.ts
+ * @description Business logic service for account selector
+ *
+ * Encapsulates the core business logic for the AccountSelectorComponent.
+ * Handles account selection, session management, and data transformations.
+ * Extracted from AccountSelectorComponent for better testability and maintainability.
+ *
+ * **Features:**
+ * - Account selection and switching
+ * - Session disconnect logic
+ * - Account grouping by ledger
+ * - Keyboard navigation support
+ * - Toast/alert integration
+ */
+
+import { Injectable, inject, signal, computed } from '@angular/core';
+import { getLogger } from '@hsuite/native-connect-sdk';
+import { AlertController, ToastController, ModalController } from '@ionic/angular/standalone';
+
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+import { AccountFormattingService } from './account-formatting.service';
+import type { LedgerGroup, AccountItem } from './account-list/account-list.component';
+
+const logger = getLogger().scoped?.('AccountSelectorService') ?? getLogger();
+
+/**
+ * Account data emitted on selection change
+ */
+export interface SelectedAccountData {
+  id: string;
+  address: string;
+  ledgerId: string;
+  networkId: string;
+  label?: string;
+  providerId?: string;
+  providerType?: string;
+}
+
+/**
+ * @service AccountSelectorService
+ * Business logic service for account selector component.
+ */
+@Injectable({ providedIn: 'root' })
+export class AccountSelectorService {
+  protected readonly wallet = inject(UnifiedWalletService);
+  protected readonly formatting = inject(AccountFormattingService);
+
+  // Controllers - optional for different contexts
+  protected alertController = inject(AlertController, { optional: true });
+  protected toastController = inject(ToastController, { optional: true });
+  protected modalController = inject(ModalController, { optional: true });
+
+  /**
+   * Loading state signal
+   */
+  readonly isLoading = signal<boolean>(false);
+
+  /**
+   * Error state signal
+   */
+  readonly error = signal<string | null>(null);
+
+  /**
+   * Get all active sessions from wallet
+   */
+  get activeSessions() {
+    return this.wallet.getActiveSessions();
+  }
+
+  /**
+   * Get all accounts as a computed value
+   */
+  readonly allAccounts = computed(() => {
+    const accounts = this.wallet.allAccounts();
+    return accounts.map((acc) => ({
+      id: acc.id,
+      address: acc.address,
+      ledgerId: acc.ledgerId,
+      networkId: acc.networkId,
+      label: acc.label,
+      publicKey: (acc.metadata as any)?.publicKey,
+      providerId: acc.providerId,
+      providerType: acc.providerType,
+      sessionKey: (acc.metadata as any)?.sessionKey,
+    }));
+  });
+
+  /**
+   * Get currently active account
+   */
+  readonly activeAccount = computed(() => this.wallet.activeAccount());
+
+  /**
+   * Get total account count
+   */
+  readonly totalAccountCount = computed(() => this.wallet.allAccounts().length);
+
+  /**
+   * Get all accounts grouped by ledger
+   */
+  readonly groupedByLedger = computed<LedgerGroup[]>(() => {
+    const sessions = this.wallet.getActiveSessions();
+    const items: Array<{ account: any; session: any }> = [];
+
+    for (const session of sessions) {
+      if (!session.accounts || !Array.isArray(session.accounts)) continue;
+      for (const account of session.accounts) {
+        if (account) items.push({ account, session });
+      }
+    }
+
+    return this.groupAccountsByLedger(items);
+  });
+
+  /**
+   * Get currently connected account with session
+   */
+  readonly currentlyConnectedAccount = computed<{
+    session: any;
+    account: any;
+  } | null>(() => {
+    try {
+      const activeAccount = this.wallet.activeAccount();
+      if (!activeAccount) return null;
+
+      const sessions = this.wallet.getActiveSessions();
+      if (!sessions || !Array.isArray(sessions)) return null;
+
+      for (const session of sessions) {
+        if (!session || !session.accounts || !Array.isArray(session.accounts)) continue;
+
+        const account = session.accounts.find((a) => a && a.address === activeAccount.address);
+        if (account) {
+          return { session, account };
+        }
+      }
+      return null;
+    } catch (error) {
+      logger.error('Error getting currently connected account', { error });
+      return null;
+    }
+  });
+
+  /**
+   * Get other accounts (not currently connected)
+   */
+  readonly otherAccounts = computed<
+    Array<{
+      session: any;
+      account: any;
+    }>
+  >(() => {
+    try {
+      const activeAccount = this.wallet.activeAccount();
+      const sessions = this.wallet.getActiveSessions();
+      const others: Array<{ session: any; account: any }> = [];
+
+      if (!sessions || !Array.isArray(sessions)) return others;
+
+      for (const session of sessions) {
+        if (!session || !session.accounts || !Array.isArray(session.accounts)) continue;
+
+        for (const account of session.accounts) {
+          if (!account) continue;
+
+          if (!activeAccount || account.address !== activeAccount.address) {
+            others.push({ session, account });
+          }
+        }
+      }
+
+      return others;
+    } catch (error) {
+      logger.error('Error getting other accounts', { error });
+      return [];
+    }
+  });
+
+  /**
+   * Select an account
+   * @param accountItem
+   * @param mode
+   */
+  async selectAccount(
+    accountItem: AccountItem,
+    mode: 'inline' | 'modal',
+  ): Promise<SelectedAccountData | null> {
+    const account = accountItem.account;
+    const selectedId = account.id;
+
+    // Update UnifiedWalletService active account
+    const unifiedAccount = this.wallet.allAccounts().find((a) => a.id === selectedId);
+    if (unifiedAccount) {
+      this.wallet.setActiveAccount(unifiedAccount);
+    }
+
+    const accountData: SelectedAccountData = {
+      id: account.id || '',
+      address: account.address || '',
+      ledgerId: account.ledgerId || '',
+      networkId: account.networkId || '',
+      label: account.label,
+      providerId: accountItem.session.providerId,
+      providerType: accountItem.session.providerType,
+    };
+
+    // Modal mode: show toast and dismiss
+    if (mode === 'modal') {
+      await this.showSuccessToast(`Switched to ${account.label || 'Account'}`);
+      logger.info('[Modal] Account changed and modal dismissed', { ...accountData });
+    } else {
+      logger.info('[Inline] Account changed', { ...accountData });
+    }
+
+    return accountData;
+  }
+
+  /**
+   * Disconnect a session with confirmation
+   * @param providerId
+   * @param sessionKey
+   * @param mode
+   * @param skipConfirmation
+   */
+  async disconnectSession(
+    providerId: string,
+    sessionKey: string | undefined,
+    mode: 'inline' | 'modal',
+    skipConfirmation = false,
+  ): Promise<boolean> {
+    // Modal mode: use AlertController for confirmation
+    if (!skipConfirmation) {
+      if (mode === 'modal' && this.alertController) {
+        return new Promise((resolve) => {
+          this.alertController!.create({
+            header: 'Disconnect Session',
+            message: 'Are you sure you want to disconnect this wallet session?',
+            buttons: [
+              {
+                text: 'Cancel',
+                role: 'cancel',
+                handler: () => resolve(false),
+              },
+              {
+                text: 'Disconnect',
+                role: 'destructive',
+                handler: async () => {
+                  const success = await this.performDisconnect(providerId, sessionKey, mode);
+                  resolve(success);
+                },
+              },
+            ],
+          }).then((alert) => alert.present());
+        });
+      }
+
+      // Inline mode: use browser confirm
+      if (mode === 'inline') {
+        const confirmed = confirm('Are you sure you want to disconnect this wallet session?');
+        if (!confirmed) return false;
+      }
+    }
+
+    return this.performDisconnect(providerId, sessionKey, mode);
+  }
+
+  /**
+   * Disconnect all sessions with confirmation
+   * @param _mode
+   */
+  async disconnectAll(_mode: 'inline' | 'modal'): Promise<boolean> {
+    if (!this.alertController) {
+      logger.warn('AlertController not available for disconnect confirmation');
+      return false;
+    }
+
+    return new Promise((resolve) => {
+      this.alertController!.create({
+        header: 'Disconnect All Wallets',
+        message: 'Are you sure you want to disconnect all connected wallets?',
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            handler: () => resolve(false),
+          },
+          {
+            text: 'Disconnect All',
+            role: 'destructive',
+            handler: async () => {
+              this.isLoading.set(true);
+              try {
+                const sessions = this.wallet.getActiveSessions();
+                for (const session of sessions) {
+                  try {
+                    await this.wallet.disconnectSession(
+                      session.providerId,
+                      session.metadata?.sessionKey,
+                    );
+                  } catch (error) {
+                    logger.error('Failed to disconnect session', {
+                      providerId: session.providerId,
+                      error,
+                    });
+                  }
+                }
+
+                await this.showSuccessToast('All wallets disconnected');
+                resolve(true);
+              } catch (error) {
+                logger.error('Failed to disconnect all sessions', { error });
+                this.error.set('Failed to disconnect all wallets');
+                resolve(false);
+              } finally {
+                this.isLoading.set(false);
+              }
+            },
+          },
+        ],
+      }).then((alert) => alert.present());
+    });
+  }
+
+  /**
+   * Navigate accounts using keyboard
+   * @param direction
+   * @param selectedId
+   */
+  navigateAccounts(direction: 1 | -1, selectedId?: string): string | null {
+    const accounts = this.allAccounts();
+    if (accounts.length === 0) return null;
+
+    const currentIndex = accounts.findIndex((acc) => acc.id === selectedId);
+    let nextIndex = currentIndex + direction;
+
+    // Wrap around
+    if (nextIndex < 0) {
+      nextIndex = accounts.length - 1;
+    } else if (nextIndex >= accounts.length) {
+      nextIndex = 0;
+    }
+
+    const nextAccount = accounts[nextIndex];
+    return nextAccount?.id ?? null;
+  }
+
+  /**
+   * Navigate to first or last account
+   * @param toFirst
+   */
+  navigateToEdge(toFirst: boolean): string | null {
+    const accounts = this.allAccounts();
+    if (accounts.length === 0) return null;
+
+    const targetAccount = toFirst ? accounts[0] : accounts[accounts.length - 1];
+    return targetAccount?.id ?? null;
+  }
+
+  /**
+   * Get wallet logo for active account
+   */
+  getActiveWalletLogo(): string {
+    const sessions = this.wallet.getActiveSessions();
+    const activeAccount = this.wallet.activeAccount();
+
+    if (!activeAccount) return 'assets/wallets/hsuite.svg';
+
+    const session = sessions.find((s) =>
+      s.accounts?.some((acc) => acc.address === activeAccount.address),
+    );
+
+    if (!session) return 'assets/wallets/hsuite.svg';
+
+    return this.formatting.getWalletLogo(session.providerType);
+  }
+
+  /**
+   * Clear error state
+   */
+  clearError(): void {
+    this.error.set(null);
+  }
+
+  /**
+   * Set modal controller instance (for modal context)
+   * @param controller
+   */
+  setModalController(controller: ModalController): void {
+    this.modalController = controller;
+  }
+
+  /**
+   * Perform the actual disconnect operation
+   * @param providerId
+   * @param sessionKey
+   * @param mode
+   */
+  private async performDisconnect(
+    providerId: string,
+    sessionKey: string | undefined,
+    mode: 'inline' | 'modal',
+  ): Promise<boolean> {
+    this.isLoading.set(true);
+    this.error.set(null);
+
+    try {
+      await this.wallet.disconnectSession(providerId, sessionKey);
+
+      if (mode === 'modal') {
+        await this.showSuccessToast('Wallet disconnected successfully');
+      }
+
+      logger.info('Session disconnected', { providerId, sessionKey, mode });
+      return true;
+    } catch (error) {
+      logger.error('Failed to disconnect session', { providerId, error });
+
+      if (mode === 'modal') {
+        await this.showErrorToast('Failed to disconnect wallet. Please try again.');
+      }
+
+      this.error.set(error instanceof Error ? error.message : 'Failed to disconnect');
+      return false;
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  /**
+   * Group accounts by ledger
+   * @param items
+   */
+  private groupAccountsByLedger(items: Array<{ account: any; session: any }>): LedgerGroup[] {
+    const ledgerMap = new Map<string, Array<{ account: any; session: any }>>();
+
+    for (const item of items) {
+      const { account } = item;
+      if (!account?.ledgerId) continue;
+
+      const ledgerId = account.ledgerId;
+      if (!ledgerMap.has(ledgerId)) {
+        ledgerMap.set(ledgerId, []);
+      }
+      ledgerMap.get(ledgerId)!.push(item);
+    }
+
+    return Array.from(ledgerMap.entries()).map(([ledgerId, accounts]) => ({
+      ledgerName: this.formatting.getLedgerName(ledgerId),
+      ledgerId,
+      accounts,
+    }));
+  }
+
+  /**
+   * Show success toast
+   * @param message
+   */
+  private async showSuccessToast(message: string): Promise<void> {
+    if (this.toastController) {
+      const toast = await this.toastController.create({
+        message,
+        duration: 2000,
+        cssClass: 'toast-success toast-compact',
+        position: 'top',
+        icon: 'checkmark-circle',
+        buttons: [{ icon: 'close', role: 'cancel' }],
+      });
+      await toast.present();
+    }
+  }
+
+  /**
+   * Show error toast
+   * @param message
+   */
+  private async showErrorToast(message: string): Promise<void> {
+    if (this.toastController) {
+      const toast = await this.toastController.create({
+        message,
+        duration: 3000,
+        cssClass: 'toast-danger toast-compact',
+        position: 'top',
+        icon: 'alert-circle-outline',
+        buttons: [{ icon: 'close', role: 'cancel' }],
+      });
+      await toast.present();
+    }
+  }
+}

package/src/lib/components/wallet-account-display/wallet-account-display.component.html

@@ -0,0 +1,34 @@
+<div class="wallet-account-display" *ngIf="account()">
+  <div class="account-header">
+    <ion-icon [name]="showLabel ? 'person-outline' : 'wallet-outline'"></ion-icon>
+    <div class="account-info">
+      <div class="account-label" *ngIf="showLabel">
+        <strong>{{ account()!.label || 'Account' }}</strong>
+      </div>
+      <div class="account-address">
+        <ion-text [color]="addressColor">
+          <small>{{ displayAddress() }}</small>
+        </ion-text>
+      </div>
+    </div>
+  </div>
+
+  <div class="account-badges" *ngIf="showBadges">
+    <ion-badge *ngIf="isMultisig()" color="tertiary" class="multisig-badge">
+      <ion-icon name="people-outline"></ion-icon>
+      Multisig{{ multisigInfo() ? ' (' + multisigInfo() + ')' : '' }}
+    </ion-badge>
+    <ion-badge [color]="getLedgerColor(account()!.ledgerId)">
+      {{ account()!.ledgerId.toUpperCase() }}
+    </ion-badge>
+    <ion-badge>
+      {{ formatNetwork(account()!.networkId) }}
+    </ion-badge>
+  </div>
+</div>
+
+<div class="wallet-account-display empty" *ngIf="!account()">
+  <ion-text>
+    <small>{{ emptyText }}</small>
+  </ion-text>
+</div>

package/src/lib/components/wallet-account-display/wallet-account-display.component.scss

@@ -0,0 +1,99 @@
+/**
+ * Wallet Account Display Component Styles
+ * @compodoc
+ * Styles for the wallet account display component
+ */
+
+.wallet-account-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-lg, 16px);
+  padding: var(--space-lg, 16px) var(--space-xl, 20px);
+  background: var(--surface-flat);
+  border: var(--border-width-thin, 1px) solid var(--border-flat);
+  border-radius: var(--border-radius-lg, 12px);
+  min-height: 72px;
+
+  &.empty {
+    justify-content: center;
+    padding: var(--space-md, 14px) var(--space-lg, 16px);
+    min-height: 56px;
+  }
+}
+
+.account-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md, 12px);
+  flex: 1;
+  min-width: 0;
+
+  ion-icon {
+    font-size: var(--font-size-2xl, 24px);
+    color: var(--ion-color-primary);
+    flex-shrink: 0;
+  }
+}
+
+.account-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs, 6px);
+  min-width: 0;
+  flex: 1;
+}
+
+.account-label {
+  font-size: var(--font-size-lg, 16px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--ion-text-color);
+  line-height: 1.3;
+}
+
+.account-address {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-md, 14px);
+  color: var(--ion-color-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.account-badges {
+  display: flex;
+  gap: var(--space-sm, 8px);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+
+  ion-badge {
+    padding: var(--space-xs, 6px) var(--space-sm, 10px);
+    font-size: var(--font-size-xs, 12px);
+    font-weight: var(--font-weight-medium, 500);
+  }
+
+  .multisig-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    ion-icon {
+      font-size: 14px;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .wallet-account-display {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--space-md, 14px) var(--space-lg, 16px);
+    gap: var(--space-md, 12px);
+  }
+
+  .account-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}