はじめに

Vue Kaspa は Kaspa ブロックチェーンと連携するためのリアクティブなコンポーザブルを提供する Vue 3 プラグインです。公式 WebAssembly SDK である @vue-kaspa/kaspa-wasm をラップし、その機能を Vue 3 らしい API として公開します。

提供される機能

フルワークフローをカバーする 11 個のコンポーザブルと 1 つの統合ファサード:

コンポーザブル	目的
`useKaspa`	WASM 初期化ライフサイクル
`useRpc`	WebSocket RPC 接続、クエリ、イベント
`useKaspaRest`	公式 REST API で txid 検索、残高、アドレス履歴、探索データを取得
`useUtxo`	リアルタイム UTXO 追跡とリアクティブ残高
`useTransaction`	トランザクションの構築、署名、送信
`useTransactionListener`	確定済みトランザクション ID と送信元アドレスを追跡
`useBlockListener`	追加された新規ブロックを監視
`useCrypto`	キー生成、HD 導出、署名、単位変換
`useNetwork`	ネットワーク切り替え (mainnet、testnet など)
`useWallet`	ブラウザ拡張ウォレット (KasWare, Kastle) に接続
`useVueKaspa`	フルスタック向けの統合ファサード

アーキテクチャ

┌─────────────────────────────────────────────────────┐
│  Your Vue components / Nuxt pages                   │
│  useRpc()  useUtxo()  useTransaction()  useCrypto() │
└──────────────────────┬──────────────────────────────┘
                       │ Vue reactivity
┌──────────────────────▼──────────────────────────────┐
│  Internal singletons (shared across all components) │
│  RpcManager · WasmLoader · EventBridge              │
└──────────────────────┬──────────────────────────────┘
                       │ WASM calls
┌──────────────────────▼──────────────────────────────┐
│  @vue-kaspa/kaspa-wasm (WebAssembly)                           │
│  RpcClient · PrivateKey · XPrv · createTransactions │
└─────────────────────────────────────────────────────┘

内部シングルトンはモジュールレベルです — アプリケーション全体で 1 つの RPC 接続 と 1 つの WASM インスタンス が共有されます。これは意図的な設計です。ブラウザのタブは Kaspa ノードへの WebSocket 接続を複数開くべきではありません。

公開 API

// Plugin
import { VueKaspa } from 'vue-kaspa'

// コンポーザブル
import { useKaspa, useRpc, useKaspaRest, useUtxo, useTransaction, useTransactionListener, useBlockListener, useCrypto, useNetwork, useWallet, useVueKaspa } from 'vue-kaspa'

// エラークラス
import { KaspaError, KaspaNotReadyError, KaspaRpcError, KaspaWalletError, KaspaCryptoError } from 'vue-kaspa'

// Types (TypeScript)
import type { VueKaspaOptions, KaspaNetwork, UtxoEntry, PendingTx, /* ... */ } from 'vue-kaspa'

// Constants
import { AVAILABLE_NETWORKS } from 'vue-kaspa'

ピア依存関係

パッケージ	バージョン
`vue`	`>=3.4.0`
`@vue-kaspa/kaspa-wasm`	`>=1.1.0`
`@nuxt/kit`	`^3.0.0` (オプション — Nuxt モジュールを使用する場合のみ必要)

設計原則

シングルトン状態 — アプリにつき 1 つの RPC 接続と WASM インスタンス。10 個のコンポーネントから useRpc() を呼び出しても、すべて同じリアクティブな状態を返します。
遅延 WASM ロード — useKaspa().init() が呼ばれる (または autoConnect: true でプラグインをインストールする) まで、WASM モジュールはロードされません。
自動クリーンアップ — Vue コンポーネント内で使用するコンポーザブルは、onUnmounted 時にサブスクリプションとイベントハンドラーを自動的に解除します。
TypeScript ファースト — すべてのコンポーザブルの戻り値型、オプション、データ構造はエクスポートされたインターフェースで完全に型付けされています。
ツリーシェイク可能 — DevTools 統合は動的インポートされ、devtools: false の場合はプロダクションバンドルに含まれません。

はじめに ​

提供される機能 ​

アーキテクチャ ​

公開 API ​

ピア依存関係 ​

設計原則 ​