@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,140 @@
+/**
+ * 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 wallet-account-display.component.ts
+ * @description Pre-built component for displaying active account information
+ *
+ * Automatically displays the active account with badges, formatted address,
+ * and responsive styling. Eliminates repetitive account display boilerplate.
+ */
+
+import { Component, Input, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonText, IonBadge, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { walletOutline, personOutline, peopleOutline } from 'ionicons/icons';
+import { WalletContextService } from '../../services/wallet-context.service';
+
+/**
+ * Pre-built component for displaying active account
+ *
+ * Features:
+ * - Auto-syncs with active account
+ * - Optional badges for ledger and network
+ * - Optional address truncation
+ * - Responsive styling
+ * - Customizable colors
+ */
+@Component({
+  selector: 'wallet-account-display',
+  standalone: true,
+  imports: [CommonModule, IonText, IonBadge, IonIcon],
+  templateUrl: './wallet-account-display.component.html',
+  styleUrls: ['./wallet-account-display.component.scss'],
+})
+export class WalletAccountDisplayComponent {
+  private readonly contextService = inject(WalletContextService);
+
+  /**
+   * Whether to show ledger and network badges
+   */
+  @Input() showBadges = true;
+
+  /**
+   * Whether to show account label
+   */
+  @Input() showLabel = true;
+
+  /**
+   * Whether to truncate long addresses
+   */
+  @Input() truncateAddress = true;
+
+  /**
+   * Color for the address text
+   */
+  @Input() addressColor: 'primary' | 'secondary' | 'tertiary' | 'medium' | 'dark' = 'medium';
+
+  /**
+   * Text to show when no account is selected
+   */
+  @Input() emptyText = 'No account selected';
+
+  /**
+   * Active account from context
+   */
+  protected readonly account = computed(() => this.contextService.context().activeAccount);
+
+  /**
+   * Computed display address (truncated or full)
+   */
+  protected readonly displayAddress = computed(() => {
+    const acc = this.account();
+    if (!acc) return '';
+
+    if (this.truncateAddress && acc.address.length > 20) {
+      return `${acc.address.substring(0, 10)}...${acc.address.substring(acc.address.length - 8)}`;
+    }
+
+    return acc.address;
+  });
+
+  /**
+   * Computed check if account is multisig
+   */
+  protected readonly isMultisig = computed(() => {
+    const acc = this.account();
+    if (!acc) return false;
+    const metadata = acc.metadata as Record<string, unknown> | undefined;
+    return metadata?.['isMultisig'] === true || metadata?.['accountType'] === 'multisig';
+  });
+
+  /**
+   * Get multisig threshold info (e.g., "2/3")
+   */
+  protected readonly multisigInfo = computed(() => {
+    const acc = this.account();
+    if (!acc) return null;
+    const metadata = acc.metadata as Record<string, unknown> | undefined;
+    const threshold = metadata?.['multisigThreshold'] as number | undefined;
+    const total = metadata?.['multisigTotal'] as number | undefined;
+    if (threshold && total) {
+      return `${threshold}/${total}`;
+    }
+    return null;
+  });
+
+  constructor() {
+    addIcons({ walletOutline, personOutline, peopleOutline });
+  }
+
+  /**
+   * Get color for ledger badge
+   */
+  protected getLedgerColor(ledgerId: string): string {
+    switch (ledgerId.toLowerCase()) {
+      case 'hedera':
+        return 'success';
+      case 'xrpl':
+        return 'tertiary';
+      default:
+        return 'primary';
+    }
+  }
+
+  /**
+   * Format network ID for display
+   */
+  protected formatNetwork(networkId: string): string {
+    const parts = networkId.split(':');
+    return parts[parts.length - 1] || networkId;
+  }
+}

package/src/lib/components/wallet-connect-button/wallet-connect-button.component.html

@@ -0,0 +1,14 @@
+<div class="wallet-connect-container" [class]="'size-' + size">
+  <!-- Connect Button (Multi-Session Support) -->
+  <ion-button
+    [color]="buttonColor"
+    [size]="size"
+    [disabled]="isConnecting"
+    (click)="connect()"
+    class="wallet-button">
+    <ion-spinner *ngIf="isConnecting" slot="start" name="crescent"></ion-spinner>
+    <ion-icon *ngIf="!isConnecting" [name]="getIconName()" slot="start"></ion-icon>
+    {{ getButtonText() }}
+  </ion-button>
+</div>
+

package/src/lib/components/wallet-connect-button/wallet-connect-button.component.scss

@@ -0,0 +1,272 @@
+/**
+ * @component WalletConnectButton
+ * @compodoc
+ * Theme-aware wallet connection button for dApps
+ * Fully customizable via CSS variables
+ */
+
+.wallet-connect-container {
+  display: inline-block;
+  width: 100%;
+}
+
+/* Wallet Button */
+.wallet-button {
+  --border-radius: var(--wallet-button-radius, var(--border-radius-lg, 12px));
+  --padding-top: var(--wallet-button-padding-vertical, var(--space-md, 14px));
+  --padding-bottom: var(--wallet-button-padding-vertical, var(--space-md, 14px));
+  --padding-start: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));
+  --padding-end: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));
+  width: 100%;
+  font-weight: var(--wallet-button-font-weight, var(--font-weight-semibold, 600));
+  font-size: var(--wallet-button-font-size, var(--font-size-md, 16px));
+  text-transform: none;
+  letter-spacing: var(--letter-spacing-wide, 0.5px);
+  transition: var(--wallet-transition-normal, var(--transition-all, 0.2s ease));
+  box-shadow: var(--wallet-button-shadow, var(--shadow-md));
+  
+  &:hover:not([disabled]) {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+  
+  &:active:not([disabled]) {
+    transform: translateY(0);
+  }
+  
+  ion-icon {
+    font-size: 1.25em;
+    transition: transform var(--wallet-transition-fast, var(--transition-fade, 0.15s)) ease;
+  }
+  
+  &:hover:not([disabled]) ion-icon {
+    transform: scale(var(--button-hover-scale, 1.1));
+  }
+}
+
+/* Session Display */
+.session-display {
+  background: var(--wallet-session-bg, var(--surface-flat, rgba(var(--ion-color-light-rgb), 0.05)));
+  border: var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), 0.1)));
+  border-radius: var(--wallet-session-radius, var(--border-radius-lg, 12px));
+  padding: var(--wallet-session-padding, var(--space-lg, 16px));
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-session-gap, var(--space-md, 12px));
+  box-shadow: var(--wallet-session-shadow, var(--shadow-md));
+  animation: slideIn var(--wallet-transition-slow, var(--duration-slow, 0.3s)) ease-out;
+}
+
+.session-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wallet-spacing-lg, var(--space-lg, 16px));
+}
+
+.session-info {
+  display: flex;
+  align-items: center;
+  gap: var(--wallet-spacing-md, var(--space-md, 8px));
+  flex: 1;
+  min-width: 0;
+}
+
+.session-icon {
+  font-size: var(--wallet-session-icon-size, var(--font-size-2xl, 28px));
+  color: var(--ion-color-primary);
+  flex-shrink: 0;
+  transition: transform var(--wallet-transition-fast, var(--duration-fast, 0.15s)) ease;
+  
+  .session-display:hover & {
+    transform: scale(1.05);
+  }
+}
+
+.session-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-spacing-xs, var(--space-xs, 4px));
+  min-width: 0;
+  flex: 1;
+  
+  strong {
+    font-size: var(--wallet-font-size-base, var(--font-size-sm, 14px));
+    font-weight: var(--wallet-font-weight-semibold, var(--font-weight-semibold, 600));
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+    line-height: var(--wallet-line-height-normal, var(--line-height-normal, 1.4));
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.session-badges {
+  display: flex;
+  gap: var(--wallet-spacing-xs, var(--space-xs, 4px));
+  flex-wrap: wrap;
+}
+
+.network-badge {
+  font-size: var(--wallet-badge-font-size, var(--font-size-xs, 10px));
+  font-weight: var(--wallet-badge-font-weight, var(--font-weight-semibold, 600));
+  padding: var(--wallet-badge-padding, var(--space-xs, 3px) var(--space-sm, 8px));
+  border-radius: var(--wallet-badge-radius, var(--border-radius-sm, 6px));
+  line-height: var(--line-height-tight, 1.2);
+  transition: transform var(--wallet-transition-fast, var(--duration-fast, 0.15s)) ease;
+  
+  .session-display:hover & {
+    transform: scale(1.05);
+  }
+}
+
+.disconnect-button {
+  --border-radius: var(--wallet-spacing-sm, var(--border-radius-md, 8px));
+  --padding-start: var(--wallet-spacing-sm, var(--space-sm, 8px));
+  --padding-end: var(--wallet-spacing-sm, var(--space-sm, 8px));
+  flex-shrink: 0;
+  transition: all var(--wallet-transition-fast, var(--transition-all, 0.15s ease));
+  
+  &:hover:not([disabled]) {
+    transform: scale(1.05);
+  }
+  
+  &:active:not([disabled]) {
+    transform: scale(var(--button-press-scale, 0.95));
+  }
+}
+
+/* Account List */
+.account-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-spacing-sm, var(--space-sm, 4px));
+  padding-top: var(--wallet-spacing-md, var(--space-md, 8px));
+  border-top: var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), 0.1)));
+}
+
+.account-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wallet-account-padding, var(--space-sm, 8px) var(--space-md, 12px));
+  background: var(--wallet-account-bg, var(--surface-flat, rgba(var(--ion-color-primary-rgb), 0.05)));
+  border-radius: var(--wallet-account-radius, var(--border-radius-md, 8px));
+  transition: all var(--wallet-transition-normal, var(--transition-all, 0.2s ease));
+  
+  &:hover {
+    background: var(--wallet-account-bg-hover, var(--surface-flat-hover, rgba(var(--ion-color-primary-rgb), 0.1)));
+    transform: translateX(2px);
+  }
+  
+  .account-address {
+    font-family: var(--wallet-account-font-family, var(--font-family-mono, monospace));
+    font-size: var(--wallet-account-font-size, var(--font-size-sm, 14px));
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+    line-height: var(--wallet-line-height-normal, var(--line-height-normal, 1.4));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* Size Variants */
+.size-small {
+  .wallet-button {
+    --padding-top: var(--wallet-spacing-sm, var(--space-sm, 8px));
+    --padding-bottom: var(--wallet-spacing-sm, var(--space-sm, 8px));
+    --padding-start: var(--wallet-spacing-lg, var(--space-lg, 16px));
+    --padding-end: var(--wallet-spacing-lg, var(--space-lg, 16px));
+    font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+  }
+  
+  --wallet-session-padding: var(--wallet-spacing-md, var(--space-md, 12px));
+  
+  .session-icon {
+    font-size: var(--font-size-xl, 24px);
+  }
+  
+  .session-details strong {
+    font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+  }
+}
+
+.size-large {
+  .wallet-button {
+    --padding-top: var(--wallet-spacing-lg, var(--space-lg, 18px));
+    --padding-bottom: var(--wallet-spacing-lg, var(--space-lg, 18px));
+    --padding-start: var(--wallet-spacing-2xl, var(--space-2xl, 32px));
+    --padding-end: var(--wallet-spacing-2xl, var(--space-2xl, 32px));
+    font-size: var(--wallet-font-size-lg, var(--font-size-lg, 18px));
+  }
+  
+  --wallet-session-padding: var(--wallet-spacing-xl, var(--space-xl, 20px));
+  
+  .session-icon {
+    font-size: var(--font-size-3xl, 32px);
+  }
+  
+  .session-details strong {
+    font-size: var(--wallet-font-size-lg, var(--font-size-lg, 18px));
+  }
+}
+
+/* Responsive */
+@media (max-width: 576px) {
+  .session-header {
+    flex-wrap: wrap;
+  }
+  
+  .disconnect-button {
+    width: 100%;
+  }
+}
+
+/* Animations */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.wallet-button[disabled] {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  @keyframes slideIn {
+    from, to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes pulse {
+    from, to {
+      opacity: 1;
+    }
+  }
+}

package/src/lib/components/wallet-connect-button/wallet-connect-button.component.ts

@@ -0,0 +1,240 @@
+/**
+ * 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
+ */
+
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { getLogger } from '@hsuite/native-connect-sdk';
+import { IonButton, IonIcon, IonSpinner, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { walletOutline, linkOutline, checkmarkCircleOutline } from 'ionicons/icons';
+
+import { DEFAULT_WALLET_URL } from '../../models/provider-types';
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+import { WalletConnectionModalComponent } from '../wallet-connection-modal/wallet-connection-modal.component';
+
+const logger = getLogger().scoped?.('WalletConnectButton') ?? getLogger();
+
+/**
+ * @component WalletConnectButtonComponent
+ * Ready-to-use wallet connection button for dApps with multi-protocol support.
+ *
+ * **Features:**
+ * - Beautiful connection modal with protocol/network selection
+ * - Support for HSuite Native and WalletConnect
+ * - Automatic connection state management
+ * - Loading states
+ * - Session display
+ * - One-click connect/disconnect
+ * - Theme-aware styling
+ *
+ * **Design Principles:**
+ * - Easy configuration
+ * - Fully customizable appearance
+ * - Accessible
+ * - Responsive
+ */
+@Component({
+  selector: 'wallet-connect-button',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon, IonSpinner],
+  providers: [ModalController],
+  templateUrl: './wallet-connect-button.component.html',
+  styleUrls: ['./wallet-connect-button.component.scss'],
+})
+export class WalletConnectButtonComponent {
+  /**
+   * WalletConnect project ID (required for WalletConnect)
+   */
+  @Input() walletConnectProjectId?: string;
+
+  /**
+   * App name for wallet metadata
+   */
+  @Input() appName: string = 'HSuite Demo';
+
+  /**
+   * App description for wallet metadata
+   */
+  @Input() appDescription: string = 'Multi-chain wallet connection';
+
+  /**
+   * Wallet URL for targeting the wallet window
+   */
+  @Input() walletUrl = DEFAULT_WALLET_URL;
+
+  /**
+   * Whether to show session information when connected
+   * @default true
+   */
+  @Input() showSessionInfo = true;
+
+  /**
+   * Button color (Ionic color)
+   * @default 'primary'
+   */
+  @Input() buttonColor: string = 'primary';
+
+  /**
+   * Button size
+   * @default 'default'
+   */
+  @Input() size: 'small' | 'default' | 'large' = 'default';
+
+  /**
+   * Custom button text for connect state
+   */
+  @Input() connectText = 'Connect Wallet';
+
+  /**
+   * Custom button text for when wallets are connected (multi-session mode)
+   */
+  @Input() connectedText = 'Add Another Wallet';
+
+  /**
+   * Enable multi-session mode (allows multiple connections)
+   * @default true
+   */
+  @Input() multiSessionMode = true;
+
+  /**
+   * Emitted when wallet successfully connects
+   */
+  @Output() connected = new EventEmitter<unknown>();
+
+  /**
+   * Emitted when wallet disconnects
+   */
+  @Output() disconnected = new EventEmitter<void>();
+
+  /**
+   * Emitted when connection fails
+   */
+  @Output() error = new EventEmitter<Error>();
+
+  protected readonly wallet = inject(UnifiedWalletService);
+  protected readonly modalController = inject(ModalController);
+
+  protected isConnecting = false;
+
+  /**
+   *
+   */
+  constructor() {
+    addIcons({ walletOutline, linkOutline, checkmarkCircleOutline });
+  }
+
+  /**
+   * Connect to wallet (opens modal - supports multi-session)
+   */
+  async connect(): Promise<void> {
+    if (this.isConnecting) return;
+
+    this.isConnecting = true;
+    try {
+      await this.openConnectionModal();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.error.emit(error);
+      logger.error('Connection failed', { error: error.message });
+    } finally {
+      this.isConnecting = false;
+    }
+  }
+
+  /**
+   * Open the new multi-protocol connection modal
+   * Passes wallet configuration including walletUrl and metadata for proper window targeting.
+   */
+  private async openConnectionModal(): Promise<void> {
+    const modal = await this.modalController.create({
+      component: WalletConnectionModalComponent,
+      componentProps: {
+        projectId: this.walletConnectProjectId,
+        appName: this.appName,
+        appDescription: this.appDescription,
+        walletUrl: this.walletUrl,
+      },
+    });
+
+    await modal.present();
+
+    const { data } = await modal.onDidDismiss();
+
+    if (data?.connected) {
+      // Emit connected event with unified accounts
+      const accounts = this.wallet.allAccounts();
+      this.connected.emit({
+        protocol: data.protocol,
+        network: data.network,
+        accounts,
+      });
+    }
+  }
+
+  /**
+   * Disconnect from wallet
+   * In multi-session mode, this disconnects ALL sessions
+   */
+  async disconnect(): Promise<void> {
+    try {
+      // Disconnect all sessions via UnifiedWalletService
+      await this.wallet.disconnectAll();
+
+      this.disconnected.emit();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.error.emit(error);
+      logger.error('Disconnect failed', { error: error.message });
+    }
+  }
+
+  /**
+   * Check if unknown wallet is connected
+   */
+  isConnected(): boolean {
+    return this.wallet.isAnyConnected();
+  }
+
+  /**
+   * Get display text for connection state
+   */
+  getButtonText(): string {
+    if (this.isConnecting) return 'Connecting...';
+
+    if (this.multiSessionMode) {
+      return this.isConnected() ? this.connectedText : this.connectText;
+    }
+    return this.isConnected() ? 'Disconnect' : this.connectText;
+  }
+
+  /**
+   * Get icon name for current state
+   */
+  getIconName(): string {
+    if (this.isConnected()) return 'checkmark-circle-outline';
+    return 'wallet-outline';
+  }
+
+  /**
+   * Truncate address for display
+   * @param address
+   */
+  truncateAddress(address: string): string {
+    if (address.length <= 12) return address;
+    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+  }
+
+  /**
+   * Get connected accounts (unified)
+   */
+  getConnectedAccounts(): any[] {
+    return this.wallet.allAccounts();
+  }
+}

package/src/lib/components/wallet-connect-prompt/wallet-connect-prompt.component.html

@@ -0,0 +1,24 @@
+<ion-card class="wallet-connect-prompt" [color]="cardColor">
+  <ion-card-header>
+    <div class="prompt-header">
+      <ion-icon *ngIf="showIcon" name="wallet-outline" class="prompt-icon"></ion-icon>
+      <div>
+        <ion-card-title>{{ title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="subtitle">{{ subtitle }}</ion-card-subtitle>
+      </div>
+    </div>
+  </ion-card-header>
+  
+  <ion-card-content>
+    <p class="prompt-message">{{ message }}</p>
+    
+    <wallet-connect-button
+      [walletConnectProjectId]="walletConnectProjectId"
+      [connectText]="buttonText"
+      [size]="buttonSize"
+      [buttonColor]="buttonColor"
+      class="prompt-button"
+    />
+  </ion-card-content>
+</ion-card>
+