@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-connection-modal/qr-pairing-step/qr-pairing-step.component.ts

@@ -0,0 +1,734 @@
+/**
+ * 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 qr-pairing-step.component.ts
+ * @description QR code pairing step for mobile wallet connection
+ *
+ * Implements single-QR Nostr-first pairing flow:
+ * 1. Display compact QR code with session invite
+ * 2. Wait for wallet to scan and connect via Nostr
+ * 3. Wait for user approval in wallet
+ * 4. Connection established (P2P upgrade happens automatically)
+ *
+ * This enables fully decentralized cross-device connections with only
+ * a single QR scan - much simpler than the previous 2-QR WebRTC flow.
+ *
+ * Features:
+ * - Single QR code display (no answer scanning needed)
+ * - QR code with HSuite logo in center
+ * - Countdown timer with expiry handling
+ * - Refresh capability for expired offers
+ * - Waiting for approval state
+ */
+
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  signal,
+  OnChanges,
+  SimpleChanges,
+  OnDestroy,
+  AfterViewInit,
+  ElementRef,
+  ViewChild,
+  inject,
+} from '@angular/core';
+import { copyToClipboard } from '@hsuite/native-connect-ui';
+import { IonIcon, IonSpinner, IonButton } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  qrCodeOutline,
+  refreshOutline,
+  checkmarkCircleOutline,
+  closeCircleOutline,
+  phonePortraitOutline,
+  arrowBackOutline,
+  timeOutline,
+  copyOutline,
+  checkmarkOutline,
+} from 'ionicons/icons';
+import * as QRCode from 'qrcode'; // qrcode has no default export; use namespace import for toCanvas
+
+import { LoggerService } from '../../../services/logger.service';
+
+/**
+ * Connection state for the QR pairing step.
+ *
+ * States:
+ * - loading: Generating session invite
+ * - displaying: Showing QR code for wallet to scan
+ * - waiting_wallet: QR scanned, waiting for wallet to connect via Nostr
+ * - waiting_approval: Wallet connected, waiting for user to approve
+ * - connected: Session approved and connected
+ * - expired: QR code expired
+ * - error: An error occurred
+ */
+export type QrPairingState =
+  | 'loading'
+  | 'displaying'
+  | 'waiting_wallet'
+  | 'waiting_approval'
+  | 'connected'
+  | 'expired'
+  | 'error';
+
+/**
+ * QR Pairing Step Component
+ *
+ * Implements single-QR Nostr-first pairing for cross-device P2P connections.
+ * Much simpler than the previous 2-QR WebRTC approach.
+ */
+@Component({
+  selector: 'hsuite-qr-pairing-step',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, IonIcon, IonSpinner, IonButton],
+  template: `
+    <div class="qr-pairing-container">
+      <!-- Hidden canvas for QR generation - always rendered -->
+      <canvas #qrCanvas width="300" height="300" class="hidden-canvas"></canvas>
+
+      <!-- Loading State -->
+      <div *ngIf="pairingState() === 'loading'" class="state-panel loading">
+        <ion-spinner name="crescent"></ion-spinner>
+        <p>Generating secure connection...</p>
+      </div>
+
+      <!-- QR Display State -->
+      <div *ngIf="pairingState() === 'displaying'" class="qr-display">
+        <div class="qr-header">
+          <h3>Scan with Your Wallet</h3>
+          <p class="qr-subtitle">Open HSuite Wallet and scan this QR code</p>
+        </div>
+
+        <div class="qr-wrapper">
+          <canvas #qrCanvasDisplay width="300" height="300"></canvas>
+        </div>
+
+        <div class="qr-meta">
+          <div class="countdown" [class.warning]="countdown() < 30">
+            <ion-icon name="time-outline"></ion-icon>
+            <span>{{ formatCountdown() }}</span>
+          </div>
+          <ion-button fill="clear" size="small" (click)="copyUri()">
+            <ion-icon
+              slot="icon-only"
+              [name]="copied() ? 'checkmark-outline' : 'copy-outline'"
+            ></ion-icon>
+          </ion-button>
+        </div>
+
+        <div class="instructions">
+          <ol>
+            <li>Open HSuite Wallet on your phone</li>
+            <li>Go to Sessions tab</li>
+            <li>Tap "Scan QR" and scan this code</li>
+          </ol>
+        </div>
+      </div>
+
+      <!-- Waiting for Wallet State -->
+      <div *ngIf="pairingState() === 'waiting_wallet'" class="state-panel waiting">
+        <div class="waiting-icon-wrapper">
+          <ion-spinner name="crescent"></ion-spinner>
+        </div>
+        <h3>Waiting for Wallet</h3>
+        <p class="waiting-description">Scan the QR code with your wallet app to connect.</p>
+      </div>
+
+      <!-- Waiting for Approval State -->
+      <div *ngIf="pairingState() === 'waiting_approval'" class="state-panel waiting-approval">
+        <div class="waiting-icon-wrapper">
+          <ion-spinner name="crescent"></ion-spinner>
+        </div>
+        <h3>Waiting for Wallet Approval</h3>
+        <p class="waiting-description">
+          The wallet is connected. Please approve the session in your wallet app.
+        </p>
+        <div class="waiting-steps">
+          <div class="waiting-step">
+            <span class="step-check">&#10003;</span>
+            <span>QR code scanned</span>
+          </div>
+          <div class="waiting-step">
+            <span class="step-check">&#10003;</span>
+            <span>Wallet connected</span>
+          </div>
+          <div class="waiting-step active">
+            <ion-spinner name="dots"></ion-spinner>
+            <span>Awaiting approval in wallet...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Connected State -->
+      <div *ngIf="pairingState() === 'connected'" class="state-panel connected">
+        <ion-icon name="checkmark-circle-outline" color="success"></ion-icon>
+        <p>Connected successfully!</p>
+      </div>
+
+      <!-- Error State -->
+      <div *ngIf="pairingState() === 'error'" class="state-panel error">
+        <ion-icon name="close-circle-outline" color="danger"></ion-icon>
+        <p>{{ errorMessage || 'Connection failed' }}</p>
+        <ion-button fill="outline" (click)="refresh()">
+          <ion-icon slot="start" name="refresh-outline"></ion-icon>
+          Try Again
+        </ion-button>
+      </div>
+
+      <!-- Expired State -->
+      <div *ngIf="pairingState() === 'expired'" class="state-panel expired">
+        <ion-icon name="time-outline" color="warning"></ion-icon>
+        <p>QR code expired</p>
+        <ion-button fill="outline" (click)="refresh()">
+          <ion-icon slot="start" name="refresh-outline"></ion-icon>
+          Generate New
+        </ion-button>
+      </div>
+
+      <!-- Footer Actions (cancel) - hidden during waiting/connected -->
+      <div
+        class="footer-actions"
+        *ngIf="!['waiting_wallet', 'waiting_approval', 'connected'].includes(pairingState())"
+      >
+        <ion-button fill="clear" (click)="cancel()">
+          <ion-icon slot="start" name="arrow-back-outline"></ion-icon>
+          Cancel
+        </ion-button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .qr-pairing-container {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        min-height: 400px;
+      }
+
+      .hidden-canvas {
+        position: absolute;
+        left: -9999px;
+        top: -9999px;
+        visibility: hidden;
+      }
+
+      .qr-display {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+      }
+
+      .qr-header {
+        text-align: center;
+        margin-bottom: 1.5rem;
+      }
+
+      .qr-header h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+
+      .qr-subtitle {
+        margin: 0;
+        color: var(--ion-color-medium-shade);
+        font-size: 0.875rem;
+      }
+
+      .qr-wrapper {
+        display: flex;
+        justify-content: center;
+        padding: 1rem;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        margin-bottom: 1rem;
+      }
+
+      .qr-meta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .countdown {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.75rem;
+        background: var(--ion-color-light);
+        border-radius: 1rem;
+        font-size: 0.875rem;
+      }
+
+      .countdown.warning {
+        background: var(--ion-color-warning-tint);
+        color: var(--ion-color-warning-shade);
+      }
+
+      .instructions {
+        margin-bottom: 1rem;
+        width: 100%;
+        max-width: 300px;
+      }
+
+      .instructions ol {
+        text-align: left;
+        padding-left: 1.25rem;
+        margin: 0;
+      }
+
+      .instructions li {
+        margin-bottom: 0.5rem;
+        color: var(--ion-color-medium-shade);
+        font-size: 0.875rem;
+      }
+
+      .state-panel {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        flex: 1;
+        text-align: center;
+      }
+
+      .state-panel ion-spinner {
+        width: 48px;
+        height: 48px;
+      }
+
+      .state-panel ion-icon {
+        font-size: 64px;
+      }
+
+      /* Waiting States */
+      .waiting,
+      .waiting-approval {
+        padding: 1.5rem;
+      }
+
+      .waiting h3,
+      .waiting-approval h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--ion-color-primary);
+      }
+
+      .waiting-description {
+        color: var(--ion-color-medium-shade);
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+        max-width: 280px;
+      }
+
+      .waiting-icon-wrapper {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: var(--ion-color-primary-tint);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1rem;
+      }
+
+      .waiting-icon-wrapper ion-spinner {
+        width: 40px;
+        height: 40px;
+        --color: var(--ion-color-primary);
+      }
+
+      .waiting-steps {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 1rem;
+        background: var(--ion-color-light);
+        border-radius: 12px;
+        width: 100%;
+        max-width: 280px;
+      }
+
+      .waiting-step {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        font-size: 0.875rem;
+        color: var(--ion-color-medium-shade);
+      }
+
+      .waiting-step .step-check {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--ion-color-success);
+        color: white;
+        font-size: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .waiting-step.active {
+        color: var(--ion-color-primary);
+        font-weight: 500;
+      }
+
+      .waiting-step.active ion-spinner {
+        width: 20px;
+        height: 20px;
+        --color: var(--ion-color-primary);
+      }
+
+      .footer-actions {
+        margin-top: auto;
+        padding-top: 1rem;
+        border-top: 1px solid var(--ion-color-light);
+        display: flex;
+        justify-content: center;
+      }
+    `,
+  ],
+})
+export class QrPairingStepComponent implements AfterViewInit, OnChanges, OnDestroy {
+  private readonly logger = inject(LoggerService).scoped('QrPairingStep');
+
+  /**
+   * The encoded offer data to display as QR code (hsc:connect?i=...)
+   */
+  @Input() offerData: string = '';
+
+  /**
+   * App name to display in instructions
+   */
+  @Input() appName: string = 'This app';
+
+  /**
+   * Whether currently loading/generating the offer
+   */
+  @Input() isLoading: boolean = false;
+
+  /**
+   * Whether waiting for wallet to connect via Nostr
+   */
+  @Input() isWaitingForWallet: boolean = false;
+
+  /**
+   * Whether waiting for wallet user to approve the session
+   */
+  @Input() isWaitingForApproval: boolean = false;
+
+  /**
+   * Error message if any
+   */
+  @Input() errorMessage: string | null = null;
+
+  /**
+   * Expiry time in seconds for the QR code
+   */
+  @Input() expirySeconds: number = 120;
+
+  /**
+   * Emitted when QR code expires
+   */
+  @Output() expired = new EventEmitter<void>();
+
+  /**
+   * Emitted when connection is established
+   */
+  @Output() connected = new EventEmitter<void>();
+
+  /**
+   * Emitted when user cancels/goes back
+   */
+  @Output() cancelled = new EventEmitter<void>();
+
+  /**
+   * Emitted when user requests refresh
+   */
+  @Output() refreshRequested = new EventEmitter<void>();
+
+  @ViewChild('qrCanvas') qrCanvas?: ElementRef<HTMLCanvasElement>;
+  @ViewChild('qrCanvasDisplay') qrCanvasDisplay?: ElementRef<HTMLCanvasElement>;
+
+  // Internal state
+  readonly pairingState = signal<QrPairingState>('loading');
+  readonly countdown = signal<number>(120);
+  readonly copied = signal<boolean>(false);
+
+  private countdownInterval?: ReturnType<typeof setInterval>;
+  private viewReady = false;
+  private pendingQrGeneration = false;
+
+  /**
+   *
+   */
+  constructor() {
+    addIcons({
+      qrCodeOutline,
+      refreshOutline,
+      checkmarkCircleOutline,
+      closeCircleOutline,
+      phonePortraitOutline,
+      arrowBackOutline,
+      timeOutline,
+      copyOutline,
+      checkmarkOutline,
+    });
+  }
+
+  /**
+   *
+   */
+  ngAfterViewInit(): void {
+    this.viewReady = true;
+    // Generate QR if we have pending data
+    if (this.pendingQrGeneration && this.offerData) {
+      void this.generateQRCode(this.offerData);
+    }
+  }
+
+  /**
+   *
+   * @param changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    // Update state based on inputs
+    if (
+      changes['isLoading'] ||
+      changes['isWaitingForWallet'] ||
+      changes['isWaitingForApproval'] ||
+      changes['offerData'] ||
+      changes['errorMessage']
+    ) {
+      this.updateState();
+    }
+
+    if (changes['offerData'] && this.offerData) {
+      if (this.viewReady) {
+        void this.generateQRCode(this.offerData);
+      } else {
+        this.pendingQrGeneration = true;
+      }
+    }
+
+    if (changes['expirySeconds']) {
+      this.countdown.set(this.expirySeconds);
+    }
+  }
+
+  /**
+   *
+   */
+  ngOnDestroy(): void {
+    this.stopCountdown();
+  }
+
+  /**
+   * Format countdown for display (MM:SS)
+   */
+  formatCountdown(): string {
+    const seconds = this.countdown();
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  /**
+   * Handle QR code expiry
+   */
+  onQrExpired(): void {
+    this.pairingState.set('expired');
+    this.expired.emit();
+  }
+
+  /**
+   * Request a new QR code
+   */
+  refresh(): void {
+    this.pairingState.set('loading');
+    this.refreshRequested.emit();
+  }
+
+  /**
+   * Go back / cancel
+   */
+  cancel(): void {
+    this.cancelled.emit();
+  }
+
+  /**
+   * Copy the offer URI to clipboard
+   */
+  async copyUri(): Promise<void> {
+    if (!this.offerData) return;
+
+    const success = await copyToClipboard(this.offerData);
+
+    if (success) {
+      this.copied.set(true);
+
+      // Reset after 2 seconds
+      setTimeout(() => {
+        this.copied.set(false);
+      }, 2000);
+    } else {
+      this.logger.error('Failed to copy URI');
+    }
+  }
+
+  // ========== Private Methods ==========
+
+  /**
+   * Generate QR code with HSuite logo overlay
+   * @param data
+   */
+  private async generateQRCode(data: string): Promise<void> {
+    const canvas = this.qrCanvas?.nativeElement;
+    if (!canvas) {
+      this.logger.warn('Canvas not available for QR generation');
+      return;
+    }
+
+    try {
+      // Generate QR code - session invites are small (~300 bytes), so we can use higher error correction
+      await QRCode.toCanvas(canvas, data, {
+        width: 300,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#ffffff',
+        },
+        errorCorrectionLevel: 'M', // Medium error correction
+      });
+
+      // Add HSuite logo in center
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      // Load logo
+      const logo = new Image();
+      logo.crossOrigin = 'anonymous';
+      logo.onload = () => {
+        // Logo size is 20% of QR code
+        const logoSize = Math.floor(canvas.width * 0.2);
+        const logoX = (canvas.width - logoSize) / 2;
+        const logoY = (canvas.height - logoSize) / 2;
+
+        // Draw white background circle for logo
+        const circlePadding = 4;
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(canvas.width / 2, canvas.height / 2, logoSize / 2 + circlePadding, 0, 2 * Math.PI);
+        ctx.fill();
+
+        // Draw logo
+        ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
+
+        // Show the QR display and copy to visible canvas
+        this.pairingState.set('displaying');
+        this.startCountdown();
+
+        // Copy to display canvas after a tick
+        setTimeout(() => this.copyToDisplayCanvas(), 0);
+      };
+      logo.onerror = () => {
+        // Still show QR even without logo
+        this.pairingState.set('displaying');
+        this.startCountdown();
+        setTimeout(() => this.copyToDisplayCanvas(), 0);
+      };
+      logo.src = '/assets/hsuite_icon.png';
+    } catch (error) {
+      this.logger.error('Failed to generate QR code', {
+        error: error instanceof Error ? error.message : String(error),
+      });
+      this.pairingState.set('error');
+    }
+  }
+
+  /**
+   * Copy the generated QR from hidden canvas to display canvas
+   */
+  private copyToDisplayCanvas(): void {
+    const srcCanvas = this.qrCanvas?.nativeElement;
+    const destCanvas = this.qrCanvasDisplay?.nativeElement;
+
+    if (!srcCanvas || !destCanvas) {
+      this.logger.warn('Cannot copy to display canvas - missing canvas elements');
+      return;
+    }
+
+    const destCtx = destCanvas.getContext('2d');
+    if (!destCtx) return;
+
+    destCtx.drawImage(srcCanvas, 0, 0);
+  }
+
+  /**
+   * Start countdown timer
+   */
+  private startCountdown(): void {
+    this.stopCountdown();
+    this.countdown.set(this.expirySeconds);
+
+    this.countdownInterval = setInterval(() => {
+      const current = this.countdown();
+      if (current <= 1) {
+        this.stopCountdown();
+        this.onQrExpired();
+      } else {
+        this.countdown.set(current - 1);
+      }
+    }, 1000);
+  }
+
+  /**
+   * Stop countdown timer
+   */
+  private stopCountdown(): void {
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = undefined;
+    }
+  }
+
+  /**
+   * Update internal state based on inputs.
+   * Priority: error > waiting_approval > waiting_wallet > loading
+   */
+  private updateState(): void {
+    if (this.errorMessage) {
+      this.pairingState.set('error');
+    } else if (this.isWaitingForApproval) {
+      this.pairingState.set('waiting_approval');
+    } else if (this.isWaitingForWallet) {
+      this.pairingState.set('waiting_wallet');
+    } else if (this.isLoading && !this.offerData) {
+      this.pairingState.set('loading');
+    }
+    // Note: 'displaying' is set after QR generation completes
+  }
+}