@fiber-pay/react 0.2.3 → 0.2.4

package/dist/index.js

@@ -1,13 +1,39 @@
-// src/fiber-pay-quick-card.tsx
-import { useEffect as useEffect3, useId, useState as useState3 } from "react";
+// src/index.ts
+import {
+  ChannelState,
+  ConfigBuilder as ConfigBuilder2,
+  ckbHash,
+  ckbToShannons,
+  derivePublicKey,
+  FiberBrowserNode as FiberBrowserNode2,
+  FiberRpcError,
+  formatShannonsAsCkb as formatShannonsAsCkb2,
+  fromHex,
+  getLockBalanceShannons as getLockBalanceShannons2,
+  PasskeyCredentialProvider as PasskeyCredentialProvider2,
+  PasswordCredentialProvider as PasswordCredentialProvider2,
+  RawKeyCredentialProvider as RawKeyCredentialProvider2,
+  scriptToAddress as scriptToAddress2,
+  shannonsToCkb,
+  toHex
+} from "@fiber-pay/sdk/browser";
+
+// src/connect-button.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
 
 // src/use-fiber-node.ts
 import {
   FiberBrowserNode,
   PasskeyCredentialProvider,
-  PasswordCredentialProvider
+  PasswordCredentialProvider,
+  RawKeyCredentialProvider
 } from "@fiber-pay/sdk/browser";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, 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).",
