@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-session-display/wallet-session-display.component.html

@@ -0,0 +1,110 @@
+<ion-card *ngIf="session()" class="session-card">
+  <ion-card-header>
+    <ion-card-title>
+      <ion-icon name="link-outline" class="title-icon"></ion-icon>
+      Active Session
+    </ion-card-title>
+  </ion-card-header>
+
+  <ion-card-content>
+    <ion-list lines="none">
+      <!-- Session ID -->
+      <ion-item>
+        <ion-icon name="fingerprint-outline" slot="start" color="primary"></ion-icon>
+        <ion-label>
+          <p>Session ID</p>
+          <ion-text class="session-id">
+            {{ formatAddress(session()!.sessionId) }}
+          </ion-text>
+        </ion-label>
+      </ion-item>
+
+      <!-- Transport Status -->
+      <ion-item *ngIf="transportState() !== 'idle'">
+        <ion-icon [name]="getTransportDisplay().icon" slot="start" [color]="getTransportDisplay().color"></ion-icon>
+        <ion-label>
+          <p>Transport</p>
+          <div class="badges">
+            <ion-badge [color]="getTransportDisplay().color">{{ getTransportDisplay().label }}</ion-badge>
+          </div>
+        </ion-label>
+      </ion-item>
+      
+      <!-- Ledger & Network -->
+      <ion-item>
+        <ion-icon name="globe-outline" slot="start" color="primary"></ion-icon>
+        <ion-label>
+          <p>Network</p>
+          <div class="badges">
+            <ion-badge color="success">{{ session()!.ledgerId }}</ion-badge>
+            <ion-badge>{{ session()!.networkId }}</ion-badge>
+          </div>
+        </ion-label>
+      </ion-item>
+
+      <!-- dApp Info -->
+      <ion-item *ngIf="session()!.appName || session()!.appId">
+        <ion-icon name="globe-outline" slot="start" color="secondary"></ion-icon>
+        <ion-label>
+          <p>dApp</p>
+          <ion-text>
+            <strong>{{ session()!.appName || session()!.appId }}</strong>
+          </ion-text>
+        </ion-label>
+      </ion-item>
+
+      <!-- Connected Accounts -->
+      <ion-item *ngIf="session()?.accounts && session()!.accounts!.length > 0" class="accounts-section">
+        <ion-icon name="person-outline" slot="start" color="tertiary"></ion-icon>
+        <ion-label>
+          <p>Connected Accounts ({{ session()!.accounts!.length }})</p>
+          <div class="account-list">
+            <div *ngFor="let account of session()!.accounts" class="account-item">
+              <ion-text class="account-address">
+                {{ formatAddress(account.address || '') }}
+              </ion-text>
+              <div class="account-badges">
+                <ion-badge color="tertiary" size="small">{{ account.ledgerId }}</ion-badge>
+                <ion-badge size="small">{{ account.networkId }}</ion-badge>
+              </div>
+            </div>
+          </div>
+        </ion-label>
+      </ion-item>
+
+      <!-- Timestamps -->
+      <ng-container *ngIf="showTimestamps && hasCreatedAt()">
+        <ion-item>
+          <ion-icon name="time-outline" slot="start"></ion-icon>
+          <ion-label>
+            <p>Created</p>
+            <ion-text class="timestamp">
+              {{ getCreatedAtFormatted() }}
+            </ion-text>
+          </ion-label>
+        </ion-item>
+      </ng-container>
+
+      <!-- Metadata -->
+      <ng-container *ngIf="showMetadata && session()!.metadata">
+        <ion-item>
+          <ion-label>
+            <p>Metadata</p>
+            <ion-text class="metadata-json">
+              <code>{{ session()!.metadata | json }}</code>
+            </ion-text>
+          </ion-label>
+        </ion-item>
+      </ng-container>
+    </ion-list>
+  </ion-card-content>
+</ion-card>
+
+<ion-card *ngIf="!session()" class="no-session-card">
+  <ion-card-content>
+    <ion-text>
+      <p class="text-center">No active session</p>
+    </ion-text>
+  </ion-card-content>
+</ion-card>
+

package/src/lib/components/wallet-session-display/wallet-session-display.component.scss

