@naculus/connect-appkit-react 0.1.8 → 0.2.0

package/src/hooks/useTxMonitor.test.ts

@@ -1,127 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { renderHook, act, waitFor } from "@testing-library/react";
-import { useTxMonitor, TxMonitorContext } from "./useTxMonitor";
-import type { TxMonitorLike, TxStatusEntry } from "./useTxMonitor";
-import React from "react";
-
-class MockMonitor implements TxMonitorLike {
-  private entries = new Map<string, TxStatusEntry>();
-  private listeners = new Map<string, Set<Function>>();
-
-  setEntry(hash: string, chainId: number, entry: TxStatusEntry): void {
-    const key = `${chainId}:${hash}`;
-    this.entries.set(key, entry);
-  }
-
-  async watchTx(hash: string, chainId: number): Promise<TxStatusEntry> {
-    const key = `${chainId}:${hash}`;
-    const entry = this.entries.get(key) ?? {
-      hash,
-      chainId,
-      from: "",
-      to: "",
-      value: "0x0",
-      status: "unknown" as const,
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-      replacementCount: 0,
-    };
-    this.entries.set(key, entry);
-    this.emit("statusChange", entry);
-    return entry;
-  }
-
-  stopWatching(hash: string, chainId?: number): void {
-    // no-op
-  }
-
-  getTxStatus(hash: string, chainId?: number): TxStatusEntry | null {
-    if (chainId !== undefined) return this.entries.get(`${chainId}:${hash}`) ?? null;
-    for (const [, entry] of this.entries) {
-      if (entry.hash === hash) return entry;
-    }
-    return null;
-  }
-
-  async getTxHistory(): Promise<TxStatusEntry[]> {
-    return Array.from(this.entries.values());
-  }
-
-  async refreshTx(): Promise<void> {
-    // no-op
-  }
-
-  on(event: string, listener: Function): this {
-    const set = this.listeners.get(event) ?? new Set();
-    set.add(listener);
-    this.listeners.set(event, set);
-    return this;
-  }
-
-  off(event: string, listener: Function): this {
-    const set = this.listeners.get(event);
-    if (set) set.delete(listener);
-    return this;
-  }
-
-  private emit(event: string, ...args: any[]): void {
-    const set = this.listeners.get(event);
-    if (set) set.forEach(fn => fn(...args));
-  }
-}
-
-function Wrapper({ monitor, children }: { monitor: TxMonitorLike; children: React.ReactNode }) {
-  return React.createElement(TxMonitorContext.Provider, { value: monitor }, children);
-}
-
-describe("useTxMonitor", () => {
-  let monitor: MockMonitor;
-
-  beforeEach(() => {
-    monitor = new MockMonitor();
-  });
-
-  it("returns idle state when no hash provided", () => {
-    const { result } = renderHook(() => useTxMonitor(undefined, undefined, monitor));
-    expect(result.current.status).toBe("idle");
-    expect(result.current.entry).toBeNull();
-    expect(result.current.isWatching).toBe(false);
-  });
-
-  it("starts watching when hash is provided", async () => {
-    const hash = "0x" + "a".repeat(64);
-    const entry: TxStatusEntry = {
-      hash, chainId: 1, from: "0x" + "b".repeat(40), to: "0x" + "c".repeat(40),
-      value: "0x0", status: "pending", createdAt: Date.now(), updatedAt: Date.now(),
-      replacementCount: 0,
-    };
-    monitor.setEntry(hash, 1, entry);
-
-    const { result } = renderHook(() => useTxMonitor(hash, 1, monitor));
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false);
-    });
-
-    expect(result.current.entry).not.toBeNull();
-    expect(result.current.entry!.hash).toBe(hash);
-  });
-
-  it("provides refresh and stopWatching methods", () => {
-    const hash = "0x" + "d".repeat(64);
-    const { result } = renderHook(() => useTxMonitor(hash, 1, monitor));
-
-    expect(typeof result.current.refresh).toBe("function");
-    expect(typeof result.current.stopWatching).toBe("function");
-  });
-
-  it("works with TxMonitorContext", () => {
-    const hash = "0x" + "e".repeat(64);
-    const { result } = renderHook(() => useTxMonitor(hash, 1), {
-      wrapper: ({ children }) => React.createElement(Wrapper, { monitor, children }, children),
-    });
-
-    expect(result.current.isWatching).toBe(true);
-  });
-});

