@hsuite/native-connect-angular 1.0.0

package/src/index.ts

@@ -0,0 +1,203 @@
+/**
+ * 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 Public API surface of @hsuite/native-connect-angular package.
+ *
+ * @module @hsuite/native-connect-angular
+ *
+ * @description
+ * Angular integration SDK for HSuite Wallet. This package provides a complete
+ * solution for integrating wallet connectivity into Angular applications, supporting
+ * multiple blockchain protocols including Hedera and XRPL.
+ *
+ * **Key Features:**
+ * - Multi-protocol wallet support (HSuite Native, WalletConnect v2, P2P Native)
+ * - Reactive Angular signals for state management
+ * - Pre-built UI components for common wallet interactions
+ * - Transaction builders for Hedera and XRPL
+ * - Structural directives for declarative wallet state access
+ * - Event bus for wallet lifecycle events
+ *
+ * **Architecture:**
+ * ```
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │                  UnifiedWalletService                       │
+ * │  (Central orchestrator for multi-protocol wallet access)    │
+ * └────────────────────────────┬────────────────────────────────┘
+ *                              │
+ *          ┌──────────────────┬┴────────────────────┐
+ *          │                  │                      │
+ *   HsuiteNativeProvider  WalletConnectV2Provider  P2PNativeProvider
+ *          │                  │                      │
+ *          └──────────────────┴──────────────────────┘
+ *                              │
+ *                    BaseWalletProvider
+ *                    (common interface)
+ * ```
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [WalletConnectButtonComponent],
+ *   template: `
+ *     <wallet-connect-button
+ *       [walletConnectProjectId]="'your-project-id'"
+ *       (connected)="onConnect($event)">
+ *     </wallet-connect-button>
+ *   `
+ * })
+ * export class MyComponent {
+ *   wallet = inject(UnifiedWalletService);
+ *
+ *   onConnect(event: any) {
+ *     console.log('Connected:', this.wallet.activeAccount());
+ *   }
+ * }
+ * ```
+ *
+ * @NgModule({
+ *   imports: [HsuiteWalletModule],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+
+// NgModule (for module-based apps)
+export { HsuiteWalletModule } from './lib/hsuite-wallet.module';
+
+// Services
+export * from './lib/services/unified-wallet.service';
+export { WalletEventBus } from './lib/services/wallet-event-bus.service';
+export { WalletContextService } from './lib/services/wallet-context.service';
+export { TransactionService } from './lib/services/transaction.service';
+export { LoggerService } from './lib/services/logger.service';
+
+// Transaction Builders (for dApps to construct transactions)
+export {
+  HederaTransactionBuilderService,
+  XrplTransactionBuilderService,
+  scaleHederaAmountToBaseUnits,
+} from './lib/services/transaction-builders';
+
+// Transaction builder types (for dApps)
+export type {
+  BatchInnerTransactionType,
+  BatchInnerTransaction,
+  HederaKeyConfig,
+  TopicCreateOptions,
+  TokenCreateOptions,
+  AccountCreateOptions,
+} from './lib/services/transaction-builders';
+
+// Transports
+export {
+  ChromeExtensionTransport,
+  isExtensionInstalled,
+  getExtensionVersion,
+} from './lib/transports/chrome-extension-transport';
+export type { ChromeExtensionTransportOptions } from './lib/transports/chrome-extension-transport';
+
+// UI Components
+export * from './lib/components/wallet-connect-button/wallet-connect-button.component';
+export * from './lib/components/wallet-session-display/wallet-session-display.component';
+export * from './lib/components/wallet-transaction-status/wallet-transaction-status.component';
+export * from './lib/components/account-selector/account-selector.component';
+export {
+  AccountListComponent,
+  AccountItem,
+  LedgerGroup,
+} from './lib/components/account-selector/account-list/account-list.component';
+export {
+  AccountFilterComponent,
+  CompactHeaderFormat,
+  CompactHeaderSize,
+  ActiveAccountData,
+} from './lib/components/account-selector/account-filter/account-filter.component';
+export { AccountActionsComponent } from './lib/components/account-selector/account-actions/account-actions.component';
+export {
+  AccountSelectorService,
+  SelectedAccountData,
+} from './lib/components/account-selector/account-selector.service';
+export { AccountFormattingService } from './lib/components/account-selector/account-formatting.service';
+export {
+  AccountGroupingService,
+  AccountGroupingMode,
+  NetworkGroup,
+  ProtocolGroup,
+} from './lib/components/account-selector/account-grouping.service';
+export { WalletConnectionModalComponent } from './lib/components/wallet-connection-modal/wallet-connection-modal.component';
+export { WalletAccountDisplayComponent } from './lib/components/wallet-account-display/wallet-account-display.component';
+export { WalletConnectPromptComponent } from './lib/components/wallet-connect-prompt/wallet-connect-prompt.component';
+export { WalletConnectedGuardComponent } from './lib/components/wallet-connected-guard/wallet-connected-guard.component';
+
+// Directives
+export { WalletContextDirective } from './lib/directives/wallet-context.directive';
+export { WalletConnectedDirective } from './lib/directives/wallet-connected.directive';
+export { WalletEventsDirective } from './lib/directives/wallet-events.directive';
+
+// Multi-Protocol Support - Models
+export * from './lib/models/provider-types';
+export * from './lib/models/unified-account.model';
+export * from './lib/models/wallet-events.model';
+export * from './lib/models/wallet-context.model';
+export type { ConnectionConfig } from './lib/models/connection-config.model';
+export {
+  isHsuiteNativeConfig,
+  isWalletConnectV2Config,
+} from './lib/models/connection-config.model';
+
+// Multi-Protocol Support - Providers
+export * from './lib/providers/base-wallet-provider';
+export * from './lib/providers/hsuite-native-provider';
+export * from './lib/providers/walletconnect';
+export { WalletConnectV2Provider } from './lib/providers/walletconnect/core/walletconnect-provider';
+export {
+  provideWalletErrorHandler,
+  WalletErrorHandler,
+} from './lib/providers/wallet-error-handler';
+export type { WalletErrorHandlerConfig } from './lib/providers/wallet-error-handler';
+
+// P2P Native Provider (for QR code pairing)
+export * from './lib/providers/p2p-native';
+
+// === Unified Channel Protocol (v2) ===
+// New simplified protocol replacing the session/transport stack
+export { ChannelClientService } from './lib/providers/hsuite-native/channel-client.service';
+export type { ChannelConnectConfig } from './lib/providers/hsuite-native/channel-client.service';
+
+// Re-export channel types from native-wallet-sdk for convenience
+export type {
+  ChannelInvite,
+  ChannelMessage,
+  ChannelState,
+  ChannelType,
+  ChannelAccount,
+  TransportState,
+  MessageType,
+} from '@hsuite/native-connect-sdk';
+
+// Re-export types from native-wallet-sdk for convenience
+export type {
+  RpcRequest,
+  RpcResponse,
+  RpcEnvelope,
+  SessionApproval,
+} from '@hsuite/native-connect-types';
+
+// Utilities
+export {
+  getLedgerIcon,
+  getLedgerColor,
+  getLedgerName,
+  getTokenIcon,
+  DEFAULT_LEDGER_ICONS,
+  LEDGER_COLORS,
+  LEDGER_NAMES,
+} from './lib/utils';

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

@@ -0,0 +1,261 @@
+/**
+ * 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-actions.component.ts
+ * @description Action buttons component for account selector
+ *
+ * Provides action buttons for account management including disconnect all,
+ * add account, and connect wallet actions.
+ * Extracted from AccountSelectorComponent for better maintainability.
+ *
+ * **Features:**
+ * - Disconnect all wallets button
+ * - Add account button
+ * - Connect wallet button (inline mode)
+ * - Loading state support
+ * - Confirmation dialogs integration
+ */
+
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonButton, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { linkOutline, addCircleOutline, addOutline } from 'ionicons/icons';
+
+/**
+ * @component AccountActionsComponent
+ * Action buttons for account management.
+ */
+@Component({
+  selector: 'wallet-account-actions',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <!-- Modal Footer Actions -->
+    <ng-container *ngIf="mode === 'modal'">
+      <div class="modal-footer">
+        <ion-button
+          class="footer-btn"
+          fill="outline"
+          color="danger"
+          size="small"
+          (click)="onDisconnectAll()"
+          [disabled]="isLoading || !hasAccounts"
+        >
+          <ion-icon slot="start" name="link-outline" style="transform: rotate(45deg);"></ion-icon>
+          Disconnect All
+        </ion-button>
+        <ion-button
+          class="footer-btn"
+          color="primary"
+          size="small"
+          (click)="onAddAccount()"
+          [disabled]="isLoading"
+        >
+          <ion-icon slot="start" name="add-circle-outline"></ion-icon>
+          Add Account
+        </ion-button>
+      </div>
+    </ng-container>
+
+    <!-- Inline Connect Button -->
+    <ng-container *ngIf="mode === 'inline'">
+      <ion-button
+        class="connect-wallet-btn"
+        expand="block"
+        fill="outline"
+        color="primary"
+        (click)="onConnectWallet()"
+      >
+        <ion-icon slot="start" name="add-outline"></ion-icon>
+        Connect wallet
+      </ion-button>
+    </ng-container>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* Modal Footer */
+      .modal-footer {
+        display: flex;
+        gap: var(--account-selector-spacing-sm, 8px);
+        padding: var(--account-selector-spacing-md, 12px) var(--account-selector-spacing-lg, 16px);
+        background: var(--account-selector-footer-bg, rgba(var(--ion-color-light-rgb), 0.05));
+        border-top: 1px solid
+          var(--account-selector-border-color, rgba(var(--ion-color-light-rgb), 0.1));
+        flex-shrink: 0;
+      }
+
+      .footer-btn {
+        margin: 0;
+        flex: 1;
+        --border-radius: var(--account-selector-item-border-radius, 10px);
+        font-weight: var(--account-selector-font-weight-semibold, 600);
+        font-size: var(--account-selector-font-size-sm, 12px);
+        height: var(--account-selector-button-height, 36px);
+        cursor: pointer;
+        pointer-events: auto;
+        transition: all var(--account-selector-transition-fast, 0.15s) ease;
+
+        ion-icon {
+          font-size: var(--account-selector-spacing-lg, 16px);
+          color: inherit;
+        }
+
+        &:hover:not(:disabled) {
+          transform: translateY(-1px);
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(0);
+        }
+
+        &[color='danger'] {
+          --background: rgba(var(--ion-color-danger-rgb), 0.1);
+          --border-color: rgba(var(--ion-color-danger-rgb), 0.3);
+          --color: var(--ion-color-danger);
+
+          &:hover:not(:disabled) {
+            --background: rgba(var(--ion-color-danger-rgb), 0.15);
+          }
+        }
+      }
+
+      /* Connect Wallet Button (Inline) */
+      .connect-wallet-btn {
+        margin-top: var(--account-selector-spacing-lg, 16px);
+        --border-radius: var(--account-selector-content-border-radius, 12px);
+        font-weight: var(--account-selector-font-weight-semibold, 600);
+        --border-width: 1px;
+        --border-style: solid;
+        --border-color: var(
+          --account-selector-add-account-border,
+          rgba(var(--ion-color-primary-rgb), 0.3)
+        );
+        min-height: var(--account-selector-button-height-lg, 44px);
+        transition: all var(--account-selector-transition-normal, 0.2s) ease;
+
+        &:hover:not(:disabled) {
+          --background: var(
+            --account-selector-add-account-bg-hover,
+            rgba(var(--ion-color-primary-rgb), 0.1)
+          );
+          --border-color: rgba(var(--ion-color-primary-rgb), 0.4);
+          transform: translateY(-1px);
+        }
+
+        &:active:not(:disabled) {
+          transform: scale(0.98);
+        }
+
+        ion-icon {
+          font-size: var(--account-selector-icon-size, 18px);
+          color: inherit;
+          transition: transform var(--account-selector-transition-fast, 0.15s) ease;
+        }
+
+        &:hover:not(:disabled) ion-icon {
+          transform: scale(1.1);
+        }
+      }
+
+      /* Responsive styles */
+      @media (max-width: 480px) {
+        .modal-footer {
+          padding: 10px 12px;
+          gap: 6px;
+
+          .footer-btn {
+            font-size: 11px;
+            height: 32px;
+
+            ion-icon {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class AccountActionsComponent {
+  /**
+   * Action mode: 'modal' for modal footer, 'inline' for connect button
+   */
+  @Input() mode: 'modal' | 'inline' = 'modal';
+
+  /**
+   * Loading state
+   */
+  @Input() isLoading = false;
+
+  /**
+   * Whether there are connected accounts
+   */
+  @Input() hasAccounts = false;
+
+  /**
+   * Emitted when "Disconnect All" is clicked
+   */
+  @Output() disconnectAllRequested = new EventEmitter<void>();
+
+  /**
+   * Emitted when "Add Account" is clicked
+   */
+  @Output() addAccountRequested = new EventEmitter<void>();
+
+  /**
+   * Emitted when "Connect Wallet" is clicked (inline mode)
+   */
+  @Output() connectWalletRequested = new EventEmitter<void>();
+
+  constructor() {
+    addIcons({
+      linkOutline,
+      addCircleOutline,
+      addOutline,
+    });
+  }
+
+  /**
+   * Handle disconnect all button click
+   */
+  protected onDisconnectAll(): void {
+    this.disconnectAllRequested.emit();
+  }
+
+  /**
+   * Handle add account button click
+   */
+  protected onAddAccount(): void {
+    this.addAccountRequested.emit();
+  }
+
+  /**
+   * Handle connect wallet button click
+   */
+  protected onConnectWallet(): void {
+    this.connectWalletRequested.emit();
+  }
+}