@qubic.ts/react 0.1.0

package/src/wallet/utils.ts

@@ -0,0 +1,14 @@
+export function bytesToBase64(bytes: Uint8Array): string {
+  if (typeof Buffer !== "undefined") return Buffer.from(bytes).toString("base64");
+  let binary = "";
+  for (const b of bytes) binary += String.fromCharCode(b);
+  return btoa(binary);
+}
+
+export function base64ToBytes(base64: string): Uint8Array {
+  if (typeof Buffer !== "undefined") return new Uint8Array(Buffer.from(base64, "base64"));
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}

package/src/wallet/vault.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "bun:test";
+import type { SeedVault } from "@qubic.ts/sdk";
+import { VaultConnector } from "./vault.js";
+
+describe("VaultConnector", () => {
+  it("connects and lists accounts from vault", async () => {
+    const connector = new VaultConnector({
+      vault: createFakeVault(),
+      defaultRef: "main",
+    });
+
+    const result = await connector.connect();
+    expect(result.status).toBe("connected");
+    if (result.status !== "connected") throw new Error("Expected immediate connected result");
+    expect(result.accounts[0]?.address.length).toBe(60);
+  });
+
+  it("signs unsigned transactions with a vault seed", async () => {
+    const connector = new VaultConnector({
+      vault: createFakeVault(),
+      defaultRef: "main",
+    });
+
+    const unsignedTxBytes = new Uint8Array(80);
+    unsignedTxBytes.fill(1, 0, 32);
+    unsignedTxBytes.fill(2, 32, 64);
+    const view = new DataView(unsignedTxBytes.buffer);
+    view.setBigInt64(64, 1n, true);
+    view.setUint32(72, 1, true);
+    view.setUint16(76, 0, true);
+    view.setUint16(78, 0, true);
+
+    const signed = await connector.signTransaction({
+      kind: "vault",
+      unsignedTxBytes,
+    });
+
+    expect(signed.signedTxBytes).toBeInstanceOf(Uint8Array);
+    expect(signed.signedTxBytes?.length).toBe(144);
+    expect(typeof signed.signedTxBase64).toBe("string");
+    expect(signed.signedTxBase64.length > 0).toBe(true);
+  });
+});
+
+function createFakeVault(): SeedVault {
+  const identity = "A".repeat(60);
+  const seed = "a".repeat(55);
+
+  return {
+    path: "/tmp/test-vault",
+    list() {
+      return [
+        {
+          name: "main",
+          identity,
+          seedIndex: 0,
+          createdAt: "2025-01-01T00:00:00.000Z",
+          updatedAt: "2025-01-01T00:00:00.000Z",
+        },
+      ];
+    },
+    getEntry() {
+      throw new Error("not implemented");
+    },
+    getIdentity() {
+      return identity;
+    },
+    signer() {
+      return { fromVault: "main" };
+    },
+    async getSeed() {
+      return seed;
+    },
+    async addSeed() {
+      throw new Error("not implemented");
+    },
+    async remove() {
+      throw new Error("not implemented");
+    },
+    async rotatePassphrase() {
+      throw new Error("not implemented");
+    },
+    exportEncrypted() {
+      throw new Error("not implemented");
+    },
+    exportJson() {
+      throw new Error("not implemented");
+    },
+    async importEncrypted() {
+      throw new Error("not implemented");
+    },
+    async getSeedSource() {
+      return { fromSeed: seed };
+    },
+    async save() {},
+    async close() {},
+  } as unknown as SeedVault;
+}

package/src/wallet/vault.ts