package/src/hooks/useTxMonitor.ts

@@ -1,178 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-
-// ── Types (standalone, to avoid dependency on wallet-engine) ──────
-
-export type TxStatus =
-  | "pending"
-  | "mined"
-  | "confirmed"
-  | "failed"
-  | "unknown";
-
-export interface TxStatusEntry {
-  hash: string;
-  chainId: number;
-  from: string;
-  to: string;
-  value: string;
-  data?: string;
-  nonce?: number;
-  status: TxStatus;
-  blockNumber?: number;
-  blockHash?: string;
-  gasUsed?: string;
-  effectiveGasPrice?: string;
-  createdAt: number;
-  confirmedAt?: number;
-  updatedAt: number;
-  error?: string;
-  label?: string;
-  memo?: string;
-  replacementCount?: number;
-}
-
-/** Minimal TxMonitor interface for React hooks */
-export interface TxMonitorLike {
-  watchTx(hash: string, chainId: number, options?: {
-    requiredConfirmations?: number;
-    pollInterval?: number;
-    label?: string;
-    memo?: string;
-    initialEntry?: Partial<TxStatusEntry>;
-  }): Promise<TxStatusEntry>;
-
-  stopWatching(hash: string, chainId?: number): void;
-  getTxStatus(hash: string, chainId?: number): TxStatusEntry | null;
-  getTxHistory(address?: string, chainId?: number): Promise<TxStatusEntry[]>;
-  refreshTx(hash: string, chainId?: number): Promise<void>;
-
-  on(event: "statusChange", listener: (entry: TxStatusEntry) => void): this;
-  on(event: "confirmed", listener: (entry: TxStatusEntry) => void): this;
-  on(event: "failed", listener: (entry: TxStatusEntry) => void): this;
-  off(event: string, listener: Function): this;
-}
-
-// ── Context for providing TxMonitor ───────────────────────────────
-
-import { createContext, useContext } from "react";
-
-export const TxMonitorContext = createContext<TxMonitorLike | null>(null);
-
-export function useTxMonitorProvider(): TxMonitorLike | null {
-  return useContext(TxMonitorContext);
-}
-
-// ── Hook ──────────────────────────────────────────────────────────
-
-export interface UseTxMonitorResult {
-  entry: TxStatusEntry | null;
-  status: TxStatus | "idle";
-  isLoading: boolean;
-  isWatching: boolean;
-  error: Error | null;
-  refresh: () => Promise<void>;
-  stopWatching: () => void;
-}
-
-/**
- * Monitor a single transaction's lifecycle.
- * When hash changes, automatically stops old watch and starts new one.
- */
-export function useTxMonitor(
-  hash?: string,
-  chainId?: number,
-  monitor?: TxMonitorLike,
-): UseTxMonitorResult {
-  const ctxMonitor = useTxMonitorProvider();
-  const effectiveMonitor = monitor ?? ctxMonitor;
-
-  const [entry, setEntry] = useState<TxStatusEntry | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isWatching, setIsWatching] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const prevHashRef = useRef<string | undefined>(undefined);
-
-  const refresh = useCallback(async () => {
-    if (!effectiveMonitor || !hash) return;
-    setIsLoading(true);
-    setError(null);
-    try {
-      await effectiveMonitor.refreshTx(hash, chainId);
-      const current = effectiveMonitor.getTxStatus(hash, chainId);
-      if (current) setEntry(current);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [effectiveMonitor, hash, chainId]);
-
-  const stopWatching = useCallback(() => {
-    if (!effectiveMonitor || !hash) return;
-    effectiveMonitor.stopWatching(hash, chainId);
-    setIsWatching(false);
-  }, [effectiveMonitor, hash, chainId]);
-
-  useEffect(() => {
-    if (!effectiveMonitor || !hash || !chainId) {
-      setEntry(null);
-      setIsWatching(false);
-      return;
-    }
-
-    // Stop previous watch if hash changed
-    if (prevHashRef.current && prevHashRef.current !== hash) {
-      effectiveMonitor.stopWatching(prevHashRef.current);
-    }
-    prevHashRef.current = hash;
-
-    let cancelled = false;
-    setIsWatching(true);
-    setIsLoading(true);
-    setError(null);
-
-    // Check if we already have status
-    const current = effectiveMonitor.getTxStatus(hash, chainId);
-    if (current) {
-      setEntry(current);
-      setIsLoading(false);
-    }
-
-    // Start watching
-    effectiveMonitor.watchTx(hash, chainId, {}).then((initial) => {
-      if (!cancelled) {
-        setEntry(initial);
-        setIsLoading(false);
-      }
-    }).catch((err) => {
-      if (!cancelled) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setIsLoading(false);
-      }
-    });
-
-    // Listen for status changes
-    const onStatusChange = (updated: TxStatusEntry) => {
-      if (!cancelled) setEntry({ ...updated });
-    };
-    effectiveMonitor.on("statusChange", onStatusChange);
-
-    return () => {
-      cancelled = true;
-      setIsWatching(false);
-      effectiveMonitor.off("statusChange", onStatusChange);
-    };
-  }, [effectiveMonitor, hash, chainId]);
-
-  const status: TxStatus | "idle" = entry?.status ?? "idle";
-
-  return {
-    entry,
-    status,
-    isLoading,
-    isWatching,
-    error,
-    refresh,
-    stopWatching,
-  };
-}

