@hsuite/native-connect-angular 1.0.0

package/src/lib/services/transaction.service.ts

@@ -0,0 +1,346 @@
+/**
+ * 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 High-level transaction service with automatic state management.
+ *
+ * @module services/transaction
+ *
+ * @description
+ * TransactionService provides simplified methods for common transaction operations
+ * with built-in state management, error handling, and UI feedback. It wraps
+ * UnifiedWalletService operations with additional convenience features.
+ *
+ * **Key Features:**
+ * - Automatic processing state tracking via Angular signals
+ * - Toast notifications for success and error states
+ * - Error propagation with proper error types
+ * - Result and error state tracking for UI binding
+ * - Support for batch transactions
+ *
+ * **Signal-based State:**
+ * - `isProcessing()` - True while a transaction is in progress
+ * - `lastResult()` - The result of the last successful transaction
+ * - `lastError()` - The error from the last failed transaction
+ *
+ * @Component({
+ *   template: `
+ *     <button [disabled]="txService.isProcessing()" (click)="send()">
+ *       {{ txService.isProcessing() ? 'Processing...' : 'Send' }}
+ *     </button>
+ *   `
+ * })
+ * export class MyComponent {
+ *   txService = inject(TransactionService);
+ *
+ *   async send() {
+ *     const result = await this.txService.signAndSubmit(payload);
+ *     console.log('Transaction ID:', result.transactionId);
+ *   }
+ * }
+ * ```
+ */
+
+import { Injectable, inject, signal, type Signal, type WritableSignal } from '@angular/core';
+import { getLogger } from '@hsuite/native-connect-sdk';
+import { ToastController } from '@ionic/angular/standalone';
+
+import type { SignResult, SubmitResult } from '../providers/base-wallet-provider';
+
+import { UnifiedWalletService } from './unified-wallet.service';
+import { WalletEventBus } from './wallet-event-bus.service';
+
+
+const logger = getLogger().scoped?.('TransactionService') ?? getLogger();
+
+/**
+ * High-level transaction service with automatic state management.
+ *
+ * @service TransactionService
+ *
+ * @description
+ * Simplifies common transaction operations with built-in features:
+ * - Automatic processing state management via Angular signals
+ * - Error propagation with toast notifications
+ * - Event emission for tracking and debugging
+ * - Signal-based reactive state (modern Angular pattern)
+ *
+ * This service is the recommended way to perform transactions in dApps,
+ * as it handles all the boilerplate around state management and user feedback.
+ *
+ * @providedIn root
+ */
+@Injectable({ providedIn: 'root' })
+export class TransactionService {
+  private readonly walletService = inject(UnifiedWalletService);
+  private readonly eventBus = inject(WalletEventBus);
+  private readonly toastController = inject(ToastController);
+
+  // Internal writable signals for state management
+  private readonly _isProcessing: WritableSignal<boolean> = signal(false);
+  private readonly _lastResult: WritableSignal<unknown> = signal(null);
+  private readonly _lastError: WritableSignal<Error | null> = signal(null);
+
+  /**
+   * Signal indicating if a transaction is currently processing
+   */
+  readonly isProcessing: Signal<boolean> = this._isProcessing.asReadonly();
+
+  /**
+   * Signal of the last transaction result
+   */
+  readonly lastResult: Signal<unknown> = this._lastResult.asReadonly();
+
+  /**
+   * Signal of the last error
+   */
+  readonly lastError: Signal<Error | null> = this._lastError.asReadonly();
+
+  /**
+   * Sign a transaction
+   *
+   * Automatically handles:
+   * - Processing state
+   * - Error propagation
+   * - Success toast notification
+   *
+   * @param payload - Transaction payload (base64 or transaction bytes)
+   * @returns Sign result
+   */
+  async signTransaction(payload: string): Promise<SignResult> {
+    return this.executeTransaction(async () => {
+      const result = (await this.walletService.signTransaction(payload)) as SignResult;
+      logger.info('Transaction signed', {
+        hasSignature: !!(result as { signedTransaction?: string }).signedTransaction,
+      });
+      await this.showSuccessToast(
+        'Transaction Signed',
+        'Your transaction has been signed successfully.',
+      );
+      return result;
+    });
+  }
+
+  /**
+   * Submit a transaction
+   *
+   * Automatically handles:
+   * - Processing state
+   * - Error propagation
+   * - Success toast notification
+   *
+   * @param payload - Transaction payload (base64 or transaction bytes)
+   * @returns Submit result
+   */
+  async submitTransaction(payload: string): Promise<SubmitResult> {
+    return this.executeTransaction(async () => {
+      const result = (await this.walletService.submitTransaction(payload)) as SubmitResult;
+      logger.info('Transaction submitted', { transactionId: result.transactionId });
+      await this.showSuccessToast(
+        'Transaction Submitted',
+        `Transaction ID: ${result.transactionId || 'Success'}`,
+      );
+      return result;
+    });
+  }
+
+  /**
+   * Sign and submit a transaction in one call
+   *
+   * Uses the wallet's native sign+submit method when available (e.g., WalletConnect's signAndExecuteTransaction).
+   * This prevents double prompts and provides a better UX.
+   *
+   * @param payload - Transaction payload
+   * @returns Submit result
+   */
+  async signAndSubmit(payload: string): Promise<SubmitResult> {
+    return this.executeTransaction(async () => {
+      // Use the wallet's signAndExecuteTransaction method directly
+      // This uses hedera_signAndExecuteTransaction for WalletConnect (one prompt!)
+      const result = (await this.walletService.signAndExecuteTransaction(payload)) as SubmitResult;
+      logger.info('Transaction signed and submitted', { transactionId: result.transactionId });
+      await this.showSuccessToast(
+        'Transaction Complete',
+        `Transaction ID: ${result.transactionId || 'Success'}`,
+      );
+      return result;
+    });
+  }
+
+  /**
+   * Submit a batch transaction
+   *
+   * Batch transactions require unsigned inner transactions that the wallet will sign.
+   * The wallet signs each inner transaction with the account's key, then builds and
+   * executes the BatchTransaction.
+   *
+   * @param options - Batch transaction options
+   * @param options.batchKey - Public key for batch (typically account's public key)
+   * @param options.innerTransactions - Array of unsigned inner transactions
+   * @returns Submit result
+   */
+  async submitBatchTransaction(options: {
+    batchKey: string;
+    innerTransactions: Array<{ payload: string; description?: string }>;
+  }): Promise<SubmitResult> {
+    return this.executeTransaction(async () => {
+      const result = (await this.walletService.submitTransaction('', {
+        isBatch: true,
+        batchKey: options.batchKey,
+        innerTransactions: options.innerTransactions,
+      })) as SubmitResult;
+      logger.info('Batch transaction submitted', { transactionId: result.transactionId });
+      await this.showSuccessToast(
+        'Batch Transaction Complete',
+        `Transaction ID: ${result.transactionId || 'Success'}`,
+      );
+      return result;
+    });
+  }
+
+  /**
+   * Sign a message
+   *
+   * @param message - Message to sign
+   * @returns Sign result with signature
+   */
+  async signMessage(message: string): Promise<SignResult> {
+    return this.executeTransaction(async () => {
+      const result = (await this.walletService.signMessage(message)) as SignResult;
+      logger.info('Message signed', { hasSignature: !!result.signature });
+      await this.showSuccessToast('Message Signed', 'Your message has been signed successfully.');
+      return result;
+    });
+  }
+
+  /**
+   * Show a success toast notification
+   * Uses cssClass-only styling (no Ionic color property) for theme compatibility.
+   * @param header
+   * @param message
+   */
+  private async showSuccessToast(header: string, message: string): Promise<void> {
+    const toast = await this.toastController.create({
+      header,
+      message,
+      icon: 'checkmark-circle-outline',
+      cssClass: 'toast-success toast-compact',
+      duration: 4000,
+      position: 'top',
+      buttons: [{ icon: 'close', role: 'cancel' }],
+    });
+    await toast.present();
+  }
+
+  /**
+   * Show an error toast notification
+   * Uses cssClass-only styling (no Ionic color property) for theme compatibility.
+   * @param header
+   * @param message
+   */
+  private async showErrorToast(header: string, message: string): Promise<void> {
+    const toast = await this.toastController.create({
+      header,
+      message,
+      icon: 'close-circle-outline',
+      cssClass: 'toast-danger toast-compact',
+      duration: 6000,
+      position: 'top',
+      buttons: [{ icon: 'close', role: 'cancel' }],
+    });
+    await toast.present();
+  }
+
+  /**
+   * Execute a transaction with automatic state management
+   *
+   * Internal helper that wraps transaction operations with:
+   * - Processing state updates
+   * - Error handling with toast notifications
+   * - Result tracking
+   * @param operation
+   */
+  private async executeTransaction<T>(operation: () => Promise<T>): Promise<T> {
+    // Set processing state
+    this.setProcessing(true);
+    this.clearError();
+
+    try {
+      // Execute the operation
+      const result = await operation();
+
+      // Update result state
+      this.setResult(result);
+
+      return result;
+    } catch (error) {
+      // Update error state
+      const err = error instanceof Error ? error : new Error(String(error));
+      this.setError(err);
+
+      // Show error toast
+      await this.showErrorToast(
+        'Transaction Failed',
+        err.message || 'An error occurred during the transaction.',
+      );
+
+      // Re-throw for caller to handle
+      throw err;
+    } finally {
+      // Clear processing state
+      this.setProcessing(false);
+    }
+  }
+
+  /**
+   * Update processing state
+   * @param processing
+   */
+  private setProcessing(processing: boolean): void {
+    this._isProcessing.set(processing);
+  }
+
+  /**
+   * Update result state
+   * @param result
+   */
+  private setResult(result: unknown): void {
+    this._lastResult.set(result);
+  }
+
+  /**
+   * Update error state
+   * @param error
+   */
+  private setError(error: Error): void {
+    this._lastError.set(error);
+  }
+
+  /**
+   * Clear error state
+   */
+  private clearError(): void {
+    this._lastError.set(null);
+  }
+
+  /**
+   * Resets all transaction state to initial values.
+   *
+   * @description
+   * Clears the processing flag, last result, and last error.
+   * Useful when navigating away from a transaction page or
+   * starting a fresh transaction flow.
+   */
+  resetState(): void {
+    this.setProcessing(false);
+    this.setResult(null);
+    this.clearError();
+  }
+}