@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,730 @@
+/**
+ * @file wallet-connection-modal.component.ts
+ * @description Multi-protocol wallet connection modal with step-by-step flow
+ *
+ * Provides a beautiful, user-friendly interface for connecting wallets across
+ * multiple protocols (HSuite Native, WalletConnect) and ledgers (Hedera, XRPL).
+ *
+ * Features:
+ * - Step-by-step connection wizard with direct selection (no Next button)
+ * - Dynamic step indicator showing only relevant steps per protocol path
+ * - Network selection (Mainnet, Testnet)
+ * - Protocol selection (HSuite Native vs WalletConnect)
+ * - Connection method selection (Desktop or Mobile QR)
+ * - Ledger selection (Hedera, XRPL) for WalletConnect
+ * - QR code display for mobile P2P connections
+ * - Beautiful animations and loading states
+ *
+ * Step Paths:
+ * - HSuite Native + Desktop: Network → Protocol → Method (3 steps)
+ * - HSuite Native + Mobile QR: Network → Protocol → Method → QR Pairing (4 steps)
+ * - WalletConnect: Network → Protocol → Ledger → Connect (4 steps)
+ */
+
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, signal, computed, inject } from '@angular/core';
+import { getLogger } from '@hsuite/native-connect-sdk';
+import { IonicModule, ModalController, Platform } from '@ionic/angular';
+
+import type { WalletConnectV2Config } from '../../models/provider-types';
+import { DEFAULT_WALLET_URL } from '../../models/provider-types';
+import { P2PNativeProvider } from '../../providers/p2p-native/p2p-native.provider';
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+import {
+  ConnectionMethodStepComponent,
+  type ConnectionMethodOption,
+} from './connection-method-step/connection-method-step.component';
+import { QrPairingStepComponent } from './qr-pairing-step/qr-pairing-step.component';
+
+const logger = getLogger().scoped?.('WalletConnectionModal') ?? getLogger();
+
+/**
+ * Connection step enumeration for the wizard flow
+ */
+enum ConnectionStep {
+  NetworkSelection = 1,
+  ProtocolSelection = 2,
+  ConnectionMethodSelection = 3,
+  LedgerSelection = 4,
+  QrPairing = 5,
+  ConnectionProgress = 6,
+}
+
+/**
+ * Connection method type.
+ * - desktop: Uses extension if available, otherwise opens PWA in new tab (SDK auto-selects)
+ * - mobile-qr: Two-way QR scan for cross-device P2P connection
+ */
+type ConnectionMethod = 'desktop' | 'mobile-qr';
+
+/**
+ * Network configuration options
+ */
+interface NetworkOption {
+  id: string;
+  name: string;
+  description: string;
+  icon?: string;
+  recommended?: boolean;
+}
+
+/**
+ * Protocol configuration options
+ */
+interface ProtocolOption {
+  id: 'hsuite-native' | 'walletconnect';
+  name: string;
+  description: string;
+  icon: string;
+  features: string[];
+}
+
+/**
+ * Ledger configuration options
+ */
+interface LedgerOption {
+  id: 'hedera' | 'xrpl';
+  name: string;
+  description: string;
+  icon: string;
+}
+
+/**
+ * Step configuration for dynamic step indicator.
+ * Defines the total steps and labels based on selected protocol path.
+ */
+interface StepConfig {
+  /** Total number of steps in the current path */
+  total: number;
+  /** Labels for each step in the progress indicator */
+  labels: string[];
+}
+
+/**
+ * Main wallet connection modal component.
+ * Orchestrates the multi-step connection flow.
+ */
+@Component({
+  selector: 'hsuite-wallet-connection-modal',
+  standalone: true,
+  imports: [CommonModule, IonicModule, ConnectionMethodStepComponent, QrPairingStepComponent],
+  templateUrl: './wallet-connection-modal.component.html',
+  styleUrls: ['./wallet-connection-modal.component.scss'],
+})
+export class WalletConnectionModalComponent {
+  /**
+   * WalletConnect project ID (required for WalletConnect)
+   */
+  @Input() projectId?: string;
+
+  /**
+   * App name for WalletConnect metadata
+   */
+  @Input() appName: string = 'HSuite Demo';
+
+  /**
+   * App description for WalletConnect metadata
+   */
+  @Input() appDescription: string = 'Multi-chain wallet connection';
+
+  /**
+   * Wallet URL for HSuite Native connection
+   */
+  @Input() walletUrl: string = DEFAULT_WALLET_URL;
+
+  /**
+   * Event emitted when connection is successful
+   */
+  @Output() connected = new EventEmitter<unknown>();
+
+  // Note: answerScannerRequested removed - new Nostr-first flow doesn't need answer scanning
+
+  private readonly platform = inject(Platform);
+  private readonly p2pNativeProvider = inject(P2PNativeProvider);
+
+  // Step management
+  readonly currentStep = signal<ConnectionStep>(ConnectionStep.NetworkSelection);
+  readonly ConnectionStep = ConnectionStep;
+
+  // Selection state
+  readonly selectedNetwork = signal<string>('testnet');
+  readonly selectedProtocol = signal<'hsuite-native' | 'walletconnect' | null>(null);
+  readonly selectedConnectionMethod = signal<ConnectionMethod | null>(null);
+  readonly selectedLedger = signal<'hedera' | 'xrpl' | null>(null);
+
+  // Loading state
+  readonly isConnecting = signal<boolean>(false);
+  readonly connectionError = signal<string | null>(null);
+
+  // QR Pairing state
+  readonly pairingOffer = signal<string>('');
+  readonly isGeneratingOffer = signal<boolean>(false);
+
+  /**
+   * Indicates we're waiting for the wallet to scan the QR and connect via Nostr.
+   */
+  readonly isWaitingForWallet = signal<boolean>(false);
+
+  /**
+   * Indicates we're waiting for the wallet user to approve the session.
+   * Nostr connection is established, but session approval is pending.
+   */
+  readonly isWaitingForApproval = signal<boolean>(false);
+
+  // Platform detection
+  readonly isMobile = signal<boolean>(this.detectMobile());
+  readonly isExtensionAvailable = signal<boolean>(this.detectExtension());
+
+  // Configuration options
+  readonly networkOptions: NetworkOption[] = [
+    {
+      id: 'mainnet',
+      name: 'Mainnet',
+      description: 'Production network with real assets',
+      icon: 'shield-checkmark',
+    },
+    {
+      id: 'testnet',
+      name: 'Testnet',
+      description: 'Test network for development',
+      icon: 'flask',
+      recommended: true,
+    },
+  ];
+
+  readonly protocolOptions = computed<ProtocolOption[]>(() => {
+    const options: ProtocolOption[] = [
+      {
+        id: 'hsuite-native',
+        name: 'HSuite Native Connect',
+        description: 'Direct connection to HSuite Wallet',
+        icon: 'link',
+        features: [
+          'Multiple chains in one session',
+          'Multiple wallets per session',
+          'Seamless multi-chain operations',
+          'Best for HSuite Wallet users',
+        ],
+      },
+    ];
+
+    // Only show WalletConnect if projectId is provided
+    if (this.projectId) {
+      options.push({
+        id: 'walletconnect',
+        name: 'WalletConnect',
+        description: 'Universal wallet connection protocol',
+        icon: 'scan',
+        features: [
+          'Connect via QR code or extension',
+          'Compatible with HashPack, Kabila, and more',
+          'Industry-standard protocol',
+          'One wallet per session',
+        ],
+      });
+    }
+
+    return options;
+  });
+
+  readonly ledgerOptions: LedgerOption[] = [
+    {
+      id: 'hedera',
+      name: 'Hedera',
+      description: 'Hedera Hashgraph network',
+      icon: 'logo-bitcoin', // Placeholder, use actual Hedera icon
+    },
+    {
+      id: 'xrpl',
+      name: 'XRP Ledger',
+      description: 'XRP Ledger network',
+      icon: 'logo-usd', // Placeholder, use actual XRPL icon
+    },
+  ];
+
+  /**
+   * Connection method options for HSuite Native.
+   * Simplified to two options:
+   * - HSuite Wallet (desktop): SDK auto-selects extension or PWA
+   * - Mobile Wallet (QR): Cross-device P2P connection
+   */
+  readonly connectionMethodOptions = computed<ConnectionMethodOption[]>(() => [
+    {
+      id: 'desktop',
+      name: 'HSuite Wallet',
+      description: this.isExtensionAvailable()
+        ? 'Connect via browser extension'
+        : 'Open HSuite Wallet in new tab',
+      icon: this.isExtensionAvailable() ? 'extension-puzzle-outline' : 'open-outline',
+      available: true,
+      recommended: !this.isMobile(),
+      features: this.isExtensionAvailable()
+        ? ['Extension detected', 'Fastest connection']
+        : ['Opens in new tab', 'Works everywhere'],
+    },
+    {
+      id: 'mobile-qr',
+      name: 'Mobile Wallet (QR)',
+      description: 'Two-way QR scan for cross-device connection',
+      icon: 'qr-code-outline',
+      available: true,
+      recommended: this.isMobile(),
+      features: ['Cross-device', 'P2P', 'No server needed'],
+    },
+  ]);
+
+  // Computed properties
+  readonly canProceed = computed(() => {
+    const step = this.currentStep();
+    switch (step) {
+      case ConnectionStep.NetworkSelection:
+        return !!this.selectedNetwork();
+      case ConnectionStep.ProtocolSelection:
+        return !!this.selectedProtocol();
+      case ConnectionStep.ConnectionMethodSelection:
+        return !!this.selectedConnectionMethod();
+      case ConnectionStep.LedgerSelection:
+        return !!this.selectedLedger();
+      default:
+        return false;
+    }
+  });
+
+  readonly stepTitle = computed(() => {
+    const step = this.currentStep();
+    switch (step) {
+      case ConnectionStep.NetworkSelection:
+        return 'Select Network';
+      case ConnectionStep.ProtocolSelection:
+        return 'Choose Connection Protocol';
+      case ConnectionStep.ConnectionMethodSelection:
+        return 'Choose Connection Method';
+      case ConnectionStep.LedgerSelection:
+        return 'Select Ledger';
+      case ConnectionStep.QrPairing:
+        return 'Connect Mobile Wallet';
+      case ConnectionStep.ConnectionProgress:
+        return 'Connecting...';
+      default:
+        return '';
+    }
+  });
+
+  /**
+   * Dynamic step configuration based on selected protocol and connection method.
+   * Returns the total number of steps and labels for the progress indicator.
+   *
+   * Step Paths:
+   * - Initial (no protocol): 3 placeholder steps
+   * - HSuite Native + Desktop: 3 steps (Network, Protocol, Method)
+   * - HSuite Native + Mobile QR: 4 steps (Network, Protocol, Method, Pair)
+   * - WalletConnect: 4 steps (Network, Protocol, Ledger, Connect)
+   */
+  readonly stepConfig = computed<StepConfig>(() => {
+    const protocol = this.selectedProtocol();
+    const method = this.selectedConnectionMethod();
+
+    // Initial state: show 3 placeholder steps until protocol is selected
+    if (!protocol) {
+      return { total: 3, labels: ['Network', 'Protocol', '...'] };
+    }
+
+    // HSuite Native path
+    if (protocol === 'hsuite-native') {
+      // If mobile QR is selected, we need 4 steps
+      if (method === 'mobile-qr') {
+        return { total: 4, labels: ['Network', 'Protocol', 'Method', 'Pair'] };
+      }
+      // Desktop connection is 3 steps (connects immediately after method selection)
+      return { total: 3, labels: ['Network', 'Protocol', 'Method'] };
+    }
+
+    // WalletConnect path: 4 steps
+    return { total: 4, labels: ['Network', 'Protocol', 'Ledger', 'Connect'] };
+  });
+
+  /**
+   * Maps the internal ConnectionStep enum to display position (1-based).
+   * Different protocol paths have different step mappings.
+   */
+  readonly displayStep = computed<number>(() => {
+    const step = this.currentStep();
+    // Protocol could be used for protocol-specific step mapping in the future
+    const _protocol = this.selectedProtocol();
+
+    // Map internal step to display position based on protocol path
+    switch (step) {
+      case ConnectionStep.NetworkSelection:
+        return 1;
+      case ConnectionStep.ProtocolSelection:
+        return 2;
+      case ConnectionStep.ConnectionMethodSelection:
+        return 3;
+      case ConnectionStep.LedgerSelection:
+        // WalletConnect ledger selection is step 3
+        return 3;
+      case ConnectionStep.QrPairing:
+        // QR pairing is step 4 for both paths that use it
+        return 4;
+      case ConnectionStep.ConnectionProgress:
+        // Connection progress is always the last step
+        return this.stepConfig().total;
+      default:
+        return 1;
+    }
+  });
+
+  /**
+   *
+   * @param modalController
+   * @param unifiedWalletService
+   */
+  constructor(
+    private modalController: ModalController,
+    private unifiedWalletService: UnifiedWalletService,
+  ) {
+    // Set up mobile provider connection callback
+    this.p2pNativeProvider.onPeerConnected(() => {
+      this.onMobileConnected();
+    });
+  }
+
+  /**
+   * Select a network option (internal, use selectNetworkAndProceed for UI)
+   * @param networkId
+   */
+  selectNetwork(networkId: string): void {
+    this.selectedNetwork.set(networkId);
+  }
+
+  /**
+   * Select a network and automatically proceed to the next step.
+   * This enables direct selection behavior without requiring a "Next" button.
+   * @param networkId - The network ID to select ('mainnet' or 'testnet')
+   */
+  selectNetworkAndProceed(networkId: string): void {
+    this.selectedNetwork.set(networkId);
+    // Auto-advance to protocol selection
+    this.currentStep.set(ConnectionStep.ProtocolSelection);
+  }
+
+  /**
+   * Select a protocol option (internal, use selectProtocolAndProceed for UI)
+   * @param protocolId
+   */
+  selectProtocol(protocolId: 'hsuite-native' | 'walletconnect'): void {
+    this.selectedProtocol.set(protocolId);
+  }
+
+  /**
+   * Select a protocol and automatically proceed to the appropriate next step.
+   * - HSuite Native → Connection Method Selection
+   * - WalletConnect → Ledger Selection
+   * @param protocolId - The protocol ID to select
+   */
+  selectProtocolAndProceed(protocolId: 'hsuite-native' | 'walletconnect'): void {
+    this.selectedProtocol.set(protocolId);
+
+    if (protocolId === 'hsuite-native') {
+      // HSuite Native: Go to connection method selection
+      this.currentStep.set(ConnectionStep.ConnectionMethodSelection);
+    } else {
+      // WalletConnect: Go to ledger selection
+      this.currentStep.set(ConnectionStep.LedgerSelection);
+    }
+  }
+
+  /**
+   * Select a connection method (internal)
+   * @param methodId
+   */
+  selectConnectionMethod(methodId: string): void {
+    this.selectedConnectionMethod.set(methodId as ConnectionMethod);
+  }
+
+  /**
+   * Handle connection method selection from step component.
+   * Automatically proceeds to connect or QR pairing based on method.
+   * @param methodId
+   */
+  onConnectionMethodSelected(methodId: string): void {
+    this.selectConnectionMethod(methodId);
+    void this.next();
+  }
+
+  /**
+   * Select a ledger option (internal, use selectLedgerAndConnect for UI)
+   * @param ledgerId
+   */
+  selectLedger(ledgerId: 'hedera' | 'xrpl'): void {
+    this.selectedLedger.set(ledgerId);
+  }
+
+  /**
+   * Select a ledger and automatically initiate connection.
+   * This enables direct selection behavior for WalletConnect ledger step.
+   * @param ledgerId - The ledger ID to select ('hedera' or 'xrpl')
+   */
+  selectLedgerAndConnect(ledgerId: 'hedera' | 'xrpl'): void {
+    this.selectedLedger.set(ledgerId);
+    // Auto-connect with the selected ledger
+    void this.connect();
+  }
+
+  /**
+   * Proceed to the next step in the wizard
+   */
+  async next(): Promise<void> {
+    const currentStep = this.currentStep();
+
+    if (currentStep === ConnectionStep.NetworkSelection) {
+      this.currentStep.set(ConnectionStep.ProtocolSelection);
+    } else if (currentStep === ConnectionStep.ProtocolSelection) {
+      const protocol = this.selectedProtocol();
+      if (protocol === 'hsuite-native') {
+        // HSuite Native: Show connection method selection
+        this.currentStep.set(ConnectionStep.ConnectionMethodSelection);
+      } else {
+        // WalletConnect: Show ledger selection
+        this.currentStep.set(ConnectionStep.LedgerSelection);
+      }
+    } else if (currentStep === ConnectionStep.ConnectionMethodSelection) {
+      const method = this.selectedConnectionMethod();
+      if (method === 'mobile-qr') {
+        // Mobile QR: Show QR pairing step
+        await this.initiateQrPairing();
+      } else {
+        // Desktop: Connect directly (SDK auto-selects extension or PWA)
+        await this.connect();
+      }
+    } else if (currentStep === ConnectionStep.LedgerSelection) {
+      // Connect with selected ledger
+      await this.connect();
+    }
+  }
+
+  /**
+   * Go back to the previous step
+   */
+  back(): void {
+    const currentStep = this.currentStep();
+    if (currentStep === ConnectionStep.ProtocolSelection) {
+      this.currentStep.set(ConnectionStep.NetworkSelection);
+    } else if (currentStep === ConnectionStep.ConnectionMethodSelection) {
+      this.currentStep.set(ConnectionStep.ProtocolSelection);
+    } else if (currentStep === ConnectionStep.LedgerSelection) {
+      this.currentStep.set(ConnectionStep.ProtocolSelection);
+    } else if (currentStep === ConnectionStep.QrPairing) {
+      this.currentStep.set(ConnectionStep.ConnectionMethodSelection);
+      this.pairingOffer.set('');
+      this.connectionError.set(null);
+    } else if (currentStep === ConnectionStep.ConnectionProgress) {
+      // Go back to appropriate step based on protocol and method
+      const protocol = this.selectedProtocol();
+      const method = this.selectedConnectionMethod();
+      if (protocol === 'walletconnect') {
+        this.currentStep.set(ConnectionStep.LedgerSelection);
+      } else if (method === 'mobile-qr') {
+        this.currentStep.set(ConnectionStep.QrPairing);
+      } else {
+        this.currentStep.set(ConnectionStep.ConnectionMethodSelection);
+      }
+      // Clear error state
+      this.connectionError.set(null);
+      this.isConnecting.set(false);
+    }
+  }
+
+  /**
+   * Connect to the selected protocol and ledger
+   */
+  private async connect(): Promise<void> {
+    this.currentStep.set(ConnectionStep.ConnectionProgress);
+    this.isConnecting.set(true);
+    this.connectionError.set(null);
+
+    try {
+      const protocol = this.selectedProtocol();
+      const network = this.selectedNetwork();
+
+      if (protocol === 'hsuite-native') {
+        // Connect to HSuite Native (multi-chain by default)
+        // Use the input walletUrl and pass targetWindow metadata for consistent window naming
+        await this.unifiedWalletService.connect('hsuite-native', {
+          type: 'hsuite-native',
+          appId: 'hsuite-demo',
+          appName: this.appName,
+          ledgerId: 'multi-chain',
+          networkId: network || 'testnet',
+          walletUrl: this.walletUrl,
+          metadata: {
+            targetWindow: 'hsuite-wallet',
+          },
+        });
+      } else if (protocol === 'walletconnect') {
+        // Connect to WalletConnect (ledger-specific)
+        const ledger = this.selectedLedger();
+        if (!ledger) {
+          throw new Error('No ledger selected');
+        }
+
+        if (!this.projectId) {
+          throw new Error(
+            'WalletConnect projectId is required. Get one from https://cloud.walletconnect.com',
+          );
+        }
+
+        const config: WalletConnectV2Config = {
+          type: 'walletconnect-v2',
+          projectId: this.projectId,
+          ledgerId: ledger,
+          networkId: `${ledger}:${network}`,
+          appName: this.appName,
+          appDescription: this.appDescription,
+        };
+
+        await this.unifiedWalletService.connect('walletconnect-v2', config);
+      }
+
+      // Success! Emit event and close modal
+      this.connected.emit({ protocol, network });
+      await this.modalController.dismiss({ connected: true });
+    } catch (error) {
+      logger.error('Connection failed', {
+        error: error instanceof Error ? error.message : String(error),
+      });
+      this.connectionError.set(
+        error instanceof Error ? error.message : 'Connection failed. Please try again.',
+      );
+      this.isConnecting.set(false);
+      // Stay on ConnectionProgress to show the error and "Try Again" button
+      // Don't auto-navigate away - let user click "Try Again" which calls back()
+    }
+  }
+
+  /**
+   * Close the modal without connecting
+   */
+  async dismiss(): Promise<void> {
+    await this.modalController.dismiss({ connected: false });
+  }
+
+  // ========== QR Pairing Methods ==========
+
+  /**
+   * Initiate QR pairing flow for mobile connection (Nostr-first protocol).
+   *
+   * Flow:
+   * 1. Generate session invite QR code
+   * 2. Wait for wallet to scan and connect via Nostr
+   * 3. Wait for wallet user to approve session
+   * 4. P2P upgrade happens automatically in background
+   */
+  private async initiateQrPairing(): Promise<void> {
+    this.currentStep.set(ConnectionStep.QrPairing);
+    this.isGeneratingOffer.set(true);
+    this.connectionError.set(null);
+
+    try {
+      const network = this.selectedNetwork();
+      const result = await this.p2pNativeProvider.createPairingOffer({
+        type: 'mobile-native',
+        appId: 'hsuite-dapp',
+        appName: this.appName,
+        ledgerId: 'multi-chain',
+        networkId: network || 'testnet',
+      });
+
+      this.pairingOffer.set(result.qrData);
+      this.isGeneratingOffer.set(false);
+      this.isWaitingForWallet.set(true);
+
+      // Start waiting for wallet to connect and approve
+      this.waitForWalletApproval();
+    } catch (error) {
+      logger.error('Failed to create pairing offer', { error });
+      this.connectionError.set(
+        error instanceof Error ? error.message : 'Failed to generate QR code',
+      );
+      this.isGeneratingOffer.set(false);
+    }
+  }
+
+  /**
+   * Wait for wallet to connect via Nostr and approve the session.
+   * This is the new single-QR flow - no answer scanning needed.
+   */
+  private async waitForWalletApproval(): Promise<void> {
+    try {
+      // This blocks until wallet scans QR, connects via Nostr, and user approves
+      const session = await this.p2pNativeProvider.waitForSessionApproval();
+
+      logger.info('Session approved by wallet', {
+        sessionId: session?.sessionId,
+        accounts: session?.accounts?.length,
+      });
+
+      this.onMobileConnected();
+    } catch (error) {
+      // Only show error if we're still on the QR pairing step (not cancelled)
+      if (this.currentStep() === ConnectionStep.QrPairing) {
+        logger.error('Session approval failed', { error });
+        this.connectionError.set(
+          error instanceof Error ? error.message : 'Session approval failed or rejected',
+        );
+      }
+      this.isWaitingForWallet.set(false);
+      this.isWaitingForApproval.set(false);
+    }
+  }
+
+  /**
+   * Handle QR code expiry
+   */
+  onQrExpired(): void {
+    logger.debug('QR code expired');
+    this.pairingOffer.set('');
+    this.isWaitingForWallet.set(false);
+  }
+
+  /**
+   * Refresh the QR pairing offer
+   */
+  async onQrRefresh(): Promise<void> {
+    this.isWaitingForWallet.set(false);
+    this.isWaitingForApproval.set(false);
+    await this.initiateQrPairing();
+  }
+
+  /**
+   * Handle successful mobile connection
+   */
+  private onMobileConnected(): void {
+    logger.info('Mobile wallet connected');
+    this.connected.emit({ protocol: 'mobile-native', method: 'qr' });
+    void this.modalController.dismiss({ connected: true });
+  }
+
+  // ========== Platform Detection ==========
+
+  /**
+   * Detect if running on mobile device
+   */
+  private detectMobile(): boolean {
+    return this.platform.is('mobile') || this.platform.is('android') || this.platform.is('ios');
+  }
+
+  /**
+   * Detect if HSuite extension is available.
+   * Checks for the flag injected by the extension's content script.
+   */
+  private detectExtension(): boolean {
+    if (typeof window === 'undefined') return false;
+    // Check for HSuite extension marker (injected by extension's inject-flags.ts)
+    return (
+      (window as unknown as { __HSUITE_WALLET_EXTENSION__?: boolean })
+        .__HSUITE_WALLET_EXTENSION__ === true
+    );
+  }
+}