@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,227 @@
+/**
+ * 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-grouping.service.ts
+ * @description Account grouping and organization logic
+ *
+ * Provides account grouping utilities for the AccountSelectorComponent.
+ * Extracted to reduce component size and enable reuse.
+ *
+ * Supports three grouping modes:
+ * - 'nested': Protocol → Network → Accounts (2 clicks)
+ * - 'flat': Network → Accounts (1 click)
+ * - 'none': All accounts flat (0 clicks)
+ */
+
+import { Injectable } from '@angular/core';
+
+/**
+ * Grouping mode for account display.
+ */
+export type AccountGroupingMode = 'nested' | 'flat' | 'none';
+
+/**
+ * Network group containing sessions and account count.
+ */
+export interface NetworkGroup {
+  network: string;
+  sessions: unknown[];
+  accountCount: number;
+}
+
+/**
+ * Protocol group containing networks.
+ */
+export interface ProtocolGroup {
+  protocol: string;
+  networks: NetworkGroup[];
+}
+
+/**
+ * Ledger group containing accounts with session info.
+ */
+export interface LedgerGroup {
+  ledgerName: string;
+  ledgerId: string;
+  accounts: Array<{ account: any; session: any }>;
+}
+
+/**
+ * Account grouping service.
+ *
+ * Provides utilities for organizing accounts into hierarchical groups
+ * for display in account selector components.
+ */
+@Injectable({ providedIn: 'root' })
+export class AccountGroupingService {
+  /**
+   * Group sessions by protocol and network.
+   *
+   * @param sessions - Array of session objects
+   * @param mode - Grouping mode
+   * @returns Grouped sessions
+   */
+  groupSessions(sessions: any[], mode: AccountGroupingMode): ProtocolGroup[] {
+    if (mode === 'none') {
+      return this.groupFlat(sessions);
+    }
+
+    if (mode === 'flat') {
+      return this.groupByNetwork(sessions);
+    }
+
+    return this.groupNested(sessions);
+  }
+
+  /**
+   * Group accounts by ledger (Hedera, XRPL, etc.).
+   *
+   * @param items - Array of account items with session info
+   * @param getLedgerName - Function to get display name for ledger
+   * @returns Grouped accounts by ledger
+   */
+  groupByLedger(
+    items: Array<{ account: any; session: any }>,
+    getLedgerName: (ledgerId: string) => string,
+  ): 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: getLedgerName(ledgerId),
+      ledgerId,
+      accounts,
+    }));
+  }
+
+  /**
+   * Create flat grouping (no hierarchy).
+   * @private
+   */
+  private groupFlat(sessions: any[]): ProtocolGroup[] {
+    return [
+      {
+        protocol: 'All Accounts',
+        networks: [
+          {
+            network: 'all',
+            sessions,
+            accountCount: sessions.reduce((sum: number, s) => sum + (s?.accounts?.length || 0), 0),
+          },
+        ],
+      },
+    ];
+  }
+
+  /**
+   * Group by network only (flat mode).
+   * @private
+   */
+  private groupByNetwork(sessions: any[]): ProtocolGroup[] {
+    const networkGroups = new Map<string, unknown[]>();
+
+    for (const session of sessions) {
+      const network = this.extractNetwork(
+        session.metadata?.networkId || session.accounts?.[0]?.networkId,
+      );
+
+      if (!networkGroups.has(network)) {
+        networkGroups.set(network, []);
+      }
+
+      networkGroups.get(network)!.push(session);
+    }
+
+    return [
+      {
+        protocol: 'Wallets',
+        networks: Array.from(networkGroups.entries()).map(([network, netSessions]) => ({
+          network,
+          sessions: netSessions,
+          accountCount: netSessions.reduce(
+            (sum: number, s: any) => sum + (s?.accounts?.length || 0),
+            0,
+          ) as number,
+        })),
+      },
+    ];
+  }
+
+  /**
+   * Group by network then protocol (nested mode).
+   * @private
+   */
+  private groupNested(sessions: any[]): ProtocolGroup[] {
+    const grouped = new Map<string, Map<string, any[]>>();
+
+    for (const session of sessions) {
+      const network = this.extractNetwork(
+        session.metadata?.networkId || session.accounts?.[0]?.networkId,
+      );
+      const protocol = session.providerType === 'hsuite-native' ? 'HSuite Native' : 'WalletConnect';
+
+      if (!grouped.has(network)) {
+        grouped.set(network, new Map());
+      }
+
+      const networkGroup = grouped.get(network)!;
+      if (!networkGroup.has(protocol)) {
+        networkGroup.set(protocol, []);
+      }
+
+      networkGroup.get(protocol)!.push(session);
+    }
+
+    return Array.from(grouped.entries()).map(([network, protocols]) => ({
+      protocol: network,
+      networks: Array.from(protocols.entries()).map(([proto, protoSessions]) => ({
+        network: proto,
+        sessions: protoSessions,
+        accountCount: protoSessions.reduce(
+          (sum: number, s: any) => sum + (s?.accounts?.length || 0),
+          0,
+        ) as number,
+      })),
+    }));
+  }
+
+  /**
+   * Extract network name from networkId.
+   *
+   * @param networkId - Full network ID (e.g., "hedera:testnet")
+   * @returns Network name (e.g., "testnet")
+   */
+  extractNetwork(networkId?: string): string {
+    if (!networkId) return 'unknown';
+    const parts = networkId.split(':');
+    return parts[parts.length - 1] || networkId;
+  }
+
+  /**
+   * Get total account count for a protocol group.
+   *
+   * @param protocolGroup - Protocol group
+   * @returns Total account count
+   */
+  getTotalAccounts(protocolGroup: ProtocolGroup): number {
+    return protocolGroup.networks.reduce((sum, network) => sum + network.accountCount, 0);
+  }
+}

