@hsuite/native-connect-angular 1.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsuite/native-connect-angular",
-  "version": "1.0.0",
+  "version": "2.1.1",
   "license": "PolyForm-Noncommercial-1.0.0",
   "description": "Angular integration SDK for HSuite Wallet - provides direct SDK integration without wrappers",
   "type": "module",
@@ -23,9 +23,9 @@
   "dependencies": {
     "@hashgraph/proto": "^2.25.0",
     "@hashgraph/sdk": "^2.76.0",
-    "@hsuite/native-connect-sdk": "^1.0.0",
-    "@hsuite/native-connect-types": "^1.0.0",
-    "@hsuite/native-connect-ui": "^1.0.0",
+    "@hsuite/native-connect-sdk": "^2.1.1",
+    "@hsuite/native-connect-types": "^2.1.1",
+    "@hsuite/native-connect-ui": "^2.1.1",
     "@walletconnect/modal": "^2.7.0",
     "@walletconnect/sign-client": "^2.23.0",
     "@walletconnect/types": "^2.23.0",

package/src/index.ts

@@ -78,12 +78,28 @@ export { WalletEventBus } from './lib/services/wallet-event-bus.service';
 export { WalletContextService } from './lib/services/wallet-context.service';
 export { TransactionService } from './lib/services/transaction.service';
 export { LoggerService } from './lib/services/logger.service';
+export {
+  SmartSessionService,
+  SMART_SESSION_CONFIG,
+  type SmartSessionConfig,
+  type SmartHostHealth,
+  type SmartHostChallenge,
+  type SmartHostVerifyRequest,
+  type SmartHostVerifyResponse,
+} from './lib/services/smart-session.service';
+export {
+  HsuiteAuthInterceptor,
+  hsuiteAuthInterceptor,
+  HSUITE_AUTH_HEADER,
+  HSUITE_LEDGER_HEADER,
+} from './lib/services/hsuite-auth.interceptor';
 
 // Transaction Builders (for dApps to construct transactions)
 export {
   HederaTransactionBuilderService,
   XrplTransactionBuilderService,
   scaleHederaAmountToBaseUnits,
+  ACTIVE_ACCOUNT_SOURCE,
 } from './lib/services/transaction-builders';
 
 // Transaction builder types (for dApps)
@@ -94,6 +110,7 @@ export type {
   TopicCreateOptions,
   TokenCreateOptions,
   AccountCreateOptions,
+  ActiveAccountSource,
 } from './lib/services/transaction-builders';
 
 // Transports
@@ -200,4 +217,13 @@ export {
   DEFAULT_LEDGER_ICONS,
   LEDGER_COLORS,
   LEDGER_NAMES,
+  LEDGER_ICON_NAMES,
+  registerLedgerIcons,
 } from './lib/utils';
+// Registry-driven ledger presentation (open/extensible; the single source of
+// truth the helpers above derive from).
+export { LedgerUIRegistry } from './lib/utils';
+export type { LedgerUiDescriptor } from './lib/utils';
+// Canonical, open ledger identity — re-exported from the shared types package so
+// consumers get the single source of truth, not a narrowing local duplicate.
+export type { LedgerId } from '@hsuite/native-connect-types';

package/src/lib/components/account-selector/account-formatting.service.ts

@@ -18,6 +18,8 @@
 
 import { Injectable } from '@angular/core';
 
+import { LedgerUIRegistry } from '../../utils/ledger-ui-registry';
+
 /**
  * Account formatting service.
  *
@@ -46,11 +48,11 @@ export class AccountFormattingService {
    * @returns Display name
    */
   getLedgerName(ledgerId: string): string {
-    const names: Record<string, string> = {
-      hedera: 'Hedera',
-      xrpl: 'XRPL',
-    };
-    return names[ledgerId?.toLowerCase()] || ledgerId?.toUpperCase() || 'Unknown';
+    return (
+      LedgerUIRegistry.get(ledgerId?.toLowerCase())?.shortName ||
+      ledgerId?.toUpperCase() ||
+      'Unknown'
+    );
   }
 
   /**
@@ -60,11 +62,7 @@ export class AccountFormattingService {
    * @returns Ionic color name
    */
   getLedgerColor(ledgerId: string): string {
-    const colors: Record<string, string> = {
-      hedera: 'success',
-      xrpl: 'tertiary',
-    };
-    return colors[ledgerId?.toLowerCase()] || 'medium';
+    return LedgerUIRegistry.get(ledgerId?.toLowerCase())?.badgeColor || 'medium';
   }
 
   /**

package/src/lib/components/wallet-account-display/wallet-account-display.component.ts

@@ -16,12 +16,14 @@
  * and responsive styling. Eliminates repetitive account display boilerplate.
  */
 
-import { Component, Input, computed, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component, Input, computed, inject } from '@angular/core';
 import { IonText, IonBadge, IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { walletOutline, personOutline, peopleOutline } from 'ionicons/icons';
+
 import { WalletContextService } from '../../services/wallet-context.service';
+import { LedgerUIRegistry } from '../../utils/ledger-ui-registry';
 
 /**
  * Pre-built component for displaying active account
@@ -112,26 +114,24 @@ export class WalletAccountDisplayComponent {
     return null;
   });
 
+  /**
+   *
+   */
   constructor() {
     addIcons({ walletOutline, personOutline, peopleOutline });
   }
 
   /**
    * Get color for ledger badge
+   * @param ledgerId
    */
   protected getLedgerColor(ledgerId: string): string {
-    switch (ledgerId.toLowerCase()) {
-      case 'hedera':
-        return 'success';
-      case 'xrpl':
-        return 'tertiary';
-      default:
-        return 'primary';
-    }
+    return LedgerUIRegistry.get(ledgerId.toLowerCase())?.badgeColor ?? 'primary';
   }
 
   /**
    * Format network ID for display
+   * @param networkId
    */
   protected formatNetwork(networkId: string): string {
     const parts = networkId.split(':');

package/src/lib/components/wallet-connect-button/wallet-connect-button.component.spec.ts

@@ -0,0 +1,89 @@
+/**
+ * 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 Unit tests for WalletConnectButtonComponent.
+ *
+ * Focused on threading the `network` pinning input through to the connection
+ * modal, so the convenience button exposes the same capability as opening the
+ * modal directly.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ModalController } from '@ionic/angular/standalone';
+
+// Mock the logger so the SDK does not need real configuration during tests.
+vi.mock('@hsuite/native-connect-sdk', () => ({
+  getLogger: vi.fn(() => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    scoped: vi.fn(() => ({
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    })),
+  })),
+}));
+
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+import { WalletConnectButtonComponent } from './wallet-connect-button.component';
+
+describe('WalletConnectButtonComponent — network pinning', () => {
+  let component: WalletConnectButtonComponent;
+  let modalController: { create: ReturnType<typeof vi.fn> };
+  let modal: { present: ReturnType<typeof vi.fn>; onDidDismiss: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    modal = {
+      present: vi.fn().mockResolvedValue(undefined),
+      onDidDismiss: vi.fn().mockResolvedValue({ data: { connected: false } }),
+    };
+    modalController = { create: vi.fn().mockResolvedValue(modal) };
+    const wallet = {
+      allAccounts: vi.fn().mockReturnValue([]),
+      isAnyConnected: vi.fn().mockReturnValue(false),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ModalController, useValue: modalController },
+        { provide: UnifiedWalletService, useValue: wallet },
+      ],
+    });
+
+    component = TestBed.runInInjectionContext(() => new WalletConnectButtonComponent());
+  });
+
+  it('forwards the pinned network to the connection modal', async () => {
+    component.network = 'mainnet';
+
+    await component.connect();
+
+    expect(modalController.create).toHaveBeenCalledWith(
+      expect.objectContaining({
+        componentProps: expect.objectContaining({ network: 'mainnet' }),
+      }),
+    );
+  });
+
+  it('passes no network by default so the user chooses it', async () => {
+    await component.connect();
+
+    const props = (
+      modalController.create.mock.calls[0][0] as { componentProps: { network?: string } }
+    ).componentProps;
+    expect(props.network).toBeUndefined();
+  });
+});

package/src/lib/components/wallet-connect-button/wallet-connect-button.component.ts

@@ -69,6 +69,13 @@ export class WalletConnectButtonComponent {
    */
   @Input() walletUrl = DEFAULT_WALLET_URL;
 
+  /**
+   * Pins the connection network and hides the network-selection step in the
+   * modal. When set to `'mainnet'` or `'testnet'`, the dApp decides the network
+   * and the user never sees the picker. When omitted, the user chooses.
+   */
+  @Input() network?: 'mainnet' | 'testnet';
+
   /**
    * Whether to show session information when connected
    * @default true
@@ -160,6 +167,7 @@ export class WalletConnectButtonComponent {
         appName: this.appName,
         appDescription: this.appDescription,
         walletUrl: this.walletUrl,
+        network: this.network,
       },
     });
 

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

@@ -2,12 +2,7 @@
   <div class="modal-inner-content wallet-connection-modal">
     <div class="header">
       <div class="title">
-        <ion-button
-          *ngIf="currentStep() > 1 && currentStep() !== ConnectionStep.ConnectionProgress"
-          (click)="back()"
-          fill="clear"
-          class="back-btn"
-        >
+        <ion-button *ngIf="canGoBack()" (click)="back()" fill="clear" class="back-btn">
           <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
         </ion-button>
         <p>{{ stepTitle() }}</p>

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

@@ -0,0 +1,173 @@
+/**
+ * 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 Unit tests for WalletConnectionModalComponent.
+ *
+ * Focused on the `network` pinning capability: a host dApp can fix the
+ * connection network ('mainnet' | 'testnet') so the user is never shown the
+ * network-selection step. When the input is absent the modal behaves exactly
+ * as before (user picks the network as step 1).
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ModalController, Platform } from '@ionic/angular';
+
+// Mock the logger so the SDK does not need real configuration during tests.
+vi.mock('@hsuite/native-connect-sdk', () => ({
+  getLogger: vi.fn(() => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    scoped: vi.fn(() => ({
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    })),
+  })),
+}));
+
+import { P2PNativeProvider } from '../../providers/p2p-native/p2p-native.provider';
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+import { WalletConnectionModalComponent } from './wallet-connection-modal.component';
+
+/** ConnectionStep display values mirrored from the component (1-based). */
+const NETWORK_SELECTION_STEP = 1;
+const PROTOCOL_SELECTION_STEP = 2;
+
+describe('WalletConnectionModalComponent — network pinning', () => {
+  let component: WalletConnectionModalComponent;
+  let modalController: { dismiss: ReturnType<typeof vi.fn>; create: ReturnType<typeof vi.fn> };
+  let unifiedWalletService: { connect: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    modalController = {
+      dismiss: vi.fn().mockResolvedValue(undefined),
+      create: vi.fn(),
+    };
+    unifiedWalletService = {
+      connect: vi.fn().mockResolvedValue(undefined),
+    };
+    const platform = { is: vi.fn().mockReturnValue(false) };
+    const p2pNativeProvider = {
+      onPeerConnected: vi.fn(),
+      createPairingOffer: vi.fn(),
+      waitForSessionApproval: vi.fn(),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: Platform, useValue: platform },
+        { provide: P2PNativeProvider, useValue: p2pNativeProvider },
+      ],
+    });
+
+    // Construct directly inside an injection context so the component's
+    // `inject(Platform)` / `inject(P2PNativeProvider)` field initializers
+    // resolve, without compiling the external template/styles (this package
+    // has no Angular template-resolving test plugin configured).
+    component = TestBed.runInInjectionContext(
+      () =>
+        new WalletConnectionModalComponent(
+          modalController as unknown as ModalController,
+          unifiedWalletService as unknown as UnifiedWalletService,
+        ),
+    );
+  });
+
+  describe('default behavior (no network input)', () => {
+    it('starts on the network-selection step so the user chooses the network', () => {
+      component.ngOnInit();
+
+      expect(component.currentStep()).toBe(NETWORK_SELECTION_STEP);
+      expect(component.selectedNetwork()).toBe('testnet');
+    });
+
+    it('allows going back from protocol selection to network selection', () => {
+      component.ngOnInit();
+      // Advance from network selection to protocol selection the way the UI does.
+      component.selectNetworkAndProceed('testnet');
+      expect(component.currentStep()).toBe(PROTOCOL_SELECTION_STEP);
+
+      component.back();
+
+      expect(component.currentStep()).toBe(NETWORK_SELECTION_STEP);
+    });
+
+    it('keeps "Network" as the first step in the progress indicator', () => {
+      component.ngOnInit();
+      component.selectProtocol('hsuite-native');
+      component.selectConnectionMethod('desktop');
+
+      expect(component.stepConfig().labels).toEqual(['Network', 'Protocol', 'Method']);
+      expect(component.stepConfig().total).toBe(3);
+    });
+  });
+
+  describe('pinned network (network = "mainnet")', () => {
+    beforeEach(() => {
+      component.network = 'mainnet';
+      component.ngOnInit();
+    });
+
+    it('skips the network-selection step and starts on protocol selection', () => {
+      expect(component.currentStep()).toBe(PROTOCOL_SELECTION_STEP);
+    });
+
+    it('pins the selected network to the provided value', () => {
+      expect(component.selectedNetwork()).toBe('mainnet');
+    });
+
+    it('does not allow navigating back to the network-selection step', () => {
+      component.back();
+
+      expect(component.currentStep()).toBe(PROTOCOL_SELECTION_STEP);
+    });
+
+    it('hides the back affordance on the first reachable step', () => {
+      expect(component.canGoBack()).toBe(false);
+    });
+
+    it('drops "Network" from the progress indicator and renumbers', () => {
+      component.selectProtocol('hsuite-native');
+      component.selectConnectionMethod('desktop');
+
+      expect(component.stepConfig().labels).toEqual(['Protocol', 'Method']);
+      expect(component.stepConfig().total).toBe(2);
+      expect(component.displayStep()).toBe(1);
+    });
+
+    it('forwards the pinned network to the SDK connect call', async () => {
+      component.selectProtocolAndProceed('hsuite-native');
+      component.selectConnectionMethod('desktop');
+
+      await component.next();
+
+      expect(unifiedWalletService.connect).toHaveBeenCalledWith(
+        'hsuite-native',
+        expect.objectContaining({ networkId: 'mainnet' }),
+      );
+    });
+  });
+
+  describe('pinned network (network = "testnet")', () => {
+    it('skips selection and pins testnet', () => {
+      component.network = 'testnet';
+      component.ngOnInit();
+
+      expect(component.currentStep()).toBe(PROTOCOL_SELECTION_STEP);
+      expect(component.selectedNetwork()).toBe('testnet');
+    });
+  });
+});