@hsuite/native-connect-ui 2.1.0 → 2.1.1

package/dist/lib/atoms/hs-transfer-item/hs-transfer-item.component.js

@@ -22,8 +22,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, Input, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslocoModule } from '@ngneat/transloco';
+import { LedgerIds } from '@hsuite/native-connect-types';
 import { copyToClipboard } from '../../utils/clipboard';
 import { getUILogger } from '../../utils/ui-logger';
+import { formatLedgerAmount } from '../../utils/format-ledger-amount';
 const logger = getUILogger('HsTransferItem');
 import { IonicModule } from '@ionic/angular';
 let HsTransferItemComponent = class HsTransferItemComponent {
@@ -78,9 +80,13 @@ let HsTransferItemComponent = class HsTransferItemComponent {
         const numAmount = parseFloat(this.amount);
         if (isNaN(numAmount))
             return this.amount;
-        // For HBAR, convert from tinybars
+        // For HBAR, render via the canonical formatter (display decimals + trailing-
+        // zero trim); the symbol is shown separately by typeLabel, so omit the suffix.
         if (this.type === 'hbar') {
-            return (numAmount / 100000000).toFixed(8).replace(/\.?0+$/, '');
+            // HBAR is intrinsically Hedera's native unit, so the ledger is known at
+            // compile time here — expressed via the well-known-id constant rather
+            // than a bare 'hedera' literal (typo-safe, coherent with other sites).
+            return formatLedgerAmount(numAmount, LedgerIds.Hedera, { symbol: false });
         }
         // For tokens, use provided decimals
         if (this.type === 'token' && this.decimals !== undefined) {

package/dist/lib/organisms/hs-transaction-detail/hs-transaction-detail.component.js

@@ -17,6 +17,7 @@ import { Component, Input, Output, EventEmitter, signal, ChangeDetectionStrategy
 import { CommonModule } from '@angular/common';
 import { IonIcon } from '@ionic/angular/standalone';
 import { TranslocoModule } from '@ngneat/transloco';
+import { formatLedgerAmount } from '../../utils/format-ledger-amount';
 import { addIcons } from 'ionicons';
 import { chevronDown, chevronUp, copy, openOutline, checkmark, arrowUp, arrowDown, swapHorizontal, arrowForward, linkOutline, addCircleOutline, flameOutline, personAddOutline, personOutline, personRemoveOutline, shieldCheckmarkOutline, shieldOutline, calendarOutline, createOutline, calendarClearOutline, chatbubblesOutline, chatbubbleOutline, documentOutline, settingsOutline, lockClosedOutline, lockOpenOutline, closeCircleOutline, gitBranchOutline, downloadOutline, documentTextOutline, cashOutline, peopleOutline, ticketOutline, imageOutline, pricetagOutline, checkmarkCircleOutline, layersOutline, helpCircleOutline, snowOutline, sunnyOutline, pauseCircleOutline, playCircleOutline, trashOutline, } from 'ionicons/icons';
 import { HsBadgeComponent } from '../../atoms/hs-badge/hs-badge.component';
@@ -344,18 +345,12 @@ let HsTransactionDetailComponent = class HsTransactionDetailComponent {
         return `${sign}${formatted}`;
     }
     formatNativeAmount(amount) {
-        const divisor = this.ledgerId === 'hedera' ? 100000000 : 1000000; // tinybars or drops
-        const value = amount / divisor;
-        // Always show at least 2 decimals, up to 8 for small amounts
-        if (Math.abs(value) < 0.01) {
-            return `${value.toFixed(8)} ${this.currency}`;
-        }
-        else if (Math.abs(value) < 1) {
-            return `${value.toFixed(6)} ${this.currency}`;
-        }
-        else {
-            return `${value.toFixed(4)} ${this.currency}`;
-        }
+        // Canonical formatter (decimals via the bundled-chain display map,
+        // trailing-zero trim, NaN/Infinity safety) replaces the previous hardcoded
+        // `ledgerId === 'hedera' ? 1e8 : 1e6` divisor + bespoke precision buckets.
+        // Display path — formatLedgerAmount stays lenient (returns '—' on an
+        // unknown ledger) and never throws.
+        return formatLedgerAmount(amount, this.ledgerId, { symbol: this.currency });
     }
     formatTokenAmount(amount, decimals = 0) {
         if (decimals === 0)

package/dist/lib/organisms/hs-transaction-detail-modal/hs-transaction-detail-modal.component.d.ts

@@ -7,8 +7,94 @@
  * This file is part of HSuite Native Connect. For commercial licensing,
  * visit https://hsuite.finance/licensing
  */
-import { TrackByFunction, AfterViewInit, OnDestroy } from '@angular/core';
+import { TrackByFunction, AfterViewInit, OnDestroy, EventEmitter } from '@angular/core';
 import { type RiskLevel, type RiskFactorInput } from '../../molecules/hs-risk-card/hs-risk-card.component';
+/**
+ * @interface TransactionDetailData
+ * Canonical, read-only data shape for the transaction detail surface. It is the
+ * single source of truth shared by {@link HsTransactionDetailModalComponent}
+ * (which `implements` it, so the component is guaranteed to expose every field)
+ * and by host services/wrappers that drive it. Keeping one type prevents the
+ * field-drift that silently drops data when the component and its host disagree.
+ */
+export interface TransactionDetailData {
+    /** Transaction ID/hash */
+    transactionId: string;
+    /** Display name for the transaction type */
+    transactionName: string;
+    /** Transaction type for icon selection */
+    transactionType: string;
+    /** Custom icon override */
+    transactionIcon?: string;
+    /** Ledger identifier */
+    ledgerId: 'hedera' | 'xrpl';
+    /** Transaction status */
+    status?: string;
+    /** Transaction timestamp */
+    timestamp?: number;
+    /** Main amount in smallest units (tinybars/drops) */
+    mainAmount?: number;
+    /** Currency symbol */
+    currency?: string;
+    /** Native currency transfers */
+    nativeTransfers?: Array<{
+        account: string;
+        amount: number;
+        label?: string;
+    }>;
+    /** Token transfers */
+    tokenTransfers?: Array<{
+        token_id: string;
+        account: string;
+        amount: number;
+        decimals?: number;
+    }>;
+    /** NFT transfers */
+    nftTransfers?: Array<{
+        token_id: string;
+        sender_account_id: string;
+        receiver_account_id: string;
+        serial_number: number;
+    }>;
+    /** Transaction fee in smallest units */
+    transactionFee?: number;
+    /** Transaction memo */
+    memo?: string;
+    /** XRPL source account */
+    sourceAccount?: string;
+    /** XRPL destination account */
+    destinationAccount?: string;
+    /** XRPL memos */
+    xrplMemos?: Array<{
+        data?: string;
+        type?: string;
+        format?: string;
+    }>;
+    /** User's own account addresses for highlighting */
+    userAccounts?: string[];
+    /** Token metadata for symbol/name resolution */
+    tokenMetadataMap?: Map<string, {
+        name?: string;
+        symbol?: string;
+        decimals?: number;
+    }>;
+    /** Contact resolver function */
+    contactResolver?: (address: string, ledgerId: string) => string | null;
+    /**
+     * Host handler for the "View in Explorer" action. The component is
+     * presentational and delegates the click here; the host builds the
+     * network-aware URL and opens it. When omitted, the button is hidden.
+     */
+    onExplorer?: (txId: string) => void;
+    /** Scam / suspicious-transaction risk level for this transaction. */
+    riskLevel?: RiskLevel;
+    /** Pre-translated risk factors shown in the banner (empty = none). */
+    riskFactors?: RiskFactorInput[];
+    /** Pre-translated recommendation line shown under the factors. */
+    riskRecommendation?: string | null;
+    /** Banner title (already localized, e.g. the high/medium badge label). */
+    riskTitle?: string;
+}
 /**
  * @component HsTransactionDetailModalComponent
  * Modal component for displaying comprehensive transaction details.
@@ -22,7 +108,7 @@ import { type RiskLevel, type RiskFactorInput } from '../../molecules/hs-risk-ca
  * - Explorer link integration
  * - Contact name resolution
  */
-export declare class HsTransactionDetailModalComponent implements AfterViewInit, OnDestroy {
+export declare class HsTransactionDetailModalComponent implements AfterViewInit, OnDestroy, TransactionDetailData {
     /**
      * Hedera system accounts that must NEVER appear in the Native Transfers
      * section of the UI. Union of node-fee accounts (0.0.3..0.0.34) and the
@@ -82,11 +168,26 @@ export declare class HsTransactionDetailModalComponent implements AfterViewInit,
         decimals?: number;
     }>;
     contactResolver?: (address: string, ledgerId: string) => string | null;
+    /**
+     * Host-provided handler for the "View in Explorer" action. The modal is a
+     * presentational component and must NOT know explorer domains or networks, so
+     * it delegates: the host builds the network-aware URL (mainnet vs testnet) and
+     * opens it via its SOC2-safe external-URL service. Called with the tx id/hash.
+     * When omitted, the "View in Explorer" button is hidden.
+     */
+    onExplorer?: (txId: string) => void;
     maxDisplayedTransfers: number;
     riskLevel?: RiskLevel;
     riskFactors: RiskFactorInput[];
     riskRecommendation?: string | null;
     riskTitle: string;
+    /**
+     * Emitted when the user requests to close this view. When a host binds this
+     * output (e.g. a drawer wrapper), it takes over closing and the component
+     * does NOT call ModalController — keeping the component container-agnostic.
+     * Unbound (the legacy modal path), `dismiss()` falls back to ModalController.
+     */
+    closeRequested: EventEmitter<void>;
     /**
      * Whether to render the scam-risk banner. Only medium/high verdicts surface a
      * banner; `'low'`/absent stays silent so benign transactions are visually

package/dist/lib/organisms/hs-transaction-detail-modal/hs-transaction-detail-modal.component.js

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HsTransactionDetailModalComponent_1;
-import { Component, Input, signal, inject, ChangeDetectionStrategy, ElementRef, HostListener, } from '@angular/core';
+import { Component, Input, signal, inject, ChangeDetectionStrategy, ElementRef, HostListener, Output, EventEmitter, } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { IonContent, IonFooter, IonToolbar, IonButton, IonIcon, ModalController, } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
@@ -82,6 +82,14 @@ let HsTransactionDetailModalComponent = class HsTransactionDetailModalComponent
     tokenMetadataMap;
     // Contact resolver
     contactResolver;
+    /**
+     * Host-provided handler for the "View in Explorer" action. The modal is a
+     * presentational component and must NOT know explorer domains or networks, so
+     * it delegates: the host builds the network-aware URL (mainnet vs testnet) and
+     * opens it via its SOC2-safe external-URL service. Called with the tx id/hash.
+     * When omitted, the "View in Explorer" button is hidden.
+     */
+    onExplorer;
     maxDisplayedTransfers = 10;
     // Scam / suspicious-transaction risk assessment.
     // Surfaced as a banner at the top of the modal so a user who taps into a
@@ -93,6 +101,13 @@ let HsTransactionDetailModalComponent = class HsTransactionDetailModalComponent
     riskFactors = [];
     riskRecommendation;
     riskTitle = 'Risk assessment';
+    /**
+     * Emitted when the user requests to close this view. When a host binds this
+     * output (e.g. a drawer wrapper), it takes over closing and the component
+     * does NOT call ModalController — keeping the component container-agnostic.
+     * Unbound (the legacy modal path), `dismiss()` falls back to ModalController.
+     */
+    closeRequested = new EventEmitter();
     /**
      * Whether to render the scam-risk banner. Only medium/high verdicts surface a
      * banner; `'low'`/absent stays silent so benign transactions are visually
@@ -513,22 +528,20 @@ let HsTransactionDetailModalComponent = class HsTransactionDetailModalComponent
         }
     }
     async dismiss() {
+        // Container-agnostic close: if a host (e.g. drawer) listens, let it close;
+        // otherwise fall back to the Ionic modal path (legacy callers).
+        if (this.closeRequested.observed) {
+            this.closeRequested.emit();
+            return;
+        }
         await this.modalController.dismiss(null, 'cancel');
     }
     onExplorerClick() {
-        const txId = this.transactionId || '';
-        let explorerUrl = '';
-        if (this.ledgerId === 'hedera') {
-            // Default to testnet, could be enhanced with networkId input
-            explorerUrl = `https://hashscan.io/testnet/transaction/${txId}`;
-        }
-        else if (this.ledgerId === 'xrpl') {
-            explorerUrl = `https://testnet.xrpl.org/transactions/${txId}`;
-        }
-        if (explorerUrl) {
-            // §29.8 SOC2 CC6.1: noopener,noreferrer blocks reverse-tabnabbing.
-            window.open(explorerUrl, '_blank', 'noopener,noreferrer');
-        }
+        if (!this.transactionId)
+            return;
+        // Delegate to the host: it knows the network and opens the link through its
+        // SOC2-safe external-URL service. The modal never hardcodes a network.
+        this.onExplorer?.(this.transactionId);
     }
 };
 __decorate([
@@ -591,6 +604,9 @@ __decorate([
 __decorate([
     Input()
 ], HsTransactionDetailModalComponent.prototype, "contactResolver", void 0);
+__decorate([
+    Input()
+], HsTransactionDetailModalComponent.prototype, "onExplorer", void 0);
 __decorate([
     Input()
 ], HsTransactionDetailModalComponent.prototype, "maxDisplayedTransfers", void 0);
@@ -606,6 +622,9 @@ __decorate([
 __decorate([
     Input()
 ], HsTransactionDetailModalComponent.prototype, "riskTitle", void 0);
+__decorate([
+    Output()
+], HsTransactionDetailModalComponent.prototype, "closeRequested", void 0);
 __decorate([
     HostListener('document:keydown.escape', ['$event'])
 ], HsTransactionDetailModalComponent.prototype, "onEscapeKey", null);

package/dist/lib/utils/format-ledger-amount.d.ts

@@ -8,12 +8,14 @@
  * visit https://hsuite.finance/licensing
  */
 /**
- * @file Canonical formatter for HBAR / XRP rendering across the wallet UI.
+ * @file Canonical formatter for native-unit amounts across the wallet UI
+ * (HBAR, XRP, and any SDK-registered ledger when its decimals are supplied).
  *
  * Callers MUST pass raw base units — tinybars for Hedera, drops for XRPL.
  * Handles `bigint` exactly (no precision loss above `Number.MAX_SAFE_INTEGER`)
  * and returns a safe placeholder for `NaN` / `Infinity` so a malformed input
- * cannot leak literal "NaN" text into the UI.
+ * cannot leak literal "NaN" text into the UI. Returns the `—` sentinel for an
+ * unknown ledger when no `decimals` override is supplied via options.
  */
 export type LedgerId = 'hedera' | 'xrpl';
 export interface FormatLedgerAmountOptions {
@@ -25,5 +27,12 @@ export interface FormatLedgerAmountOptions {
      * xrpl).
      */
     symbol?: string | false;
+    /**
+     * Authoritative decimal places for this ledger's native unit (e.g. from the
+     * SDK registry's `getNativeDecimals`). When provided it OVERRIDES the built-in
+     * display-default map, so any ledger — including ones not bundled here — formats
+     * correctly. Omit to fall back to the display-only default for known chains.
+     */
+    decimals?: number;
 }
-export declare function formatLedgerAmount(rawBaseUnits: number | bigint, ledgerId: LedgerId, options?: FormatLedgerAmountOptions): string;
+export declare function formatLedgerAmount(rawBaseUnits: number | bigint, ledgerId: LedgerId | (string & {}), options?: FormatLedgerAmountOptions): string;

package/dist/lib/utils/format-ledger-amount.js

@@ -7,6 +7,10 @@
  * This file is part of HSuite Native Connect. For commercial licensing,
  * visit https://hsuite.finance/licensing
  */
+// Display-only last-resort decimals. The authoritative value is the adapter
+// manifest's nativeDecimals (SDK registry); money-adjacent callers SHOULD pass
+// it explicitly via options.decimals. This map only covers the bundled chains
+// so the formatter still renders something sane when no override is supplied.
 const DECIMALS = { hedera: 8, xrpl: 6 };
 const DEFAULT_SYMBOL = { hedera: 'ℏ', xrpl: 'XRP' };
 /**
@@ -21,11 +25,18 @@ function bigintToFixedString(abs, decimals) {
     return `${whole}.${frac.toString().padStart(decimals, '0')}`;
 }
 export function formatLedgerAmount(rawBaseUnits, ledgerId, options = {}) {
-    if (!(ledgerId in DECIMALS)) {
-        throw new Error(`formatLedgerAmount: unknown ledgerId "${ledgerId}"`);
+    // Authoritative override wins; otherwise fall back to the display-only default.
+    const decimals = options.decimals ?? DECIMALS[ledgerId];
+    // Unknown ledger with no explicit decimals — or an out-of-range override — cannot
+    // be scaled safely. Return the display "unavailable" sentinel rather than NaN or a
+    // thrown error: this is a display path (≠ money path), so it must stay lenient. The
+    // upper bound of 100 keeps `decimals` inside `Number.prototype.toFixed`'s legal
+    // range and prevents a pathological `10n ** BigInt(decimals)` from hanging the
+    // render — no real ledger exceeds ~18 native decimals.
+    if (decimals === undefined || !Number.isInteger(decimals) || decimals < 0 || decimals > 100) {
+        return '—';
     }
-    const decimals = DECIMALS[ledgerId];
-    const symbol = options.symbol === false ? '' : (options.symbol ?? DEFAULT_SYMBOL[ledgerId]);
+    const symbol = options.symbol === false ? '' : (options.symbol ?? DEFAULT_SYMBOL[ledgerId] ?? '');
     const suffix = symbol ? ` ${symbol}` : '';
     // Build the signed magnitude string. Bigint stays in bigint space so XRPL
     // total-supply-sized amounts (>2^53 drops) format exactly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsuite/native-connect-ui",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "@angular/core": "^20.3.16",
     "@angular/forms": "^20.3.16",
     "@angular/router": "^20.3.16",
-    "@hsuite/native-connect-types": "^2.1.0",
+    "@hsuite/native-connect-types": "^2.1.1",
     "@ionic/angular": "^8.0.0",
     "@ngneat/transloco": "^6.0.0",
     "animejs": "^3.2.2",

package/src/lib/atoms/hs-transfer-item/hs-transfer-item.component.ts

@@ -17,8 +17,10 @@
 import { Component, Input, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslocoModule } from '@ngneat/transloco';
+import { LedgerIds } from '@hsuite/native-connect-types';
 import { copyToClipboard } from '../../utils/clipboard';
 import { getUILogger } from '../../utils/ui-logger';
+import { formatLedgerAmount } from '../../utils/format-ledger-amount';
 
 const logger = getUILogger('HsTransferItem');
 import { IonicModule } from '@ionic/angular';
@@ -93,9 +95,13 @@ export class HsTransferItemComponent {
     const numAmount = parseFloat(this.amount);
     if (isNaN(numAmount)) return this.amount;
 
-    // For HBAR, convert from tinybars
+    // For HBAR, render via the canonical formatter (display decimals + trailing-
+    // zero trim); the symbol is shown separately by typeLabel, so omit the suffix.
     if (this.type === 'hbar') {
-      return (numAmount / 100000000).toFixed(8).replace(/\.?0+$/, '');
+      // HBAR is intrinsically Hedera's native unit, so the ledger is known at
+      // compile time here — expressed via the well-known-id constant rather
+      // than a bare 'hedera' literal (typo-safe, coherent with other sites).
+      return formatLedgerAmount(numAmount, LedgerIds.Hedera, { symbol: false });
     }
 
     // For tokens, use provided decimals

package/src/lib/organisms/hs-transaction-detail/hs-transaction-detail.component.ts

@@ -23,6 +23,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { IonIcon } from '@ionic/angular/standalone';
 import { TranslocoModule } from '@ngneat/transloco';
+import { formatLedgerAmount } from '../../utils/format-ledger-amount';
 import { addIcons } from 'ionicons';
 import {
   chevronDown,
@@ -433,17 +434,12 @@ export class HsTransactionDetailComponent implements OnInit, OnChanges {
   }
 
   formatNativeAmount(amount: number): string {
-    const divisor = this.ledgerId === 'hedera' ? 100000000 : 1000000; // tinybars or drops
-    const value = amount / divisor;
-
-    // Always show at least 2 decimals, up to 8 for small amounts
-    if (Math.abs(value) < 0.01) {
-      return `${value.toFixed(8)} ${this.currency}`;
-    } else if (Math.abs(value) < 1) {
-      return `${value.toFixed(6)} ${this.currency}`;
-    } else {
-      return `${value.toFixed(4)} ${this.currency}`;
-    }
+    // Canonical formatter (decimals via the bundled-chain display map,
+    // trailing-zero trim, NaN/Infinity safety) replaces the previous hardcoded
+    // `ledgerId === 'hedera' ? 1e8 : 1e6` divisor + bespoke precision buckets.
+    // Display path — formatLedgerAmount stays lenient (returns '—' on an
+    // unknown ledger) and never throws.
+    return formatLedgerAmount(amount, this.ledgerId, { symbol: this.currency });
   }
 
   formatTokenAmount(amount: number, decimals: number = 0): string {

package/src/lib/organisms/hs-transaction-detail-modal/hs-transaction-detail-modal.component.html

@@ -267,7 +267,12 @@
 <!-- Footer with Explorer Action -->
 <ion-footer class="tx-modal-footer">
   <ion-toolbar>
-    <ion-button expand="block" fill="outline" (click)="onExplorerClick()" *ngIf="transactionId">
+    <ion-button
+      expand="block"
+      fill="outline"
+      (click)="onExplorerClick()"
+      *ngIf="transactionId && onExplorer"
+    >
       <ion-icon slot="start" name="open-outline"></ion-icon>
       View in Explorer
     </ion-button>

package/src/lib/organisms/hs-transaction-detail-modal/hs-transaction-detail-modal.component.spec.ts

@@ -174,4 +174,30 @@ describe('HsTransactionDetailModalComponent', () => {
       expect(component.showRiskBanner).toBe(false);
     });
   });
+
+  describe('onExplorerClick', () => {
+    it('delegates to the onExplorer callback with the transaction id (no hardcoded network)', () => {
+      const onExplorer = vi.fn();
+      const openSpy = vi.spyOn(window, 'open').mockReturnValue(null);
+      component.transactionId = '0.0.55@1700000000.000000000';
+      component.ledgerId = 'hedera';
+      component.onExplorer = onExplorer;
+
+      component.onExplorerClick();
+
+      // The modal must delegate to the host (which builds the network-aware
+      // URL), not open a hardcoded-testnet link itself.
+      expect(onExplorer).toHaveBeenCalledWith('0.0.55@1700000000.000000000');
+      expect(openSpy).not.toHaveBeenCalled();
+      openSpy.mockRestore();
+    });
+
+    it('does nothing when no onExplorer handler is provided', () => {
+      component.transactionId = '0.0.55@1700000000.000000000';
+      component.ledgerId = 'hedera';
+      component.onExplorer = undefined;
+
+      expect(() => component.onExplorerClick()).not.toThrow();
+    });
+  });
 });

package/src/lib/organisms/hs-transaction-detail-modal/hs-transaction-detail-modal.component.ts

@@ -19,6 +19,8 @@ import {
   OnDestroy,
   ElementRef,
   HostListener,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import {
@@ -87,6 +89,76 @@ import {
 } from '../../molecules/hs-risk-card/hs-risk-card.component';
 import { formatLedgerAmount, type LedgerId } from '../../utils/format-ledger-amount';
 
+/**
+ * @interface TransactionDetailData
+ * Canonical, read-only data shape for the transaction detail surface. It is the
+ * single source of truth shared by {@link HsTransactionDetailModalComponent}
+ * (which `implements` it, so the component is guaranteed to expose every field)
+ * and by host services/wrappers that drive it. Keeping one type prevents the
+ * field-drift that silently drops data when the component and its host disagree.
+ */
+export interface TransactionDetailData {
+  /** Transaction ID/hash */
+  transactionId: string;
+  /** Display name for the transaction type */
+  transactionName: string;
+  /** Transaction type for icon selection */
+  transactionType: string;
+  /** Custom icon override */
+  transactionIcon?: string;
+  /** Ledger identifier */
+  ledgerId: 'hedera' | 'xrpl';
+  /** Transaction status */
+  status?: string;
+  /** Transaction timestamp */
+  timestamp?: number;
+  /** Main amount in smallest units (tinybars/drops) */
+  mainAmount?: number;
+  /** Currency symbol */
+  currency?: string;
+  /** Native currency transfers */
+  nativeTransfers?: Array<{ account: string; amount: number; label?: string }>;
+  /** Token transfers */
+  tokenTransfers?: Array<{ token_id: string; account: string; amount: number; decimals?: number }>;
+  /** NFT transfers */
+  nftTransfers?: Array<{
+    token_id: string;
+    sender_account_id: string;
+    receiver_account_id: string;
+    serial_number: number;
+  }>;
+  /** Transaction fee in smallest units */
+  transactionFee?: number;
+  /** Transaction memo */
+  memo?: string;
+  /** XRPL source account */
+  sourceAccount?: string;
+  /** XRPL destination account */
+  destinationAccount?: string;
+  /** XRPL memos */
+  xrplMemos?: Array<{ data?: string; type?: string; format?: string }>;
+  /** User's own account addresses for highlighting */
+  userAccounts?: string[];
+  /** Token metadata for symbol/name resolution */
+  tokenMetadataMap?: Map<string, { name?: string; symbol?: string; decimals?: number }>;
+  /** Contact resolver function */
+  contactResolver?: (address: string, ledgerId: string) => string | null;
+  /**
+   * Host handler for the "View in Explorer" action. The component is
+   * presentational and delegates the click here; the host builds the
+   * network-aware URL and opens it. When omitted, the button is hidden.
+   */
+  onExplorer?: (txId: string) => void;
+  /** Scam / suspicious-transaction risk level for this transaction. */
+  riskLevel?: RiskLevel;
+  /** Pre-translated risk factors shown in the banner (empty = none). */
+  riskFactors?: RiskFactorInput[];
+  /** Pre-translated recommendation line shown under the factors. */
+  riskRecommendation?: string | null;
+  /** Banner title (already localized, e.g. the high/medium badge label). */
+  riskTitle?: string;
+}
+
 /**
  * @component HsTransactionDetailModalComponent
  * Modal component for displaying comprehensive transaction details.
@@ -119,7 +191,9 @@ import { formatLedgerAmount, type LedgerId } from '../../utils/format-ledger-amo
   styleUrls: ['./hs-transaction-detail-modal.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HsTransactionDetailModalComponent implements AfterViewInit, OnDestroy {
+export class HsTransactionDetailModalComponent
+  implements AfterViewInit, OnDestroy, TransactionDetailData
+{
   /**
    * Hedera system accounts that must NEVER appear in the Native Transfers
    * section of the UI. Union of node-fee accounts (0.0.3..0.0.34) and the
@@ -180,6 +254,15 @@ export class HsTransactionDetailModalComponent implements AfterViewInit, OnDestr
   // Contact resolver
   @Input() contactResolver?: (address: string, ledgerId: string) => string | null;
 
+  /**
+   * Host-provided handler for the "View in Explorer" action. The modal is a
+   * presentational component and must NOT know explorer domains or networks, so
+   * it delegates: the host builds the network-aware URL (mainnet vs testnet) and
+   * opens it via its SOC2-safe external-URL service. Called with the tx id/hash.
+   * When omitted, the "View in Explorer" button is hidden.
+   */
+  @Input() onExplorer?: (txId: string) => void;
+
   @Input() maxDisplayedTransfers = 10;
 
   // Scam / suspicious-transaction risk assessment.
@@ -193,6 +276,14 @@ export class HsTransactionDetailModalComponent implements AfterViewInit, OnDestr
   @Input() riskRecommendation?: string | null;
   @Input() riskTitle = 'Risk assessment';
 
+  /**
+   * Emitted when the user requests to close this view. When a host binds this
+   * output (e.g. a drawer wrapper), it takes over closing and the component
+   * does NOT call ModalController — keeping the component container-agnostic.
+   * Unbound (the legacy modal path), `dismiss()` falls back to ModalController.
+   */
+  @Output() closeRequested = new EventEmitter<void>();
+
   /**
    * Whether to render the scam-risk banner. Only medium/high verdicts surface a
    * banner; `'low'`/absent stays silent so benign transactions are visually
@@ -652,23 +743,19 @@ export class HsTransactionDetailModalComponent implements AfterViewInit, OnDestr
   }
 
   async dismiss(): Promise<void> {
+    // Container-agnostic close: if a host (e.g. drawer) listens, let it close;
+    // otherwise fall back to the Ionic modal path (legacy callers).
+    if (this.closeRequested.observed) {
+      this.closeRequested.emit();
+      return;
+    }
     await this.modalController.dismiss(null, 'cancel');
   }
 
   onExplorerClick(): void {
-    const txId = this.transactionId || '';
-    let explorerUrl = '';
-
-    if (this.ledgerId === 'hedera') {
-      // Default to testnet, could be enhanced with networkId input
-      explorerUrl = `https://hashscan.io/testnet/transaction/${txId}`;
-    } else if (this.ledgerId === 'xrpl') {
-      explorerUrl = `https://testnet.xrpl.org/transactions/${txId}`;
-    }
-
-    if (explorerUrl) {
-      // §29.8 SOC2 CC6.1: noopener,noreferrer blocks reverse-tabnabbing.
-      window.open(explorerUrl, '_blank', 'noopener,noreferrer');
-    }
+    if (!this.transactionId) return;
+    // Delegate to the host: it knows the network and opens the link through its
+    // SOC2-safe external-URL service. The modal never hardcodes a network.
+    this.onExplorer?.(this.transactionId);
   }
 }

package/src/lib/utils/format-ledger-amount.spec.ts

@@ -86,8 +86,41 @@ describe('formatLedgerAmount', () => {
     expect(formatLedgerAmount(NaN, 'hedera', { symbol: false })).toBe('?');
   });
 
-  it('unknown ledgerId throws with descriptive message', () => {
-    expect(() => formatLedgerAmount(1, 'hbar' as unknown as LedgerId)).toThrow(/unknown ledgerId/);
+  it('unknown ledgerId without decimals returns the — sentinel (no throw, no NaN)', () => {
+    const out = formatLedgerAmount(1, 'hbar' as LedgerId);
+    expect(out).toBe('—');
+    expect(out).not.toMatch(/NaN/);
+  });
+
+  it('explicit decimals override formats an unknown ledger correctly', () => {
+    expect(
+      formatLedgerAmount(1_500_000_000n, 'solana' as LedgerId, { decimals: 9, symbol: 'SOL' }),
+    ).toBe('1.5 SOL');
+  });
+
+  it('explicit decimals override beats the built-in default for a known ledger', () => {
+    expect(formatLedgerAmount(1000n, 'hedera', { decimals: 3, symbol: false })).toBe('1');
+  });
+
+  it('invalid explicit decimals (negative) returns — sentinel without throwing', () => {
+    expect(formatLedgerAmount(100n, 'hedera', { decimals: -1 })).toBe('—');
+  });
+
+  it('invalid explicit decimals (non-integer) returns — sentinel without throwing', () => {
+    expect(formatLedgerAmount(100n, 'hedera', { decimals: 1.5 })).toBe('—');
+  });
+
+  it('decimals:0 formats whole units (valid — must NOT hit the sentinel)', () => {
+    expect(formatLedgerAmount(1500n, 'solana' as LedgerId, { decimals: 0, symbol: 'TOKEN' })).toBe(
+      '1500 TOKEN',
+    );
+  });
+
+  it('out-of-range decimals (>100) returns — sentinel without throwing or hanging', () => {
+    // .toFixed(>100) throws RangeError and 10n ** BigInt(1e9) would hang the render;
+    // the upper-bound guard must turn both into the lenient sentinel instead.
+    expect(formatLedgerAmount(100, 'hedera', { decimals: 1e9 })).toBe('—');
+    expect(formatLedgerAmount(100n, 'hedera', { decimals: 1e9 })).toBe('—');
   });
 
   it('xrpl with custom symbol override and signed', () => {

package/src/lib/utils/format-ledger-amount.ts

@@ -9,12 +9,14 @@
  */
 
 /**
- * @file Canonical formatter for HBAR / XRP rendering across the wallet UI.
+ * @file Canonical formatter for native-unit amounts across the wallet UI
+ * (HBAR, XRP, and any SDK-registered ledger when its decimals are supplied).
  *
  * Callers MUST pass raw base units — tinybars for Hedera, drops for XRPL.
  * Handles `bigint` exactly (no precision loss above `Number.MAX_SAFE_INTEGER`)
  * and returns a safe placeholder for `NaN` / `Infinity` so a malformed input
- * cannot leak literal "NaN" text into the UI.
+ * cannot leak literal "NaN" text into the UI. Returns the `—` sentinel for an
+ * unknown ledger when no `decimals` override is supplied via options.
  */
 
 export type LedgerId = 'hedera' | 'xrpl';
@@ -28,10 +30,21 @@ export interface FormatLedgerAmountOptions {
    * xrpl).
    */
   symbol?: string | false;
+  /**
+   * Authoritative decimal places for this ledger's native unit (e.g. from the
+   * SDK registry's `getNativeDecimals`). When provided it OVERRIDES the built-in
+   * display-default map, so any ledger — including ones not bundled here — formats
+   * correctly. Omit to fall back to the display-only default for known chains.
+   */
+  decimals?: number;
 }
 
-const DECIMALS: Record<LedgerId, number> = { hedera: 8, xrpl: 6 };
-const DEFAULT_SYMBOL: Record<LedgerId, string> = { hedera: 'ℏ', xrpl: 'XRP' };
+// Display-only last-resort decimals. The authoritative value is the adapter
+// manifest's nativeDecimals (SDK registry); money-adjacent callers SHOULD pass
+// it explicitly via options.decimals. This map only covers the bundled chains
+// so the formatter still renders something sane when no override is supplied.
+const DECIMALS: Record<string, number> = { hedera: 8, xrpl: 6 };
+const DEFAULT_SYMBOL: Record<string, string> = { hedera: 'ℏ', xrpl: 'XRP' };
 
 /**
  * Convert a non-negative bigint to a fixed-decimal string without losing
@@ -47,15 +60,23 @@ function bigintToFixedString(abs: bigint, decimals: number): string {
 
 export function formatLedgerAmount(
   rawBaseUnits: number | bigint,
-  ledgerId: LedgerId,
+  ledgerId: LedgerId | (string & {}),
   options: FormatLedgerAmountOptions = {},
 ): string {
-  if (!(ledgerId in DECIMALS)) {
-    throw new Error(`formatLedgerAmount: unknown ledgerId "${ledgerId}"`);
+  // Authoritative override wins; otherwise fall back to the display-only default.
+  const decimals = options.decimals ?? DECIMALS[ledgerId];
+
+  // Unknown ledger with no explicit decimals — or an out-of-range override — cannot
+  // be scaled safely. Return the display "unavailable" sentinel rather than NaN or a
+  // thrown error: this is a display path (≠ money path), so it must stay lenient. The
+  // upper bound of 100 keeps `decimals` inside `Number.prototype.toFixed`'s legal
+  // range and prevents a pathological `10n ** BigInt(decimals)` from hanging the
+  // render — no real ledger exceeds ~18 native decimals.
+  if (decimals === undefined || !Number.isInteger(decimals) || decimals < 0 || decimals > 100) {
+    return '—';
   }
 
-  const decimals = DECIMALS[ledgerId];
-  const symbol = options.symbol === false ? '' : (options.symbol ?? DEFAULT_SYMBOL[ledgerId]);
+  const symbol = options.symbol === false ? '' : (options.symbol ?? DEFAULT_SYMBOL[ledgerId] ?? '');
   const suffix = symbol ? ` ${symbol}` : '';
 
   // Build the signed magnitude string. Bigint stays in bigint space so XRPL