package/src/lib/components/account-selector/account-list/account-list.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-list.component.ts
+ * @description Account list rendering component
+ *
+ * Renders a list of wallet accounts grouped by ledger.
+ * Extracted from AccountSelectorComponent for better maintainability.
+ *
+ * **Features:**
+ * - Renders accounts grouped by ledger (Hedera, XRPL, etc.)
+ * - Collapsible ledger groups
+ * - Selection state management
+ * - Wallet logos and network badges
+ * - Accessibility support (ARIA labels, keyboard navigation)
+ */
+
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonBadge, IonIcon, IonButton, IonSpinner } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  chevronDownOutline,
+  closeOutline,
+  walletOutline,
+  alertCircleOutline,
+  peopleOutline,
+  personOutline,
+} from 'ionicons/icons';
+import { AccountFormattingService } from '../account-formatting.service';
+import { getLedgerIcon, getLedgerColor } from '../../../utils/ledger-icons.util';
+
+/**
+ * Account item with session context
+ */
+export interface AccountItem {
+  account: {
+    id: string;
+    address: string;
+    ledgerId: string;
+    networkId: string;
+    label?: string;
+    metadata?: {
+      channelType?: string;
+      isMultisig?: boolean;
+      [key: string]: unknown;
+    };
+  };
+  session: {
+    providerId: string;
+    providerType: string;
+    metadata?: {
+      sessionKey?: string;
+      channelType?: string;
+      isMultisig?: boolean;
+      [key: string]: unknown;
+    };
+  };
+}
+
+/**
+ * Ledger group containing accounts
+ */
+export interface LedgerGroup {
+  ledgerName: string;
+  ledgerId: string;
+  accounts: AccountItem[];
+}
+
+/**
+ * @component AccountListComponent
+ * Renders a list of wallet accounts grouped by ledger.
+ */
+@Component({
+  selector: 'wallet-account-list',
+  standalone: true,
+  imports: [CommonModule, IonBadge, IonIcon, IonButton, IonSpinner],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" *ngIf="isLoading">
+      <ion-spinner name="crescent"></ion-spinner>
+      <p>Processing...</p>
+    </div>
+
+    <!-- Account List Content -->
+    <div
+      *ngIf="ledgerGroups.length > 0"
+      class="account-list-content"
+      [class.inline-mode]="!isModal"
+      [class.modal-mode]="isModal"
+    >
+      <!-- Description -->
+      <div class="selector-description" *ngIf="showDescription">
+        Select an account you want to use:
+      </div>
+
+      <!-- Ledger Groups -->
+      <div class="sessions-groups">
+        <ng-container *ngFor="let ledgerGroup of ledgerGroups; trackBy: trackByLedger">
+          <div class="ledger-group" [class.modal-group]="isModal">
+            <!-- Ledger Header -->
+            <div
+              class="ledger-header-row"
+              [class.modal-header]="isModal"
+              (click)="toggleLedger(ledgerGroup.ledgerName); $event.stopPropagation()"
+            >
+              <div class="ledger-label">
+                <img
+                  *ngIf="getLedgerIconUrl(ledgerGroup.ledgerId)"
+                  [src]="getLedgerIconUrl(ledgerGroup.ledgerId)"
+                  [alt]="ledgerGroup.ledgerName + ' icon'"
+                  class="ledger-icon-img"
+                />
+                <ion-icon
+                  *ngIf="!getLedgerIconUrl(ledgerGroup.ledgerId)"
+                  name="wallet-outline"
+                  class="ledger-icon"
+                >
+                </ion-icon>
+                <span class="ledger-name">{{ ledgerGroup.ledgerName }}</span>
+                <ion-badge class="account-count-badge" color="medium">
+                  {{ ledgerGroup.accounts.length }}
+                </ion-badge>
+              </div>
+              <ion-icon
+                name="chevron-down-outline"
+                class="expand-icon"
+                [class.expanded]="isLedgerExpanded(ledgerGroup.ledgerName)"
+              >
+              </ion-icon>
+            </div>
+
+            <!-- Accounts List -->
+            <div
+              class="accounts-list"
+              [class.modal-list]="isModal"
+              role="radiogroup"
+              [attr.aria-label]="'Accounts for ' + ledgerGroup.ledgerName"
+              *ngIf="isLedgerExpanded(ledgerGroup.ledgerName)"
+            >
+              <ng-container
+                *ngFor="let accountItem of ledgerGroup.accounts; trackBy: trackByAccount"
+              >
+                <!-- Account Item - Compact Card -->
+                <div
+                  class="account-card"
+                  [class.modal-item]="isModal"
+                  [class.selected]="isAccountSelected(accountItem.account.id)"
+                  (click)="selectAccount(accountItem)"
+                  role="radio"
+                  tabindex="0"
+                  [attr.aria-checked]="isAccountSelected(accountItem.account.id)"
+                  (keydown.enter)="selectAccount(accountItem)"
+                  (keydown.space)="$event.preventDefault(); selectAccount(accountItem)"
+                >
+                  <!-- Left: Selection Indicator + Logo -->
+                  <div class="card-left">
+                    <div
+                      class="selection-indicator"
+                      [class.active]="isAccountSelected(accountItem.account.id)"
+                    >
+                      <div
+                        class="indicator-dot"
+                        *ngIf="isAccountSelected(accountItem.account.id)"
+                      ></div>
+                    </div>
+                    <img
+                      [src]="getWalletLogo(accountItem.session)"
+                      [alt]="formatting.getProviderName(accountItem.session.providerType)"
+                      class="wallet-logo-sm"
+                    />
+                  </div>
+
+                  <!-- Center: Account Details -->
+                  <div class="card-center">
+                    <div class="account-label" *ngIf="accountItem.account.label">
+                      {{ accountItem.account.label }}
+                    </div>
+                    <div class="account-address" [class.has-label]="accountItem.account.label">
+                      {{ formatting.truncateAddress(accountItem.account.address, 10, 8) }}
+                    </div>
+                  </div>
+
+                  <!-- Right: Badges + Actions -->
+                  <div class="card-right">
+                    <div class="badge-stack">
+                      <ion-badge
+                        [color]="formatting.getNetworkColor(accountItem.account.networkId)"
+                        class="network-badge"
+                      >
+                        {{ formatting.formatNetwork(accountItem.account.networkId) }}
+                      </ion-badge>
+                      <div class="provider-badge-row">
+                        <ion-badge
+                          *ngIf="isMultisigSession(accountItem)"
+                          class="signing-badge multisig"
+                          color="tertiary"
+                        >
+                          <ion-icon name="people-outline" class="signing-icon"></ion-icon>
+                          Multisig
+                        </ion-badge>
+                        <ion-badge class="provider-badge" color="primary">
+                          {{ formatting.getProviderName(accountItem.session.providerType) }}
+                        </ion-badge>
+                      </div>
+                    </div>
+                    <ion-button
+                      *ngIf="canDisconnectSession(accountItem.session) && isModal"
+                      class="disconnect-btn"
+                      fill="clear"
+                      color="danger"
+                      size="small"
+                      (click)="requestDisconnect(accountItem, $event)"
+                      [disabled]="isLoading"
+                    >
+                      <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+                    </ion-button>
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+
+    <!-- No Accounts State -->
+    <div class="no-accounts" *ngIf="ledgerGroups.length === 0 && !isModal">
+      <div class="empty-state-content">
+        <ion-icon name="wallet-outline"></ion-icon>
+        <h3>No Accounts Connected</h3>
+        <p>Connect a wallet to get started with multi-chain transactions.</p>
+      </div>
+    </div>
+
+    <!-- No Accounts State (Modal) -->
+    <div class="no-accounts-modal" *ngIf="ledgerGroups.length === 0 && isModal">
+      <ion-icon name="wallet-outline"></ion-icon>
+      <h3>No Accounts Connected</h3>
+      <p>Connect a wallet to get started</p>
+    </div>
+
+    <!-- Error State -->
+    <div class="error-state" *ngIf="error">
+      <ion-icon name="alert-circle-outline" color="danger"></ion-icon>
+      <h3>Something went wrong</h3>
+      <p>{{ error }}</p>
+      <ion-button expand="block" fill="outline" (click)="dismissError()"> Dismiss </ion-button>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* Inherit styles from parent component's SCSS */
+    `,
+  ],
+})
+export class AccountListComponent {
+  protected readonly formatting = inject(AccountFormattingService);
+
+  /**
+   * Ledger groups containing accounts to display
+   */
+  @Input() ledgerGroups: LedgerGroup[] = [];
+
+  /**
+   * Currently selected account ID
+   */
+  @Input() selectedId?: string;
+
+  /**
+   * Whether this is displayed in modal mode
+   */
+  @Input() isModal = false;
+
+  /**
+   * Loading state
+   */
+  @Input() isLoading = false;
+
+  /**
+   * Error message to display
+   */
+  @Input() error: string | null = null;
+
+  /**
+   * Whether to show description text
+   */
+  @Input() showDescription = true;
+
+  /**
+   * Active account ID from wallet service
+   */
+  @Input() activeAccountId?: string;
+
+  /**
+   * Emitted when an account is selected
+   */
+  @Output() accountSelected = new EventEmitter<AccountItem>();
+
+  /**
+   * Emitted when disconnect is requested
+   */
+  @Output() disconnectRequested = new EventEmitter<{
+    providerId: string;
+    sessionKey?: string;
+  }>();
+
+  /**
+   * Emitted when error is dismissed
+   */
+  @Output() errorDismissed = new EventEmitter<void>();
+
+  /**
+   * Track which ledger groups are expanded
+   */
+  protected readonly expandedLedgers = signal<Set<string>>(
+    new Set(['Hedera', 'XRPL', 'hedera', 'xrpl']),
+  );
+
+  constructor() {
+    addIcons({
+      chevronDownOutline,
+      closeOutline,
+      walletOutline,
+      alertCircleOutline,
+      peopleOutline,
+      personOutline,
+    });
+  }
+
+  /**
+   * Toggle ledger group expansion
+   */
+  protected toggleLedger(ledgerName: string): void {
+    this.expandedLedgers.update((set) => {
+      const newSet = new Set(set);
+      if (newSet.has(ledgerName)) {
+        newSet.delete(ledgerName);
+      } else {
+        newSet.add(ledgerName);
+      }
+      return newSet;
+    });
+  }
+
+  /**
+   * Check if ledger group is expanded
+   */
+  protected isLedgerExpanded(ledgerName: string): boolean {
+    return this.expandedLedgers().has(ledgerName);
+  }
+
+  /**
+   * Check if account is currently selected
+   */
+  protected isAccountSelected(accountId: string): boolean {
+    return this.selectedId === accountId || this.activeAccountId === accountId;
+  }
+
+  /**
+   * Check if session can be disconnected (WalletConnect sessions only)
+   */
+  protected canDisconnectSession(session: any): boolean {
+    return session.providerType === 'walletconnect-v2';
+  }
+
+  /**
+   * Check if this is a multisig session
+   */
+  protected isMultisigSession(accountItem: AccountItem): boolean {
+    // Check session metadata first, then account metadata
+    const sessionMeta = accountItem.session.metadata;
+    const accountMeta = accountItem.account.metadata;
+    return (
+      sessionMeta?.isMultisig === true ||
+      sessionMeta?.channelType === 'party' ||
+      accountMeta?.isMultisig === true ||
+      accountMeta?.channelType === 'party'
+    );
+  }
+
+  /**
+   * Get wallet logo path based on provider type
+   */
+  protected getWalletLogo(session: any): string {
+    const providerType = session?.providerType;
+    if (providerType === 'walletconnect-v2') {
+      return 'assets/wallets/walletconnect.svg';
+    }
+    return 'assets/wallets/hsuite.svg';
+  }
+
+  /**
+   * Handle account selection
+   */
+  protected selectAccount(accountItem: AccountItem): void {
+    this.accountSelected.emit(accountItem);
+  }
+
+  /**
+   * Request disconnect for a session
+   */
+  protected requestDisconnect(accountItem: AccountItem, event: Event): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.disconnectRequested.emit({
+      providerId: accountItem.session.providerId,
+      sessionKey: accountItem.session.metadata?.sessionKey,
+    });
+  }
+
+  /**
+   * Dismiss error state
+   */
+  protected dismissError(): void {
+    this.errorDismissed.emit();
+  }
+
+  /**
+   * TrackBy function for ledger groups
+   */
+  protected trackByLedger(_index: number, ledgerGroup: LedgerGroup): string {
+    return ledgerGroup.ledgerId;
+  }
+
+  /**
+   * TrackBy function for accounts
+   */
+  protected trackByAccount(_index: number, accountItem: AccountItem): string {
+    return accountItem.account.id;
+  }
+
+  /**
+   * Get icon URL for ledger type (uses CoinGecko CDN)
+   */
+  protected getLedgerIconUrl(ledgerId: string): string {
+    return getLedgerIcon(ledgerId);
+  }
+
+  /**
+   * Get icon color for ledger type
+   */
+  protected getLedgerIconColor(ledgerId: string): string {
+    return getLedgerColor(ledgerId);
+  }
+}