@@ -66,6 +92,7 @@ function useFiberNode(options) {
     [detachNodeListeners]
   );
   useEffect(() => {
+    if (options.enabled === false) return;
     let cancelled = false;
     PasskeyCredentialProvider.getSupportStatus().then((status) => {
       if (!cancelled) {
@@ -89,7 +116,7 @@ function useFiberNode(options) {
     return () => {
       cancelled = true;
     };
-  }, [walletId]);
+  }, [walletId, options.enabled]);
   const initNode = useCallback(
     (credential) => {
       if (nodeRef.current) {
@@ -217,6 +244,26 @@ function useFiberNode(options) {
       await cleanupFailedStart(node);
     }
   }, [cleanupFailedStart, initNode, walletId]);
+  const startWithRawKey = useCallback(
+    async (fiberKey, ckbSecretKey) => {
+      setError(null);
+      let node = null;
+      try {
+        const credential = new RawKeyCredentialProvider(fiberKey, ckbSecretKey, 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) {
@@ -238,11 +285,15 @@ function useFiberNode(options) {
       }
     }
   }, [detachNodeListeners]);
+  const isStarting = useMemo(() => state === "unlocking" || state === "starting", [state]);
+  const isRunning = useMemo(() => state === "running", [state]);
   return {
     state,
     node: nodeRef.current,
     nodeInfo,
     error,
+    isStarting,
+    isRunning,
     isPasskeySupported,
     passkeySupportReason,
     passkeyUnavailableReason,
@@ -250,12 +301,390 @@ function useFiberNode(options) {
     startWithPassword,
     createPasskeyAndStart,
     startWithPasskey,
+    startWithRawKey,
     stop
   };
 }
 
+// src/connect-button.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function truncateNodeId(id) {
+  if (id.length <= 16) return id;
+  return `${id.slice(0, 8)}\u2026${id.slice(-4)}`;
+}
+var styles = {
+  root: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 1.25rem",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    borderRadius: "9999px",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.15s, opacity 0.15s",
+    lineHeight: 1.4
+  },
+  connectButton: {
+    backgroundColor: "var(--fpay-accent, #6366f1)",
+    color: "var(--fpay-accent-fg, #fff)"
+  },
+  connectedButton: {
+    backgroundColor: "var(--fpay-accent-subtle, rgba(99,102,241,0.12))",
+    color: "var(--fpay-accent, #6366f1)",
+    border: "1px solid var(--fpay-accent-border, rgba(99,102,241,0.35))"
+  },
+  disabledButton: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  statusDot: {
+    display: "inline-block",
+    width: "0.5rem",
+    height: "0.5rem",
+    borderRadius: "50%",
+    backgroundColor: "var(--fpay-accent, #6366f1)"
+  },
+  errorText: {
+    fontSize: "0.75rem",
+    color: "var(--fpay-error, #ef4444)",
+    maxWidth: "220px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  dropdown: {
+    position: "absolute",
+    right: 0,
+    top: "100%",
+    marginTop: "0.5rem",
+    width: "280px",
+    borderRadius: "0.75rem",
+    border: "1px solid var(--fpay-border, #e5e7eb)",
+    backgroundColor: "var(--fpay-bg-elevated, #fff)",
+    padding: "1rem",
+    boxShadow: "0 10px 25px rgba(0,0,0,0.1)",
+    zIndex: 100
+  },
+  infoRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.375rem 0",
+    fontSize: "0.75rem"
+  },
+  infoLabel: {
+    color: "var(--fpay-text-secondary, #6b7280)"
+  },
+  infoValue: {
+    fontFamily: "ui-monospace, monospace",
+    color: "var(--fpay-text-primary, #111827)"
+  },
+  separator: {
+    borderTop: "1px solid var(--fpay-border, #e5e7eb)",
+    margin: "0.75rem 0"
+  },
+  disconnectButton: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0.625rem 0.75rem",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    border: "1px solid var(--fpay-border, #e5e7eb)",
+    borderRadius: "0.5rem",
+    backgroundColor: "var(--fpay-bg-secondary, #f9fafb)",
+    color: "var(--fpay-text-primary, #111827)",
+    cursor: "pointer",
+    transition: "background-color 0.15s"
+  },
+  spinner: {
+    animation: "fpay-spin 1s linear infinite"
+  }
+};
+var KEYFRAMES_ID = "fpay-connect-button-keyframes";
+function ensureKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = `@keyframes fpay-spin { to { transform: rotate(360deg); } }`;
+  document.head.appendChild(style);
+}
+function Spinner({ size = 16 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: styles.spinner,
+      role: "img",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function Chevron({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { transition: "transform 0.15s", transform: open ? "rotate(180deg)" : "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function ConnectButton(props) {
+  const {
+    network = "testnet",
+    fiber: externalFiber,
+    strategy = "auto",
+    password,
+    rawKey,
+    rawCkbKey,
+    walletId,
+    passkeyUsername = "User",
+    wasmFactory,
+    nodeConfig,
+    className,
+    style,
+    dropdownStyle,
+    renderConnectedDropdown,
+    onConnect,
+    onDisconnect,
+    onError
+  } = props;
+  const internalFiber = useFiberNode({
+    network,
+    walletId,
+    wasmFactory,
+    nodeConfig,
+    enabled: !externalFiber
+  });
+  const fiber = externalFiber ?? internalFiber;
+  const {
+    state,
+    node,
+    nodeInfo,
+    error,
+    isStarting,
+    isRunning,
+    isPasskeySupported,
+    passkeyUnavailableReason,
+    hasPasskeyConfigured,
+    createPasskeyAndStart,
+    startWithPasskey,
+    startWithPassword,
+    startWithRawKey,
+    stop
+  } = fiber;
+  const [isConnecting, setIsConnecting] = useState2(false);
+  const [showDropdown, setShowDropdown] = useState2(false);
+  const [localError, setLocalError] = useState2(null);
+  const dropdownRef = useRef2(null);
+  const effectiveIsStarting = isConnecting || isStarting;
+  useEffect2(() => ensureKeyframes(), []);
+  useEffect2(() => {
+    if (!showDropdown) return;
+    function handleClickOutside(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showDropdown]);
+  const prevRunningRef = useRef2(false);
+  useEffect2(() => {
+    if (isRunning && !prevRunningRef.current && node && nodeInfo) {
+      onConnect?.(node, nodeInfo);
+    }
+    if (!isRunning && prevRunningRef.current) {
+      onDisconnect?.();
+    }
+    prevRunningRef.current = isRunning;
+  }, [isRunning, node, nodeInfo, onConnect, onDisconnect]);
+  useEffect2(() => {
+    if (error) onError?.(error);
+  }, [error, onError]);
+  const resolvedStrategy = strategy === "auto" ? hasPasskeyConfigured && isPasskeySupported ? "passkey" : password ? "password" : rawKey ? "rawKey" : "passkey" : strategy;
+  const handleConnect = useCallback2(async () => {
+    setIsConnecting(true);
+    setLocalError(null);
+    try {
+      switch (resolvedStrategy) {
+        case "password":
+          if (!password) throw new Error('Password is required for "password" strategy');
+          await startWithPassword(password);
+          break;
+        case "rawKey":
+          if (!rawKey) throw new Error('rawKey is required for "rawKey" strategy');
+          await startWithRawKey(rawKey, rawCkbKey);
+          break;
+        case "passkey":
+          if (hasPasskeyConfigured) {
+            await startWithPasskey();
+          } else {
+            await createPasskeyAndStart(passkeyUsername);
+          }
+          break;
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLocalError(msg);
+      onError?.(msg);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [
+    resolvedStrategy,
+    password,
+    rawKey,
+    rawCkbKey,
+    passkeyUsername,
+    hasPasskeyConfigured,
+    startWithPassword,
+    startWithPasskey,
+    startWithRawKey,
+    createPasskeyAndStart,
+    onError
+  ]);
+  const handleDisconnect = useCallback2(async () => {
+    try {
+      await stop();
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLocalError(msg);
+      onError?.(msg);
+    } finally {
+      setShowDropdown(false);
+    }
+  }, [stop, onError]);
+  const closeDropdown = useCallback2(() => {
+    setShowDropdown(false);
+  }, []);
+  const hasError = !!(error || localError);
+  let buttonLabel;
+  let buttonOnClick;
+  let buttonDisabled = false;
+  let buttonStyle;
+  if (isRunning) {
+    buttonLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { style: styles.statusDot }),
+      /* @__PURE__ */ jsx("span", { style: { fontFamily: "ui-monospace, monospace" }, children: nodeInfo?.pubkey ? truncateNodeId(nodeInfo.pubkey) : "Connected" }),
+      /* @__PURE__ */ jsx(Chevron, { open: showDropdown })
+    ] });
+    buttonOnClick = () => setShowDropdown((s) => !s);
+    buttonStyle = { ...styles.button, ...styles.connectedButton };
+  } else if (effectiveIsStarting) {
+    buttonLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      "Connecting\u2026"
+    ] });
+    buttonDisabled = true;
+    buttonStyle = { ...styles.button, ...styles.connectButton, ...styles.disabledButton };
+  } else {
+    switch (resolvedStrategy) {
+      case "passkey":
+        buttonLabel = hasPasskeyConfigured ? "Connect with Passkey" : "Connect via Passkey";
+        if (!isPasskeySupported) {
+          buttonLabel = "Passkey unavailable";
+          buttonDisabled = true;
+        }
+        break;
+      case "password":
+        buttonLabel = "Connect";
+        break;
+      case "rawKey":
+        buttonLabel = "Connect";
+        break;
+    }
+    buttonOnClick = handleConnect;
+    buttonStyle = {
+      ...styles.button,
+      ...styles.connectButton,
+      ...buttonDisabled ? styles.disabledButton : {}
+    };
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.root, ...style }, "data-fpay-connect-button": "", children: [
+    (hasError || !isPasskeySupported && passkeyUnavailableReason && resolvedStrategy === "passkey") && /* @__PURE__ */ jsx("span", { style: styles.errorText, children: error || localError || passkeyUnavailableReason }),
+    isRunning ? /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: dropdownRef, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: buttonOnClick, style: buttonStyle, children: buttonLabel }),
+      showDropdown && /* @__PURE__ */ jsx("div", { style: { ...styles.dropdown, ...dropdownStyle }, children: renderConnectedDropdown ? renderConnectedDropdown({
+        fiber,
+        closeDropdown,
+        disconnect: handleDisconnect
+      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        nodeInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "Pubkey" }),
+            /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: truncateNodeId(nodeInfo.pubkey) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "State" }),
+            /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: state })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: styles.separator }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleDisconnect(),
+            style: styles.disconnectButton,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Disconnect" }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: buttonOnClick, disabled: buttonDisabled, style: buttonStyle, children: buttonLabel })
+  ] });
+}
+
+// src/fiber-pay-quick-card.tsx
+import { useEffect as useEffect4, useId, useState as useState4 } from "react";
+
 // src/use-fiber-payment.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 function asErrorMessage2(error) {
   if (error instanceof Error) {
     return error.message;
@@ -263,17 +692,17 @@ function asErrorMessage2(error) {
   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(
+  const [isPaying, setIsPaying] = useState3(false);
+  const [paymentResult, setPaymentResult] = useState3(null);
+  const [error, setError] = useState3(null);
+  const isMountedRef = useRef3(true);
+  useEffect3(
     () => () => {
       isMountedRef.current = false;
     },
     []
   );
-  const payInvoice = useCallback2(
+  const payInvoice = useCallback3(
     async (invoice) => {
       if (!node) {
         if (isMountedRef.current) {
@@ -318,7 +747,7 @@ function useFiberPayment(node) {
 }
 
 // src/fiber-pay-quick-card.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ONE_CKB_SHANNONS = "0x5f5e100";
 var cardStyle = {
   border: "1px solid #ddd",
@@ -356,22 +785,22 @@ function FiberPayQuickCard(props) {
     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(() => {
+  const [password, setPassword] = useState4("");
+  const [invoiceInput, setInvoiceInput] = useState4("");
+  const [createdInvoice, setCreatedInvoice] = useState4("");
+  const [isCreatingInvoice, setIsCreatingInvoice] = useState4(false);
+  const [invoiceError, setInvoiceError] = useState4(null);
+  useEffect4(() => {
     if (nodeError) {
       onError?.({ scope: "node", message: nodeError });
     }
   }, [nodeError, onError]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (payError) {
       onError?.({ scope: "payment", message: payError });
     }
   }, [onError, payError]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (paymentResult) {
       onPaymentResult?.(paymentResult);
     }
@@ -398,18 +827,18 @@ function FiberPayQuickCard(props) {
       setIsCreatingInvoice(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { style: { ...cardStyle, ...props.style }, className: props.className, children: [
-    /* @__PURE__ */ jsxs("h3", { children: [
+  return /* @__PURE__ */ jsxs2("div", { style: { ...cardStyle, ...props.style }, className: props.className, children: [
+    /* @__PURE__ */ jsxs2("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(
+    !nodeInfo ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      isPasskeySupported ? /* @__PURE__ */ jsx2("div", { style: rowWithMarginStyle, children: hasPasskeyConfigured ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void startWithPasskey(), children: "Login with Passkey" }) : /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void createPasskeyAndStart(passkeyUsername), children: "Register Passkey" }) }) : null,
+      /* @__PURE__ */ jsx2("label", { htmlFor: passwordInputId, children: "Password" }),
+      /* @__PURE__ */ jsxs2("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx2(
           "input",
           {
             id: passwordInputId,
@@ -421,31 +850,31 @@ function FiberPayQuickCard(props) {
             placeholder: "Password"
           }
         ),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void startWithPassword(password), children: "Start with Password" })
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void startWithPassword(password), children: "Start with Password" })
       ] })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("strong", { children: "State:" }),
+    ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: "State:" }),
         " ",
         state
       ] }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Pubkey:" }),
+      /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx2("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" })
+      /* @__PURE__ */ jsxs2("div", { style: rowWithMarginStyle, children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void createInvoice(), disabled: isCreatingInvoice, children: isCreatingInvoice ? "Creating..." : "Create Invoice (1 CKB)" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void stop(), children: "Stop Node" })
       ] }),
-      createdInvoice ? /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Created invoice:" }),
+      createdInvoice ? /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: "Created invoice:" }),
         " ",
         createdInvoice
       ] }) : null,