package/src/hooks/useUserOpStatus.ts

@@ -1,245 +0,0 @@
-/**
- * useUserOpStatus
- *
- * React hook for tracking ERC-4337 UserOperation lifecycle.
- * Polls the bundler for UserOperation receipt and reports status transitions.
- *
- * @example
- * ```tsx
- * const { userOpHash, status, receipt, error } = useUserOpStatus({
- *   userOpHash: "0x...",
- *   bundlerUrl: "https://api.pimlico.io/v2/1/rpc?apikey=...",
- *   pollInterval: 2000,
- * });
- *
- * if (status === "confirmed") {
- *   console.log("UserOp included in block!");
- * }
- * ```
- */
-
-import { useState, useEffect, useRef, useCallback } from "react";
-import type {
-  UserOperationReceipt,
-  Address,
-  Hex,
-} from "@naculus/connect-core";
-
-export type UserOpStatus = "idle" | "pending" | "confirmed" | "failed" | "not_found";
-
-export interface UseUserOpStatusOptions {
-  /** The UserOperation hash to track */
-  userOpHash?: Hex | null;
-  /** Bundler RPC URL */
-  bundlerUrl?: string;
-  /** Polling interval in milliseconds (default: 2000) */
-  pollInterval?: number;
-  /** Maximum number of retries (default: 30) */
-  maxRetries?: number;
-  /** Auto-start polling when userOpHash is provided */
-  autoStart?: boolean;
-}
-
-export interface UseUserOpStatusReturn {
-  /** Current status of the UserOperation */
-  status: UserOpStatus;
-  /** UserOperation receipt (available when confirmed or failed) */
-  receipt: UserOperationReceipt | null;
-  /** The userOpHash being tracked */
-  userOpHash: Hex | null;
-  /** Error state */
-  error: Error | null;
-  /** Whether polling is active */
-  isPolling: boolean;
-  /** Time elapsed since tracking started (ms) */
-  elapsedMs: number;
-  /** Number of poll attempts made */
-  attempts: number;
-  /** Start tracking a UserOperation */
-  start: (hash: Hex) => void;
-  /** Stop tracking */
-  stop: () => void;
-  /** Reset state */
-  reset: () => void;
-}
-
-/**
- * Hook for tracking the lifecycle of an ERC-4337 UserOperation.
- *
- * @param options - Configuration for polling behavior
- * @returns UserOperation status, receipt, and lifecycle controls
- */
-export function useUserOpStatus(
-  options?: UseUserOpStatusOptions,
-): UseUserOpStatusReturn {
-  const bundlerUrl = options?.bundlerUrl;
-  const pollInterval = options?.pollInterval ?? 2000;
-  const maxRetries = options?.maxRetries ?? 30;
-
-  const [status, setStatus] = useState<UserOpStatus>("idle");
-  const [receipt, setReceipt] = useState<UserOperationReceipt | null>(null);
-  const [userOpHash, setUserOpHash] = useState<Hex | null>(options?.userOpHash ?? null);
-  const [error, setError] = useState<Error | null>(null);
-  const [isPolling, setIsPolling] = useState(false);
-  const [attempts, setAttempts] = useState(0);
-
-  const startTimeRef = useRef<number>(0);
-  const [elapsedMs, setElapsedMs] = useState(0);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const pollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Clear all timers
-  const clearTimers = useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    if (pollTimerRef.current) {
-      clearTimeout(pollTimerRef.current);
-      pollTimerRef.current = null;
-    }
-  }, []);
-
-  // Poll the bundler for receipt
-  const poll = useCallback(async (hash: Hex) => {
-    if (!bundlerUrl) return;
-
-    try {
-      const response = await fetch(bundlerUrl, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          jsonrpc: "2.0",
-          id: 1,
-          method: "eth_getUserOperationReceipt",
-          params: [hash],
-        }),
-      });
-
-      if (!response.ok) return;
-
-      const json = await response.json() as {
-        result?: {
-          userOpHash: Hex;
-          entryPoint: Address;
-          sender: Address;
-          nonce: string;
-          paymaster?: Address;
-          actualGasUsed: string;
-          actualGasCost: string;
-          success: boolean;
-          transactionHash: Hex;
-          logs: Array<{ address: Address; topics: Hex[]; data: Hex }>;
-        };
-      };
-
-      if (json.result) {
-        const receiptData: UserOperationReceipt = {
-          userOpHash: json.result.userOpHash,
-          entryPoint: json.result.entryPoint,
-          sender: json.result.sender,
-          nonce: BigInt(json.result.nonce),
-          paymaster: json.result.paymaster,
-          actualGasUsed: BigInt(json.result.actualGasUsed),
-          actualGasCost: BigInt(json.result.actualGasCost),
-          success: json.result.success,
-          transactionHash: json.result.transactionHash,
-          logs: json.result.logs,
-        };
-
-        setReceipt(receiptData);
-        setStatus(json.result.success ? "confirmed" : "failed");
-        setIsPolling(false);
-        clearTimers();
-
-        return;
-      }
-
-      // No receipt yet; schedule next poll
-      setAttempts(prev => prev + 1);
-      setStatus("pending");
-
-      if (attempts < maxRetries) {
-        pollTimerRef.current = setTimeout(() => poll(hash), pollInterval);
-      } else {
-        setStatus("not_found");
-        setIsPolling(false);
-        clearTimers();
-        setError(new Error("UserOperation not included after maximum retries"));
-      }
-    } catch {
-      // Network error; retry
-      setAttempts(prev => prev + 1);
-      if (attempts < maxRetries) {
-        pollTimerRef.current = setTimeout(() => poll(hash), pollInterval);
-      }
-    }
-  }, [bundlerUrl, pollInterval, maxRetries, attempts, clearTimers]);
-
-  // Start tracking
-  const start = useCallback((hash: Hex) => {
-    clearTimers();
-    setUserOpHash(hash);
-    setStatus("pending");
-    setReceipt(null);
-    setError(null);
-    setAttempts(0);
-    setIsPolling(true);
-    startTimeRef.current = Date.now();
-
-    // Start elapsed timer
-    intervalRef.current = setInterval(() => {
-      setElapsedMs(Date.now() - startTimeRef.current);
-    }, 1000);
-
-    // Start polling
-    poll(hash);
-  }, [clearTimers, poll]);
-
-  // Stop tracking
-  const stop = useCallback(() => {
-    clearTimers();
-    setIsPolling(false);
-  }, [clearTimers]);
-
-  // Reset state
-  const reset = useCallback(() => {
-    clearTimers();
-    setUserOpHash(null);
-    setStatus("idle");
-    setReceipt(null);
-    setError(null);
-    setIsPolling(false);
-    setAttempts(0);
-    setElapsedMs(0);
-  }, [clearTimers]);
-
-  // Auto-start if userOpHash provided on mount
-  useEffect(() => {
-    if (options?.userOpHash && options?.autoStart !== false) {
-      start(options.userOpHash);
-    }
-    // Only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      clearTimers();
-    };
-  }, [clearTimers]);
-
-  return {
-    status,
-    receipt,
-    userOpHash,
-    error,
-    isPolling,
-    elapsedMs,
-    attempts,
-    start,
-    stop,
-    reset,
-  };
-}

