@hsuite/native-connect-angular 1.0.0

package/examples/transaction-signing.ts

@@ -0,0 +1,361 @@
+/**
+ * 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 transaction-signing.ts
+ * @description Example of signing and submitting transactions using the Angular SDK
+ *
+ * This example demonstrates:
+ * - Building Hedera transactions with @hashgraph/sdk
+ * - Serializing transactions for wallet signing
+ * - Using the TransactionService for simplified signing
+ * - Handling transaction results
+ */
+
+import { Component, inject, signal, computed } from '@angular/core';
+import { UnifiedWalletService, TransactionService } from '@hsuite/native-connect-angular';
+import { TransferTransaction, Hbar, AccountId, Client } from '@hashgraph/sdk';
+
+@Component({
+  selector: 'app-transaction-signing',
+  template: `
+    <div class="tx-demo">
+      <h2>Transaction Signing Demo</h2>
+
+      <!-- Connection Required -->
+      @if (!isConnected()) {
+        <p class="warning">Please connect your wallet first.</p>
+      } @else {
+        <div class="tx-form">
+          <h3>Send HBAR</h3>
+
+          <div class="form-group">
+            <label>From (Your Account)</label>
+            <input type="text" [value]="activeAccount()?.address" disabled />
+          </div>
+
+          <div class="form-group">
+            <label>To (Recipient)</label>
+            <input
+              type="text"
+              [value]="recipient()"
+              (input)="updateRecipient($event)"
+              placeholder="0.0.12345"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>Amount (HBAR)</label>
+            <input
+              type="number"
+              [value]="amount()"
+              (input)="updateAmount($event)"
+              placeholder="1.0"
+              step="0.1"
+              min="0.01"
+            />
+          </div>
+
+          <!-- Sign Only -->
+          <button (click)="signOnly()" [disabled]="isProcessing() || !canSubmit()">
+            Sign Transaction
+          </button>
+
+          <!-- Sign and Submit -->
+          <button
+            (click)="signAndSubmit()"
+            [disabled]="isProcessing() || !canSubmit()"
+            class="primary"
+          >
+            Sign & Submit
+          </button>
+
+          <!-- Processing Indicator -->
+          @if (isProcessing()) {
+            <div class="processing">
+              <span class="spinner"></span>
+              Processing transaction...
+            </div>
+          }
+
+          <!-- Result Display -->
+          @if (lastResult()) {
+            <div class="result success">
+              <h4>Transaction Complete!</h4>
+              <p>Transaction ID: {{ getTransactionId() }}</p>
+            </div>
+          }
+
+          <!-- Error Display -->
+          @if (lastError()) {
+            <div class="result error">
+              <h4>Transaction Failed</h4>
+              <p>{{ lastError()?.message }}</p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .tx-demo {
+        padding: 20px;
+        max-width: 500px;
+        margin: 0 auto;
+      }
+
+      .warning {
+        color: var(--ion-color-warning, orange);
+        padding: 16px;
+        background: var(--ion-color-warning-tint, #fff3e0);
+        border-radius: 8px;
+      }
+
+      .tx-form {
+        margin-top: 20px;
+      }
+
+      .form-group {
+        margin-bottom: 16px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 4px;
+        font-weight: 500;
+      }
+
+      .form-group input {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid var(--ion-color-medium, #ccc);
+        border-radius: 8px;
+        font-size: 16px;
+      }
+
+      button {
+        padding: 12px 24px;
+        margin-right: 12px;
+        margin-top: 12px;
+        font-size: 16px;
+        cursor: pointer;
+        background: var(--ion-color-secondary, #6c757d);
+        color: white;
+        border: none;
+        border-radius: 8px;
+      }
+
+      button.primary {
+        background: var(--ion-color-primary, #3880ff);
+      }
+
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .processing {
+        margin-top: 16px;
+        padding: 16px;
+        background: var(--ion-color-light, #f4f4f4);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--ion-color-primary, #3880ff);
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .result {
+        margin-top: 16px;
+        padding: 16px;
+        border-radius: 8px;
+      }
+
+      .result.success {
+        background: var(--ion-color-success-tint, #e8f5e9);
+        color: var(--ion-color-success, green);
+      }
+
+      .result.error {
+        background: var(--ion-color-danger-tint, #ffebee);
+        color: var(--ion-color-danger, red);
+      }
+
+      .result h4 {
+        margin: 0 0 8px;
+      }
+
+      .result p {
+        margin: 0;
+        font-family: monospace;
+      }
+    `,
+  ],
+})
+export class TransactionSigningComponent {
+  private readonly wallet = inject(UnifiedWalletService);
+  private readonly txService = inject(TransactionService);
+
+  // Form state
+  readonly recipient = signal('');
+  readonly amount = signal(1.0);
+
+  // Wallet state
+  readonly isConnected = this.wallet.isConnected;
+  readonly activeAccount = this.wallet.activeAccount;
+
+  // Transaction state
+  readonly isProcessing = this.txService.isProcessing;
+  readonly lastResult = this.txService.lastResult;
+  readonly lastError = this.txService.lastError;
+
+  // Form validation
+  readonly canSubmit = computed(() => {
+    const account = this.activeAccount();
+    const recipient = this.recipient();
+    const amount = this.amount();
+
+    return account && recipient && recipient.startsWith('0.0.') && amount > 0;
+  });
+
+  updateRecipient(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.recipient.set(value);
+  }
+
+  updateAmount(event: Event): void {
+    const value = parseFloat((event.target as HTMLInputElement).value) || 0;
+    this.amount.set(value);
+  }
+
+  getTransactionId(): string {
+    const result = this.lastResult() as { transactionId?: string } | null;
+    return result?.transactionId || 'N/A';
+  }
+
+  /**
+   * Build a Hedera transfer transaction and serialize it
+   *
+   * This is the standard pattern for building transactions:
+   * 1. Create the transaction using Hashgraph SDK
+   * 2. Freeze it with a client (to set node accounts)
+   * 3. Serialize to bytes
+   * 4. Encode as base64 for the wallet
+   */
+  private async buildTransaction(): Promise<string> {
+    const from = this.activeAccount();
+    if (!from) throw new Error('No active account');
+
+    const to = this.recipient();
+    const hbarAmount = this.amount();
+
+    // Create transfer transaction
+    const transaction = new TransferTransaction()
+      .addHbarTransfer(AccountId.fromString(from.address), new Hbar(-hbarAmount))
+      .addHbarTransfer(AccountId.fromString(to), new Hbar(hbarAmount));
+
+    // Get network from account
+    const network = from.networkId?.split(':')[1] || 'testnet';
+    const client = network === 'mainnet' ? Client.forMainnet() : Client.forTestnet();
+
+    // Freeze the transaction (sets node account IDs)
+    const frozen = await transaction.freezeWith(client);
+
+    // Serialize to bytes
+    const bytes = frozen.toBytes();
+
+    // Encode as base64
+    return this.uint8ArrayToBase64(bytes);
+  }
+
+  /**
+   * Sign the transaction only (without submitting)
+   *
+   * Use this when you want to:
+   * - Collect multiple signatures
+   * - Submit the transaction yourself
+   * - Store the signed transaction for later
+   */
+  async signOnly(): Promise<void> {
+    try {
+      const payload = await this.buildTransaction();
+      const result = await this.txService.signTransaction(payload);
+      console.log('Transaction signed:', result);
+    } catch (error) {
+      console.error('Sign failed:', error);
+    }
+  }
+
+  /**
+   * Sign and submit the transaction in one step
+   *
+   * This is the recommended approach for simple transactions.
+   * The wallet will sign the transaction and submit it to the network.
+   */
+  async signAndSubmit(): Promise<void> {
+    try {
+      const payload = await this.buildTransaction();
+      const result = await this.txService.signAndSubmit(payload);
+      console.log('Transaction submitted:', result);
+    } catch (error) {
+      console.error('Submit failed:', error);
+    }
+  }
+
+  /**
+   * Convert Uint8Array to base64 string
+   */
+  private uint8ArrayToBase64(bytes: Uint8Array): string {
+    let binary = '';
+    for (let i = 0; i < bytes.length; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+  }
+}
+
+/**
+ * Key Points:
+ *
+ * 1. TRANSACTION BUILDING:
+ *    - Use @hashgraph/sdk to build transactions
+ *    - Freeze with appropriate client (testnet/mainnet)
+ *    - Serialize to bytes and encode as base64
+ *
+ * 2. SIGNING OPTIONS:
+ *    - signTransaction(): Sign only, return signed bytes
+ *    - signAndSubmit(): Sign and submit in one wallet prompt
+ *    - signAndSubmit is preferred for better UX (one prompt)
+ *
+ * 3. TRANSACTION SERVICE:
+ *    - Provides reactive state (isProcessing, lastResult, lastError)
+ *    - Automatically shows toast notifications
+ *    - Handles error propagation
+ *
+ * 4. ERROR HANDLING:
+ *    - Wrap in try/catch
+ *    - Check lastError signal for UI display
+ *    - Log errors for debugging
+ */

package/jest.config.json

@@ -0,0 +1,45 @@
+{
+  "displayName": "angular-sdk",
+  "preset": "../../jest.preset.js",
+  "setupFilesAfterEnv": ["<rootDir>/test-setup.ts"],
+  "globals": {},
+  "coverageDirectory": "../../coverage/packages/angular-sdk",
+  "transform": {
+    "^.+\\.(ts|mts|js|html)$": [
+      "jest-preset-angular",
+      {
+        "tsconfig": "<rootDir>/tsconfig.spec.json",
+        "stringifyContentPathRegex": "\\.(html|svg)$"
+      }
+    ]
+  },
+  "transformIgnorePatterns": ["node_modules/(?!.*\\.mjs$)"],
+  "snapshotSerializers": [
+    "jest-preset-angular/build/serializers/no-ng-attributes",
+    "jest-preset-angular/build/serializers/ng-snapshot",
+    "jest-preset-angular/build/serializers/html-comment"
+  ],
+  "testMatch": [
+    "<rootDir>/**/__tests__/**/*.[jt]s?(x)",
+    "<rootDir>/**/*(*.)@(spec|test).[jt]s?(x)"
+  ],
+  "collectCoverageFrom": [
+    "src/**/*.ts",
+    "!src/**/*.spec.ts",
+    "!src/**/*.d.ts",
+    "!src/index.ts",
+    "!src/test-setup.ts"
+  ],
+  "coverageThreshold": {
+    "global": {
+      "branches": 80,
+      "functions": 80,
+      "lines": 80,
+      "statements": 80
+    }
+  },
+  "moduleNameMapper": {
+    "^@hsuite/native-connect-angular$": "<rootDir>/src/index.ts",
+    "^@hsuite/native-connect-angular/(.*)$": "<rootDir>/src/$1"
+  }
+}

package/karma.conf.js

@@ -0,0 +1,42 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'lcovonly' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['ChromeHeadless'],
+    restartOnFileChange: true,
+    singleRun: true
+  });
+};
+

