@hsuite/native-connect-angular 1.0.0

package/examples/minimal-connect.ts

@@ -0,0 +1,178 @@
+/**
+ * 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 minimal-connect.ts
+ * @description Minimal example of connecting to HSuite Wallet using the Angular SDK
+ *
+ * This example demonstrates the simplest way to connect to HSuite Wallet
+ * from an Angular dApp. It shows:
+ * - Injecting the UnifiedWalletService
+ * - Connecting via HSuite Native protocol
+ * - Displaying connected accounts
+ *
+ * Copy this file into your Angular component to get started quickly.
+ */
+
+import { Component, inject, effect } from '@angular/core';
+import { UnifiedWalletService } from '@hsuite/native-connect-angular';
+
+@Component({
+  selector: 'app-minimal-connect',
+  template: `
+    <div class="wallet-demo">
+      <h2>HSuite Wallet Connection</h2>
+
+      <!-- Connection Button -->
+      @if (!isConnected()) {
+        <button (click)="connect()">Connect to HSuite Wallet</button>
+      } @else {
+        <button (click)="disconnect()">Disconnect</button>
+      }
+
+      <!-- Connected Account Display -->
+      @if (activeAccount()) {
+        <div class="account-info">
+          <h3>Connected Account</h3>
+          <p><strong>Address:</strong> {{ activeAccount()?.address }}</p>
+          <p><strong>Network:</strong> {{ activeAccount()?.networkId }}</p>
+          <p><strong>Ledger:</strong> {{ activeAccount()?.ledgerId }}</p>
+        </div>
+      }
+
+      <!-- All Accounts -->
+      @if (allAccounts().length > 1) {
+        <div class="all-accounts">
+          <h3>All Accounts ({{ allAccounts().length }})</h3>
+          @for (account of allAccounts(); track account.address) {
+            <div class="account-item">{{ account.address }} - {{ account.networkId }}</div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .wallet-demo {
+        padding: 20px;
+        max-width: 500px;
+        margin: 0 auto;
+      }
+
+      button {
+        padding: 12px 24px;
+        font-size: 16px;
+        cursor: pointer;
+        background: var(--ion-color-primary, #3880ff);
+        color: white;
+        border: none;
+        border-radius: 8px;
+      }
+
+      button:hover {
+        opacity: 0.9;
+      }
+
+      .account-info,
+      .all-accounts {
+        margin-top: 20px;
+        padding: 16px;
+        background: var(--ion-color-light, #f4f4f4);
+        border-radius: 8px;
+      }
+
+      .account-item {
+        padding: 8px;
+        border-bottom: 1px solid var(--ion-color-medium, #ccc);
+      }
+
+      .account-item:last-child {
+        border-bottom: none;
+      }
+    `,
+  ],
+})
+export class MinimalConnectComponent {
+  // Inject the unified wallet service
+  private readonly wallet = inject(UnifiedWalletService);
+
+  // Expose reactive signals to template
+  readonly isConnected = this.wallet.isConnected;
+  readonly activeAccount = this.wallet.activeAccount;
+  readonly allAccounts = this.wallet.allAccounts;
+
+  constructor() {
+    // Optional: React to connection changes
+    effect(() => {
+      const connected = this.isConnected();
+      console.log('Connection status changed:', connected);
+
+      if (connected) {
+        const account = this.activeAccount();
+        console.log('Connected with account:', account?.address);
+      }
+    });
+  }
+
+  /**
+   * Connect to HSuite Wallet using Native protocol
+   *
+   * The wallet URL should point to your HSuite Wallet instance.
+   * For development, this is typically http://localhost:8100
+   */
+  async connect(): Promise<void> {
+    try {
+      await this.wallet.connectNative({
+        walletUrl: 'http://localhost:8100', // Your wallet URL
+        appId: 'my-dapp', // Unique dApp identifier
+        appName: 'My dApp', // Display name
+        ledgerId: 'hedera', // Ledger: 'hedera' or 'xrpl'
+        networkId: 'hedera:testnet', // Network: testnet, mainnet, etc.
+      });
+
+      console.log('Connected successfully!');
+    } catch (error) {
+      console.error('Connection failed:', error);
+    }
+  }
+
+  /**
+   * Disconnect from wallet
+   */
+  async disconnect(): Promise<void> {
+    try {
+      await this.wallet.disconnect();
+      console.log('Disconnected successfully!');
+    } catch (error) {
+      console.error('Disconnect failed:', error);
+    }
+  }
+}
+
+/**
+ * Module-based apps: Add to your module imports
+ *
+ * @NgModule({
+ *   declarations: [MinimalConnectComponent],
+ *   imports: [CommonModule]
+ * })
+ * export class MyModule {}
+ */
+
+/**
+ * Standalone apps: Import directly
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [MinimalConnectComponent],
+ *   template: '<app-minimal-connect />'
+ * })
+ * export class AppComponent {}
+ */