-      /* @__PURE__ */ jsx("label", { htmlFor: invoiceInputId, children: "Invoice" }),
-      /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2("label", { htmlFor: invoiceInputId, children: "Invoice" }),
+      /* @__PURE__ */ jsxs2("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx2(
           "input",
           {
             id: invoiceInputId,
@@ -455,33 +884,439 @@ function FiberPayQuickCard(props) {
             placeholder: "Paste invoice to pay"
           }
         ),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void payInvoice(invoiceInput), disabled: isPaying, children: isPaying ? "Paying..." : "Pay" })
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void payInvoice(invoiceInput), disabled: isPaying, children: isPaying ? "Paying..." : "Pay" })
       ] }),
-      paymentResult ? /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Payment:" }),
+      paymentResult ? /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: "Payment:" }),
         " ",
         paymentResult.status
       ] }) : null
     ] }),
-    nodeError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Node error:" }),
+    nodeError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx2("strong", { children: "Node error:" }),
       " ",
       nodeError
     ] }) : null,
-    payError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Payment error:" }),
+    payError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx2("strong", { children: "Payment error:" }),
       " ",
       payError
     ] }) : null,
-    invoiceError ? /* @__PURE__ */ jsxs("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Invoice error:" }),
+    invoiceError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx2("strong", { children: "Invoice error:" }),
       " ",
       invoiceError
     ] }) : null
   ] });
 }