@@ -0,0 +1,70 @@
+import { privateKeyFromSeed, signTransaction } from "@qubic.ts/core";
+import type { SeedVault } from "@qubic.ts/sdk";
+import type {
+  WalletAccount,
+  WalletConnector,
+  WalletConnectResult,
+  WalletSignTransactionRequest,
+  WalletSignTransactionResult,
+} from "./types.js";
+import { bytesToBase64 } from "./utils.js";
+
+export type VaultConnectorConfig = Readonly<{
+  vault: SeedVault;
+  defaultRef?: string;
+}>;
+
+export class VaultConnector implements WalletConnector {
+  readonly type = "vault" as const;
+  private readonly vault: SeedVault;
+  private readonly defaultRef: string | undefined;
+
+  constructor(config: VaultConnectorConfig) {
+    this.vault = config.vault;
+    this.defaultRef = config.defaultRef;
+  }
+
+  isAvailable(): boolean {
+    return true;
+  }
+
+  async connect(): Promise<WalletConnectResult> {
+    const accounts = this.listAccounts();
+    return { status: "connected", accounts };
+  }
+
+  async disconnect(): Promise<void> {
+    return;
+  }
+
+  async requestAccounts(): Promise<readonly WalletAccount[]> {
+    return this.listAccounts();
+  }
+
+  async signTransaction(input: WalletSignTransactionRequest): Promise<WalletSignTransactionResult> {
+    if (input.kind !== "vault") {
+      throw new Error("Vault connector expects kind: 'vault'");
+    }
+    const ref = input.vaultRef ?? this.defaultRef;
+    if (!ref) {
+      throw new Error("vaultRef is required for vault signing");
+    }
+    const seed = await this.vault.getSeed(ref);
+    const secretKey32 = await privateKeyFromSeed(seed);
+    const signature64 = await signTransaction(input.unsignedTxBytes, secretKey32);
+    const signed = new Uint8Array(input.unsignedTxBytes.length + signature64.length);
+    signed.set(input.unsignedTxBytes, 0);
+    signed.set(signature64, input.unsignedTxBytes.length);
+    return {
+      signedTxBase64: bytesToBase64(signed),
+      signedTxBytes: signed,
+    };
+  }
+
+  private listAccounts(): readonly WalletAccount[] {
+    return this.vault.list().map((entry: { identity: string; name: string }) => ({
+      address: entry.identity,
+      alias: entry.name,
+    }));
+  }
+}

package/src/wallet/walletconnect.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it } from "bun:test";
+import type { WalletConnectClient } from "./walletconnect.js";
+import { WalletConnectConnector } from "./walletconnect.js";
+
+function createMemoryStorage(): Storage {
+  const store = new Map<string, string>();
+  return {
+    getItem: (key) => store.get(key) ?? null,
+    setItem: (key, value) => {
+      store.set(key, value);
+    },
+    removeItem: (key) => {
+      store.delete(key);
+    },
+    clear: () => store.clear(),
+    key: (index) => Array.from(store.keys())[index] ?? null,
+    get length() {
+      return store.size;
+    },
+  };
+}
+
+function createFakeClient(): WalletConnectClient {
+  const sessions = new Map<string, { topic: string }>();
+  return {
+    async connect() {
+      return {
+        uri: "wc://example",
+        approval: async () => {
+          const session = { topic: "topic-1" };
+          sessions.set(session.topic, session);
+          return session as never;
+        },
+      };
+    },
+    async request({ request }: { request: { method: string } }) {
+      if (request.method === "qubic_requestAccounts") {
+        return [{ address: "QUBICADDRESS1", alias: "wallet" }];
+      }
+      if (request.method === "qubic_signTransaction") {
+        return { signedTransaction: Buffer.from([1, 2, 3]).toString("base64") };
+      }
+      return null;
+    },
+    async disconnect() {
+      sessions.clear();
+    },
+    on() {
+      return this;
+    },
+    session: {
+      get: (topic: string) => sessions.get(topic),
+    } as WalletConnectClient["session"],
+  } as unknown as WalletConnectClient;
+}
+
+describe("WalletConnectConnector", () => {
+  it("connects and approves pending session", async () => {
+    const storage = createMemoryStorage();
+    const connector = new WalletConnectConnector({
+      projectId: "project",
+      metadata: {
+        name: "Test",
+        description: "Test",
+        url: "https://example.com",
+        icons: ["https://example.com/icon.png"],
+      },
+      storage,
+      signClientFactory: async () => createFakeClient(),
+    });
+
+    const result = await connector.connect();
+    expect(result.status).toBe("pending");
+    if (result.status !== "pending") throw new Error("Expected pending WalletConnect session");
+    const accounts = await result.approve();
+    expect(accounts[0]?.address).toBe("QUBICADDRESS1");
+    expect(storage.getItem("wcSessionTopic")).toBe("topic-1");
+  });
+
+  it("restores a persisted session", async () => {
+    const storage = createMemoryStorage();
+    const client = createFakeClient();
+    const connector = new WalletConnectConnector({
+      projectId: "project",
+      metadata: {
+        name: "Test",
+        description: "Test",
+        url: "https://example.com",
+        icons: ["https://example.com/icon.png"],
+      },
+      storage,
+      signClientFactory: async () => client,
+    });
+    const pending = await connector.connect();
+    if (pending.status !== "pending") throw new Error("Expected pending WalletConnect session");
+    await pending.approve();
+
+    const restoredConnector = new WalletConnectConnector({
+      projectId: "project",
+      metadata: {
+        name: "Test",
+        description: "Test",
+        url: "https://example.com",
+        icons: ["https://example.com/icon.png"],
+      },
+      storage,
+      signClientFactory: async () => client,
+    });
+    const accounts = await restoredConnector.restore();
+    expect(accounts?.[0]?.address).toBe("QUBICADDRESS1");
+  });
+
+  it("signs transactions through an approved session", async () => {
+    const storage = createMemoryStorage();
+    const connector = new WalletConnectConnector({
+      projectId: "project",
+      metadata: {
+        name: "Test",
+        description: "Test",
+        url: "https://example.com",
+        icons: ["https://example.com/icon.png"],
+      },
+      storage,
+      signClientFactory: async () => createFakeClient(),
+    });
+
+    const pending = await connector.connect();
+    if (pending.status !== "pending") throw new Error("Expected pending WalletConnect session");
+    await pending.approve();
+
+    const result = await connector.signTransaction({
+      kind: "walletconnect",
+      from: "QUBICADDRESS1",
+      to: "QUBICADDRESS2",
+      amount: 1,
+    });
+
+    expect(result.signedTxBase64).toBe(Buffer.from([1, 2, 3]).toString("base64"));
+    expect(result.signedTxBytes?.length).toBe(3);
+  });
+});

