@hsuite/native-connect-angular 1.0.0

package/README.md

@@ -0,0 +1,48 @@
+# @hsuite/native-connect-angular
+
+Type-safe Angular/Ionic SDK for building multi-chain dApps with unified wallet connectivity via HSuite Channel Protocol and WalletConnect v2.
+
+## Installation
+
+```bash
+npm install @hsuite/native-connect-angular
+```
+
+## Quick Start
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UnifiedWalletService, WalletConnectButtonComponent } from '@hsuite/native-connect-angular';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [WalletConnectButtonComponent],
+  template: `
+    <wallet-connect-button [walletConnectProjectId]="'YOUR_PROJECT_ID'"> </wallet-connect-button>
+    <div *ngIf="wallet.activeAccount()">Connected: {{ wallet.activeAccount()!.address }}</div>
+  `,
+})
+export class HomeComponent {
+  wallet = inject(UnifiedWalletService);
+}
+```
+
+## Features
+
+- HSuite Channel Protocol - Native `hsc:` protocol with Nostr + P2P transport
+- WalletConnect v2 - Universal wallet connectivity
+- Reactive State - Angular signals for real-time updates
+- Pre-built Components - Ready-to-use UI components (buttons, modals, selectors)
+- Transaction Builders - Type-safe transaction construction for Hedera and XRPL
+- Multi-Account Support - Manage multiple accounts across ledgers
+
+## Documentation
+
+- [Full Documentation](../../docs/packages/angular-sdk.md)
+- [Channel Protocol](../../docs/native-wallet-sdk/channel-protocol.md)
+- [Companion dApp](../../docs/apps/hsuite-wallet-dapp.md)
+
+## License
+
+Apache-2.0 - See [LICENSE](../../LICENSE)

package/USAGE_EXAMPLES.md

@@ -0,0 +1,476 @@
+# Angular SDK Usage Examples
+
+This document provides complete, copy-paste ready examples for using the `@hsuite/native-connect-angular` in both module-based and standalone Angular/Ionic applications.
+
+---
+
+## Table of Contents
+
+- [Module-Based App Example](#module-based-app-example)
+- [Standalone App Example](#standalone-app-example)
+- [Common Usage Patterns](#common-usage-patterns)
+
+---
+
+## Module-Based App Example
+
+### Step 1: Install Package
+
+```bash
+npm install @hsuite/native-connect-angular
+# or
+pnpm add @hsuite/native-connect-angular
+```
+
+### Step 2: Import Module
+
+```typescript
+// src/app/app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { HsuiteWalletModule } from '@hsuite/native-connect-angular';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    HsuiteWalletModule, // ← Add this line
+  ],
+  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+### Step 3: Use in Components
+
+```typescript
+// src/app/pages/home/home.page.ts
+import { Component } from '@angular/core';
+import { UnifiedWalletService } from '@hsuite/native-connect-angular';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  constructor(private wallet: UnifiedWalletService) {}
+
+  async connectWallet() {
+    await this.wallet.connect('walletconnect-v2', {
+      type: 'walletconnect-v2',
+      projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      appName: 'My dApp',
+      appDescription: 'My awesome dApp',
+    });
+  }
+
+  get activeAccount() {
+    return this.wallet.activeAccount();
+  }
+
+  get isConnected() {
+    return this.wallet.isAnyConnected();
+  }
+}
+```
+
+```html
+<!-- src/app/pages/home/home.page.html -->
+<ion-header>
+  <ion-toolbar>
+    <ion-title>My dApp</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h1>Welcome to My dApp</h1>
+
+  <!-- Pre-built connection button -->
+  <wallet-connect-button
+    [walletConnectProjectId]="'YOUR_WALLETCONNECT_PROJECT_ID'"
+    [appName]="'My dApp'"
+    [showSessionInfo]="true"
+    (connected)="onConnected($event)"
+  >
+  </wallet-connect-button>
+
+  <!-- Conditional content based on connection -->
+  <div *ngIf="isConnected">
+    <h2>Connected!</h2>
+
+    <!-- Display session info -->
+    <wallet-session-display [showMetadata]="true" [showTimestamps]="true"> </wallet-session-display>
+
+    <!-- Account selector for multi-wallet -->
+    <wallet-account-selector
+      [selectedAddress]="activeAccount?.address"
+      (accountChanged)="onAccountChange($event)"
+    >
+    </wallet-account-selector>
+
+    <!-- Transaction status -->
+    <wallet-transaction-status
+      [status]="txStatus"
+      [transactionId]="txId"
+      [explorerUrl]="explorerUrl"
+    >
+    </wallet-transaction-status>
+  </div>
+
+  <div *ngIf="!isConnected">
+    <p>Please connect your wallet to continue</p>
+  </div>
+</ion-content>
+```
+
+---
+
+## Standalone App Example
+
+### Step 1: Install Package
+
+```bash
+npm install @hsuite/native-connect-angular
+# or
+pnpm add @hsuite/native-connect-angular
+```
+
+### Step 2: Bootstrap App (if needed)
+
+```typescript
+// src/main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideIonicAngular(),
+    provideRouter(routes),
+  ],
+});
+```
+
+### Step 3: Use in Components
+
+```typescript
+// src/app/pages/home/home.page.ts
+import { Component, inject } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import {
+  WalletConnectButtonComponent,
+  WalletSessionDisplayComponent,
+  WalletAccountSelectorComponent,
+  WalletTransactionStatusComponent,
+  UnifiedWalletService,
+} from '@hsuite/native-connect-angular';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    // Import SDK components you need
+    WalletConnectButtonComponent,
+    WalletSessionDisplayComponent,
+    WalletAccountSelectorComponent,
+    WalletTransactionStatusComponent,
+  ],
+})
+export class HomePage {
+  // Inject services
+  private wallet = inject(UnifiedWalletService);
+
+  // Reactive state (signals)
+  activeAccount = this.wallet.activeAccount;
+  isConnected = this.wallet.isAnyConnected;
+
+  async connectWallet() {
+    await this.wallet.connect('walletconnect-v2', {
+      type: 'walletconnect-v2',
+      projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      appName: 'My dApp',
+      appDescription: 'My awesome dApp',
+    });
+  }
+
+  onConnected(event: any) {
+    console.log('Wallet connected:', event);
+  }
+
+  onAccountChange(account: any) {
+    console.log('Account changed:', account);
+  }
+}
+```
+
+```html
+<!-- src/app/pages/home/home.page.html -->
+<ion-header>
+  <ion-toolbar>
+    <ion-title>My dApp</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h1>Welcome to My dApp</h1>
+
+  <!-- Pre-built connection button -->
+  <wallet-connect-button
+    [walletConnectProjectId]="'YOUR_WALLETCONNECT_PROJECT_ID'"
+    [appName]="'My dApp'"
+    [showSessionInfo]="true"
+    (connected)="onConnected($event)"
+  >
+  </wallet-connect-button>
+
+  <!-- Conditional content based on connection (using signals) -->
+  @if (isConnected()) {
+  <h2>Connected!</h2>
+
+  <!-- Display session info -->
+  <wallet-session-display [showMetadata]="true" [showTimestamps]="true"> </wallet-session-display>
+
+  <!-- Account selector for multi-wallet -->
+  <wallet-account-selector
+    [selectedAddress]="activeAccount()?.address"
+    (accountChanged)="onAccountChange($event)"
+  >
+  </wallet-account-selector>
+  } @else {
+  <p>Please connect your wallet to continue</p>
+  }
+</ion-content>
+```
+
+---
+
+## Common Usage Patterns
+
+### Pattern 1: Using Directives
+
+Both module-based and standalone apps can use SDK directives.
+
+**Module-based:**
+
+```html
+<!-- Directives available automatically -->
+<div *walletConnected; else notConnected>
+  <p>You are connected!</p>
+</div>
+<ng-template #notConnected>
+  <p>Please connect your wallet</p>
+</ng-template>
+```
+
+**Standalone:**
+
+```typescript
+import { WalletConnectedDirective } from '@hsuite/native-connect-angular';
+
+@Component({
+  imports: [WalletConnectedDirective],
+  // ...
+})
+```
+
+```html
+<div *walletConnected; else notConnected>
+  <p>You are connected!</p>
+</div>
+```
+
+### Pattern 2: Event Subscriptions
+
+```typescript
+import { Component, OnInit, inject } from '@angular/core';
+import { WalletEventBus } from '@hsuite/native-connect-angular';
+
+export class MyComponent implements OnInit {
+  private eventBus = inject(WalletEventBus);
+
+  ngOnInit() {
+    // Subscribe to wallet events
+    this.eventBus.on('account:changed', (account) => {
+      console.log('Account changed:', account);
+    });
+
+    this.eventBus.on('connection:closed', (providerId) => {
+      console.log('Disconnected:', providerId);
+    });
+  }
+}
+```
+
+### Pattern 3: Manual Connection (without button)
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UnifiedWalletService } from '@hsuite/native-connect-angular';
+
+export class MyComponent {
+  private wallet = inject(UnifiedWalletService);
+
+  async connectHsuiteNative() {
+    await this.wallet.connect('hsuite-native', {
+      type: 'hsuite-native',
+      appId: 'my-dapp',
+      appName: 'My dApp',
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      walletUrl: 'http://localhost:8100',
+    });
+  }
+
+  async connectWalletConnect() {
+    await this.wallet.connect('walletconnect-v2', {
+      type: 'walletconnect-v2',
+      projectId: 'YOUR_PROJECT_ID',
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      appName: 'My dApp',
+    });
+  }
+
+  async disconnect() {
+    await this.wallet.disconnectAll();
+  }
+}
+```
+
+### Pattern 4: Transaction Signing
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UnifiedWalletService } from '@hsuite/native-connect-angular';
+
+export class MyComponent {
+  private wallet = inject(UnifiedWalletService);
+
+  async signTransaction() {
+    const result = await this.wallet.signTransaction({
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      accountAddress: this.wallet.activeAccount()?.address || '',
+      payload: 'base64EncodedTransaction',
+    });
+
+    console.log('Signed transaction:', result);
+  }
+
+  async submitTransaction() {
+    const result = await this.wallet.submitTransaction({
+      ledgerId: 'hedera',
+      networkId: 'hedera:testnet',
+      accountAddress: this.wallet.activeAccount()?.address || '',
+      payload: 'base64EncodedTransaction',
+    });
+
+    console.log('Transaction ID:', result.transactionId);
+  }
+}
+```
+
+### Pattern 5: Using Wallet Context
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { WalletContextService } from '@hsuite/native-connect-angular';
+
+export class MyComponent {
+  private context = inject(WalletContextService);
+
+  // Computed values
+  isConnected = this.context.isConnected;
+  hasAccounts = this.context.hasAccounts;
+  allAccounts = this.context.context().allAccounts;
+}
+```
+
+```html
+<ng-container *walletContext="let ctx">
+  <p>Connected: {{ ctx.isConnected }}</p>
+  <p>Active Account: {{ ctx.activeAccount?.address }}</p>
+  <p>Total Accounts: {{ ctx.allAccounts.length }}</p>
+</ng-container>
+```
+
+---
+
+## Quick Decision Guide
+
+**Use Module-Based Approach if:**
+
+- ✅ You have an existing Angular/Ionic app using NgModules
+- ✅ You want simple one-time setup
+- ✅ Your team is familiar with traditional Angular modules
+
+**Use Standalone Approach if:**
+
+- ✅ You're starting a new Angular 14+ project
+- ✅ You want smaller bundle sizes (tree-shaking)
+- ✅ You prefer explicit imports
+
+**Both approaches have:**
+
+- ✅ Same components, directives, and services
+- ✅ Same API and functionality
+- ✅ Full TypeScript support
+- ✅ Comprehensive documentation
+
+---
+
+## Get WalletConnect Project ID
+
+To use WalletConnect, you need a project ID:
+
+1. Go to [https://cloud.walletconnect.com](https://cloud.walletconnect.com)
+2. Create a free account
+3. Create a new project
+4. Copy your Project ID
+5. Use it in your app:
+
+```typescript
+await this.wallet.connect('walletconnect-v2', {
+  projectId: 'YOUR_PROJECT_ID_HERE', // ← Paste here
+  // ...
+});
+```
+
+---
+
+## Need Help?
+
+- 📚 [Full Documentation](../../docs/packages/angular-sdk.md)
+- 🚀 [Quick Start Guide](../../docs/getting-started/quick-start.md)
+- 🔍 [API Reference](../../docs/angular-sdk/api/)
+- 💬 [GitHub Issues](https://github.com/hsuite-wallet/hsuite-native-connect/issues)
+
+---
+
+**Last Updated:** November 17, 2025  
+**SDK Version:** 0.0.1  
+**Status:** ✅ Production Ready

package/assets/wallets/extension.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <circle cx="50" cy="50" r="45" fill="#6B7280"/>
+  <rect x="25" y="30" width="50" height="40" rx="4" fill="white" stroke="#4B5563" stroke-width="2"/>
+  <circle cx="50" cy="70" r="3" fill="#4B5563"/>
+  <text x="50" y="58" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#4B5563" text-anchor="middle">EXT</text>
+</svg>
+

package/assets/wallets/hashpack.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <circle cx="50" cy="50" r="45" fill="#2D3B52"/>
+  <path d="M30 40 L50 25 L70 40 L70 60 L50 75 L30 60 Z" fill="#00D4AA" stroke="white" stroke-width="2"/>
+  <text x="50" y="63" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white" text-anchor="middle">HP</text>
+</svg>
+

package/assets/wallets/hsuite.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="hsuiteGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#9333ea;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#hsuiteGrad)"/>
+  <text x="50" y="60" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white" text-anchor="middle">H</text>
+</svg>
+

package/assets/wallets/kabila.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="kabilaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#9333EA;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#kabilaGrad)"/>
+  <text x="50" y="60" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white" text-anchor="middle">K</text>
+</svg>
+

package/assets/wallets/walletconnect.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="wcGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3B99FC;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#5C7CFA;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#wcGrad)"/>
+  <circle cx="35" cy="45" r="8" fill="white"/>
+  <circle cx="65" cy="45" r="8" fill="white"/>
+  <path d="M30 60 Q50 75 70 60" stroke="white" stroke-width="8" fill="none" stroke-linecap="round"/>
+</svg>
+