@@ -0,0 +1,179 @@
+/**
+ * @component WalletSessionDisplay
+ * @compodoc
+ * Theme-aware session display component
+ */
+
+.session-card,
+.no-session-card {
+  margin: 0;
+  background: var(--wallet-session-bg, var(--surface-flat, rgba(var(--ion-color-light-rgb), 0.05)));
+  border: var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), 0.1)));
+  border-radius: var(--wallet-session-radius, var(--border-radius-lg, 12px));
+  box-shadow: var(--wallet-session-shadow, var(--shadow-md));
+  animation: fadeIn var(--wallet-transition-slow, var(--duration-slow, 0.3s)) ease;
+}
+
+.title-icon {
+  font-size: 1.25em;
+  vertical-align: middle;
+  margin-right: var(--wallet-spacing-xs, var(--space-xs, 4px));
+  color: var(--ion-color-primary);
+  transition: transform var(--wallet-transition-fast, var(--duration-fast, 0.15s)) ease;
+  display: inline-block;
+}
+
+.session-card:hover .title-icon {
+  transform: scale(1.1) rotate(10deg);
+}
+
+.session-id {
+  font-family: var(--wallet-account-font-family, var(--font-family-mono, monospace));
+  font-size: var(--wallet-font-size-sm, var(--font-size-sm, 13px));
+  font-weight: var(--wallet-font-weight-medium, var(--font-weight-medium, 500));
+  color: var(--wallet-session-text-primary, var(--ion-text-color));
+  line-height: var(--wallet-line-height-normal, var(--line-height-normal, 1.4));
+  word-break: break-all;
+}
+
+.badges {
+  display: flex;
+  gap: var(--wallet-spacing-xs, var(--space-xs, 4px));
+  flex-wrap: wrap;
+  margin-top: var(--wallet-spacing-xs, var(--space-xs, 4px));
+}
+
+
+.accounts-section {
+  --inner-padding-top: var(--wallet-spacing-md, 12px);
+  --inner-padding-bottom: var(--wallet-spacing-md, 12px);
+}
+
+.account-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-spacing-sm, 8px);
+  margin-top: var(--wallet-spacing-sm, 8px);
+}
+
+.account-item {
+  padding: var(--wallet-spacing-md, 8px);
+  background: var(--wallet-account-bg, rgba(var(--ion-color-tertiary-rgb), 0.1));
+  border-radius: var(--wallet-account-radius, 8px);
+  border-left: var(--wallet-account-border-left, 3px solid var(--ion-color-tertiary));
+  display: flex;
+  flex-direction: column;
+  gap: var(--wallet-spacing-xs, 4px);
+  transition: all var(--wallet-transition-normal, 0.2s) ease;
+  
+  &:hover {
+    background: var(--wallet-account-bg-hover, rgba(var(--ion-color-tertiary-rgb), 0.15));
+    transform: translateX(4px);
+    box-shadow: var(--wallet-shadow-sm, var(--shadow-sm));
+  }
+  
+  &:active {
+    transform: translateX(2px);
+  }
+  
+  .account-address {
+    font-family: var(--wallet-account-font-family, monospace);
+    font-size: var(--wallet-font-size-sm, 13px);
+    font-weight: var(--wallet-font-weight-medium, 500);
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+    line-height: var(--wallet-line-height-normal, 1.4);
+    word-break: break-all;
+  }
+  
+  .account-badges {
+    display: flex;
+    gap: var(--wallet-spacing-xs, 4px);
+    flex-wrap: wrap;
+  }
+  
+}
+
+.timestamp {
+  font-size: var(--wallet-font-size-xs, 12px);
+  color: var(--wallet-session-text-secondary, var(--ion-color-medium));
+  display: block;
+  margin-top: var(--wallet-spacing-xs, 4px);
+  line-height: var(--wallet-line-height-normal, 1.4);
+}
+
+.metadata-json {
+  display: block;
+  font-family: var(--wallet-account-font-family, monospace);
+  font-size: var(--wallet-font-size-xs, 12px);
+  background: var(--wallet-status-section-bg, rgba(var(--ion-color-medium-rgb), 0.05));
+  padding: var(--wallet-spacing-md, 8px);
+  border-radius: var(--wallet-account-radius, 6px);
+  margin-top: var(--wallet-spacing-xs, 4px);
+  overflow-x: auto;
+  line-height: var(--wallet-line-height-relaxed, 1.6);
+  border: 1px solid var(--wallet-session-border, rgba(var(--ion-color-light-rgb), 0.1));
+  
+  code {
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: var(--wallet-session-text-primary, var(--ion-text-color));
+  }
+  
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(var(--ion-color-light-rgb), 0.05);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(var(--ion-color-light-rgb), 0.2);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(var(--ion-color-light-rgb), 0.3);
+    }
+  }
+}
+
+.no-session-card {
+  background: rgba(var(--ion-color-medium-rgb), 0.05);
+  border: 1px dashed rgba(var(--ion-color-medium-rgb), 0.3);
+  
+  .text-center {
+    text-align: center;
+    margin: var(--wallet-spacing-lg, 16px) 0;
+    color: var(--wallet-session-text-secondary, var(--ion-color-medium));
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  @keyframes fadeIn {
+    from, to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

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

@@ -0,0 +1,197 @@
+/**
+ * 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
+ */
+
+import { Component, Input, inject, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonText,
+  IonBadge,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  timeOutline,
+  linkOutline,
+  personOutline,
+  globeOutline,
+  fingerPrintOutline,
+  wifiOutline,
+  cloudOutline,
+  flashOutline,
+  syncOutline,
+  closeCircleOutline,
+} from 'ionicons/icons';
+import { UnifiedWalletService } from '../../services/unified-wallet.service';
+
+/**
+ * @component WalletSessionDisplayComponent
+ * Displays detailed session information for connected wallet.
+ *
+ * **Features:**
+ * - Session ID and timestamps
+ * - Connected accounts list
+ * - Ledger and network information
+ * - dApp metadata
+ * - Theme-aware styling
+ *
+ * **Usage:**
+ * Uses UnifiedWalletService for multi-protocol support (HSuite Native + WalletConnect).
+ */
+@Component({
+  selector: 'wallet-session-display',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonText,
+    IonBadge,
+    IonIcon,
+  ],
+  templateUrl: './wallet-session-display.component.html',
+  styleUrls: ['./wallet-session-display.component.scss'],
+})
+export class WalletSessionDisplayComponent {
+  /**
+   * Whether to show session metadata
+   * @default false
+   */
+  @Input() showMetadata = false;
+
+  /**
+   * Whether to show timestamps
+   * @default false
+   */
+  @Input() showTimestamps = false;
+
+  /**
+   * Whether to show full addresses (not truncated)
+   * @default false
+   */
+  @Input() showFullAddresses = false;
+
+  protected readonly wallet = inject(UnifiedWalletService);
+
+  /**
+   * Get session from UnifiedWalletService (supports all protocols)
+   */
+  protected readonly session = computed(() => {
+    const activeAccount = this.wallet.activeAccount();
+
+    if (!activeAccount) {
+      return null;
+    }
+
+    // Create session display data from active account
+    return {
+      sessionId: activeAccount.id,
+      accounts: [
+        {
+          address: activeAccount.address,
+          ledgerId: activeAccount.ledgerId,
+          networkId: activeAccount.networkId,
+          label: activeAccount.label,
+          publicKey: (activeAccount.metadata as any)?.publicKey,
+        },
+      ],
+      ledgerId: activeAccount.ledgerId,
+      networkId: activeAccount.networkId,
+      metadata: {
+        createdAt: Date.now(),
+        providerType: activeAccount.providerType,
+      },
+    } as any;
+  });
+
+  /**
+   * Transport state for the connection (nostr-only, upgrading, p2p-connected, etc.)
+   */
+  readonly transportState = computed(() => this.wallet.transportState());
+
+  constructor() {
+    addIcons({
+      timeOutline,
+      linkOutline,
+      personOutline,
+      globeOutline,
+      fingerPrintOutline,
+      wifiOutline,
+      cloudOutline,
+      flashOutline,
+      syncOutline,
+      closeCircleOutline,
+    });
+  }
+
+  /**
+   * Get transport state display info (icon, color, label)
+   */
+  getTransportDisplay(): { icon: string; color: string; label: string } {
+    const state = this.transportState();
+    switch (state) {
+      case 'nostr-only':
+        return { icon: 'cloud-outline', color: 'warning', label: 'Nostr Relay' };
+      case 'upgrading':
+        return { icon: 'sync-outline', color: 'tertiary', label: 'Upgrading to P2P...' };
+      case 'p2p-connected':
+        return { icon: 'flash-outline', color: 'success', label: 'P2P Connected' };
+      case 'p2p-failed':
+        return { icon: 'close-circle-outline', color: 'danger', label: 'P2P Failed (using Nostr)' };
+      default:
+        return { icon: 'wifi-outline', color: 'medium', label: 'Connecting...' };
+    }
+  }
+
+  /**
+   * Truncate address for display
+   */
+  formatAddress(address: string): string {
+    if (this.showFullAddresses || address.length <= 16) return address;
+    return `${address.substring(0, 8)}...${address.substring(address.length - 6)}`;
+  }
+
+  /**
+   * Format timestamp
+   */
+  formatTimestamp(timestamp: number): string {
+    return new Date(timestamp).toLocaleString();
+  }
+
+  /**
+   * Check if session has createdAt timestamp
+   */
+  hasCreatedAt(): boolean {
+    const sess = this.session();
+    return !!(sess?.metadata && typeof sess.metadata['createdAt'] === 'number');
+  }
+
+  /**
+   * Get formatted createdAt timestamp
+   */
+  getCreatedAtFormatted(): string {
+    const sess = this.session();
+    if (sess?.metadata && typeof sess.metadata['createdAt'] === 'number') {
+      return this.formatTimestamp(sess.metadata['createdAt']);
+    }
+    return '';
+  }
+}

package/src/lib/components/wallet-transaction-status/wallet-transaction-status.component.html

@@ -0,0 +1,65 @@
+<ion-card [class]="'status-card status-' + status">
+  <ion-card-header>
+    <div class="status-header">
+      <ion-spinner *ngIf="status === 'processing' || status === 'pending'" 
+        [name]="'crescent'" 
+        [color]="getStatusConfig().color"
+        class="status-spinner">
+      </ion-spinner>
+      <ion-icon *ngIf="status !== 'processing' && status !== 'pending'" 
+        [name]="getStatusConfig().icon" 
+        [color]="getStatusConfig().color"
+        class="status-icon">
+      </ion-icon>
+      <ion-card-title [color]="getStatusConfig().color">
+        {{ getStatusConfig().title }}
+      </ion-card-title>
+    </div>
+  </ion-card-header>
+
+  <ion-card-content>
+    <!-- Description -->
+    <ion-text class="status-description">
+      <p>{{ getStatusConfig().description }}</p>
+    </ion-text>
+
+    <!-- Transaction ID (for success) -->
+    <div *ngIf="status === 'success' && transactionId" class="transaction-id-section">
+      <ion-text>
+        <p class="section-label">Transaction ID</p>
+        <p class="transaction-id">{{ formatTransactionId(transactionId) }}</p>
+      </ion-text>
+    </div>
+
+    <!-- Error Details (for failed) -->
+    <div *ngIf="status === 'failed' && error" class="error-section">
+      <ion-text color="danger">
+        <p class="section-label">Error Details</p>
+        <p class="error-message">{{ error }}</p>
+      </ion-text>
+    </div>
+
+    <!-- Actions -->
+    <div class="actions" *ngIf="explorerUrl || showRetry">
+      <ion-button
+        *ngIf="explorerUrl && status === 'success'"
+        expand="block"
+        fill="outline"
+        [color]="'primary'"
+        (click)="openExplorer()">
+        <ion-icon name="open-outline" slot="start"></ion-icon>
+        View in Explorer
+      </ion-button>
+
+      <ion-button
+        *ngIf="showRetry && (status === 'failed' || status === 'timeout' || status === 'rejected')"
+        expand="block"
+        [color]="'primary'"
+        (click)="onRetry()">
+        <ion-icon name="refresh-outline" slot="start"></ion-icon>
+        Retry Transaction
+      </ion-button>
+    </div>
+  </ion-card-content>
+</ion-card>
+