@hardkas/react 0.4.0-alpha

package/dist/index.js

@@ -0,0 +1,655 @@
+// src/provider.tsx
+import React, { createContext, useContext, useMemo } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createPublicClient, http } from "viem";
+import { jsx } from "react/jsx-runtime";
+var HardKasContext = createContext(void 0);
+function HardKasProvider({ config, children, queryClient: externalQueryClient }) {
+  const queryClient = useMemo(() => externalQueryClient ?? new QueryClient(), [externalQueryClient]);
+  const [sseStatus, setSseStatus] = React.useState("disconnected");
+  const [lastEvent, setLastEvent] = React.useState(null);
+  const listeners = React.useRef(/* @__PURE__ */ new Set());
+  const eventSource = React.useRef(null);
+  const reconnectTimer = React.useRef(null);
+  const backoffMs = React.useRef(500);
+  const subscribe = React.useCallback((callback) => {
+    listeners.current.add(callback);
+    return () => listeners.current.delete(callback);
+  }, []);
+  const connect = React.useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (!config.devServerUrl) {
+      setSseStatus("disconnected");
+      return;
+    }
+    if (typeof EventSource === "undefined") {
+      setSseStatus("failed");
+      return;
+    }
+    if (eventSource.current) {
+      eventSource.current.close();
+    }
+    setSseStatus("connecting");
+    const baseUrl = config.devServerUrl;
+    const url = baseUrl.endsWith("/") ? `${baseUrl}api/stream` : `${baseUrl}/api/stream`;
+    const es = new EventSource(url);
+    eventSource.current = es;
+    es.onopen = () => {
+      setSseStatus("connected");
+      backoffMs.current = 500;
+    };
+    es.onerror = () => {
+      es.close();
+      eventSource.current = null;
+      setSseStatus("reconnecting");
+      const nextBackoff = Math.min(backoffMs.current * 2, 1e4);
+      backoffMs.current = nextBackoff;
+      reconnectTimer.current = setTimeout(() => {
+        connect();
+      }, nextBackoff);
+    };
+    es.onmessage = (e) => {
+      const event = {
+        type: "message",
+        payload: e.data,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setLastEvent(event);
+      listeners.current.forEach((l) => l(event));
+    };
+    const namedEvents = [
+      "session-changed",
+      "session-created",
+      "session-deleted",
+      "health-changed",
+      "sandbox-session-created",
+      "sandbox-session-paired",
+      "sandbox-session-expired",
+      "sandbox-session-disconnected"
+    ];
+    namedEvents.forEach((type) => {
+      es.addEventListener(type, (e) => {
+        const event = {
+          type,
+          payload: e.data ? JSON.parse(e.data) : void 0,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setLastEvent(event);
+        listeners.current.forEach((l) => l(event));
+      });
+    });
+  }, [config.devServerUrl]);
+  React.useEffect(() => {
+    connect();
+    return () => {
+      if (eventSource.current) {
+        eventSource.current.close();
+        eventSource.current = null;
+      }
+      if (reconnectTimer.current) {
+        clearTimeout(reconnectTimer.current);
+      }
+    };
+  }, [connect]);
+  const igraClient = useMemo(() => {
+    return createPublicClient({
+      chain: {
+        id: 19416,
+        // Igra Local Default
+        name: "Igra Local",
+        nativeCurrency: { name: "Igra Kaspa", symbol: "iKAS", decimals: 18 },
+        rpcUrls: {
+          default: { http: [config.igraRpcUrl || "http://127.0.0.1:8545"] }
+        }
+      },
+      transport: http(config.igraRpcUrl || "http://127.0.0.1:8545")
+    });
+  }, [config.igraRpcUrl]);
+  const value = useMemo(() => ({
+    config: {
+      ...config,
+      localOnly: config.localOnly ?? true
+    },
+    igraClient,
+    queryClient,
+    sseStatus,
+    lastEvent,
+    subscribe
+  }), [config, igraClient, queryClient, sseStatus, lastEvent, subscribe]);
+  return /* @__PURE__ */ jsx(HardKasContext.Provider, { value, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children }) });
+}
+function useHardKas() {
+  const context = useContext(HardKasContext);
+  if (!context) {
+    throw new Error("useHardKas must be used within a HardKasProvider");
+  }
+  return context;
+}
+
+// src/hooks/session.ts
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+function useHardKasSession(name) {
+  const { config, subscribe } = useHardKas();
+  const queryClient = useQueryClient();
+  const sessionToResolve = name || config.sessionName;
+  useEffect(() => {
+    const sync = () => queryClient.invalidateQueries({ queryKey: ["hardkas", "session"] });
+    return subscribe((event) => {
+      if (["session-changed", "session-created", "session-deleted"].includes(event.type)) {
+        sync();
+      }
+    });
+  }, [queryClient, subscribe]);
+  return useQuery({
+    queryKey: ["hardkas", "session", sessionToResolve || "active"],
+    queryFn: async () => {
+      try {
+        const baseUrl = config.devServerUrl || "";
+        const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/session` : `${baseUrl}/api/session` : "/api/session";
+        const response = await fetch(url);
+        const json = await response.json();
+        const active = json.active;
+        if (!active) return null;
+        return {
+          name: active.name,
+          l1: { wallet: active.l1?.wallet, address: active.l1?.address },
+          l2: { account: active.l2?.account, address: active.l2?.address },
+          bridge: { mode: active.bridge?.mode },
+          health: active.health || { isHealthy: true, warnings: [] },
+          diagnostics: json.diagnostics || []
+        };
+      } catch (e) {
+        console.error("Failed to fetch session from dev server:", e);
+        return null;
+      }
+    },
+    staleTime: 3e4
+    // Rely on SSE for updates
+  });
+}
+
+// src/hooks/health.ts
+import { useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useEffect as useEffect2 } from "react";
+function useHardKasHealth() {
+  const { config, subscribe } = useHardKas();
+  const queryClient = useQueryClient2();
+  useEffect2(() => {
+    const sync = () => queryClient.invalidateQueries({ queryKey: ["hardkas", "health"] });
+    return subscribe((event) => {
+      if (["health-changed", "session-changed"].includes(event.type)) {
+        sync();
+      }
+    });
+  }, [queryClient, subscribe]);
+  return useQuery2({
+    queryKey: ["hardkas", "health"],
+    queryFn: async () => {
+      try {
+        const baseUrl = config.devServerUrl || "";
+        const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/health` : `${baseUrl}/api/health` : "/api/health";
+        const res = await fetch(url);
+        if (!res || !res.ok) {
+          throw new Error("Failed to fetch health from dev server");
+        }
+        return await res.json();
+      } catch (e) {
+        console.error("Failed to fetch health from dev server:", e);
+        throw e;
+      }
+    },
+    refetchInterval: 3e4,
+    // Background poll as fallback
+    retry: 2
+  });
+}
+
+// src/hooks/kaspa.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+function useKaspaWallet() {
+  const { data: session } = useHardKasSession();
+  return {
+    name: session?.l1.wallet,
+    address: session?.l1.address,
+    isLoading: !session
+  };
+}
+function useKaspaBalance(options = {}) {
+  const { config } = useHardKas();
+  const { address, name } = useKaspaWallet();
+  return useQuery3({
+    queryKey: ["kaspa", "balance", address, config.kaspaRpcUrl, name],
+    queryFn: async () => {
+      if (!address) return 0n;
+      const url = config.kaspaRpcUrl || "http://127.0.0.1:16110";
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            id: 1,
+            method: "getBalanceByAddressRequest",
+            params: { address }
+          })
+        });
+        const json = await response.json();
+        return BigInt(json.result?.balance || 0);
+      } catch (e) {
+        console.error("Failed to fetch Kaspa balance:", e);
+        return 0n;
+      }
+    },
+    enabled: !!address,
+    refetchInterval: options.refetchInterval ?? false
+  });
+}
+
+// src/hooks/igra.ts
+import { useQuery as useQuery4 } from "@tanstack/react-query";
+function useIgraAccount() {
+  const { data: session } = useHardKasSession();
+  return {
+    name: session?.l2.account,
+    address: session?.l2.address,
+    isLoading: !session
+  };
+}
+function useIgraBalance(options = {}) {
+  const { igraClient } = useHardKas();
+  const { address } = useIgraAccount();
+  const { data: session } = useHardKasSession();
+  const { config } = useHardKas();
+  return useQuery4({
+    queryKey: ["igra", "balance", address, config.igraRpcUrl, session?.name],
+    queryFn: async () => {
+      if (!address) return 0n;
+      return await igraClient.getBalance({ address });
+    },
+    enabled: !!address,
+    refetchInterval: options.refetchInterval ?? false
+  });
+}
+
+// src/hooks/bridge.ts
+import { useQuery as useQuery5, useMutation } from "@tanstack/react-query";
+import { planBridgeEntry, simulatePrefixMining } from "@hardkas/bridge-local";
+function useBridgeLocalPlan(options) {
+  const { data: session } = useHardKasSession();
+  const { config } = useHardKas();
+  return useQuery5({
+    queryKey: ["bridge", "plan", session?.name, options?.amountSompi.toString(), options?.toIgra, config.localOnly],
+    queryFn: async () => {
+      if (!session || !options) return null;
+      const targetAddress = options.toIgra || session.l2.address;
+      if (!targetAddress) throw new Error("Target Igra address is required.");
+      return planBridgeEntry({
+        fromAddress: session.l1.address,
+        targetEvmAddress: targetAddress,
+        amountSompi: options.amountSompi,
+        networkId: "simnet",
+        // Fixed for local simulation
+        availableUtxos: [
+          {
+            outpoint: { transactionId: "mock-utxo", index: 0 },
+            address: session.l1.address,
+            amountSompi: options.amountSompi * 2n,
+            scriptPublicKey: "mock-script"
+          }
+        ]
+      });
+    },
+    enabled: !!session && !!options
+  });
+}
+function useBridgeLocalSimulation() {
+  return useMutation({
+    mutationFn: async (params) => {
+      return simulatePrefixMining(params.payloadBase, params.prefix, { timeoutMs: 1e4 });
+    }
+  });
+}
+
+// src/hooks/metamask.ts
+import { useState, useEffect as useEffect3, useCallback } from "react";
+import { createWalletClient, custom } from "viem";
+function useMetaMaskLocal() {
+  const [state, setState] = useState({
+    installed: false,
+    connected: false,
+    supported: false,
+    localIgraDetected: false,
+    errors: []
+  });
+  const checkStatus = useCallback(async () => {
+    if (typeof window === "undefined" || !window.ethereum) {
+      setState((s) => ({ ...s, installed: false }));
+      return;
+    }
+    try {
+      const provider = window.ethereum;
+      const chainIdHex = await provider.request({ method: "eth_chainId" });
+      const chainId = parseInt(chainIdHex, 16);
+      const accounts = await provider.request({ method: "eth_accounts" });
+      setState({
+        installed: true,
+        connected: accounts.length > 0,
+        supported: true,
+        account: accounts[0],
+        chainId,
+        localIgraDetected: chainId === 19416,
+        errors: []
+      });
+    } catch (e) {
+      setState((s) => ({ ...s, errors: [e.message] }));
+    }
+  }, []);
+  useEffect3(() => {
+    if (typeof window === "undefined" || !window.ethereum) return;
+    const provider = window.ethereum;
+    checkStatus();
+    const handleChange = () => checkStatus();
+    provider.on("accountsChanged", handleChange);
+    provider.on("chainChanged", handleChange);
+    provider.on("disconnect", handleChange);
+    return () => {
+      if (provider.removeListener) {
+        provider.removeListener("accountsChanged", handleChange);
+        provider.removeListener("chainChanged", handleChange);
+        provider.removeListener("disconnect", handleChange);
+      }
+    };
+  }, [checkStatus]);
+  return { state, refresh: checkStatus };
+}
+function useSwitchToLocalIgra() {
+  const switchChain = async () => {
+    if (typeof window === "undefined" || !window.ethereum) return;
+    try {
+      await window.ethereum.request({
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: "0x4bd8" }]
+        // 19416
+      });
+    } catch (e) {
+      if (e.code === 4902) {
+        await window.ethereum.request({
+          method: "wallet_addEthereumChain",
+          params: [{
+            chainId: "0x4bd8",
+            chainName: "HardKas Igra Local",
+            rpcUrls: ["http://127.0.0.1:8545"],
+            nativeCurrency: { name: "iKAS", symbol: "iKAS", decimals: 18 }
+          }]
+        });
+      }
+    }
+  };
+  return { switchChain };
+}
+function useIgraInjectedAccount(sessionL2Address) {
+  const { state } = useMetaMaskLocal();
+  const matches = !!state.account && !!sessionL2Address && state.account.toLowerCase() === sessionL2Address.toLowerCase();
+  return {
+    injectedAddress: state.account,
+    sessionAddress: sessionL2Address,
+    matches
+  };
+}
+function useLocalIgraWalletClient() {
+  const { state } = useMetaMaskLocal();
+  const getClient = useCallback(() => {
+    if (!state.connected || !window.ethereum) return null;
+    return createWalletClient({
+      account: state.account,
+      transport: custom(window.ethereum)
+    });
+  }, [state.connected, state.account]);
+  return { getClient };
+}
+
+// src/hooks/kasware.ts
+import { useState as useState2, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+function useKasWareLocal() {
+  const [state, setState] = useState2({
+    installed: false,
+    connected: false,
+    supported: false,
+    localNetworkDetected: false,
+    errors: []
+  });
+  const checkStatus = useCallback2(async () => {
+    if (typeof window === "undefined" || !window.kasware) {
+      setState((s) => ({ ...s, installed: false }));
+      return;
+    }
+    try {
+      const provider = window.kasware;
+      const accounts = await provider.getAccounts();
+      const network = await provider.getNetwork();
+      setState({
+        installed: true,
+        connected: accounts.length > 0,
+        supported: true,
+        address: accounts[0],
+        network,
+        // Common local/dev network strings for KasWare
+        localNetworkDetected: ["kasparegtest", "localnet", "simnet"].includes(network),
+        errors: []
+      });
+    } catch (e) {
+      setState((s) => ({ ...s, errors: [e.message] }));
+    }
+  }, []);
+  useEffect4(() => {
+    if (typeof window === "undefined" || !window.kasware) return;
+    const provider = window.kasware;
+    checkStatus();
+    const handleChange = () => checkStatus();
+    provider.on("accountsChanged", handleChange);
+    provider.on("networkChanged", handleChange);
+    provider.on("disconnect", handleChange);
+    return () => {
+      if (provider.removeListener) {
+        provider.removeListener("accountsChanged", handleChange);
+        provider.removeListener("networkChanged", handleChange);
+        provider.removeListener("disconnect", handleChange);
+      }
+    };
+  }, [checkStatus]);
+  return { state, refresh: checkStatus };
+}
+function useConnectKasWareLocal() {
+  const { refresh } = useKasWareLocal();
+  const connect = async () => {
+    if (typeof window === "undefined" || !window.kasware) return null;
+    try {
+      const accounts = await window.kasware.requestAccounts();
+      await refresh();
+      return accounts[0];
+    } catch (e) {
+      console.error("KasWare connection failed:", e);
+      return null;
+    }
+  };
+  return { connect };
+}
+function useKasWareSessionMatch(sessionL1Address) {
+  const { state } = useKasWareLocal();
+  let matches = false;
+  let reason;
+  if (!state.installed) {
+    reason = "not-installed";
+  } else if (!state.connected) {
+    reason = "not-connected";
+  } else if (!sessionL1Address) {
+    reason = "no-session";
+  } else if (!state.localNetworkDetected) {
+    reason = "network-mismatch";
+  } else {
+    const normalizedWallet = state.address?.toLowerCase().trim();
+    const normalizedSession = sessionL1Address?.toLowerCase().trim();
+    matches = normalizedWallet === normalizedSession;
+    if (!matches) reason = "address-mismatch";
+  }
+  return {
+    walletAddress: state.address,
+    sessionAddress: sessionL1Address || void 0,
+    matches,
+    reason
+  };
+}
+
+// src/hooks/sandbox.ts
+import { useQuery as useQuery6, useMutation as useMutation2, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+import { useEffect as useEffect5 } from "react";
+function useSandboxSessions() {
+  const { config, subscribe } = useHardKas();
+  const queryClient = useQueryClient3();
+  useEffect5(() => {
+    const sync = () => queryClient.invalidateQueries({ queryKey: ["sandbox", "sessions"] });
+    return subscribe((event) => {
+      if ([
+        "sandbox-session-created",
+        "sandbox-session-paired",
+        "sandbox-session-expired",
+        "sandbox-session-disconnected"
+      ].includes(event.type)) {
+        sync();
+      }
+    });
+  }, [queryClient, subscribe]);
+  return useQuery6({
+    queryKey: ["sandbox", "sessions"],
+    queryFn: async () => {
+      const baseUrl = config.devServerUrl || "";
+      const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/walletconnect/sandbox/sessions` : `${baseUrl}/api/walletconnect/sandbox/sessions` : "/api/walletconnect/sandbox/sessions";
+      const res = await fetch(url);
+      const json = await res.json();
+      return json.sessions;
+    }
+  });
+}
+function useCreateSandboxSession() {
+  const { config } = useHardKas();
+  const queryClient = useQueryClient3();
+  return useMutation2({
+    mutationFn: async () => {
+      const baseUrl = config.devServerUrl || "";
+      const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/walletconnect/sandbox/create` : `${baseUrl}/api/walletconnect/sandbox/create` : "/api/walletconnect/sandbox/create";
+      const res = await fetch(url, { method: "POST" });
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sandbox", "sessions"] });
+    }
+  });
+}
+function usePairSandboxSession() {
+  const { config } = useHardKas();
+  const queryClient = useQueryClient3();
+  return useMutation2({
+    mutationFn: async (id) => {
+      const baseUrl = config.devServerUrl || "";
+      const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/walletconnect/sandbox/pair` : `${baseUrl}/api/walletconnect/sandbox/pair` : "/api/walletconnect/sandbox/pair";
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id })
+      });
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sandbox", "sessions"] });
+    }
+  });
+}
+function useDisconnectSandboxSession() {
+  const { config } = useHardKas();
+  const queryClient = useQueryClient3();
+  return useMutation2({
+    mutationFn: async (id) => {
+      const baseUrl = config.devServerUrl || "";
+      const url = baseUrl ? baseUrl.endsWith("/") ? `${baseUrl}api/walletconnect/sandbox/disconnect` : `${baseUrl}/api/walletconnect/sandbox/disconnect` : "/api/walletconnect/sandbox/disconnect";
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id })
+      });
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sandbox", "sessions"] });
+    }
+  });
+}
+
+// src/hooks/contracts.ts
+import { useQuery as useQuery7, useMutation as useMutation3 } from "@tanstack/react-query";
+function useIgraReadContract(options) {
+  const { igraClient, config } = useHardKas();
+  const { data: session } = useHardKasSession();
+  return useQuery7({
+    queryKey: ["igra", "read", options.address, options.functionName, options.args, config.igraRpcUrl, session?.name],
+    queryFn: async () => {
+      return await igraClient.readContract({
+        address: options.address,
+        abi: options.abi,
+        functionName: options.functionName,
+        args: options.args
+      });
+    },
+    enabled: options.enabled ?? true,
+    refetchInterval: options.refetchInterval ?? false
+  });
+}
+function useIgraWriteContract() {
+  return useMutation3({
+    mutationFn: async (params) => {
+      if (!params.walletClient) {
+        throw new Error("A wallet client is required to write to a contract.");
+      }
+      return await params.walletClient.writeContract({
+        address: params.address,
+        abi: params.abi,
+        functionName: params.functionName,
+        args: params.args
+      });
+    }
+  });
+}
+function useIgraWaitForReceipt() {
+  const { igraClient } = useHardKas();
+  return useMutation3({
+    mutationFn: async (hash) => {
+      return await igraClient.waitForTransactionReceipt({ hash });
+    }
+  });
+}
+export {
+  HardKasProvider,
+  useBridgeLocalPlan,
+  useBridgeLocalSimulation,
+  useConnectKasWareLocal,
+  useCreateSandboxSession,
+  useDisconnectSandboxSession,
+  useHardKas,
+  useHardKasHealth,
+  useHardKasSession,
+  useIgraAccount,
+  useIgraBalance,
+  useIgraInjectedAccount,
+  useIgraReadContract,
+  useIgraWaitForReceipt,
+  useIgraWriteContract,
+  useKasWareLocal,
+  useKasWareSessionMatch,
+  useKaspaBalance,
+  useKaspaWallet,
+  useLocalIgraWalletClient,
+  useMetaMaskLocal,
+  usePairSandboxSession,
+  useSandboxSessions,
+  useSwitchToLocalIgra
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@hardkas/react",
+  "version": "0.4.0-alpha",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.61.5",
+    "viem": "^2.21.51",
+    "@hardkas/bridge-local": "0.4.0-alpha",
+    "@hardkas/core": "0.4.0-alpha",
+    "@hardkas/kaspa-rpc": "0.4.0-alpha",
+    "@hardkas/sessions": "0.4.0-alpha",
+    "@hardkas/l2": "0.4.0-alpha"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^29.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^5.0.0",
+    "vitest": "^2.1.8"
+  },
+  "license": "MIT",
+  "author": "Javier Rodriguez",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  }
+}