@fiber-pay/react 0.2.3

package/README.md

@@ -0,0 +1,41 @@
+# @fiber-pay/react
+
+React hooks and components for browser payment flows on Fiber.
+
+## Install
+
+```bash
+pnpm add @fiber-pay/react react
+```
+
+## One-line import
+
+```tsx
+import { FiberPayQuickCard, useFiberNode, useFiberPayment } from '@fiber-pay/react';
+```
+
+## Quick start
+
+```tsx
+import { FiberPayQuickCard } from '@fiber-pay/react';
+
+export function App() {
+  return <FiberPayQuickCard network="testnet" />;
+}
+```
+
+## Component customization
+
+`FiberPayQuickCard` supports lightweight integration hooks:
+
+- `className`, `style`, `title`
+- `onInvoiceCreated(invoice)`
+- `onPaymentResult(result)`
+- `onError({ scope, message })`
+
+## Hooks
+
+- `useFiberNode(options)`
+- `useFiberPayment(node)`
+
+`useFiberNode` exposes passkey/password startup, node lifecycle methods, and passkey diagnostics (`passkeySupportReason`, `passkeyUnavailableReason`).

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GetPaymentResult, FiberBrowserNodeConfig, FiberWasmFactory, BrowserNodeState, FiberBrowserNode, NodeInfoResult, PasskeySupportReason } from '@fiber-pay/sdk/browser';
+import { CSSProperties } from 'react';
+
+interface FiberPayQuickCardProps {
+    network?: 'testnet' | 'mainnet';
+    walletId?: string;
+    passkeyUsername?: string;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    onInvoiceCreated?: (invoice: string) => void;
+    onPaymentResult?: (result: GetPaymentResult) => void;
+    onError?: (error: {
+        scope: 'node' | 'payment' | 'invoice';
+        message: string;
+    }) => void;
+}
+declare function FiberPayQuickCard(props: FiberPayQuickCardProps): react_jsx_runtime.JSX.Element;
+
+interface UseFiberNodeOptions {
+    network: 'testnet' | 'mainnet';
+    walletId?: string;
+    nodeConfig?: FiberBrowserNodeConfig['nodeConfig'];
+    wasmFactory?: FiberWasmFactory;
+}
+interface UseFiberNodeResult {
+    state: BrowserNodeState;
+    node: FiberBrowserNode | null;
+    nodeInfo: NodeInfoResult | null;
+    error: string | null;
+    isPasskeySupported: boolean;
+    passkeySupportReason: PasskeySupportReason | null;
+    passkeyUnavailableReason: string | null;
+    hasPasskeyConfigured: boolean;
+    startWithPassword: (password: string) => Promise<void>;
+    createPasskeyAndStart: (username?: string) => Promise<void>;
+    startWithPasskey: () => Promise<void>;
+    stop: () => Promise<void>;
+}
+declare function useFiberNode(options: UseFiberNodeOptions): UseFiberNodeResult;
+
+interface UseFiberPaymentResult {
+    payInvoice: (invoice: string) => Promise<void>;
+    isPaying: boolean;
+    paymentResult: GetPaymentResult | null;
+    error: string | null;
+}
+declare function useFiberPayment(node: FiberBrowserNode | null): UseFiberPaymentResult;
+
+export { FiberPayQuickCard, type FiberPayQuickCardProps, type UseFiberNodeOptions, type UseFiberNodeResult, type UseFiberPaymentResult, useFiberNode, useFiberPayment };

package/dist/index.js