package/examples/multi-protocol.ts

@@ -0,0 +1,495 @@
+/**
+ * @file multi-protocol.ts
+ * @description Example of using both HSuite Native and WalletConnect protocols
+ *
+ * This example demonstrates:
+ * - Connecting via HSuite Native protocol (direct, fast)
+ * - Connecting via WalletConnect v2 (QR code, interoperable)
+ * - Unified account management across protocols
+ * - Switching between connected providers
+ */
+
+import { Component, inject, signal } from '@angular/core';
+import { UnifiedWalletService, WalletEventBus } from '@hsuite/native-connect-angular';
+
+/**
+ * Connection method selection
+ */
+type ConnectionMethod = 'native' | 'walletconnect' | null;
+
+@Component({
+  selector: 'app-multi-protocol',
+  template: `
+    <div class="protocol-demo">
+      <h2>Connect to Hedera Wallet</h2>
+
+      <!-- Connection Method Selector -->
+      @if (!isConnected()) {
+        <div class="connection-options">
+          <h3>Choose Connection Method</h3>
+
+          <!-- HSuite Native Option -->
+          <button
+            class="connection-option"
+            [class.selected]="selectedMethod() === 'native'"
+            (click)="selectMethod('native')"
+          >
+            <div class="option-icon">🔗</div>
+            <div class="option-info">
+              <h4>HSuite Native</h4>
+              <p>Direct connection to HSuite Wallet</p>
+              <ul>
+                <li>✓ Fastest connection</li>
+                <li>✓ No QR code needed</li>
+                <li>✓ Browser extension support</li>
+              </ul>
+            </div>
+          </button>
+
+          <!-- WalletConnect Option -->
+          <button
+            class="connection-option"
+            [class.selected]="selectedMethod() === 'walletconnect'"
+            (click)="selectMethod('walletconnect')"
+          >
+            <div class="option-icon">📱</div>
+            <div class="option-info">
+              <h4>WalletConnect</h4>
+              <p>Connect with any WalletConnect wallet</p>
+              <ul>
+                <li>✓ Mobile wallet support</li>
+                <li>✓ HashPack, Blade, etc.</li>
+                <li>✓ QR code pairing</li>
+              </ul>
+            </div>
+          </button>
+
+          <!-- Connect Button -->
+          @if (selectedMethod()) {
+            <div class="connect-action">
+              <button class="primary" (click)="connect()" [disabled]="isConnecting()">
+                @if (isConnecting()) {
+                  Connecting...
+                } @else {
+                  Connect with
+                  {{ selectedMethod() === 'native' ? 'HSuite Wallet' : 'WalletConnect' }}
+                }
+              </button>
+            </div>
+          }
+        </div>
+      } @else {
+        <!-- Connected State -->
+        <div class="connected-state">
+          <div class="connection-badge">
+            <span class="protocol-badge">
+              {{ activeProvider() }}
+            </span>
+            Connected
+          </div>
+
+          <!-- Active Account -->
+          <div class="account-card">
+            <h4>Active Account</h4>
+            <p class="address">{{ activeAccount()?.address }}</p>
+            <p class="network">{{ activeAccount()?.networkId }}</p>
+          </div>
+
+          <!-- Account Switcher (if multiple accounts) -->
+          @if (allAccounts().length > 1) {
+            <div class="account-switcher">
+              <h4>Switch Account</h4>
+              @for (account of allAccounts(); track account.address) {
+                <button
+                  class="account-option"
+                  [class.active]="account.address === activeAccount()?.address"
+                  (click)="switchAccount(account.address)"
+                >
+                  {{ account.address }}
+                </button>
+              }
+            </div>
+          }
+
+          <!-- Multiple Providers -->
+          @if (connectedProviders().length > 1) {
+            <div class="provider-switcher">
+              <h4>Connected Providers</h4>
+              @for (provider of connectedProviders(); track provider) {
+                <span class="provider-tag">{{ provider }}</span>
+              }
+            </div>
+          }
+
+          <button class="disconnect" (click)="disconnect()">Disconnect</button>
+        </div>
+      }
+
+      <!-- Events Log -->
+      <div class="events-log">
+        <h3>Recent Events</h3>
+        @for (event of recentEvents(); track $index) {
+          <div class="event-item">
+            <span class="event-type">{{ event.type }}</span>
+            <span class="event-time">{{ event.time }}</span>
+          </div>
+        } @empty {
+          <p class="no-events">No events yet</p>
+        }
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .protocol-demo {
+        padding: 20px;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .connection-options {
+        margin-top: 20px;
+      }
+
+      .connection-option {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+        width: 100%;
+        padding: 16px;
+        margin-bottom: 12px;
+        background: var(--ion-color-light, #f4f4f4);
+        border: 2px solid transparent;
+        border-radius: 12px;
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .connection-option:hover {
+        background: var(--ion-color-light-shade, #e8e8e8);
+      }
+
+      .connection-option.selected {
+        border-color: var(--ion-color-primary, #3880ff);
+        background: var(--ion-color-primary-tint, #e8f0ff);
+      }
+
+      .option-icon {
+        font-size: 32px;
+        line-height: 1;
+      }
+
+      .option-info h4 {
+        margin: 0 0 4px;
+        font-size: 18px;
+      }
+
+      .option-info p {
+        margin: 0 0 8px;
+        color: var(--ion-color-medium, #666);
+      }
+
+      .option-info ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        font-size: 14px;
+        color: var(--ion-color-medium, #666);
+      }
+
+      .option-info li {
+        margin: 2px 0;
+      }
+
+      .connect-action {
+        margin-top: 20px;
+        text-align: center;
+      }
+
+      button.primary {
+        padding: 16px 32px;
+        font-size: 18px;
+        background: var(--ion-color-primary, #3880ff);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+
+      button.primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .connected-state {
+        margin-top: 20px;
+      }
+
+      .connection-badge {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 18px;
+        margin-bottom: 16px;
+      }
+
+      .protocol-badge {
+        padding: 4px 12px;
+        background: var(--ion-color-success, green);
+        color: white;
+        border-radius: 4px;
+        font-size: 12px;
+        text-transform: uppercase;
+      }
+
+      .account-card {
+        padding: 16px;
+        background: var(--ion-color-light, #f4f4f4);
+        border-radius: 12px;
+        margin-bottom: 16px;
+      }
+
+      .account-card h4 {
+        margin: 0 0 8px;
+        font-size: 14px;
+        color: var(--ion-color-medium, #666);
+      }
+
+      .account-card .address {
+        margin: 0;
+        font-family: monospace;
+        font-size: 16px;
+        word-break: break-all;
+      }
+
+      .account-card .network {
+        margin: 4px 0 0;
+        font-size: 14px;
+        color: var(--ion-color-medium, #666);
+      }
+
+      .account-switcher,
+      .provider-switcher {
+        margin-bottom: 16px;
+      }
+
+      .account-option {
+        display: block;
+        width: 100%;
+        padding: 12px;
+        margin-bottom: 8px;
+        background: var(--ion-color-light, #f4f4f4);
+        border: 1px solid transparent;
+        border-radius: 8px;
+        text-align: left;
+        font-family: monospace;
+        cursor: pointer;
+      }
+
+      .account-option.active {
+        border-color: var(--ion-color-primary, #3880ff);
+        background: var(--ion-color-primary-tint, #e8f0ff);
+      }
+
+      .provider-tag {
+        display: inline-block;
+        padding: 4px 12px;
+        margin-right: 8px;
+        background: var(--ion-color-tertiary, #7044ff);
+        color: white;
+        border-radius: 16px;
+        font-size: 12px;
+      }
+
+      button.disconnect {
+        width: 100%;
+        padding: 12px;
+        background: var(--ion-color-danger, #eb445a);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+
+      .events-log {
+        margin-top: 24px;
+        padding: 16px;
+        background: var(--ion-color-dark, #222);
+        color: var(--ion-color-light, #fff);
+        border-radius: 8px;
+      }
+
+      .events-log h3 {
+        margin: 0 0 12px;
+        font-size: 14px;
+      }
+
+      .event-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 4px 0;
+        font-size: 12px;
+        font-family: monospace;
+      }
+
+      .event-type {
+        color: var(--ion-color-success, #2dd36f);
+      }
+
+      .event-time {
+        color: var(--ion-color-medium, #92949c);
+      }
+
+      .no-events {
+        color: var(--ion-color-medium, #92949c);
+        font-size: 12px;
+      }
+    `,
+  ],
+})
+export class MultiProtocolComponent {
+  private readonly wallet = inject(UnifiedWalletService);
+  private readonly eventBus = inject(WalletEventBus);
+
+  // UI State
+  readonly selectedMethod = signal<ConnectionMethod>(null);
+  readonly isConnecting = signal(false);
+  readonly recentEvents = signal<Array<{ type: string; time: string }>>([]);
+
+  // Wallet State
+  readonly isConnected = this.wallet.isConnected;
+  readonly activeAccount = this.wallet.activeAccount;
+  readonly allAccounts = this.wallet.allAccounts;
+  readonly connectedProviders = this.wallet.connectedProviders;
+  readonly activeProvider = this.wallet.activeProvider;
+
+  constructor() {
+    // Subscribe to wallet events for logging
+    this.subscribeToEvents();
+  }
+
+  /**
+   * Subscribe to wallet events
+   */
+  private subscribeToEvents(): void {
+    this.eventBus.connected.subscribe((_event) => {
+      this.addEvent('connected');
+    });
+
+    this.eventBus.disconnected.subscribe((_event) => {
+      this.addEvent('disconnected');
+    });
+
+    this.eventBus.accountChanged.subscribe((_event) => {
+      this.addEvent('account_changed');
+    });
+
+    this.eventBus.sessionCreated.subscribe((_event) => {
+      this.addEvent('session_created');
+    });
+  }
+
+  /**
+   * Add event to log
+   */
+  private addEvent(type: string): void {
+    const time = new Date().toLocaleTimeString();
+    this.recentEvents.update((events) => [{ type, time }, ...events.slice(0, 9)]);
+  }
+
+  /**
+   * Select connection method
+   */
+  selectMethod(method: ConnectionMethod): void {
+    this.selectedMethod.set(method);
+  }
+
+  /**
+   * Connect using selected method
+   */
+  async connect(): Promise<void> {
+    const method = this.selectedMethod();
+    if (!method) return;
+
+    this.isConnecting.set(true);
+
+    try {
+      if (method === 'native') {
+        // HSuite Native Connection
+        await this.wallet.connectNative({
+          walletUrl: 'http://localhost:8100',
+          appId: 'multi-protocol-demo',
+          appName: 'Multi-Protocol Demo',
+          ledgerId: 'hedera',
+          networkId: 'hedera:testnet',
+        });
+      } else {
+        // WalletConnect Connection
+        await this.wallet.connectWalletConnect({
+          projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Get from cloud.walletconnect.com
+          ledgerId: 'hedera',
+          networkId: 'hedera:testnet',
+        });
+      }
+
+      this.addEvent(`connected_${method}`);
+    } catch (error) {
+      console.error('Connection failed:', error);
+      this.addEvent('connection_error');
+    } finally {
+      this.isConnecting.set(false);
+    }
+  }
+
+  /**
+   * Switch active account
+   */
+  switchAccount(address: string): void {
+    const account = this.allAccounts().find((a) => a.address === address);
+    if (account) {
+      this.wallet.setActiveAccount(account);
+      this.addEvent('account_switched');
+    }
+  }
+
+  /**
+   * Disconnect from wallet
+   */
+  async disconnect(): Promise<void> {
+    await this.wallet.disconnect();
+    this.selectedMethod.set(null);
+  }
+}
+
+/**
+ * Configuration for WalletConnect:
+ *
+ * 1. Get a Project ID from https://cloud.walletconnect.com
+ * 2. Add your dApp metadata (name, description, url, icons)
+ * 3. Configure supported chains (hedera, xrpl)
+ *
+ * Example environment.ts:
+ *
+ * export const environment = {
+ *   walletConnectProjectId: 'abc123...',
+ *   walletConnectMetadata: {
+ *     name: 'My dApp',
+ *     description: 'A cool Hedera dApp',
+ *     url: 'https://mydapp.com',
+ *     icons: ['https://mydapp.com/icon.png']
+ *   }
+ * };
+ */
+
+/**
+ * Provider Types:
+ *
+ * - 'hsuite-native': Direct connection to HSuite Wallet
+ * - 'walletconnect-v2': WalletConnect v2 protocol
+ *
+ * The UnifiedWalletService manages both providers and provides:
+ * - Unified account list from all providers
+ * - Single active account selection
+ * - Provider-agnostic signing
+ */