@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,470 @@
+/**
+ * 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.component.ts
+ * @description Flexible account selector with both inline and modal presentation modes
+ *
+ * Orchestrator component for account selection functionality.
+ * Delegates to child components for rendering and service for business logic.
+ *
+ * **Features:**
+ * - Dual presentation: inline (default) or modal
+ * - Collapsible groups by Protocol / Network / Accounts
+ * - Full keyboard navigation and accessibility support
+ * - Shows all accounts from all sessions (multi-session WalletConnect support)
+ * - Displays session metadata (sessionKey, topic for WalletConnect)
+ * - Disconnect button per WalletConnect session with confirmation
+ * - Optional balance and metadata display
+ * - Theme-aware styling with dark mode support
+ *
+ * **Architecture:**
+ * This component acts as an orchestrator, delegating to:
+ * - `AccountListComponent` - List rendering
+ * - `AccountFilterComponent` - Compact header and filtering
+ * - `AccountActionsComponent` - Action buttons
+ * - `AccountSelectorService` - Business logic
+ */
+
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  OnInit,
+  HostBinding,
+  computed,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonContent, IonButton, IonIcon, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { closeOutline, walletOutline } from 'ionicons/icons';
+
+// Child components
+import {
+  AccountListComponent,
+  AccountItem,
+  LedgerGroup,
+} from './account-list/account-list.component';
+import {
+  AccountFilterComponent,
+  CompactHeaderFormat,
+  CompactHeaderSize,
+} from './account-filter/account-filter.component';
+import { AccountActionsComponent } from './account-actions/account-actions.component';
+
+// Services
+import { AccountSelectorService, SelectedAccountData } from './account-selector.service';
+import { AccountFormattingService } from './account-formatting.service';
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+/**
+ * Presentation mode for the Account Selector
+ */
+export type AccountSelectorPresentationMode = 'inline' | 'modal';
+
+/**
+ * Grouping mode for account display
+ */
+export type AccountGroupingMode = 'nested' | 'flat' | 'none';
+
+/**
+ * Configuration options for the Account Selector
+ */
+export interface AccountSelectorConfig {
+  /** Presentation mode: 'inline' (default) or 'modal' */
+  presentationMode?: AccountSelectorPresentationMode;
+  /** Display account balances (if available) */
+  showBalances?: boolean;
+  /** Display last activity timestamp */
+  showLastActivity?: boolean;
+  /** Display online/offline network status */
+  showNetworkStatus?: boolean;
+  /** Enable search/filter functionality */
+  enableSearch?: boolean;
+  /** Default expansion state for groups */
+  defaultExpanded?: 'all' | 'first' | 'none';
+  /** Show compact header with wallet info and count */
+  showCompactHeader?: boolean;
+  /** Format for compact header display */
+  compactHeaderFormat?: CompactHeaderFormat;
+  /** Size variant for compact header */
+  compactHeaderSize?: CompactHeaderSize;
+  /** Allow collapse/expand via compact header (inline mode) */
+  collapsible?: boolean;
+  /** Grouping mode: 'nested' | 'flat' | 'none' */
+  groupingMode?: AccountGroupingMode;
+}
+
+/**
+ * @component AccountSelectorComponent
+ * Flexible account selector with both inline and modal presentation modes.
+ */
+@Component({
+  selector: 'wallet-account-selector',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonContent,
+    IonButton,
+    IonIcon,
+    AccountListComponent,
+    AccountFilterComponent,
+    AccountActionsComponent,
+  ],
+  templateUrl: './account-selector.component.html',
+  styleUrls: ['./account-selector.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AccountSelectorComponent implements OnInit {
+  /**
+   * Presentation mode: 'inline' (default) or 'modal'
+   */
+  @Input() presentationMode: AccountSelectorPresentationMode = 'inline';
+
+  /**
+   * Configuration options for the component
+   */
+  @Input() config: AccountSelectorConfig = {
+    presentationMode: 'inline',
+    showBalances: false,
+    showLastActivity: false,
+    showNetworkStatus: false,
+    enableSearch: false,
+    defaultExpanded: 'none',
+    showCompactHeader: false,
+    compactHeaderFormat: 'label-count',
+    compactHeaderSize: 'default',
+    collapsible: true,
+    groupingMode: 'nested',
+  };
+
+  /**
+   * Currently selected account ID (optional, for highlighting)
+   */
+  @Input() selectedId?: string;
+
+  /**
+   * Address-based selection (legacy support)
+   */
+  @Input() selectedAddress?: string;
+
+  /**
+   * Header title text
+   */
+  @Input() headerTitle = 'Select Account';
+
+  /**
+   * Custom header text for inline expandable mode
+   */
+  @Input() customHeaderText?: string;
+
+  /**
+   * Optional: Manually provide ModalController instance
+   */
+  @Input() set modalControllerInstance(controller: ModalController | undefined) {
+    if (controller) {
+      this.modalController = controller;
+      this.selectorService.setModalController(controller);
+    }
+  }
+
+  /**
+   * Emitted when user selects a different account (inline mode)
+   */
+  @Output() accountChanged = new EventEmitter<SelectedAccountData>();
+
+  /**
+   * Emitted when user disconnects a session (inline mode)
+   */
+  @Output() sessionDisconnected = new EventEmitter<{
+    providerId: string;
+    sessionKey?: string;
+  }>();
+
+  /**
+   * Emitted when user clicks the Connect Wallet button (inline mode)
+   */
+  @Output() connectWalletRequested = new EventEmitter<void>();
+
+  /**
+   * Host binding for presentation mode styling
+   */
+  @HostBinding('attr.data-presentation-mode')
+  get hostPresentationMode(): string {
+    return this.effectivePresentationMode;
+  }
+
+  // Injected services
+  protected readonly selectorService = inject(AccountSelectorService);
+  protected readonly formatting = inject(AccountFormattingService);
+  protected readonly wallet = inject(UnifiedWalletService);
+  protected modalController = inject(ModalController, { optional: true });
+
+  /**
+   * Track if the account list is collapsed (inline mode with compact header)
+   */
+  protected readonly isCollapsed = signal<boolean>(false);
+
+  /**
+   * Computed: ledger groups from service
+   */
+  protected readonly groupedByLedger = computed<LedgerGroup[]>(() =>
+    this.selectorService.groupedByLedger(),
+  );
+
+  /**
+   * Computed: active account for filter component
+   */
+  protected readonly activeAccountData = computed(() => {
+    const active = this.selectorService.activeAccount();
+    if (!active) return null;
+    return {
+      address: active.address,
+      networkId: active.networkId,
+      label: active.label,
+      providerType: active.providerType,
+    };
+  });
+
+  /**
+   * Computed: currently connected account with session
+   */
+  protected readonly currentlyConnectedAccount = computed(() =>
+    this.selectorService.currentlyConnectedAccount(),
+  );
+
+  /**
+   * Computed: total account count
+   */
+  protected readonly totalAccountCount = computed(() => this.selectorService.totalAccountCount());
+
+  /**
+   * Computed: wallet logo for active account
+   */
+  protected readonly activeWalletLogo = computed(() => this.selectorService.getActiveWalletLogo());
+
+  /**
+   * Computed: loading state from service
+   */
+  protected readonly isLoading = computed(() => this.selectorService.isLoading());
+
+  /**
+   * Computed: error state from service
+   */
+  protected readonly error = computed(() => this.selectorService.error());
+
+  /**
+   * Computed: has connected sessions
+   */
+  protected readonly hasAccounts = computed(() => this.wallet.getActiveSessions().length > 0);
+
+  constructor() {
+    addIcons({ closeOutline, walletOutline });
+  }
+
+  /**
+   * Get effective presentation mode
+   */
+  protected get effectivePresentationMode(): AccountSelectorPresentationMode {
+    return this.presentationMode || this.config.presentationMode || 'inline';
+  }
+
+  /**
+   * Check if we're in modal mode
+   */
+  protected get isModalMode(): boolean {
+    return this.effectivePresentationMode === 'modal';
+  }
+
+  /**
+   * Check if we're in inline mode
+   */
+  protected get isInlineMode(): boolean {
+    return this.effectivePresentationMode === 'inline';
+  }
+
+  /**
+   * Initialize component state
+   */
+  ngOnInit(): void {
+    this.initializeCollapsedState();
+  }
+
+  /**
+   * Initialize collapsed state for compact header
+   */
+  private initializeCollapsedState(): void {
+    if (this.config.showCompactHeader && this.config.defaultExpanded === 'none') {
+      this.isCollapsed.set(true);
+    }
+  }
+
+  /**
+   * Toggle collapse/expand of account list
+   */
+  protected toggleCollapse(): void {
+    if (this.config.collapsible && this.isInlineMode && this.config.showCompactHeader) {
+      this.isCollapsed.update((value) => !value);
+    }
+  }
+
+  /**
+   * Handle account selection from list component
+   */
+  protected async onAccountSelected(accountItem: AccountItem): Promise<void> {
+    const accountData = await this.selectorService.selectAccount(
+      accountItem,
+      this.effectivePresentationMode,
+    );
+
+    if (accountData) {
+      if (this.isInlineMode) {
+        this.accountChanged.emit(accountData);
+      } else if (this.isModalMode && this.modalController) {
+        await this.modalController.dismiss({ account: accountData });
+      }
+    }
+  }
+
+  /**
+   * Handle disconnect request from list component
+   */
+  protected async onDisconnectRequested(event: {
+    providerId: string;
+    sessionKey?: string;
+  }): Promise<void> {
+    const success = await this.selectorService.disconnectSession(
+      event.providerId,
+      event.sessionKey,
+      this.effectivePresentationMode,
+    );
+
+    if (success && this.isInlineMode) {
+      this.sessionDisconnected.emit(event);
+    }
+  }
+
+  /**
+   * Handle disconnect all action
+   */
+  protected async onDisconnectAll(): Promise<void> {
+    const success = await this.selectorService.disconnectAll(this.effectivePresentationMode);
+    if (success && this.isModalMode && this.modalController) {
+      await this.modalController.dismiss({ disconnectedAll: true });
+    }
+  }
+
+  /**
+   * Handle add account action
+   */
+  protected async onAddAccount(): Promise<void> {
+    if (this.isModalMode && this.modalController) {
+      await this.modalController.dismiss({ action: 'add-account' });
+    }
+  }
+
+  /**
+   * Handle connect wallet button click
+   */
+  protected onConnectWalletClick(): void {
+    this.connectWalletRequested.emit();
+  }
+
+  /**
+   * Dismiss error state
+   */
+  protected onErrorDismissed(): void {
+    this.selectorService.clearError();
+  }
+
+  /**
+   * Close the modal (modal mode only)
+   */
+  protected async dismiss(): Promise<void> {
+    if (this.isModalMode && this.modalController) {
+      await this.modalController.dismiss({ cancelled: true });
+    }
+  }
+
+  /**
+   * Handle keyboard events for accessibility
+   */
+  protected handleKeyDown(event: KeyboardEvent): void {
+    if (this.isModalMode && event.key === 'Escape') {
+      event.preventDefault();
+      this.dismiss();
+      return;
+    }
+
+    // Arrow key navigation
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const direction = event.key === 'ArrowDown' ? 1 : -1;
+      const nextId = this.selectorService.navigateAccounts(
+        direction,
+        this.selectedId || this.selectorService.activeAccount()?.id,
+      );
+      if (nextId) {
+        // Find and select the account
+        const accounts = this.selectorService.allAccounts();
+        const account = accounts.find((a) => a.id === nextId);
+        if (account) {
+          const sessions = this.wallet.getActiveSessions();
+          for (const session of sessions) {
+            const matchedAccount = session.accounts?.find((a) => a.id === nextId);
+            if (matchedAccount) {
+              this.onAccountSelected({
+                account: matchedAccount,
+                session: {
+                  providerId: session.providerId,
+                  providerType: session.providerType,
+                  metadata: session.metadata,
+                },
+              });
+              break;
+            }
+          }
+        }
+      }
+      return;
+    }
+
+    // Home/End keys
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const targetId = this.selectorService.navigateToEdge(event.key === 'Home');
+      if (targetId) {
+        const accounts = this.selectorService.allAccounts();
+        const account = accounts.find((a) => a.id === targetId);
+        if (account) {
+          const sessions = this.wallet.getActiveSessions();
+          for (const session of sessions) {
+            const matchedAccount = session.accounts?.find((a) => a.id === targetId);
+            if (matchedAccount) {
+              this.onAccountSelected({
+                account: matchedAccount,
+                session: {
+                  providerId: session.providerId,
+                  providerType: session.providerType,
+                  metadata: session.metadata,
+                },
+              });
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+}