package/src/hooks/useValidateDestination.test.ts

@@ -1,96 +0,0 @@
-/// <reference types="vitest" />
-
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
-import { validateDestination, useValidateDestination } from "./useValidateDestination";
-import { renderHook } from "@testing-library/react";
-
-describe("validateDestination", () => {
-  // Valid addresses
-  it("accepts valid EVM addresses", () => {
-    expect(validateDestination("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045").isValid).toBe(true);
-    expect(validateDestination("0x1234567890abcdef1234567890abcdef12345678").isValid).toBe(true);
-  });
-
-  it("rejects empty address", () => {
-    expect(validateDestination("").isValid).toBe(false);
-    expect(validateDestination("").level).toBe("blocked");
-  });
-
-  it("rejects zero address", () => {
-    expect(validateDestination("0x0000000000000000000000000000000000000000").isValid).toBe(false);
-    expect(validateDestination("0x0000000000000000000000000000000000000000").level).toBe("blocked");
-  });
-
-  it("rejects burn addresses", () => {
-    expect(validateDestination("0x000000000000000000000000000000000000dead").isValid).toBe(false);
-    expect(validateDestination("0x0000000000000000000000000000000000000001").isValid).toBe(false);
-  });
-
-  it("rejects invalid format", () => {
-    expect(validateDestination("not-an-address").isValid).toBe(false);
-    expect(validateDestination("0x123").isValid).toBe(false);
-    expect(validateDestination("0xGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG").isValid).toBe(false);
-  });
-
-  // Property-based: fuzz variant with many generated addresses
-  it("correctly validates 50 random-like hex strings", () => {
-    for (let i = 0; i < 50; i++) {
-      // Generate random 40-char hex
-      const hex = "0x" + Array.from({ length: 40 }, () =>
-        Math.floor(Math.random() * 16).toString(16)
-      ).join("");
-
-      const result = validateDestination(hex);
-
-      // All properly formatted EVM addresses should be valid unless they're zero/burn
-      if (hex === "0x0000000000000000000000000000000000000000" ||
-          hex.toLowerCase().includes("dead") && hex.length === 42) {
-        expect(result.isValid).toBe(false);
-      } else {
-        expect(result.isValid).toBe(true);
-        expect(result.level).toBe("safe");
-      }
-    }
-  });
-
-  // Edge cases
-  it("handles uppercase addresses", () => {
-    expect(validateDestination("0xABCDEF1234567890ABCDEF1234567890ABCDEF12").isValid).toBe(true);
-  });
-
-  it("handles mixed case checksum addresses", () => {
-    expect(validateDestination("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045").isValid).toBe(true);
-  });
-});
-
-describe("useValidateDestination", () => {
-  it("returns safe validation for valid address", () => {
-    const { result } = renderHook(() =>
-      useValidateDestination({ address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" })
-    );
-    expect(result.current.validation.isValid).toBe(true);
-    expect(result.current.validation.level).toBe("safe");
-    expect(result.current.validation.warning).toBe(null);
-  });
-
-  it("returns blocked for zero address", () => {
-    const { result } = renderHook(() =>
-      useValidateDestination({ address: "0x0000000000000000000000000000000000000000" })
-    );
-    expect(result.current.validation.isValid).toBe(false);
-    expect(result.current.validation.level).toBe("blocked");
-    expect(result.current.validation.warning).toBeTruthy();
-  });
-
-  it("updates when address changes", () => {
-    const { result, rerender } = renderHook(
-      ({ address }) => useValidateDestination({ address }),
-      { initialProps: { address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" } }
-    );
-    expect(result.current.validation.isValid).toBe(true);
-
-    rerender({ address: "0x0000000000000000000000000000000000000000" });
-    expect(result.current.validation.isValid).toBe(false);
-  });
-});