@hsuite/native-connect-angular 1.0.0 → 2.1.1

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

@@ -22,14 +22,26 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { Component, Input, Output, EventEmitter, signal, computed, inject } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  signal,
+  computed,
+  inject,
+} from '@angular/core';
 import { getLogger } from '@hsuite/native-connect-sdk';
+import type { SupportedLedger } 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 { registerLedgerIcons } from '../../utils/ledger-icons.util';
+import { LedgerUIRegistry } from '../../utils/ledger-ui-registry';
 
 import {
   ConnectionMethodStepComponent,
@@ -84,12 +96,25 @@ interface ProtocolOption {
  * Ledger configuration options
  */
 interface LedgerOption {
-  id: 'hedera' | 'xrpl';
+  id: SupportedLedger;
   name: string;
   description: string;
   icon: string;
 }
 
+/**
+ * Per-ledger copy for the WalletConnect "Choose Blockchain" step.
+ *
+ * Keyed by {@link SupportedLedger} (the closed set of ledgers the WalletConnect
+ * provider brokers) via `satisfies`, so widening that union forces a description
+ * here. Display name and icon come from {@link LedgerUIRegistry}; this map holds
+ * only the connection-flow copy specific to this surface.
+ */
+const LEDGER_DESCRIPTIONS = {
+  hedera: 'Hedera Hashgraph network',
+  xrpl: 'XRP Ledger network',
+} satisfies Record<SupportedLedger, string>;
+
 /**
  * Step configuration for dynamic step indicator.
  * Defines the total steps and labels based on selected protocol path.
@@ -112,12 +137,22 @@ interface StepConfig {
   templateUrl: './wallet-connection-modal.component.html',
   styleUrls: ['./wallet-connection-modal.component.scss'],
 })
-export class WalletConnectionModalComponent {
+export class WalletConnectionModalComponent implements OnInit {
   /**
    * WalletConnect project ID (required for WalletConnect)
    */
   @Input() projectId?: string;
 
+  /**
+   * Pins the connection network and hides the network-selection step.
+   *
+   * When set to `'mainnet'` or `'testnet'`, the host dApp decides the network
+   * and the user is never shown the network picker — the modal opens directly
+   * on protocol selection. When omitted (default), the user chooses the network
+   * as the first step.
+   */
+  @Input() network?: 'mainnet' | 'testnet';
+
   /**
    * App name for WalletConnect metadata
    */
@@ -151,7 +186,7 @@ export class WalletConnectionModalComponent {
   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);
+  readonly selectedLedger = signal<SupportedLedger | null>(null);
 
   // Loading state
   readonly isConnecting = signal<boolean>(false);
@@ -228,20 +263,17 @@ export class WalletConnectionModalComponent {
     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
-    },
-  ];
+  readonly ledgerOptions: LedgerOption[] = (
+    Object.keys(LEDGER_DESCRIPTIONS) as SupportedLedger[]
+  ).map((id) => {
+    const ui = LedgerUIRegistry.get(id);
+    return {
+      id,
+      name: ui?.displayName ?? id,
+      description: LEDGER_DESCRIPTIONS[id],
+      icon: ui?.iconName ?? '',
+    };
+  });
 
   /**
    * Connection method options for HSuite Native.
@@ -325,23 +357,30 @@ export class WalletConnectionModalComponent {
     const protocol = this.selectedProtocol();
     const method = this.selectedConnectionMethod();
 
+    let base: StepConfig;
+
     // Initial state: show 3 placeholder steps until protocol is selected
     if (!protocol) {
-      return { total: 3, labels: ['Network', 'Protocol', '...'] };
+      base = { total: 3, labels: ['Network', 'Protocol', '...'] };
+    } else if (protocol === 'hsuite-native') {
+      // HSuite Native path
+      base =
+        method === 'mobile-qr'
+          ? // Mobile QR needs 4 steps
+            { total: 4, labels: ['Network', 'Protocol', 'Method', 'Pair'] }
+          : // Desktop connects immediately after method selection (3 steps)
+            { total: 3, labels: ['Network', 'Protocol', 'Method'] };
+    } else {
+      // WalletConnect path: 4 steps
+      base = { total: 4, labels: ['Network', 'Protocol', 'Ledger', 'Connect'] };
     }
 
-    // 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'] };
+    // When the network is pinned by the host dApp the network step is never
+    // shown — drop it from the indicator so the numbering stays accurate.
+    if (this.network) {
+      return { total: base.total - 1, labels: base.labels.slice(1) };
     }
-
-    // WalletConnect path: 4 steps
-    return { total: 4, labels: ['Network', 'Protocol', 'Ledger', 'Connect'] };
+    return base;
   });
 
   /**
@@ -353,20 +392,24 @@ export class WalletConnectionModalComponent {
     // Protocol could be used for protocol-specific step mapping in the future
     const _protocol = this.selectedProtocol();
 
+    // When the network is pinned the network step is removed, so every
+    // subsequent step shifts down one position in the indicator.
+    const networkOffset = this.network ? 1 : 0;
+
     // Map internal step to display position based on protocol path
     switch (step) {
       case ConnectionStep.NetworkSelection:
         return 1;
       case ConnectionStep.ProtocolSelection:
-        return 2;
+        return 2 - networkOffset;
       case ConnectionStep.ConnectionMethodSelection:
-        return 3;
+        return 3 - networkOffset;
       case ConnectionStep.LedgerSelection:
         // WalletConnect ledger selection is step 3
-        return 3;
+        return 3 - networkOffset;
       case ConnectionStep.QrPairing:
         // QR pairing is step 4 for both paths that use it
-        return 4;
+        return 4 - networkOffset;
       case ConnectionStep.ConnectionProgress:
         // Connection progress is always the last step
         return this.stepConfig().total;
@@ -375,6 +418,23 @@ export class WalletConnectionModalComponent {
     }
   });
 
+  /**
+   * Whether a back affordance should be offered for the current step.
+   * The first reachable step has no back target — that is protocol selection
+   * when the network is pinned, otherwise network selection. The connection
+   * progress step manages its own retry navigation instead.
+   */
+  readonly canGoBack = computed<boolean>(() => {
+    const step = this.currentStep();
+    if (step === ConnectionStep.ConnectionProgress) {
+      return false;
+    }
+    const firstStep = this.network
+      ? ConnectionStep.ProtocolSelection
+      : ConnectionStep.NetworkSelection;
+    return step > firstStep;
+  });
+
   /**
    *
    * @param modalController
@@ -388,6 +448,23 @@ export class WalletConnectionModalComponent {
     this.p2pNativeProvider.onPeerConnected(() => {
       this.onMobileConnected();
     });
+
+    // Register the shared ledger brand logos so <ion-icon> can resolve them by name.
+    registerLedgerIcons();
+  }
+
+  /**
+   * Apply the pinned network (if any) before the first render.
+   *
+   * When the host dApp provides a {@link network}, lock the selection to it and
+   * skip straight to protocol selection so the user never sees — and cannot
+   * change — the network. With no input, the modal opens on network selection.
+   */
+  ngOnInit(): void {
+    if (this.network) {
+      this.selectedNetwork.set(this.network);
+      this.currentStep.set(ConnectionStep.ProtocolSelection);
+    }
   }
 
   /**
@@ -457,7 +534,7 @@ export class WalletConnectionModalComponent {
    * Select a ledger option (internal, use selectLedgerAndConnect for UI)
    * @param ledgerId
    */
-  selectLedger(ledgerId: 'hedera' | 'xrpl'): void {
+  selectLedger(ledgerId: SupportedLedger): void {
     this.selectedLedger.set(ledgerId);
   }
 
@@ -466,7 +543,7 @@ export class WalletConnectionModalComponent {
    * This enables direct selection behavior for WalletConnect ledger step.
    * @param ledgerId - The ledger ID to select ('hedera' or 'xrpl')
    */
-  selectLedgerAndConnect(ledgerId: 'hedera' | 'xrpl'): void {
+  selectLedgerAndConnect(ledgerId: SupportedLedger): void {
     this.selectedLedger.set(ledgerId);
     // Auto-connect with the selected ledger
     void this.connect();
@@ -510,7 +587,11 @@ export class WalletConnectionModalComponent {
   back(): void {
     const currentStep = this.currentStep();
     if (currentStep === ConnectionStep.ProtocolSelection) {
-      this.currentStep.set(ConnectionStep.NetworkSelection);
+      // When the network is pinned, protocol selection is the first reachable
+      // step — there is no network step to return to.
+      if (!this.network) {
+        this.currentStep.set(ConnectionStep.NetworkSelection);
+      }
     } else if (currentStep === ConnectionStep.ConnectionMethodSelection) {
       this.currentStep.set(ConnectionStep.ProtocolSelection);
     } else if (currentStep === ConnectionStep.LedgerSelection) {

package/src/lib/models/provider-types.ts

@@ -20,6 +20,8 @@
  * ```
  */
 
+import type { SupportedLedger } from '@hsuite/native-connect-sdk';
+
 /**
  * Supported wallet connection protocol types.
  *
@@ -129,7 +131,7 @@ export interface HsuiteNativeConfig {
 export interface WalletConnectV2Config {
   type: 'walletconnect-v2';
   projectId: string; // WalletConnect Cloud project ID - REQUIRED
-  ledgerId: 'hedera' | 'xrpl'; // Which ledger to connect to
+  ledgerId: SupportedLedger; // Which ledger to connect to
   networkId: string; // e.g., 'hedera:testnet' or 'xrpl:testnet'
   appName?: string;
   appDescription?: string;

package/src/lib/models/unified-account.model.ts

@@ -9,7 +9,7 @@
  */
 
 /**
- * @fileoverview Unified account model that works across all wallet providers.
+ * @file Unified account model that works across all wallet providers.
  *
  * @module models/unified-account
  *
@@ -45,6 +45,9 @@ export interface UnifiedAccount {
   /** Account address/public key */
   address: string;
 
+  /** Public key associated with the account, when available from the provider. */
+  publicKey?: string;
+
   /** Human-readable label */
   label?: string;
 

package/src/lib/providers/hsuite-native/channel-client.service.ts

@@ -170,6 +170,7 @@ export class ChannelClientService {
       return {
         id: `channel-${account.address}`,
         address: account.address,
+        publicKey: account.publicKey,
         label: account.alias ?? `Account ${index + 1}`,
         ledgerId: account.ledgerId,
         networkId: account.networkId,

package/src/lib/providers/p2p-native/p2p-session-manager.ts

@@ -587,6 +587,7 @@ export class P2PSessionManager {
       accounts: accounts.map((acc, index) => ({
         id: `p2p-${acc.address}`,
         address: acc.address,
+        publicKey: acc.publicKey,
         label: acc.alias || `Account ${index + 1}`,
         ledgerId: acc.ledgerId,
         networkId: acc.networkId,

package/src/lib/providers/walletconnect/core/walletconnect-provider.ts

@@ -29,6 +29,7 @@
 
 import { Injectable, signal, inject, NgZone } from '@angular/core';
 import { getLogger } from '@hsuite/native-connect-sdk';
+import type { SupportedLedger } from '@hsuite/native-connect-sdk';
 
 import type {
   ConnectionStatus,
@@ -298,7 +299,7 @@ export class WalletConnectV2Provider extends BaseWalletProvider {
       id: `${this.id}-${ledgerId}-${acc.address}`,
       address: acc.address,
       label: `Account ${index + 1}`,
-      ledgerId: ledgerId as 'hedera' | 'xrpl',
+      ledgerId: ledgerId as SupportedLedger,
       networkId: networkId, // Use user's selected network
       providerId: this.id,
       providerType: 'walletconnect-v2',

package/src/lib/services/hsuite-auth.interceptor.ts

@@ -0,0 +1,159 @@
+/**
+ * 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 HTTP interceptor that attaches wallet-attributed auth headers.
+ *
+ * @module services/hsuite-auth-interceptor
+ *
+ * @description
+ * `HsuiteAuthInterceptor` automatically adds the active smart-host bearer token
+ * and wallet ledger identifier to outgoing HTTP requests. When a request fails
+ * with HTTP 401, it delegates recovery to {@link SmartSessionService} for a
+ * single re-login and retry.
+ *
+ * **Registration (standalone apps):**
+ * ```typescript
+ * provideHttpClient(withInterceptors([provideHsuiteAuthInterceptor()]))
+ * ```
+ *
+ * **Registration (module-based apps):**
+ * ```typescript
+ * { provide: HTTP_INTERCEPTORS, useClass: HsuiteAuthInterceptor, multi: true }
+ * ```
+ */
+
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpInterceptorFn,
+  HttpRequest,
+} from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { catchError, from, Observable, switchMap, throwError } from 'rxjs';
+
+import { SmartSessionService } from './smart-session.service';
+import { UnifiedWalletService } from './unified-wallet.service';
+
+/**
+ * Headers injected by the interceptor.
+ */
+export const HSUITE_AUTH_HEADER = 'Authorization';
+export const HSUITE_LEDGER_HEADER = 'X-Ledger-Id';
+
+/**
+ * Functional HTTP interceptor that attaches wallet-attributed auth headers.
+ *
+ * @description
+ * Adds:
+ * - `Authorization: Bearer <token>` when {@link SmartSessionService.getBearer} returns a token
+ * - `X-Ledger-Id: <ledgerId>` when a wallet account is active
+ *
+ * On 401 responses, clears the stale bearer and retries once after re-login.
+ *
+ * @param req - The outgoing HTTP request
+ * @param next - The downstream request handler
+ * @returns Observable of HTTP events
+ */
+export const hsuiteAuthInterceptor: HttpInterceptorFn = (req, next) => {
+  const session = inject(SmartSessionService);
+  const wallet = inject(UnifiedWalletService);
+
+  const authenticated = appendAuthHeaders(req, session, wallet);
+
+  return next(authenticated).pipe(
+    catchError((error) => {
+      if (error instanceof HttpErrorResponse && error.status === 401) {
+        session.logout();
+        return from(session.login()).pipe(
+          switchMap(() => next(appendAuthHeaders(req, session, wallet))),
+          catchError((loginError) => throwError(() => loginError)),
+        );
+      }
+      return throwError(() => error);
+    }),
+  );
+};
+
+/**
+ * Class-based HTTP interceptor for module-based Angular apps.
+ *
+ * @description
+ * Provides the same behavior as {@link hsuiteAuthInterceptor} in a class form
+ * suitable for registration via `HTTP_INTERCEPTORS`.
+ */
+@Injectable({ providedIn: 'root' })
+export class HsuiteAuthInterceptor implements HttpInterceptor {
+  private readonly session = inject(SmartSessionService);
+  private readonly wallet = inject(UnifiedWalletService);
+
+  /**
+   * Intercepts outgoing HTTP requests to attach wallet-attributed auth headers.
+   *
+   * @param req - The outgoing HTTP request
+   * @param next - The downstream request handler
+   * @returns Observable of HTTP events
+   */
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    const authenticated = appendAuthHeaders(req, this.session, this.wallet);
+
+    return next.handle(authenticated).pipe(
+      catchError((error) => {
+        if (error instanceof HttpErrorResponse && error.status === 401) {
+          this.session.logout();
+          return from(this.session.login()).pipe(
+            switchMap(() => next.handle(appendAuthHeaders(req, this.session, this.wallet))),
+            catchError((loginError) => throwError(() => loginError)),
+          );
+        }
+        return throwError(() => error);
+      }),
+    );
+  }
+}
+
+/**
+ * Helper that clones a request with the active auth headers attached.
+ *
+ * @param req - The outgoing HTTP request
+ * @param session - Smart session service for bearer lookup
+ * @param wallet - Unified wallet service for ledger ID lookup
+ * @returns The request cloned with Authorization and/or X-Ledger-Id headers
+ */
+function appendAuthHeaders(
+  req: HttpRequest<unknown>,
+  session: SmartSessionService,
+  wallet: UnifiedWalletService,
+): HttpRequest<unknown> {
+  const bearer = session.getBearer();
+  const activeAccount = wallet.activeAccount();
+  const ledgerId = activeAccount?.ledgerId;
+
+  // Avoid mutating requests that already carry an Authorization header
+  if (!bearer && !ledgerId) {
+    return req;
+  }
+
+  const headers: Record<string, string> = {};
+  if (bearer && !req.headers.has(HSUITE_AUTH_HEADER)) {
+    headers[HSUITE_AUTH_HEADER] = `Bearer ${bearer}`;
+  }
+  if (ledgerId && !req.headers.has(HSUITE_LEDGER_HEADER)) {
+    headers[HSUITE_LEDGER_HEADER] = ledgerId;
+  }
+
+  if (Object.keys(headers).length === 0) {
+    return req;
+  }
+
+  return req.clone({ setHeaders: headers });
+}