@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-connect-prompt/wallet-connect-prompt.component.scss

@@ -0,0 +1,50 @@
+/**
+ * Wallet Connect Prompt Component Styles
+ * @compodoc
+ * Styles for the wallet connect prompt empty state component
+ */
+
+.wallet-connect-prompt {
+  max-width: 600px;
+  margin: var(--space-lg, 24px) auto;
+  text-align: center;
+}
+
+.prompt-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm, 12px);
+}
+
+.prompt-icon {
+  font-size: 48px;
+  color: var(--ion-color-primary);
+}
+
+.prompt-message {
+  margin: var(--space-md, 16px) 0;
+  color: var(--ion-color-medium);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.prompt-button {
+  margin-top: var(--space-md, 16px);
+  
+  ::ng-deep ion-button {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+@media (max-width: 576px) {
+  .wallet-connect-prompt {
+    margin: var(--space-md, 16px);
+  }
+  
+  .prompt-icon {
+    font-size: 36px;
+  }
+}
+

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

@@ -0,0 +1,108 @@
+/**
+ * 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 wallet-connect-prompt.component.ts
+ * @description Beautiful empty state component with connect button
+ *
+ * Pre-built component for showing a professional "connect wallet" prompt.
+ * Eliminates repetitive empty state boilerplate.
+ */
+
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardSubtitle,
+  IonCardContent,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { walletOutline } from 'ionicons/icons';
+import { WalletConnectButtonComponent } from '../wallet-connect-button/wallet-connect-button.component';
+
+/**
+ * Pre-built component for "connect wallet" empty state
+ *
+ * Features:
+ * - Beautiful, professional design
+ * - Integrated connect button
+ * - Customizable message
+ * - Responsive styling
+ * - Optional icon
+ */
+@Component({
+  selector: 'wallet-connect-prompt',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonIcon,
+    WalletConnectButtonComponent,
+  ],
+  templateUrl: './wallet-connect-prompt.component.html',
+  styleUrls: ['./wallet-connect-prompt.component.scss'],
+})
+export class WalletConnectPromptComponent {
+  /**
+   * Main title text
+   */
+  @Input() title = 'Connect Your Wallet';
+
+  /**
+   * Subtitle text (optional)
+   */
+  @Input() subtitle = '';
+
+  /**
+   * Message explaining why connection is needed
+   */
+  @Input() message = 'Connect your wallet to continue';
+
+  /**
+   * Whether to show the wallet icon
+   */
+  @Input() showIcon = true;
+
+  /**
+   * Text for the connect button
+   */
+  @Input() buttonText = 'Connect Wallet';
+
+  /**
+   * Button size
+   */
+  @Input() buttonSize: 'small' | 'default' | 'large' = 'default';
+
+  /**
+   * Button color
+   */
+  @Input() buttonColor = 'primary';
+
+  /**
+   * Card background color
+   */
+  @Input() cardColor: string | undefined = undefined;
+
+  /**
+   * WalletConnect Project ID (optional)
+   */
+  @Input() walletConnectProjectId: string | undefined = undefined;
+
+  constructor() {
+    addIcons({ walletOutline });
+  }
+}

package/src/lib/components/wallet-connected-guard/wallet-connected-guard.component.html

@@ -0,0 +1,24 @@
+<!-- Show content when connected -->
+<ng-container *ngIf="isConnected()">
+  <ng-content></ng-content>
+</ng-container>
+
+<!-- Show empty state when not connected -->
+<ng-container *ngIf="!isConnected()">
+  <!-- Custom empty template if provided -->
+  <ng-container *ngIf="emptyTemplate; else defaultEmpty">
+    <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+  </ng-container>
+  
+  <!-- Default empty state: connect prompt -->
+  <ng-template #defaultEmpty>
+    <wallet-connect-prompt
+      [title]="emptyTitle"
+      [subtitle]="emptySubtitle"
+      [message]="emptyMessage"
+      [showIcon]="showIcon"
+      [walletConnectProjectId]="walletConnectProjectId"
+    />
+  </ng-template>
+</ng-container>
+

package/src/lib/components/wallet-connected-guard/wallet-connected-guard.component.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 wallet-connected-guard.component.ts
+ * @description Component-based guard for wallet connection status
+ *
+ * Alternative to `*walletConnected` directive. Shows content only when connected,
+ * with customizable empty state.
+ */
+
+import { Component, Input, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WalletContextService } from '../../services/wallet-context.service';
+import { WalletConnectPromptComponent } from '../wallet-connect-prompt/wallet-connect-prompt.component';
+
+/**
+ * Component-based guard for wallet connection
+ *
+ * Shows projected content when wallet is connected, otherwise shows
+ * a customizable empty state (default: connect prompt).
+ */
+@Component({
+  selector: 'wallet-connected-guard',
+  standalone: true,
+  imports: [CommonModule, WalletConnectPromptComponent],
+  templateUrl: './wallet-connected-guard.component.html',
+})
+export class WalletConnectedGuardComponent {
+  private readonly contextService = inject(WalletContextService);
+
+  /**
+   * Custom empty state template
+   */
+  @Input() emptyTemplate?: any;
+
+  /**
+   * Title for default empty state
+   */
+  @Input() emptyTitle = 'Connect Your Wallet';
+
+  /**
+   * Subtitle for default empty state
+   */
+  @Input() emptySubtitle = '';
+
+  /**
+   * Message for default empty state
+   */
+  @Input() emptyMessage = 'Please connect your wallet to continue';
+
+  /**
+   * Whether to show icon in default empty state
+   */
+  @Input() showIcon = true;
+
+  /**
+   * WalletConnect Project ID
+   */
+  @Input() walletConnectProjectId: string | undefined = undefined;
+
+  /**
+   * Computed connection status
+   */
+  protected readonly isConnected = computed(() => this.contextService.context().isConnected);
+}

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

@@ -0,0 +1,56 @@
+<!-- Connection Method Step -->
+<div class="connection-method-step">
+  <div class="step-header">
+    <h3 class="step-title">Choose Connection Method</h3>
+    <p class="step-description">Select how you'd like to connect to HSuite Wallet</p>
+  </div>
+
+  <div class="method-list">
+    <button
+      *ngFor="let method of methods; trackBy: trackByMethodId"
+      type="button"
+      class="method-card"
+      [class.selected]="selectedMethod === method.id"
+      [class.recommended]="method.recommended"
+      [class.disabled]="!method.available"
+      [disabled]="!method.available"
+      (click)="selectMethod(method)"
+    >
+      <!-- Recommended badge -->
+      <div class="recommended-badge" *ngIf="method.recommended">
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <span>Recommended</span>
+      </div>
+
+      <!-- Icon -->
+      <div class="method-icon">
+        <ion-icon [name]="method.icon"></ion-icon>
+      </div>
+
+      <!-- Content -->
+      <div class="method-content">
+        <h4 class="method-name">{{ method.name }}</h4>
+        <p class="method-description">{{ method.description }}</p>
+
+        <!-- Features list -->
+        <ul class="method-features" *ngIf="method.features?.length">
+          <li *ngFor="let feature of method.features">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <span>{{ feature }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Not available message -->
+      <div class="not-available" *ngIf="!method.available">
+        <span>Not available</span>
+      </div>
+    </button>
+  </div>
+
+  <!-- Mobile hint -->
+  <p class="mobile-hint" *ngIf="isMobile">
+    <ion-icon name="phone-portrait-outline"></ion-icon>
+    <span>Scan QR code with the HSuite Wallet app on your mobile device</span>
+  </p>
+</div>

package/src/lib/components/wallet-connection-modal/connection-method-step/connection-method-step.component.scss

@@ -0,0 +1,218 @@
+/**
+ * Connection Method Step Styles
+ * Uses unified --token-* and Ionic color system for theme compatibility
+ */
+
+:host {
+  display: block;
+}
+
+.connection-method-step {
+  padding: var(--token-space-4, 16px);
+}
+
+// ========== Header ==========
+
+.step-header {
+  text-align: center;
+  margin-bottom: var(--token-space-6, 24px);
+}
+
+.step-title {
+  margin: 0 0 var(--token-space-2, 8px);
+  font-size: var(--token-font-size-4, 18px);
+  font-weight: var(--token-font-weight-semibold, 600);
+  color: var(--ion-text-color);
+}
+
+.step-description {
+  margin: 0;
+  font-size: var(--token-font-size-2, 14px);
+  color: var(--ion-color-medium);
+}
+
+// ========== Method List ==========
+
+.method-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--token-space-3, 12px);
+}
+
+// ========== Method Card ==========
+
+.method-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--token-space-4, 16px);
+  width: 100%;
+  padding: var(--token-space-4, 16px);
+  background: var(--ion-background-color);
+  border: 2px solid var(--border-flat, var(--token-border-subtle));
+  border-radius: var(--token-radius-3, 12px);
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--token-transition-normal, 0.2s) ease;
+
+  &:hover:not(.disabled) {
+    border-color: var(--ion-color-primary-tint);
+    background: rgba(var(--ion-color-primary-rgb), 0.05);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), 0.2);
+  }
+
+  &.selected {
+    border-color: var(--ion-color-primary);
+    background: rgba(var(--ion-color-primary-rgb), 0.05);
+  }
+
+  &.recommended {
+    border-color: var(--ion-color-success);
+
+    &:hover:not(.disabled) {
+      border-color: var(--ion-color-success);
+      background: rgba(var(--ion-color-success-rgb), 0.05);
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// ========== Recommended Badge ==========
+
+.recommended-badge {
+  position: absolute;
+  top: -10px;
+  right: var(--token-space-4, 16px);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--ion-color-success);
+  color: var(--ion-color-success-contrast);
+  font-size: 11px;
+  font-weight: var(--token-font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: var(--token-radius-full, 9999px);
+
+  ion-icon {
+    font-size: 12px;
+  }
+}
+
+// ========== Method Icon ==========
+
+.method-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background: rgba(var(--ion-color-primary-rgb), 0.1);
+  border-radius: var(--token-radius-2, 8px);
+  color: var(--ion-color-primary);
+
+  ion-icon {
+    font-size: 24px;
+  }
+
+  .recommended & {
+    background: rgba(var(--ion-color-success-rgb), 0.1);
+    color: var(--ion-color-success);
+  }
+}
+
+// ========== Method Content ==========
+
+.method-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.method-name {
+  margin: 0 0 4px;
+  font-size: var(--token-font-size-3, 16px);
+  font-weight: var(--token-font-weight-semibold, 600);
+  color: var(--ion-text-color);
+}
+
+.method-description {
+  margin: 0;
+  font-size: var(--token-font-size-2, 14px);
+  color: var(--ion-color-medium);
+}
+
+// ========== Features List ==========
+
+.method-features {
+  margin: var(--token-space-3, 12px) 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--token-space-2, 8px);
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: var(--token-font-size-1, 12px);
+    color: var(--ion-color-medium);
+
+    ion-icon {
+      font-size: 12px;
+      color: var(--ion-color-success);
+    }
+  }
+}
+
+// ========== Not Available ==========
+
+.not-available {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px 8px;
+  background: rgba(var(--ion-color-warning-rgb), 0.1);
+  color: var(--ion-color-warning);
+  font-size: 11px;
+  font-weight: var(--token-font-weight-medium, 500);
+  border-radius: 0 var(--token-radius-3, 12px) 0 var(--token-radius-2, 6px);
+}
+
+// ========== Mobile Hint ==========
+
+.mobile-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--token-space-2, 8px);
+  margin-top: var(--token-space-6, 24px);
+  padding: var(--token-space-3, 12px);
+  background: rgba(var(--ion-color-primary-rgb), 0.1);
+  border-radius: var(--token-radius-2, 8px);
+  font-size: var(--token-font-size-2, 14px);
+  color: var(--ion-color-primary);
+  text-align: center;
+
+  ion-icon {
+    font-size: 18px;
+  }
+}
+
+// ========== Reduced Motion Support ==========
+
+@media (prefers-reduced-motion: reduce) {
+  .method-card {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,117 @@
+/**
+ * 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 connection-method-step.component.ts
+ * @description Connection method selection step for wallet connection wizard
+ *
+ * Displays connection method options based on platform:
+ * - Desktop: Extension (if available), PWA/Tab, QR Code (mobile)
+ * - Mobile: QR Code recommended
+ *
+ * This step appears after protocol selection when HSuite Native is chosen.
+ */
+
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  extensionPuzzleOutline,
+  openOutline,
+  qrCodeOutline,
+  checkmarkCircle,
+  phonePortraitOutline,
+} from 'ionicons/icons';
+
+/**
+ * Connection method option interface
+ */
+export interface ConnectionMethodOption {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Short description */
+  description: string;
+  /** Ionicon name */
+  icon: string;
+  /** Whether this method is available */
+  available: boolean;
+  /** Whether this method is recommended for current platform */
+  recommended: boolean;
+  /** Optional features list */
+  features?: string[];
+}
+
+/**
+ * Connection Method Step Component
+ *
+ * Allows users to select how they want to connect their wallet:
+ * - Browser Extension: Direct connection via installed extension
+ * - Web Wallet: Opens wallet in new tab/window
+ * - Mobile QR: Displays QR code for mobile wallet scanning
+ */
+@Component({
+  selector: 'hsuite-connection-method-step',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, IonIcon],
+  templateUrl: './connection-method-step.component.html',
+  styleUrls: ['./connection-method-step.component.scss'],
+})
+export class ConnectionMethodStepComponent {
+  /**
+   * Available connection method options
+   */
+  @Input() methods: ConnectionMethodOption[] = [];
+
+  /**
+   * Whether current device is mobile
+   */
+  @Input() isMobile = false;
+
+  /**
+   * Currently selected method ID (for highlighting)
+   */
+  @Input() selectedMethod: string | null = null;
+
+  /**
+   * Emitted when a method is selected
+   */
+  @Output() methodSelected = new EventEmitter<string>();
+
+  constructor() {
+    addIcons({
+      extensionPuzzleOutline,
+      openOutline,
+      qrCodeOutline,
+      checkmarkCircle,
+      phonePortraitOutline,
+    });
+  }
+
+  /**
+   * Handle method selection
+   */
+  selectMethod(method: ConnectionMethodOption): void {
+    if (!method.available) {
+      return;
+    }
+    this.methodSelected.emit(method.id);
+  }
+
+  /**
+   * Track methods by ID for ngFor
+   */
+  trackByMethodId(_index: number, method: ConnectionMethodOption): string {
+    return method.id;
+  }
+}