@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,401 @@
+/**
+ * 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-filter.component.ts
+ * @description Compact header and filtering component for account selector
+ *
+ * Provides compact header display with account preview and collapse/expand
+ * functionality. Extracted from AccountSelectorComponent for better maintainability.
+ *
+ * **Features:**
+ * - Compact header with active account preview
+ * - Collapsible account list toggle
+ * - Network and wallet badges
+ * - Multiple size variants (default, navbar, small)
+ * - Multiple format options (label-count, address-count, etc.)
+ */
+
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonBadge, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronDownOutline } from 'ionicons/icons';
+import { AccountFormattingService } from '../account-formatting.service';
+
+/**
+ * Format options for compact header display
+ */
+export type CompactHeaderFormat =
+  | 'label-count'
+  | 'address-count'
+  | 'count-only'
+  | 'label-only'
+  | 'address-only';
+
+/**
+ * Size variants for compact header
+ */
+export type CompactHeaderSize = 'default' | 'navbar' | 'small';
+
+/**
+ * Active account data for display
+ */
+export interface ActiveAccountData {
+  address: string;
+  networkId: string;
+  label?: string;
+  providerType?: string;
+}
+
+/**
+ * @component AccountFilterComponent
+ * Compact header with active account preview and collapse toggle.
+ */
+@Component({
+  selector: 'wallet-account-filter',
+  standalone: true,
+  imports: [CommonModule, IonBadge, IonIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <!-- Custom Header Text (optional) -->
+    <div *ngIf="customHeaderText" class="custom-header-text">
+      {{ customHeaderText }}
+    </div>
+
+    <!-- Compact Header -->
+    <div
+      class="compact-header"
+      [class.navbar-size]="headerSize === 'navbar'"
+      [class.small-size]="headerSize === 'small'"
+      role="button"
+      tabindex="0"
+      [attr.aria-expanded]="!isCollapsed"
+      [attr.aria-label]="getAriaLabel()"
+      (click)="onToggle()"
+      (keydown.enter)="onToggle()"
+      (keydown.space)="$event.preventDefault(); onToggle()"
+    >
+      <!-- Account Preview -->
+      <div class="account-preview">
+        <span class="account-address-compact">{{ getActiveAddress() }}</span>
+        <ion-badge [color]="getActiveNetworkColor()" size="small" class="network-badge-compact">
+          {{ getActiveNetworkType() }}
+        </ion-badge>
+        <img [src]="walletLogoSrc" [alt]="'Wallet logo'" class="wallet-logo-compact" />
+      </div>
+
+      <!-- Account Count Badge -->
+      <ion-badge color="primary" class="account-count-badge">
+        {{ totalAccountCount }}
+      </ion-badge>
+
+      <!-- Expand/Collapse Icon -->
+      <ion-icon
+        *ngIf="collapsible"
+        name="chevron-down-outline"
+        class="toggle-icon"
+        [class.expanded]="!isCollapsed"
+      >
+      </ion-icon>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* Custom Header Text */
+      .custom-header-text {
+        font-size: var(--account-selector-font-size-sm, 12px);
+        font-weight: var(--account-selector-font-weight-medium, 500);
+        color: var(--account-selector-text-secondary, var(--ion-color-medium));
+        margin-bottom: var(--account-selector-spacing-sm, 8px);
+        padding: 0 var(--account-selector-spacing-xs, 4px);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        line-height: var(--account-selector-line-height-normal, 1.5);
+      }
+
+      /* Compact Header */
+      .compact-header {
+        display: flex;
+        align-items: center;
+        gap: var(--account-selector-spacing-md, 12px);
+        padding: var(--account-selector-spacing-md, 12px) var(--account-selector-spacing-lg, 16px);
+        background: var(--account-selector-item-bg, rgba(var(--ion-color-light-rgb), 0.05));
+        border: 1px solid
+          var(--account-selector-border-color, rgba(var(--ion-color-light-rgb), 0.1));
+        border-radius: var(--account-selector-content-border-radius, 12px);
+        cursor: pointer;
+        transition: all var(--account-selector-transition-normal, 0.2s) ease;
+        user-select: none;
+        min-height: var(--account-selector-touch-target-min, 44px);
+        margin-bottom: var(--account-selector-spacing-md, 12px);
+        box-shadow:
+          var(--account-selector-shadow-inset, var(--shadow-inset)),
+          var(--account-selector-shadow-sm, var(--shadow-sm));
+
+        &:hover {
+          background: var(--account-selector-item-bg-hover, rgba(var(--ion-color-light-rgb), 0.08));
+          border-color: var(
+            --account-selector-border-color-hover,
+            rgba(var(--ion-color-light-rgb), 0.2)
+          );
+          transform: translateY(-1px);
+          box-shadow:
+            var(--account-selector-shadow-inset, var(--shadow-inset)),
+            var(--account-selector-shadow-md, var(--shadow-md));
+        }
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        &:focus {
+          outline: 2px solid var(--account-selector-border-color-focus, var(--ion-color-primary));
+          outline-offset: 2px;
+        }
+
+        /* Navbar size variant */
+        &.navbar-size {
+          padding: 8px 12px;
+          min-height: 40px;
+          border-radius: 10px;
+        }
+
+        /* Small size variant */
+        &.small-size {
+          padding: 6px 10px;
+          min-height: 36px;
+          border-radius: 8px;
+          gap: 10px;
+        }
+      }
+
+      /* Account Preview Section */
+      .account-preview {
+        display: flex;
+        align-items: center;
+        gap: var(--account-selector-spacing-sm, 8px);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .account-address-compact {
+        font-size: var(--account-selector-font-size-sm, 13px);
+        font-weight: var(--account-selector-font-weight-semibold, 600);
+        color: var(--account-selector-text-primary, var(--ion-text-color));
+        font-family: var(--ion-font-family-monospace, 'Courier New', monospace);
+        line-height: var(--account-selector-line-height-normal, 1.5);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-shrink: 1;
+        transition: color var(--account-selector-transition-fast, 0.15s) ease;
+      }
+
+      .network-badge-compact {
+        font-size: var(--account-selector-badge-font-size, 10px);
+        font-weight: var(--account-selector-font-weight-semibold, 600);
+        padding: var(--account-selector-badge-padding, 3px 7px);
+        border-radius: var(--account-selector-badge-border-radius, 6px);
+        flex-shrink: 0;
+        line-height: var(--account-selector-line-height-tight, 1.2);
+        transition: transform var(--account-selector-transition-fast, 0.15s) ease;
+      }
+
+      .wallet-logo-compact {
+        width: var(--account-selector-logo-size-sm, 20px);
+        height: var(--account-selector-logo-size-sm, 20px);
+        border-radius: var(--account-selector-logo-border-radius, 4px);
+        flex-shrink: 0;
+        box-shadow: var(--account-selector-logo-shadow, var(--shadow-sm));
+        transition: transform var(--account-selector-transition-fast, 0.15s) ease;
+      }
+
+      .account-count-badge {
+        font-size: var(--account-selector-font-size-xs, 11px);
+        font-weight: var(--account-selector-font-weight-semibold, 600);
+        padding: var(--account-selector-badge-padding, 3px 8px);
+        border-radius: var(--account-selector-badge-border-radius, 6px);
+        flex-shrink: 0;
+        line-height: var(--account-selector-line-height-tight, 1.2);
+      }
+
+      .toggle-icon {
+        font-size: var(--account-selector-icon-size, 20px);
+        color: var(--account-selector-text-secondary, var(--ion-color-medium));
+        transition: transform var(--account-selector-transition-slow, 0.3s)
+          cubic-bezier(0.4, 0, 0.2, 1);
+        flex-shrink: 0;
+
+        &.expanded {
+          transform: rotate(180deg);
+        }
+      }
+
+      /* Hover effects */
+      .compact-header:hover {
+        .network-badge-compact,
+        .wallet-logo-compact {
+          transform: scale(1.05);
+        }
+
+        .toggle-icon {
+          color: var(--account-selector-text-on-primary, var(--ion-color-primary));
+        }
+      }
+    `,
+  ],
+})
+export class AccountFilterComponent {
+  protected readonly formatting = inject(AccountFormattingService);
+
+  /**
+   * Active account data for display
+   */
+  @Input() activeAccount: ActiveAccountData | null = null;
+
+  /**
+   * Total number of connected accounts
+   */
+  @Input() totalAccountCount = 0;
+
+  /**
+   * Whether the account list is collapsed
+   */
+  @Input() isCollapsed = false;
+
+  /**
+   * Whether collapse/expand is enabled
+   */
+  @Input() collapsible = true;
+
+  /**
+   * Custom header text (e.g., "Connected with", "Using wallet")
+   */
+  @Input() customHeaderText?: string;
+
+  /**
+   * Format for compact header display
+   */
+  @Input() headerFormat: CompactHeaderFormat = 'label-count';
+
+  /**
+   * Size variant for compact header
+   */
+  @Input() headerSize: CompactHeaderSize = 'default';
+
+  /**
+   * Wallet logo source URL
+   */
+  @Input() walletLogoSrc = 'assets/wallets/hsuite.svg';
+
+  /**
+   * Emitted when collapse toggle is clicked
+   */
+  @Output() toggleCollapseEvent = new EventEmitter<void>();
+
+  constructor() {
+    addIcons({ chevronDownOutline });
+  }
+
+  /**
+   * Handle toggle click
+   */
+  protected onToggle(): void {
+    if (this.collapsible) {
+      this.toggleCollapseEvent.emit();
+    }
+  }
+
+  /**
+   * Get active account address (truncated)
+   */
+  protected getActiveAddress(): string {
+    if (!this.activeAccount?.address) return 'No account';
+    return this.formatting.truncateAddress(this.activeAccount.address);
+  }
+
+  /**
+   * Get active account network type
+   */
+  protected getActiveNetworkType(): string {
+    if (!this.activeAccount?.networkId) return '';
+    return this.formatting.formatNetwork(this.activeAccount.networkId);
+  }
+
+  /**
+   * Get active account network color
+   */
+  protected getActiveNetworkColor(): string {
+    if (!this.activeAccount?.networkId) return 'medium';
+    return this.formatting.getNetworkColor(this.activeAccount.networkId);
+  }
+
+  /**
+   * Get primary text based on format
+   */
+  protected getPrimaryText(): string {
+    switch (this.headerFormat) {
+      case 'label-count':
+      case 'label-only':
+        return this.activeAccount?.label || 'No Account';
+
+      case 'address-count':
+      case 'address-only':
+        return this.activeAccount
+          ? this.formatting.truncateAddress(this.activeAccount.address)
+          : 'No Account';
+
+      case 'count-only': {
+        const count = this.totalAccountCount;
+        return count === 1 ? '1 wallet connected' : `${count} wallets connected`;
+      }
+
+      default:
+        return 'Select Account';
+    }
+  }
+
+  /**
+   * Get secondary text based on format
+   */
+  protected getSecondaryText(): string | null {
+    if (this.headerFormat === 'label-count' || this.headerFormat === 'address-count') {
+      const count = this.totalAccountCount;
+      return count === 1 ? '1 account' : `${count} accounts`;
+    }
+    return null;
+  }
+
+  /**
+   * Get ARIA label for accessibility
+   */
+  protected getAriaLabel(): string {
+    const label = this.activeAccount?.label || 'No account';
+    const count = this.totalAccountCount;
+    const collapsed = this.isCollapsed;
+
+    return `${label}, ${count} account${count !== 1 ? 's' : ''} connected. ${collapsed ? 'Click to expand' : 'Click to collapse'} account list.`;
+  }
+}

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

@@ -0,0 +1,200 @@
+/**
+ * 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-formatting.service.ts
+ * @description Account display formatting utilities
+ *
+ * Provides formatting utilities for displaying accounts, addresses,
+ * networks, and ledgers in the AccountSelectorComponent.
+ */
+
+import { Injectable } from '@angular/core';
+
+/**
+ * Account formatting service.
+ *
+ * Provides utilities for formatting account-related display strings.
+ */
+@Injectable({ providedIn: 'root' })
+export class AccountFormattingService {
+  /**
+   * Truncate address for display.
+   *
+   * @param address - Full address
+   * @param prefixLength - Characters to show at start (default: 6)
+   * @param suffixLength - Characters to show at end (default: 4)
+   * @returns Truncated address with ellipsis
+   */
+  truncateAddress(address: string, prefixLength = 6, suffixLength = 4): string {
+    if (!address) return '';
+    if (address.length <= prefixLength + suffixLength + 3) return address;
+    return `${address.substring(0, prefixLength)}...${address.substring(address.length - suffixLength)}`;
+  }
+
+  /**
+   * Get display name for a ledger.
+   *
+   * @param ledgerId - Ledger ID
+   * @returns Display name
+   */
+  getLedgerName(ledgerId: string): string {
+    const names: Record<string, string> = {
+      hedera: 'Hedera',
+      xrpl: 'XRPL',
+    };
+    return names[ledgerId?.toLowerCase()] || ledgerId?.toUpperCase() || 'Unknown';
+  }
+
+  /**
+   * Get color for a ledger badge.
+   *
+   * @param ledgerId - Ledger ID
+   * @returns Ionic color name
+   */
+  getLedgerColor(ledgerId: string): string {
+    const colors: Record<string, string> = {
+      hedera: 'success',
+      xrpl: 'tertiary',
+    };
+    return colors[ledgerId?.toLowerCase()] || 'medium';
+  }
+
+  /**
+   * Format network display name with proper casing.
+   *
+   * @param networkId - Network ID (e.g., "hedera:testnet")
+   * @returns Formatted network name (e.g., "Testnet")
+   */
+  formatNetwork(networkId: string): string {
+    const network = this.extractNetwork(networkId);
+    const names: Record<string, string> = {
+      mainnet: 'Mainnet',
+      testnet: 'Testnet',
+      devnet: 'Devnet',
+    };
+    return names[network.toLowerCase()] || network;
+  }
+
+  /**
+   * Extract network name from full networkId.
+   *
+   * @param networkId - Full network ID
+   * @returns Network name only
+   */
+  extractNetwork(networkId?: string): string {
+    if (!networkId) return 'unknown';
+    const parts = networkId.split(':');
+    return parts[parts.length - 1] || networkId;
+  }
+
+  /**
+   * Get color for a network badge.
+   *
+   * @param networkId - Network ID
+   * @returns Ionic color name
+   */
+  getNetworkColor(networkId: string): string {
+    const network = this.extractNetwork(networkId).toLowerCase();
+    const colors: Record<string, string> = {
+      mainnet: 'primary',
+      testnet: 'warning',
+      devnet: 'secondary',
+    };
+    return colors[network] || 'medium';
+  }
+
+  /**
+   * Get display name for a provider type.
+   *
+   * @param providerType - Provider type ID
+   * @returns Display name
+   */
+  getProviderName(providerType: string): string {
+    const names: Record<string, string> = {
+      'hsuite-native': 'HSuite Native',
+      'walletconnect-v2': 'WalletConnect',
+    };
+    return names[providerType] || providerType;
+  }
+
+  /**
+   * Get provider display name from provider ID.
+   *
+   * @param providerId - Provider ID
+   * @returns Display name
+   */
+  getProviderDisplayName(providerId: string): string {
+    const nameMap: Record<string, string> = {
+      'walletconnect-v2': 'WalletConnect',
+      'hsuite-native': 'HSuite Wallet',
+    };
+    return nameMap[providerId] || providerId;
+  }
+
+  /**
+   * Get wallet logo path based on provider type.
+   *
+   * @param providerType - Provider type
+   * @returns Asset path for logo
+   */
+  getWalletLogo(providerType: string): string {
+    if (providerType === 'walletconnect-v2') {
+      return 'assets/wallets/walletconnect.svg';
+    }
+    return 'assets/wallets/hsuite.svg';
+  }
+
+  /**
+   * Get wallet logo for provider name string.
+   *
+   * @param providerName - Provider display name
+   * @returns Asset path for logo
+   */
+  getWalletLogoForProvider(providerName: string): string {
+    if (providerName === 'WalletConnect') {
+      return 'assets/wallets/walletconnect.svg';
+    }
+    return 'assets/wallets/hsuite.svg';
+  }
+
+  /**
+   * Get protocol icon name.
+   *
+   * @param protocol - Protocol name
+   * @returns Ionicon name
+   */
+  getProtocolIcon(protocol: string): string {
+    return protocol === 'HSuite Native' ? 'link' : 'scan';
+  }
+
+  /**
+   * Format account label.
+   *
+   * @param account - Account object
+   * @returns Display label
+   */
+  formatAccountLabel(account: any): string {
+    return account?.label || 'Account';
+  }
+
+  /**
+   * Format full account label with ledger and address.
+   *
+   * @param account - Account object
+   * @returns Full display label
+   */
+  formatAccountLabelFull(account: any): string {
+    const label = account?.label || 'Account';
+    const ledger = this.getLedgerName(account?.ledgerId);
+    const address = this.truncateAddress(account?.address);
+    return `${label} (${ledger}) - ${address}`;
+  }
+}