+
+// src/node-info-panel.tsx
+import {
+  ConfigBuilder,
+  formatShannonsAsCkb,
+  getLockBalanceShannons,
+  scriptToAddress
+} from "@fiber-pay/sdk/browser";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function truncateMiddle(str, left = 8, right = 8) {
+  if (str.length <= left + right + 3) return str;
+  return `${str.slice(0, left)}\u2026${str.slice(-right)}`;
+}
+function copyToClipboard(text) {
+  void navigator.clipboard.writeText(text);
+}
+async function fetchNodeStats(node, network) {
+  const [nodeInfo, peers, channels] = await Promise.all([
+    node.nodeInfo(),
+    node.listPeers(),
+    node.listChannels()
+  ]);
+  const lockScript = nodeInfo.default_funding_lock_script;
+  const ckbRpcUrl = ConfigBuilder.getDefaults(network).ckbRpcUrl;
+  if (!lockScript || lockScript.args === "0x") {
+    return {
+      pubkey: nodeInfo.pubkey,
+      peers: peers.peers.length,
+      channels: channels.channels.length,
+      ckbAddress: null,
+      balanceCkb: null,
+      externalFunding: true
+    };
+  }
+  const ckbAddress = scriptToAddress(lockScript, network);
+  const balanceShannons = await getLockBalanceShannons(ckbRpcUrl, lockScript);
+  const balanceCkb = formatShannonsAsCkb(balanceShannons, 4);
+  return {
+    pubkey: nodeInfo.pubkey,
+    peers: peers.peers.length,
+    channels: channels.channels.length,
+    ckbAddress,
+    balanceCkb,
+    externalFunding: false
+  };
+}
+var styles2 = {
+  root: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "0.875rem",
+    color: "var(--fpay-text-primary, #111827)"
+  },
+  idle: {
+    padding: "1rem",
+    textAlign: "center",
+    color: "var(--fpay-text-secondary, #6b7280)",
+    fontSize: "0.75rem"
+  },
+  loading: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 0",
+    fontSize: "0.75rem",
+    color: "var(--fpay-text-secondary, #6b7280)"
+  },
+  errorBox: {
+    marginBottom: "0.5rem",
+    padding: "0.375rem 0.5rem",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem",
+    border: "1px solid var(--fpay-error-border, rgba(239,68,68,0.3))",
+    backgroundColor: "var(--fpay-error-bg, rgba(239,68,68,0.1))",
+    color: "var(--fpay-error, #ef4444)"
+  },
+  infoRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.375rem 0"
+  },
+  infoLabel: {
+    fontSize: "0.75rem",
+    color: "var(--fpay-text-secondary, #6b7280)"
+  },
+  infoValueWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.375rem"
+  },
+  infoValue: {
+    fontFamily: "ui-monospace, monospace",
+    fontSize: "0.75rem",
+    color: "var(--fpay-text-primary, #111827)"
+  },
+  copyButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0.25rem",
+    borderRadius: "0.25rem",
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    color: "var(--fpay-text-secondary, #6b7280)",
+    transition: "color 0.15s"
+  },
+  statsGrid: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "0.5rem",
+    marginTop: "0.5rem"
+  },
+  statCard: {
+    padding: "0.375rem 0.5rem",
+    textAlign: "center",
+    borderRadius: "0.5rem",
+    border: "1px solid var(--fpay-border, #e5e7eb)",
+    backgroundColor: "var(--fpay-bg-secondary, #f9fafb)"
+  },
+  statLabel: {
+    fontSize: "0.625rem",
+    color: "var(--fpay-text-secondary, #6b7280)"
+  },
+  statValue: {
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    color: "var(--fpay-text-primary, #111827)"
+  },
+  qrContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "0.25rem",
+    marginTop: "0.75rem",
+    padding: "0.5rem",
+    borderRadius: "0.5rem",
+    border: "1px solid var(--fpay-border, #e5e7eb)",
+    backgroundColor: "var(--fpay-bg-secondary, #f9fafb)"
+  },
+  qrCaption: {
+    fontSize: "0.625rem",
+    color: "var(--fpay-text-secondary, #6b7280)"
+  },
+  balanceRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "0.5rem",
+    paddingTop: "0.5rem",
+    borderTop: "1px solid var(--fpay-border, #e5e7eb)"
+  },
+  statusBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    padding: "0.25rem 0.625rem",
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    borderRadius: "9999px",
+    marginBottom: "0.5rem"
+  }
+};
+var STATUS_COLORS = {
+  idle: { bg: "rgba(107,114,128,0.1)", fg: "#6b7280", dot: "#9ca3af" },
+  unlocking: { bg: "rgba(245,158,11,0.1)", fg: "#d97706", dot: "#f59e0b" },
+  starting: { bg: "rgba(245,158,11,0.1)", fg: "#d97706", dot: "#f59e0b" },
+  running: { bg: "rgba(34,197,94,0.1)", fg: "#16a34a", dot: "#22c55e" },
+  stopping: { bg: "rgba(245,158,11,0.1)", fg: "#d97706", dot: "#f59e0b" },
+  stopped: { bg: "rgba(107,114,128,0.1)", fg: "#6b7280", dot: "#9ca3af" },
+  error: { bg: "rgba(239,68,68,0.1)", fg: "#dc2626", dot: "#ef4444" }
+};
+function CopyIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx3("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx3("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function InfoRow({ label, value, copyable }) {
+  return /* @__PURE__ */ jsxs3("div", { style: styles2.infoRow, children: [
+    /* @__PURE__ */ jsx3("span", { style: styles2.infoLabel, children: label }),
+    /* @__PURE__ */ jsxs3("div", { style: styles2.infoValueWrapper, children: [
+      /* @__PURE__ */ jsx3("span", { style: styles2.infoValue, children: truncateMiddle(value, 6, 6) }),
+      copyable && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => copyToClipboard(value),
+          style: styles2.copyButton,
+          title: "Copy to clipboard",
+          "aria-label": `Copy ${label}`,
+          children: /* @__PURE__ */ jsx3(CopyIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function NodeInfoPanel(props) {
+  const {
+    node,
+    network,
+    pollInterval = 15e3,
+    showQrCode = false,
+    renderQrCode,
+    className,
+    style
+  } = props;
+  const [stats, setStats] = useState5(null);
+  const [statsError, setStatsError] = useState5(null);
+  const [statsLoading, setStatsLoading] = useState5(false);
+  const cancelledRef = useRef4(false);
+  const [QRComponent, setQRComponent] = useState5(null);
+  useEffect5(() => {
+    let cancelled = false;
+    if (!showQrCode || renderQrCode) return;
+    import("qrcode.react").then((mod) => {
+      if (cancelled) return;
+      const Comp = mod.QRCodeSVG ?? mod.default;
+      if (Comp) setQRComponent(() => Comp);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [showQrCode, renderQrCode]);
+  const loadingRef = useRef4(false);
+  const loadStats = useCallback4(async () => {
+    if (!node || node.state !== "running" || loadingRef.current) return;
+    loadingRef.current = true;
+    setStatsLoading(true);
+    setStatsError(null);
+    try {
+      const data = await fetchNodeStats(node, network);
+      if (!cancelledRef.current) setStats(data);
+    } catch (e) {
+      if (!cancelledRef.current) {
+        setStatsError(e instanceof Error ? e.message : String(e));
+      }
+    } finally {
+      loadingRef.current = false;
+      if (!cancelledRef.current) setStatsLoading(false);
+    }
+  }, [node, network]);
+  useEffect5(() => {
+    cancelledRef.current = false;
+    if (!node || node.state !== "running") {
+      setStats(null);
+      setStatsError(null);
+      return;
+    }
+    void loadStats();
+    const interval = setInterval(() => void loadStats(), pollInterval);
+    return () => {
+      cancelledRef.current = true;
+      clearInterval(interval);
+    };
+  }, [node, node?.state, pollInterval, loadStats]);
+  if (!node) {
+    return /* @__PURE__ */ jsx3("div", { className, style: { ...styles2.root, ...style }, "data-fpay-node-info": "", children: /* @__PURE__ */ jsx3("div", { style: styles2.idle, children: "No node connected" }) });
+  }
+  const nodeState = node.state;
+  const statusColor = STATUS_COLORS[nodeState] ?? STATUS_COLORS.idle;
+  return /* @__PURE__ */ jsxs3("div", { className, style: { ...styles2.root, ...style }, "data-fpay-node-info": "", children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          ...styles2.statusBadge,
+          backgroundColor: statusColor.bg,
+          color: statusColor.fg
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: "0.5rem",
+                height: "0.5rem",
+                borderRadius: "50%",
+                backgroundColor: statusColor.dot
+              }
+            }
+          ),
+          nodeState
+        ]
+      }
+    ),
+    statsLoading && !stats && /* @__PURE__ */ jsxs3("div", { style: styles2.loading, children: [
+      /* @__PURE__ */ jsxs3(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          role: "img",
+          "aria-label": "Loading",
+          children: [
+            /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
+            /* @__PURE__ */ jsx3(
+              "animateTransform",
+              {
+                attributeName: "transform",
+                type: "rotate",
+                from: "0 12 12",
+                to: "360 12 12",
+                dur: "1s",
+                repeatCount: "indefinite"
+              }
+            )
+          ]
+        }
+      ),
+      "Loading\u2026"
+    ] }),
+    statsError && /* @__PURE__ */ jsx3("div", { style: styles2.errorBox, children: statsError }),
+    stats && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(InfoRow, { label: "Pubkey", value: stats.pubkey, copyable: true }),
+      stats.externalFunding ? /* @__PURE__ */ jsx3("div", { style: { padding: "0.25rem 0", fontSize: "0.75rem", color: "#6b7280" }, children: "External funding mode" }) : stats.ckbAddress ? /* @__PURE__ */ jsx3(InfoRow, { label: "CKB Address", value: stats.ckbAddress, copyable: true }) : null,
+      /* @__PURE__ */ jsxs3("div", { style: styles2.statsGrid, children: [
+        /* @__PURE__ */ jsxs3("div", { style: styles2.statCard, children: [
+          /* @__PURE__ */ jsx3("div", { style: styles2.statLabel, children: "Peers" }),
+          /* @__PURE__ */ jsx3("div", { style: styles2.statValue, children: stats.peers })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: styles2.statCard, children: [
+          /* @__PURE__ */ jsx3("div", { style: styles2.statLabel, children: "Channels" }),
+          /* @__PURE__ */ jsx3("div", { style: styles2.statValue, children: stats.channels })
+        ] })
+      ] }),
+      showQrCode && stats.ckbAddress && /* @__PURE__ */ jsxs3("div", { style: styles2.qrContainer, children: [
+        renderQrCode ? renderQrCode(stats.ckbAddress) : QRComponent ? /* @__PURE__ */ jsx3(
+          QRComponent,
+          {
+            value: stats.ckbAddress,
+            size: 120,
+            bgColor: "transparent",
+            fgColor: "currentColor"
+          }
+        ) : /* @__PURE__ */ jsx3("div", { style: { fontSize: "0.625rem", color: "#9ca3af" }, children: "Install qrcode.react for QR code" }),
+        /* @__PURE__ */ jsx3("span", { style: styles2.qrCaption, children: "Scan to deposit CKB" }),
+        /* @__PURE__ */ jsxs3("div", { style: styles2.balanceRow, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: "Balance" }),
+          /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              style: {
+                fontFamily: "ui-monospace, monospace",
+                fontSize: "0.75rem",
+                fontWeight: 500
+              },
+              children: [
+                stats.balanceCkb ?? "\u2014",
+                " CKB"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
 export {
+  ChannelState,
+  ConfigBuilder2 as ConfigBuilder,
+  ConnectButton,
+  FiberBrowserNode2 as FiberBrowserNode,
   FiberPayQuickCard,
+  FiberRpcError,
+  NodeInfoPanel,
+  PasskeyCredentialProvider2 as PasskeyCredentialProvider,
+  PasswordCredentialProvider2 as PasswordCredentialProvider,
+  RawKeyCredentialProvider2 as RawKeyCredentialProvider,
+  ckbHash,
+  ckbToShannons,
+  derivePublicKey,
+  formatShannonsAsCkb2 as formatShannonsAsCkb,
+  fromHex,
+  getLockBalanceShannons2 as getLockBalanceShannons,
+  scriptToAddress2 as scriptToAddress,
+  shannonsToCkb,
+  toHex,
   useFiberNode,
   useFiberPayment
 };