package/ng-package.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@hashgraph/proto",
+    "@hashgraph/sdk",
+    "@walletconnect/modal",
+    "@walletconnect/sign-client",
+    "@walletconnect/types",
+    "qrcode",
+    "qr-scanner",
+    "@hsuite/native-connect-sdk",
+    "@hsuite/native-connect-types",
+    "@hsuite/native-connect-ui",
+    "xrpl"
+  ]
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hsuite/native-connect-angular",
+  "version": "1.0.0",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "description": "Angular integration SDK for HSuite Wallet - provides direct SDK integration without wrappers",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "./node_modules/.bin/ng-packagr -p ng-package.json",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "docs": "compodoc -p tsconfig.json -c ../../compodoc.base.json -d dist/docs --name 'Angular SDK API' --includes docs"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@ionic/angular": "^8.0.0",
+    "ionicons": "^7.0.0",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "@hashgraph/proto": "^2.25.0",
+    "@hashgraph/sdk": "^2.76.0",
+    "@hsuite/native-connect-sdk": "^1.0.0",
+    "@hsuite/native-connect-types": "^1.0.0",
+    "@hsuite/native-connect-ui": "^1.0.0",
+    "@walletconnect/modal": "^2.7.0",
+    "@walletconnect/sign-client": "^2.23.0",
+    "@walletconnect/types": "^2.23.0",
+    "qr-scanner": "^1.4.2",
+    "qrcode": "^1.5.4",
+    "tslib": "^2.6.0",
+    "xrpl": "^3.0.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^20.3.14",
+    "@angular/common": "^20.3.16",
+    "@angular/compiler": "^20.3.16",
+    "@angular/core": "^20.3.16",
+    "@angular/platform-browser": "^20.3.16",
+    "@angular/platform-browser-dynamic": "^20.3.16",
+    "@ionic/angular": "^8.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@types/qrcode": "^1.5.5",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^4.0.8",
+    "ionicons": "^7.0.0",
+    "jasmine-core": "~5.1.0",
+    "jsdom": "^27.1.0",
+    "ng-packagr": "^20.0.0",
+    "typescript": "~5.8.3",
+    "vitest": "^1.6.0",
+    "zone.js": "~0.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}