@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-transaction-status/wallet-transaction-status.component.scss

@@ -0,0 +1,254 @@
+/**
+ * @component WalletTransactionStatus
+ * @compodoc
+ * Theme-aware transaction status display
+ */
+
+.status-card {
+  margin: 0;
+  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-status-radius, var(--border-radius-lg, 12px));
+  padding: var(--wallet-status-padding, var(--space-lg, 16px));
+  box-shadow: var(--wallet-session-shadow, var(--shadow-md));
+  animation: slideInFade var(--wallet-transition-slow, var(--duration-slow, 0.3s)) ease-out;
+  
+  &.status-success {
+    border-left: var(--wallet-status-border-width, var(--border-width-heavy, 4px)) solid var(--wallet-status-success-border, var(--ion-color-success));
+  }
+  
+  &.status-failed,
+  &.status-rejected {
+    border-left: var(--wallet-status-border-width, var(--border-width-heavy, 4px)) solid var(--wallet-status-failed-border, var(--ion-color-danger));
+  }
+  
+  &.status-timeout {
+    border-left: var(--wallet-status-border-width, var(--border-width-heavy, 4px)) solid var(--wallet-status-warning-border, var(--ion-color-warning));
+  }
+  
+  &.status-processing,
+  &.status-pending {
+    border-left: var(--wallet-status-border-width, var(--border-width-heavy, 4px)) solid var(--wallet-status-pending-border, var(--ion-color-primary));
+  }
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  gap: var(--wallet-status-gap, var(--space-md, 12px));
+}
+
+.status-icon {
+  font-size: var(--wallet-status-icon-size, var(--font-size-3xl, 32px));
+  flex-shrink: 0;
+  transition: transform var(--wallet-transition-fast, var(--duration-fast, 0.15s)) ease;
+}
+
+.status-spinner {
+  width: var(--wallet-status-icon-size, var(--font-size-3xl, 32px));
+  height: var(--wallet-status-icon-size, var(--font-size-3xl, 32px));
+  flex-shrink: 0;
+}
+
+.status-description {
+  font-size: var(--wallet-font-size-base, var(--font-size-sm, 14px));
+  line-height: var(--wallet-line-height-relaxed, var(--line-height-relaxed, 1.6));
+  color: var(--wallet-session-text-primary, var(--ion-text-color));
+  margin-bottom: var(--wallet-spacing-lg, var(--space-lg, 16px));
+  
+  p {
+    margin: 0;
+  }
+}
+
+.transaction-id-section,
+.error-section {
+  background: var(--wallet-status-section-bg, var(--surface-flat, rgba(var(--ion-color-medium-rgb), 0.05)));
+  padding: var(--wallet-status-section-padding, var(--space-md, 12px));
+  border-radius: var(--wallet-status-section-radius, var(--border-radius-md, 8px));
+  margin-bottom: var(--wallet-spacing-lg, var(--space-lg, 16px));
+  border: var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), 0.1)));
+  transition: all var(--wallet-transition-normal, var(--transition-all, 0.2s ease));
+  
+  &:hover {
+    background: var(--surface-flat-hover, rgba(var(--ion-color-medium-rgb), 0.08));
+    transform: translateY(-1px);
+    box-shadow: var(--wallet-shadow-sm, var(--shadow-sm));
+  }
+  
+  .section-label {
+    font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+    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));
+    margin: 0 0 var(--wallet-spacing-xs, var(--space-xs, 4px)) 0;
+  }
+  
+  .transaction-id {
+    font-family: var(--wallet-account-font-family, var(--font-family-mono, monospace));
+    font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+    line-height: var(--wallet-line-height-normal, var(--line-height-normal, 1.4));
+    word-break: break-all;
+    margin: 0;
+  }
+  
+  .error-message {
+    font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+    line-height: var(--wallet-line-height-normal, var(--line-height-normal, 1.4));
+    margin: 0;
+  }
+}
+
+.error-section {
+  background: var(--wallet-status-error-bg, rgba(var(--ion-color-danger-rgb), 0.05));
+  border-left: var(--wallet-status-error-border, 3px solid var(--ion-color-danger));
+  
+  &:hover {
+    background: rgba(var(--ion-color-danger-rgb), 0.1);
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-spacing-sm, 8px);
+  margin-top: var(--wallet-spacing-lg, 16px);
+  
+  ion-button {
+    --border-radius: var(--wallet-button-radius, 12px);
+    font-weight: var(--wallet-button-font-weight, 600);
+    transition: all var(--wallet-transition-normal, 0.2s) ease;
+    
+    &:hover:not([disabled]) {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
+    }
+    
+    &:active:not([disabled]) {
+      transform: translateY(0);
+    }
+  }
+}
+
+/* Animations */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.status-processing,
+.status-pending {
+  .status-spinner {
+    animation: pulse 2s ease-in-out infinite;
+  }
+}
+
+@keyframes slideInFade {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Success confetti effect */
+@keyframes celebrate {
+  0%, 100% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.1) rotate(-5deg);
+  }
+  50% {
+    transform: scale(1.05) rotate(5deg);
+  }
+  75% {
+    transform: scale(1.1) rotate(-5deg);
+  }
+}
+
+.status-success {
+  .status-icon {
+    animation: celebrate 0.6s ease-in-out;
+  }
+}
+
+/* Failed shake effect */
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.status-failed,
+.status-rejected {
+  .status-icon {
+    animation: shake 0.4s ease-in-out;
+  }
+}
+
+/* Responsive */
+@media (max-width: 576px) {
+  .status-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .actions {
+    flex-direction: column;
+    
+    ion-button {
+      width: 100%;
+    }
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  @keyframes slideInFade {
+    from, to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes celebrate {
+    from, to {
+      transform: scale(1) rotate(0);
+    }
+  }
+  
+  @keyframes shake {
+    from, to {
+      transform: translateX(0);
+    }
+  }
+  
+  @keyframes pulse {
+    from, to {
+      opacity: 1;
+    }
+  }
+}

package/src/lib/components/wallet-transaction-status/wallet-transaction-status.component.ts

@@ -0,0 +1,206 @@
+/**
+ * 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 { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonText,
+  IonIcon,
+  IonSpinner,
+  IonButton,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  checkmarkCircleOutline,
+  closeCircleOutline,
+  timeOutline,
+  alertCircleOutline,
+  hourglassOutline,
+  openOutline,
+  refreshOutline,
+} from 'ionicons/icons';
+
+/**
+ * @component WalletTransactionStatusComponent
+ * Displays transaction status with user-friendly messaging.
+ *
+ * **Features:**
+ * - Visual status indicators
+ * - Status-specific colors and icons
+ * - Transaction hash/ID display
+ * - Error messages
+ * - Loading states
+ * - Action buttons (view explorer, retry)
+ * - Theme-aware styling
+ *
+ * **Status Types:**
+ * - `pending` - Transaction submitted, awaiting confirmation
+ * - `processing` - Being processed by wallet
+ * - `success` - Transaction confirmed
+ * - `failed` - Transaction failed
+ * - `rejected` - User rejected transaction
+ * - `timeout` - Transaction timed out
+ */
+@Component({
+  selector: 'wallet-transaction-status',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    IonText,
+    IonIcon,
+    IonSpinner,
+    IonButton,
+  ],
+  templateUrl: './wallet-transaction-status.component.html',
+  styleUrls: ['./wallet-transaction-status.component.scss'],
+})
+export class WalletTransactionStatusComponent {
+  /**
+   * Transaction status
+   */
+  @Input({ required: true }) status!:
+    | 'pending'
+    | 'processing'
+    | 'success'
+    | 'failed'
+    | 'rejected'
+    | 'timeout';
+
+  /**
+   * Transaction ID/hash (for success state)
+   */
+  @Input() transactionId?: string;
+
+  /**
+   * Error message (for failed state)
+   */
+  @Input() error?: string;
+
+  /**
+   * Link to blockchain explorer
+   */
+  @Input() explorerUrl?: string;
+
+  /**
+   * Custom message to display
+   */
+  @Input() message?: string;
+
+  /**
+   * Whether to show retry button (for failed state)
+   * @default false
+   */
+  @Input() showRetry = false;
+
+  /**
+   * Emitted when retry button is clicked
+   */
+  @Output() retry = new EventEmitter<void>();
+
+  constructor() {
+    addIcons({
+      checkmarkCircleOutline,
+      closeCircleOutline,
+      timeOutline,
+      alertCircleOutline,
+      hourglassOutline,
+      openOutline,
+      refreshOutline,
+    });
+  }
+
+  /**
+   * Get status config (color, icon, message)
+   */
+  getStatusConfig(): {
+    color: string;
+    icon: string;
+    title: string;
+    description: string;
+  } {
+    switch (this.status) {
+      case 'success':
+        return {
+          color: 'success',
+          icon: 'checkmark-circle-outline',
+          title: 'Transaction Successful',
+          description: this.message || 'Your transaction has been confirmed on the blockchain.',
+        };
+      case 'failed':
+        return {
+          color: 'danger',
+          icon: 'close-circle-outline',
+          title: 'Transaction Failed',
+          description: this.message || this.error || 'Transaction failed. Please try again.',
+        };
+      case 'rejected':
+        return {
+          color: 'warning',
+          icon: 'close-circle-outline',
+          title: 'Transaction Rejected',
+          description: this.message || 'You rejected the transaction in your wallet.',
+        };
+      case 'timeout':
+        return {
+          color: 'warning',
+          icon: 'time-outline',
+          title: 'Transaction Timeout',
+          description: this.message || 'Transaction timed out. Please try again.',
+        };
+      case 'processing':
+        return {
+          color: 'primary',
+          icon: 'hourglass-outline',
+          title: 'Processing Transaction',
+          description: this.message || 'Please confirm the transaction in your wallet...',
+        };
+      case 'pending':
+      default:
+        return {
+          color: 'medium',
+          icon: 'hourglass-outline',
+          title: 'Transaction Pending',
+          description: this.message || 'Waiting for confirmation...',
+        };
+    }
+  }
+
+  /**
+   * Truncate transaction ID for display
+   */
+  formatTransactionId(id: string): string {
+    if (id.length <= 20) return id;
+    return `${id.substring(0, 10)}...${id.substring(id.length - 8)}`;
+  }
+
+  /**
+   * Open transaction in explorer
+   */
+  openExplorer(): void {
+    if (this.explorerUrl) {
+      window.open(this.explorerUrl, '_blank', 'noopener,noreferrer');
+    }
+  }
+
+  /**
+   * Handle retry click
+   */
+  onRetry(): void {
+    this.retry.emit();
+  }
+}

package/src/lib/directives/wallet-connected.directive.ts

@@ -0,0 +1,195 @@
+/**
+ * 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
+ */
+
+/**
+ * @fileoverview Structural directive that guards content based on wallet connection status.
+ *
+ * @module directives/wallet-connected
+ *
+ * @description
+ * WalletConnectedDirective is a structural directive that conditionally renders content
+ * based on wallet connection status. It acts as a guard, showing the main template when
+ * a wallet is connected and optionally showing an alternate template when not connected.
+ *
+ * **Key Features:**
+ * - Conditional rendering based on connection status
+ * - Provides wallet context to the connected template
+ * - Supports `else` template for disconnected state
+ * - Automatically updates when connection status changes
+ *
+ * **Selector:** `*walletConnected`
+ */
+
+import {
+  Directive,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  effect,
+  EmbeddedViewRef,
+} from '@angular/core';
+import { WalletContextService } from '../services/wallet-context.service';
+import type { WalletContext } from '../models/wallet-context.model';
+
+/**
+ * Context object passed to the connected template.
+ *
+ * @description
+ * Contains the wallet context that is exposed to the template when using
+ * the `*walletConnected` structural directive. Both `$implicit` and
+ * `walletConnected` contain the same context for flexible access.
+ */
+export class WalletConnectedDirectiveContext {
+  constructor(
+    public $implicit: WalletContext,
+    public walletConnected: WalletContext,
+  ) {}
+}
+
+/**
+ * Structural directive that conditionally shows content when wallet is connected.
+ *
+ * @directive WalletConnectedDirective
+ * @selector [walletConnected]
+ *
+ * @description
+ * Acts as a guard - shows main template when connected, else template when not.
+ * Also provides wallet context to the main template for convenience, allowing
+ * access to active account, all accounts, sessions, and providers.
+ *
+ * The directive uses Angular's effect() to reactively update the view when
+ * the wallet connection status changes.
+ */
+@Directive({
+  selector: '[walletConnected]',
+  standalone: true,
+})
+export class WalletConnectedDirective {
+  private readonly contextService = inject(WalletContextService);
+  private readonly templateRef = inject(TemplateRef<WalletConnectedDirectiveContext>);
+  private readonly viewContainer = inject(ViewContainerRef);
+
+  private connectedViewRef: EmbeddedViewRef<WalletConnectedDirectiveContext> | null = null;
+  private elseViewRef: EmbeddedViewRef<void> | null = null;
+  private _elseTemplateRef: TemplateRef<void> | null = null;
+
+  /**
+   * Template to show when wallet is NOT connected.
+   *
+   * @description
+   * Reference to an ng-template that will be rendered when no wallet is connected.
+   * Use this to show a login prompt, connect button, or informational message.
+   *
+   * @param templateRef - Reference to the else template, or null to clear
+   */
+  @Input()
+  set walletConnectedElse(templateRef: TemplateRef<void> | null) {
+    this._elseTemplateRef = templateRef;
+    this.updateView();
+  }
+
+  constructor() {
+    // React to connection status changes
+    effect(() => {
+      const context = this.contextService.context();
+      this.updateView(context);
+    });
+  }
+
+  /**
+   * Updates the view based on connection status.
+   *
+   * @description
+   * Determines whether to show the connected template or the else template
+   * based on the current wallet context. Called automatically when the
+   * context signal changes.
+   *
+   * @param context - Optional wallet context, fetched from service if not provided
+   */
+  private updateView(context?: WalletContext): void {
+    const walletContext = context || this.contextService.context();
+
+    if (walletContext.isConnected) {
+      // Show connected template
+      this.showConnectedTemplate(walletContext);
+    } else {
+      // Show else template if provided
+      this.showElseTemplate();
+    }
+  }
+
+  /**
+   * Shows the main template when wallet is connected.
+   *
+   * @description
+   * Creates or updates the connected template view, providing the wallet
+   * context as both the implicit variable and the named `walletConnected` property.
+   *
+   * @param walletContext - The current wallet context to expose to the template
+   */
+  private showConnectedTemplate(walletContext: WalletContext): void {
+    // Clear else template if shown
+    if (this.elseViewRef) {
+      this.elseViewRef.destroy();
+      this.elseViewRef = null;
+    }
+
+    // Create or update connected template
+    if (!this.connectedViewRef) {
+      const context = new WalletConnectedDirectiveContext(walletContext, walletContext);
+      this.connectedViewRef = this.viewContainer.createEmbeddedView(this.templateRef, context);
+    } else {
+      // Update existing context
+      this.connectedViewRef.context.$implicit = walletContext;
+      this.connectedViewRef.context.walletConnected = walletContext;
+      this.connectedViewRef.markForCheck();
+    }
+  }
+
+  /**
+   * Shows the else template when wallet is NOT connected.
+   *
+   * @description
+   * Clears the connected template and renders the else template if one
+   * was provided via the `walletConnectedElse` input.
+   */
+  private showElseTemplate(): void {
+    // Clear connected template if shown
+    if (this.connectedViewRef) {
+      this.connectedViewRef.destroy();
+      this.connectedViewRef = null;
+    }
+
+    // Show else template if provided
+    if (this._elseTemplateRef && !this.elseViewRef) {
+      this.elseViewRef = this.viewContainer.createEmbeddedView(this._elseTemplateRef);
+    }
+  }
+
+  /**
+   * Static type guard for Angular template type checking.
+   *
+   * @description
+   * Enables TypeScript type inference in templates when using the directive.
+   * This allows the template to have proper types for the context variable.
+   *
+   * @param dir - The directive instance
+   * @param ctx - The context to type-guard
+   *
+   * @returns True, asserting that ctx is WalletConnectedDirectiveContext
+   */
+  static ngTemplateContextGuard(
+    dir: WalletConnectedDirective,
+    ctx: any,
+  ): ctx is WalletConnectedDirectiveContext {
+    return true;
+  }
+}