@@ -0,0 +1,488 @@
+// src/fiber-pay-quick-card.tsx
+import { useEffect as useEffect3, useId, useState as useState3 } from "react";
+
+// src/use-fiber-node.ts
+import {
+  FiberBrowserNode,
+  PasskeyCredentialProvider,
+  PasswordCredentialProvider
+} from "@fiber-pay/sdk/browser";
+import { useCallback, useEffect, useRef, useState } from "react";
+var PASSKEY_UNAVAILABLE_REASON_TEXT = {
+  "window-unavailable": "Passkey is not available because there is no browser window context.",
+  "insecure-context": "Passkey requires a secure context (HTTPS or localhost).",
+  "webauthn-unavailable": "This browser does not provide WebAuthn support for passkeys.",
+  "prf-unsupported": "This browser or authenticator does not support WebAuthn PRF.",
+  unknown: "Passkey support could not be fully detected in this environment."
+};
+function isPasskeyPotentiallySupported(status) {
+  return status.supported || status.reason === "unknown";
+}
+function toPasskeyUnavailableReason(reason) {
+  if (reason === "supported") {
+    return null;
+  }
+  return PASSKEY_UNAVAILABLE_REASON_TEXT[reason];
+}
+function asErrorMessage(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+function useFiberNode(options) {
+  const walletId = options.walletId ?? `wallet-${options.network}`;
+  const [state, setState] = useState("idle");
+  const [nodeInfo, setNodeInfo] = useState(null);
+  const [error, setError] = useState(null);
+  const [isPasskeySupported, setIsPasskeySupported] = useState(false);
+  const [passkeySupportReason, setPasskeySupportReason] = useState(
+    null
+  );
+  const [passkeyUnavailableReason, setPasskeyUnavailableReason] = useState(null);
+  const [hasPasskeyConfigured, setHasPasskeyConfigured] = useState(false);
+  const nodeRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const nodeListenersRef = useRef(null);
+  const detachNodeListeners = useCallback((node) => {
+    if (!node || !nodeListenersRef.current) {
+      return;
+    }
+    node.off("stateChange", nodeListenersRef.current.stateChange);
+    node.off("error", nodeListenersRef.current.error);
+    nodeListenersRef.current = null;
+  }, []);
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+      const node = nodeRef.current;
+      nodeRef.current = null;
+      if (node) {
+        detachNodeListeners(node);
+        void node.stop().catch(() => {
+        });
+      }
+    },
+    [detachNodeListeners]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    PasskeyCredentialProvider.getSupportStatus().then((status) => {
+      if (!cancelled) {
+        const supported = isPasskeyPotentiallySupported(status);
+        setIsPasskeySupported(supported);
+        setPasskeySupportReason(status.reason);
+        setPasskeyUnavailableReason(supported ? null : toPasskeyUnavailableReason(status.reason));
+      }
+    }).catch((supportError) => {
+      if (!cancelled) {
+        setIsPasskeySupported(false);
+        setPasskeySupportReason("unknown");
+        setPasskeyUnavailableReason(toPasskeyUnavailableReason("unknown"));
+      }
+      if (supportError instanceof Error) {
+        console.warn("[fiber-pay/react] Failed to detect passkey support:", supportError.message);
+      }
+    });
+    const provider = new PasskeyCredentialProvider(walletId);
+    setHasPasskeyConfigured(provider.isConfigured());
+    return () => {
+      cancelled = true;
+    };
+  }, [walletId]);
+  const initNode = useCallback(
+    (credential) => {
+      if (nodeRef.current) {
+        const existingState = nodeRef.current.state;
+        if (existingState !== "idle" && existingState !== "stopped" && existingState !== "error") {
+          throw new Error("Node already running");
+        }
+        detachNodeListeners(nodeRef.current);
+        nodeRef.current = null;
+      }
+      const nodeConfig = {
+        network: options.network,
+        credential,
+        nodeConfig: {
+          databasePrefix: `/${walletId}`,
+          ...options.nodeConfig ?? {}
+        }
+      };
+      if (options.wasmFactory) {
+        nodeConfig.wasmFactory = options.wasmFactory;
+      }
+      const node = new FiberBrowserNode(nodeConfig);
+      nodeRef.current = node;
+      const listeners = {
+        stateChange: (nextState) => {
+          if (!isMountedRef.current) {
+            return;
+          }
+          setState(nextState);
+          if (nextState === "stopped") {
+            setNodeInfo(null);
+          }
+        },
+        error: (nextError) => {
+          if (!isMountedRef.current) {
+            return;
+          }
+          setError(nextError.message);
+        }
+      };
+      nodeListenersRef.current = listeners;
+      node.on("stateChange", listeners.stateChange);
+      node.on("error", listeners.error);
+      return node;
+    },
+    [detachNodeListeners, options.network, options.nodeConfig, options.wasmFactory, walletId]
+  );
+  const cleanupFailedStart = useCallback(
+    async (node) => {
+      if (!node) {
+        return;
+      }
+      try {
+        if (node.state !== "idle" && node.state !== "stopped") {
+          await node.stop();
+        }
+      } catch {
+      } finally {
+        detachNodeListeners(node);
+        if (nodeRef.current === node) {
+          nodeRef.current = null;
+        }
+      }
+    },
+    [detachNodeListeners]
+  );
+  const startWithPassword = useCallback(
+    async (password) => {
+      setError(null);
+      let node = null;
+      try {
+        const credential = new PasswordCredentialProvider(walletId);
+        node = initNode(credential);
+        const info = await node.start({ unlockParams: { password } });
+        if (isMountedRef.current) {
+          setNodeInfo(info);
+        }
+      } catch (startError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage(startError));
+        }
+        await cleanupFailedStart(node);
+      }
+    },
+    [cleanupFailedStart, initNode, walletId]
+  );
+  const createPasskeyAndStart = useCallback(
+    async (username = "User") => {
+      setError(null);
+      let node = null;
+      try {
+        const credential = new PasskeyCredentialProvider(walletId);
+        await credential.register(username);
+        if (isMountedRef.current) {
+          setHasPasskeyConfigured(true);
+        }
+        node = initNode(credential);
+        const info = await node.start();
+        if (isMountedRef.current) {
+          setNodeInfo(info);
+        }
+      } catch (startError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage(startError));
+        }
+        await cleanupFailedStart(node);
+      }
+    },
+    [cleanupFailedStart, initNode, walletId]
+  );
+  const startWithPasskey = useCallback(async () => {
+    setError(null);
+    let node = null;
+    try {
+      const credential = new PasskeyCredentialProvider(walletId);
+      node = initNode(credential);
+      const info = await node.start();
+      if (isMountedRef.current) {
+        setNodeInfo(info);
+      }
+    } catch (startError) {
+      if (isMountedRef.current) {
+        setError(asErrorMessage(startError));
+      }
+      await cleanupFailedStart(node);
+    }
+  }, [cleanupFailedStart, initNode, walletId]);
+  const stop = useCallback(async () => {
+    const node = nodeRef.current;
+    if (!node) {
+      return;
+    }
+    try {
+      await node.stop();
+    } catch (stopError) {
+      if (isMountedRef.current) {
+        setError(asErrorMessage(stopError));
+      }
+    } finally {
+      detachNodeListeners(node);
+      if (nodeRef.current === node) {
+        nodeRef.current = null;
+      }
+      if (isMountedRef.current) {
+        setNodeInfo(null);
+      }
+    }
+  }, [detachNodeListeners]);
+  return {
+    state,
+    node: nodeRef.current,
+    nodeInfo,
+    error,
+    isPasskeySupported,
+    passkeySupportReason,
+    passkeyUnavailableReason,
+    hasPasskeyConfigured,
+    startWithPassword,
+    createPasskeyAndStart,
+    startWithPasskey,
+    stop
+  };
+}
+
+// src/use-fiber-payment.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function asErrorMessage2(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+function useFiberPayment(node) {
+  const [isPaying, setIsPaying] = useState2(false);
+  const [paymentResult, setPaymentResult] = useState2(null);
+  const [error, setError] = useState2(null);
+  const isMountedRef = useRef2(true);
+  useEffect2(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+  const payInvoice = useCallback2(
+    async (invoice) => {
+      if (!node) {
+        if (isMountedRef.current) {
+          setError("Node is not initialized");
+        }
+        return;
+      }
+      if (isMountedRef.current) {
+        setIsPaying(true);
+        setError(null);
+        setPaymentResult(null);
+      }
+      try {
+        const parsed = await node.parseInvoice({ invoice });
+        await node.sendPayment({ invoice });
+        const paymentHash = parsed.invoice.data.payment_hash;
+        const result = await node.waitForPayment(paymentHash);
+        if (result.status === "Failed") {
+          throw new Error(result.failed_error ?? "Payment failed during routing/execution");
+        }
+        if (isMountedRef.current) {
+          setPaymentResult(result);
+        }
+      } catch (payError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage2(payError));
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsPaying(false);
+        }
+      }
+    },
+    [node]
+  );
+  return {
+    payInvoice,
+    isPaying,
+    paymentResult,
+    error
+  };
+}
+
+// src/fiber-pay-quick-card.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ONE_CKB_SHANNONS = "0x5f5e100";
+var cardStyle = {
+  border: "1px solid #ddd",
+  borderRadius: 8,
+  padding: 16,
+  maxWidth: 520
+};
+var rowStyle = {
+  display: "flex",
+  gap: 8
+};
+var rowWithMarginStyle = {
+  ...rowStyle,
+  marginBottom: 8
+};
+function FiberPayQuickCard(props) {
+  const network = props.network ?? "testnet";
+  const passkeyUsername = props.passkeyUsername ?? "User";
+  const title = props.title ?? "FiberPay Quick Card";
+  const onError = props.onError;
+  const onInvoiceCreated = props.onInvoiceCreated;
+  const onPaymentResult = props.onPaymentResult;
+  const passwordInputId = useId();
+  const invoiceInputId = useId();
+  const {
+    node,
+    nodeInfo,
+    state,
+    error: nodeError,
+    isPasskeySupported,
+    hasPasskeyConfigured,
+    startWithPassword,
+    startWithPasskey,
+    createPasskeyAndStart,
+    stop
+  } = useFiberNode({ network, walletId: props.walletId });
+  const { payInvoice, isPaying, error: payError, paymentResult } = useFiberPayment(node);
+  const [password, setPassword] = useState3("");
+  const [invoiceInput, setInvoiceInput] = useState3("");
+  const [createdInvoice, setCreatedInvoice] = useState3("");
+  const [isCreatingInvoice, setIsCreatingInvoice] = useState3(false);
+  const [invoiceError, setInvoiceError] = useState3(null);
+  useEffect3(() => {
+    if (nodeError) {
+      onError?.({ scope: "node", message: nodeError });
+    }
+  }, [nodeError, onError]);
+  useEffect3(() => {
+    if (payError) {
+      onError?.({ scope: "payment", message: payError });
+    }
+  }, [onError, payError]);
+  useEffect3(() => {
+    if (paymentResult) {
+      onPaymentResult?.(paymentResult);
+    }
+  }, [onPaymentResult, paymentResult]);
+  const createInvoice = async () => {
+    if (!node) {
+      return;
+    }
+    setIsCreatingInvoice(true);
+    setInvoiceError(null);
+    try {
+      const created = await node.newInvoice({
+        amount: ONE_CKB_SHANNONS,
+        currency: network === "mainnet" ? "Fibb" : "Fibt",
+        description: "FiberPay QuickCard invoice"
+      });
+      setCreatedInvoice(created.invoice_address);
+      onInvoiceCreated?.(created.invoice_address);
+    } catch (createInvoiceError) {
+      const message = createInvoiceError instanceof Error ? createInvoiceError.message : String(createInvoiceError);
+      setInvoiceError(message);
+      onError?.({ scope: "invoice", message });
+    } finally {
+      setIsCreatingInvoice(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { ...cardStyle, ...props.style }, className: props.className, children: [
+    /* @__PURE__ */ jsxs("h3", { children: [
+      title,
+      " (",
+      network,
+      ")"
+    ] }),
+    !nodeInfo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      isPasskeySupported ? /* @__PURE__ */ jsx("div", { style: rowWithMarginStyle, children: hasPasskeyConfigured ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void startWithPasskey(), children: "Login with Passkey" }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void createPasskeyAndStart(passkeyUsername), children: "Register Passkey" }) }) : null,
+      /* @__PURE__ */ jsx("label", { htmlFor: passwordInputId, children: "Password" }),
+      /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: passwordInputId,
+            type: "password",
+            autoComplete: "current-password",
+            "aria-label": "Node password",
+            value: password,
+            onChange: (event) => setPassword(event.target.value),
+            placeholder: "Password"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void startWithPassword(password), children: "Start with Password" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "State:" }),
+        " ",
+        state
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Pubkey:" }),
+        " ",
+        nodeInfo.pubkey
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: rowWithMarginStyle, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void createInvoice(), disabled: isCreatingInvoice, children: isCreatingInvoice ? "Creating..." : "Create Invoice (1 CKB)" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void stop(), children: "Stop Node" })
+      ] }),
+      createdInvoice ? /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Created invoice:" }),
+        " ",
+        createdInvoice
+      ] }) : null,
+      /* @__PURE__ */ jsx("label", { htmlFor: invoiceInputId, children: "Invoice" }),
+      /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: invoiceInputId,
+            "aria-label": "Invoice to pay",
+            value: invoiceInput,
+            onChange: (event) => setInvoiceInput(event.target.value),
+            placeholder: "Paste invoice to pay"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void payInvoice(invoiceInput), disabled: isPaying, children: isPaying ? "Paying..." : "Pay" })
+      ] }),
+      paymentResult ? /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Payment:" }),
+        " ",
+        paymentResult.status
+      ] }) : null
+    ] }),
+    nodeError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Node error:" }),
+      " ",
+      nodeError
+    ] }) : null,
+    payError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Payment error:" }),
+      " ",
+      payError
+    ] }) : null,
+    invoiceError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Invoice error:" }),
+      " ",
+      invoiceError
+    ] }) : null
+  ] });
+}
+export {
+  FiberPayQuickCard,
+  useFiberNode,
+  useFiberPayment
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fiber-pay-quick-card.tsx","../src/use-fiber-node.ts","../src/use-fiber-payment.ts"],"sourcesContent":["import type { GetPaymentResult } from '@fiber-pay/sdk/browser';\nimport { type CSSProperties, useEffect, useId, useState } from 'react';\nimport { useFiberNode } from './use-fiber-node.js';\nimport { useFiberPayment } from './use-fiber-payment.js';\n\nexport interface FiberPayQuickCardProps {\n  network?: 'testnet' | 'mainnet';\n  walletId?: string;\n  passkeyUsername?: string;\n  title?: string;\n  className?: string;\n  style?: CSSProperties;\n  onInvoiceCreated?: (invoice: string) => void;\n  onPaymentResult?: (result: GetPaymentResult) => void;\n  onError?: (error: { scope: 'node' | 'payment' | 'invoice'; message: string }) => void;\n}\n\nconst ONE_CKB_SHANNONS = '0x5f5e100';\n\nconst cardStyle: CSSProperties = {\n  border: '1px solid #ddd',\n  borderRadius: 8,\n  padding: 16,\n  maxWidth: 520,\n};\n\nconst rowStyle: CSSProperties = {\n  display: 'flex',\n  gap: 8,\n};\n\nconst rowWithMarginStyle: CSSProperties = {\n  ...rowStyle,\n  marginBottom: 8,\n};\n\nexport function FiberPayQuickCard(props: FiberPayQuickCardProps) {\n  const network = props.network ?? 'testnet';\n  const passkeyUsername = props.passkeyUsername ?? 'User';\n  const title = props.title ?? 'FiberPay Quick Card';\n  const onError = props.onError;\n  const onInvoiceCreated = props.onInvoiceCreated;\n  const onPaymentResult = props.onPaymentResult;\n  const passwordInputId = useId();\n  const invoiceInputId = useId();\n\n  const {\n    node,\n    nodeInfo,\n    state,\n    error: nodeError,\n    isPasskeySupported,\n    hasPasskeyConfigured,\n    startWithPassword,\n    startWithPasskey,\n    createPasskeyAndStart,\n    stop,\n  } = useFiberNode({ network, walletId: props.walletId });\n\n  const { payInvoice, isPaying, error: payError, paymentResult } = useFiberPayment(node);\n\n  const [password, setPassword] = useState('');\n  const [invoiceInput, setInvoiceInput] = useState('');\n  const [createdInvoice, setCreatedInvoice] = useState('');\n  const [isCreatingInvoice, setIsCreatingInvoice] = useState(false);\n  const [invoiceError, setInvoiceError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (nodeError) {\n      onError?.({ scope: 'node', message: nodeError });\n    }\n  }, [nodeError, onError]);\n\n  useEffect(() => {\n    if (payError) {\n      onError?.({ scope: 'payment', message: payError });\n    }\n  }, [onError, payError]);\n\n  useEffect(() => {\n    if (paymentResult) {\n      onPaymentResult?.(paymentResult);\n    }\n  }, [onPaymentResult, paymentResult]);\n\n  const createInvoice = async () => {\n    if (!node) {\n      return;\n    }\n\n    setIsCreatingInvoice(true);\n    setInvoiceError(null);\n    try {\n      const created = await node.newInvoice({\n        amount: ONE_CKB_SHANNONS,\n        currency: network === 'mainnet' ? 'Fibb' : 'Fibt',\n        description: 'FiberPay QuickCard invoice',\n      });\n      setCreatedInvoice(created.invoice_address);\n      onInvoiceCreated?.(created.invoice_address);\n    } catch (createInvoiceError) {\n      const message =\n        createInvoiceError instanceof Error\n          ? createInvoiceError.message\n          : String(createInvoiceError);\n      setInvoiceError(message);\n      onError?.({ scope: 'invoice', message });\n    } finally {\n      setIsCreatingInvoice(false);\n    }\n  };\n\n  return (\n    <div style={{ ...cardStyle, ...props.style }} className={props.className}>\n      <h3>\n        {title} ({network})\n      </h3>\n\n      {!nodeInfo ? (\n        <>\n          {isPasskeySupported ? (\n            <div style={rowWithMarginStyle}>\n              {hasPasskeyConfigured ? (\n                <button type=\"button\" onClick={() => void startWithPasskey()}>\n                  Login with Passkey\n                </button>\n              ) : (\n                <button type=\"button\" onClick={() => void createPasskeyAndStart(passkeyUsername)}>\n                  Register Passkey\n                </button>\n              )}\n            </div>\n          ) : null}\n\n          <label htmlFor={passwordInputId}>Password</label>\n          <div style={rowStyle}>\n            <input\n              id={passwordInputId}\n              type=\"password\"\n              autoComplete=\"current-password\"\n              aria-label=\"Node password\"\n              value={password}\n              onChange={(event) => setPassword(event.target.value)}\n              placeholder=\"Password\"\n            />\n            <button type=\"button\" onClick={() => void startWithPassword(password)}>\n              Start with Password\n            </button>\n          </div>\n        </>\n      ) : (\n        <>\n          <p>\n            <strong>State:</strong> {state}\n          </p>\n          <p>\n            <strong>Pubkey:</strong> {nodeInfo.pubkey}\n          </p>\n\n          <div style={rowWithMarginStyle}>\n            <button type=\"button\" onClick={() => void createInvoice()} disabled={isCreatingInvoice}>\n              {isCreatingInvoice ? 'Creating...' : 'Create Invoice (1 CKB)'}\n            </button>\n            <button type=\"button\" onClick={() => void stop()}>\n              Stop Node\n            </button>\n          </div>\n\n          {createdInvoice ? (\n            <p>\n              <strong>Created invoice:</strong> {createdInvoice}\n            </p>\n          ) : null}\n\n          <label htmlFor={invoiceInputId}>Invoice</label>\n          <div style={rowStyle}>\n            <input\n              id={invoiceInputId}\n              aria-label=\"Invoice to pay\"\n              value={invoiceInput}\n              onChange={(event) => setInvoiceInput(event.target.value)}\n              placeholder=\"Paste invoice to pay\"\n            />\n            <button type=\"button\" onClick={() => void payInvoice(invoiceInput)} disabled={isPaying}>\n              {isPaying ? 'Paying...' : 'Pay'}\n            </button>\n          </div>\n\n          {paymentResult ? (\n            <p>\n              <strong>Payment:</strong> {paymentResult.status}\n            </p>\n          ) : null}\n        </>\n      )}\n\n      {nodeError ? (\n        <p style={{ color: '#b91c1c' }}>\n          <strong>Node error:</strong> {nodeError}\n        </p>\n      ) : null}\n      {payError ? (\n        <p style={{ color: '#b91c1c' }}>\n          <strong>Payment error:</strong> {payError}\n        </p>\n      ) : null}\n      {invoiceError ? (\n        <p style={{ color: '#b91c1c' }}>\n          <strong>Invoice error:</strong> {invoiceError}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n","import {\n  type BrowserNodeState,\n  FiberBrowserNode,\n  type FiberBrowserNodeConfig,\n  type FiberWasmFactory,\n  type NodeInfoResult,\n  PasskeyCredentialProvider,\n  type PasskeySupportReason,\n  type PasskeySupportStatus,\n  PasswordCredentialProvider,\n} from '@fiber-pay/sdk/browser';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseFiberNodeOptions {\n  network: 'testnet' | 'mainnet';\n  walletId?: string;\n  nodeConfig?: FiberBrowserNodeConfig['nodeConfig'];\n  wasmFactory?: FiberWasmFactory;\n}\n\nexport interface UseFiberNodeResult {\n  state: BrowserNodeState;\n  node: FiberBrowserNode | null;\n  nodeInfo: NodeInfoResult | null;\n  error: string | null;\n  isPasskeySupported: boolean;\n  passkeySupportReason: PasskeySupportReason | null;\n  passkeyUnavailableReason: string | null;\n  hasPasskeyConfigured: boolean;\n  startWithPassword: (password: string) => Promise<void>;\n  createPasskeyAndStart: (username?: string) => Promise<void>;\n  startWithPasskey: () => Promise<void>;\n  stop: () => Promise<void>;\n}\n\nconst PASSKEY_UNAVAILABLE_REASON_TEXT: Record<\n  Exclude<PasskeySupportReason, 'supported'>,\n  string\n> = {\n  'window-unavailable': 'Passkey is not available because there is no browser window context.',\n  'insecure-context': 'Passkey requires a secure context (HTTPS or localhost).',\n  'webauthn-unavailable': 'This browser does not provide WebAuthn support for passkeys.',\n  'prf-unsupported': 'This browser or authenticator does not support WebAuthn PRF.',\n  unknown: 'Passkey support could not be fully detected in this environment.',\n};\n\nexport function isPasskeyPotentiallySupported(status: PasskeySupportStatus): boolean {\n  return status.supported || status.reason === 'unknown';\n}\n\nexport function toPasskeyUnavailableReason(reason: PasskeySupportReason): string | null {\n  if (reason === 'supported') {\n    return null;\n  }\n  return PASSKEY_UNAVAILABLE_REASON_TEXT[reason];\n}\n\nfunction asErrorMessage(error: unknown): string {\n  if (error instanceof Error) {\n    return error.message;\n  }\n  return String(error);\n}\n\ninterface NodeEventListeners {\n  stateChange: (nextState: BrowserNodeState) => void;\n  error: (nextError: Error) => void;\n}\n\nexport function useFiberNode(options: UseFiberNodeOptions): UseFiberNodeResult {\n  const walletId = options.walletId ?? `wallet-${options.network}`;\n  const [state, setState] = useState<BrowserNodeState>('idle');\n  const [nodeInfo, setNodeInfo] = useState<NodeInfoResult | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [isPasskeySupported, setIsPasskeySupported] = useState(false);\n  const [passkeySupportReason, setPasskeySupportReason] = useState<PasskeySupportReason | null>(\n    null,\n  );\n  const [passkeyUnavailableReason, setPasskeyUnavailableReason] = useState<string | null>(null);\n  const [hasPasskeyConfigured, setHasPasskeyConfigured] = useState(false);\n\n  const nodeRef = useRef<FiberBrowserNode | null>(null);\n  const isMountedRef = useRef(true);\n  const nodeListenersRef = useRef<NodeEventListeners | null>(null);\n\n  const detachNodeListeners = useCallback((node: FiberBrowserNode | null) => {\n    if (!node || !nodeListenersRef.current) {\n      return;\n    }\n\n    node.off('stateChange', nodeListenersRef.current.stateChange);\n    node.off('error', nodeListenersRef.current.error);\n    nodeListenersRef.current = null;\n  }, []);\n\n  useEffect(\n    () => () => {\n      isMountedRef.current = false;\n\n      const node = nodeRef.current;\n      nodeRef.current = null;\n\n      if (node) {\n        detachNodeListeners(node);\n        void node.stop().catch(() => {});\n      }\n    },\n    [detachNodeListeners],\n  );\n\n  useEffect(() => {\n    let cancelled = false;\n\n    PasskeyCredentialProvider.getSupportStatus()\n      .then((status) => {\n        if (!cancelled) {\n          const supported = isPasskeyPotentiallySupported(status);\n          setIsPasskeySupported(supported);\n          setPasskeySupportReason(status.reason);\n          setPasskeyUnavailableReason(supported ? null : toPasskeyUnavailableReason(status.reason));\n        }\n      })\n      .catch((supportError) => {\n        if (!cancelled) {\n          setIsPasskeySupported(false);\n          setPasskeySupportReason('unknown');\n          setPasskeyUnavailableReason(toPasskeyUnavailableReason('unknown'));\n        }\n\n        if (supportError instanceof Error) {\n          console.warn('[fiber-pay/react] Failed to detect passkey support:', supportError.message);\n        }\n      });\n\n    const provider = new PasskeyCredentialProvider(walletId);\n    setHasPasskeyConfigured(provider.isConfigured());\n\n    return () => {\n      cancelled = true;\n    };\n  }, [walletId]);\n\n  const initNode = useCallback(\n    (credential: PasswordCredentialProvider | PasskeyCredentialProvider) => {\n      if (nodeRef.current) {\n        const existingState = nodeRef.current.state;\n        if (existingState !== 'idle' && existingState !== 'stopped' && existingState !== 'error') {\n          throw new Error('Node already running');\n        }\n\n        detachNodeListeners(nodeRef.current);\n        nodeRef.current = null;\n      }\n\n      const nodeConfig: ConstructorParameters<typeof FiberBrowserNode>[0] = {\n        network: options.network,\n        credential,\n        nodeConfig: {\n          databasePrefix: `/${walletId}`,\n          ...(options.nodeConfig ?? {}),\n        },\n      };\n\n      if (options.wasmFactory) {\n        nodeConfig.wasmFactory = options.wasmFactory;\n      }\n\n      const node = new FiberBrowserNode(nodeConfig);\n\n      nodeRef.current = node;\n\n      const listeners: NodeEventListeners = {\n        stateChange: (nextState) => {\n          if (!isMountedRef.current) {\n            return;\n          }\n\n          setState(nextState);\n          if (nextState === 'stopped') {\n            setNodeInfo(null);\n          }\n        },\n        error: (nextError: Error) => {\n          if (!isMountedRef.current) {\n            return;\n          }\n\n          setError(nextError.message);\n        },\n      };\n\n      nodeListenersRef.current = listeners;\n      node.on('stateChange', listeners.stateChange);\n      node.on('error', listeners.error);\n\n      return node;\n    },\n    [detachNodeListeners, options.network, options.nodeConfig, options.wasmFactory, walletId],\n  );\n\n  const cleanupFailedStart = useCallback(\n    async (node: FiberBrowserNode | null) => {\n      if (!node) {\n        return;\n      }\n\n      try {\n        if (node.state !== 'idle' && node.state !== 'stopped') {\n          await node.stop();\n        }\n      } catch {\n        // Ignore cleanup failures after a start error.\n      } finally {\n        detachNodeListeners(node);\n        if (nodeRef.current === node) {\n          nodeRef.current = null;\n        }\n      }\n    },\n    [detachNodeListeners],\n  );\n\n  const startWithPassword = useCallback(\n    async (password: string) => {\n      setError(null);\n      let node: FiberBrowserNode | null = null;\n\n      try {\n        const credential = new PasswordCredentialProvider(walletId);\n        node = initNode(credential);\n        const info = await node.start({ unlockParams: { password } });\n        if (isMountedRef.current) {\n          setNodeInfo(info);\n        }\n      } catch (startError) {\n        if (isMountedRef.current) {\n          setError(asErrorMessage(startError));\n        }\n\n        await cleanupFailedStart(node);\n      }\n    },\n    [cleanupFailedStart, initNode, walletId],\n  );\n\n  const createPasskeyAndStart = useCallback(\n    async (username = 'User') => {\n      setError(null);\n      let node: FiberBrowserNode | null = null;\n\n      try {\n        const credential = new PasskeyCredentialProvider(walletId);\n        await credential.register(username);\n        if (isMountedRef.current) {\n          setHasPasskeyConfigured(true);\n        }\n\n        node = initNode(credential);\n        const info = await node.start();\n        if (isMountedRef.current) {\n          setNodeInfo(info);\n        }\n      } catch (startError) {\n        if (isMountedRef.current) {\n          setError(asErrorMessage(startError));\n        }\n\n        await cleanupFailedStart(node);\n      }\n    },\n    [cleanupFailedStart, initNode, walletId],\n  );\n\n  const startWithPasskey = useCallback(async () => {\n    setError(null);\n    let node: FiberBrowserNode | null = null;\n\n    try {\n      const credential = new PasskeyCredentialProvider(walletId);\n      node = initNode(credential);\n      const info = await node.start();\n      if (isMountedRef.current) {\n        setNodeInfo(info);\n      }\n    } catch (startError) {\n      if (isMountedRef.current) {\n        setError(asErrorMessage(startError));\n      }\n\n      await cleanupFailedStart(node);\n    }\n  }, [cleanupFailedStart, initNode, walletId]);\n\n  const stop = useCallback(async () => {\n    const node = nodeRef.current;\n    if (!node) {\n      return;\n    }\n\n    try {\n      await node.stop();\n    } catch (stopError) {\n      if (isMountedRef.current) {\n        setError(asErrorMessage(stopError));\n      }\n    } finally {\n      detachNodeListeners(node);\n      if (nodeRef.current === node) {\n        nodeRef.current = null;\n      }\n\n      if (isMountedRef.current) {\n        setNodeInfo(null);\n      }\n    }\n  }, [detachNodeListeners]);\n\n  return {\n    state,\n    node: nodeRef.current,\n    nodeInfo,\n    error,\n    isPasskeySupported,\n    passkeySupportReason,\n    passkeyUnavailableReason,\n    hasPasskeyConfigured,\n    startWithPassword,\n    createPasskeyAndStart,\n    startWithPasskey,\n    stop,\n  };\n}\n","import type { FiberBrowserNode, GetPaymentResult } from '@fiber-pay/sdk/browser';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseFiberPaymentResult {\n  payInvoice: (invoice: string) => Promise<void>;\n  isPaying: boolean;\n  paymentResult: GetPaymentResult | null;\n  error: string | null;\n}\n\nfunction asErrorMessage(error: unknown): string {\n  if (error instanceof Error) {\n    return error.message;\n  }\n  return String(error);\n}\n\nexport function useFiberPayment(node: FiberBrowserNode | null): UseFiberPaymentResult {\n  const [isPaying, setIsPaying] = useState(false);\n  const [paymentResult, setPaymentResult] = useState<GetPaymentResult | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const isMountedRef = useRef(true);\n\n  useEffect(\n    () => () => {\n      isMountedRef.current = false;\n    },\n    [],\n  );\n\n  const payInvoice = useCallback(\n    async (invoice: string) => {\n      if (!node) {\n        if (isMountedRef.current) {\n          setError('Node is not initialized');\n        }\n        return;\n      }\n\n      if (isMountedRef.current) {\n        setIsPaying(true);\n        setError(null);\n        setPaymentResult(null);\n      }\n\n      try {\n        const parsed = await node.parseInvoice({ invoice });\n        await node.sendPayment({ invoice });\n\n        const paymentHash = parsed.invoice.data.payment_hash;\n        const result = await node.waitForPayment(paymentHash);\n\n        if (result.status === 'Failed') {\n          throw new Error(result.failed_error ?? 'Payment failed during routing/execution');\n        }\n\n        if (isMountedRef.current) {\n          setPaymentResult(result);\n        }\n      } catch (payError) {\n        if (isMountedRef.current) {\n          setError(asErrorMessage(payError));\n        }\n      } finally {\n        if (isMountedRef.current) {\n          setIsPaying(false);\n        }\n      }\n    },\n    [node],\n  );\n\n  return {\n    payInvoice,\n    isPaying,\n    paymentResult,\n    error,\n  };\n}\n"],"mappings":"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","names":["useEffect","useState","useCallback","useEffect","useRef","useState","asErrorMessage","useState","useEffect"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@fiber-pay/react",
+  "version": "0.2.3",
+  "description": "React hooks and components for Fiber browser payments",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "fiber",
+    "ckb",
+    "react",
+    "passkey",
+    "wasm",
+    "payment"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@nervosnetwork/fiber-js": "~0.8.0",
+    "@fiber-pay/sdk": "0.2.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --config vitest.config.ts"
+  }
+}