package/src/wallet/walletconnect.ts

@@ -0,0 +1,218 @@
+import type { SessionTypes } from "@walletconnect/types";
+import type {
+  WalletAccount,
+  WalletConnector,
+  WalletConnectResult,
+  WalletSignTransactionRequest,
+  WalletSignTransactionResult,
+} from "./types.js";
+import { base64ToBytes } from "./utils.js";
+
+export type WalletConnectClient = Readonly<{
+  connect(input: unknown): Promise<Readonly<{ uri?: string; approval: () => Promise<SessionTypes.Struct> }>>;
+  request(input: unknown): Promise<unknown>;
+  disconnect(input: unknown): Promise<void>;
+  on(event: string, listener: () => void): unknown;
+  session: Readonly<{
+    get(topic: string): SessionTypes.Struct | undefined;
+  }>;
+}>;
+
+export type WalletConnectConfig = Readonly<{
+  projectId: string;
+  metadata: Readonly<{
+    name: string;
+    description: string;
+    url: string;
+    icons: readonly string[];
+  }>;
+  chainId?: string;
+  methods?: readonly string[];
+  events?: readonly string[];
+  storageKey?: string;
+  storage?: Storage;
+  signClientFactory?: () => Promise<WalletConnectClient>;
+}>;
+
+export class WalletConnectConnector implements WalletConnector {
+  readonly type = "walletconnect" as const;
+  private readonly config: WalletConnectConfig;
+  private client: WalletConnectClient | null = null;
+  private sessionTopic = "";
+
+  constructor(config: WalletConnectConfig) {
+    this.config = config;
+  }
+
+  isAvailable(): boolean {
+    return true;
+  }
+
+  async connect(): Promise<WalletConnectResult> {
+    const client = await this.getClient();
+    const { uri, approval } = await client.connect({
+      requiredNamespaces: {
+        qubic: {
+          chains: [this.config.chainId ?? "qubic:mainnet"],
+          methods: [
+            ...(this.config.methods ?? [
+              "qubic_requestAccounts",
+              "qubic_sendQubic",
+              "qubic_signTransaction",
+              "qubic_sign",
+            ]),
+          ],
+          events: [...(this.config.events ?? ["accountsChanged", "amountChanged"])],
+        },
+      },
+    });
+
+    const approve = async () => {
+      const session = await approval();
+      await this.storeSession(session);
+      return this.requestAccounts();
+    };
+
+    return {
+      status: "pending",
+      uri: uri ?? "",
+      approve,
+    };
+  }
+
+  async disconnect(): Promise<void> {
+    if (!this.client || !this.sessionTopic) return;
+    await this.client.disconnect({
+      topic: this.sessionTopic,
+      reason: { code: 6000, message: "User disconnected" },
+    });
+    this.clearSession();
+  }
+
+  async requestAccounts(): Promise<readonly WalletAccount[]> {
+    const client = await this.getClient();
+    if (!this.sessionTopic) {
+      const restored = await this.restore();
+      if (!restored) throw new Error("WalletConnect session not connected");
+    }
+    const result = (await client.request({
+      topic: this.sessionTopic,
+      chainId: this.config.chainId ?? "qubic:mainnet",
+      request: {
+        method: "qubic_requestAccounts",
+        params: { nonce: Date.now().toString() },
+      },
+    })) as Array<{ address: string; alias?: string }>;
+    return result.map((entry) =>
+      entry.alias === undefined ? { address: entry.address } : { address: entry.address, alias: entry.alias },
+    );
+  }
+
+  async signTransaction(input: WalletSignTransactionRequest): Promise<WalletSignTransactionResult> {
+    if (input.kind !== "walletconnect") {
+      throw new Error("WalletConnect expects kind: 'walletconnect'");
+    }
+    const client = await this.getClient();
+    if (!this.sessionTopic) {
+      const restored = await this.restore();
+      if (!restored) throw new Error("WalletConnect session not connected");
+    }
+    const signed = (await client.request({
+      topic: this.sessionTopic,
+      chainId: this.config.chainId ?? "qubic:mainnet",
+      request: {
+        method: "qubic_signTransaction",
+        params: {
+          from: input.from,
+          to: input.to,
+          amount: input.amount,
+          tick: input.tick,
+          inputType: input.inputType,
+          payload: input.payloadBase64 ?? null,
+          nonce: input.nonce ?? Date.now().toString(),
+        },
+      },
+    })) as { signedTransaction: string };
+    return {
+      signedTxBase64: signed.signedTransaction,
+      signedTxBytes: base64ToBytes(signed.signedTransaction),
+    };
+  }
+
+  async restore(): Promise<readonly WalletAccount[] | null> {
+    const client = await this.getClient();
+    const storage = this.config.storage ?? getDefaultStorage();
+    if (!storage) return null;
+    const storedTopic = storage.getItem(this.config.storageKey ?? "wcSessionTopic");
+    if (!storedTopic) return null;
+    const session = client.session.get(storedTopic);
+    if (!session) {
+      storage.removeItem(this.config.storageKey ?? "wcSessionTopic");
+      return null;
+    }
+    this.sessionTopic = storedTopic;
+    return this.requestAccounts();
+  }
+
+  private async getClient(): Promise<WalletConnectClient> {
+    if (this.client) return this.client;
+    const client = this.config.signClientFactory
+      ? await this.config.signClientFactory()
+      : await createDefaultClient({
+          projectId: this.config.projectId,
+          metadata: {
+            ...this.config.metadata,
+            icons: [...this.config.metadata.icons],
+          },
+        });
+    client.on("session_delete", () => this.clearSession());
+    client.on("session_expire", () => this.clearSession());
+    this.client = client;
+    return client;
+  }
+
+  private async storeSession(session: SessionTypes.Struct): Promise<void> {
+    this.sessionTopic = session.topic;
+    const storage = this.config.storage ?? getDefaultStorage();
+    if (storage) {
+      storage.setItem(this.config.storageKey ?? "wcSessionTopic", session.topic);
+    }
+  }
+
+  private clearSession(): void {
+    this.sessionTopic = "";
+    const storage = this.config.storage ?? getDefaultStorage();
+    if (storage) {
+      storage.removeItem(this.config.storageKey ?? "wcSessionTopic");
+    }
+  }
+}
+
+function getDefaultStorage(): Storage | undefined {
+  const anyGlobal = globalThis as typeof globalThis & { localStorage?: Storage };
+  return anyGlobal.localStorage;
+}
+
+async function createDefaultClient(input: {
+  projectId: string;
+  metadata: {
+    name: string;
+    description: string;
+    url: string;
+    icons: readonly string[];
+  };
+}): Promise<WalletConnectClient> {
+  const signClient = await import("@walletconnect/sign-client");
+  const init =
+    (signClient as { SignClient?: { init?: (value: unknown) => Promise<WalletConnectClient> } })
+      .SignClient?.init ??
+    (signClient as { default?: { init?: (value: unknown) => Promise<WalletConnectClient> } })
+      .default?.init ??
+    (signClient as { init?: (value: unknown) => Promise<WalletConnectClient> }).init;
+
+  if (!init) {
+    throw new Error("@walletconnect/sign-client does not expose an init function");
+  }
+
+  return init(input);
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM"],
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "types": ["bun", "node", "react", "react-dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist/**", "node_modules/**"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@qubic.ts/contracts": ["./src/typecheck-stubs/contracts.d.ts"],
+      "@qubic.ts/sdk": ["./src/typecheck-stubs/sdk.d.ts"],
+      "@qubic.ts/sdk/browser": ["./src/typecheck-stubs/sdk.d.ts"],
+      "@qubic.ts/sdk/node": ["./src/typecheck-stubs/sdk.d.ts"]
+    }
+  }
+}