@fiber-pay/react 0.2.3 → 0.2.4

package/README.md

@@ -11,7 +11,7 @@ pnpm add @fiber-pay/react react
 ## One-line import
 
 ```tsx
-import { FiberPayQuickCard, useFiberNode, useFiberPayment } from '@fiber-pay/react';
+import { ConnectButton, FiberPayQuickCard, useFiberNode, useFiberPayment } from '@fiber-pay/react';
 ```
 
 ## Quick start
@@ -33,6 +33,42 @@ export function App() {
 - `onPaymentResult(result)`
 - `onError({ scope, message })`
 
+## ConnectButton
+
+Use `ConnectButton` with an existing `useFiberNode` result for drop-in integration.
+
+```tsx
+import { ConnectButton, useFiberNode } from '@fiber-pay/react';
+import { Fiber } from '@nervosnetwork/fiber-js';
+
+export function HeaderWallet() {
+  const fiber = useFiberNode({ network: 'testnet', wasmFactory: () => new Fiber() });
+  return <ConnectButton fiber={fiber} />;
+}
+```
+
+For custom connected-state panels (for example peer/channel controls), use `renderConnectedDropdown`:
+
+```tsx
+<ConnectButton
+  fiber={fiber}
+  dropdownStyle={{ width: 320 }}
+  renderConnectedDropdown={({ fiber, disconnect }) => (
+    <div>
+      <div>State: {fiber.state}</div>
+      <button
+        type="button"
+        onClick={() => {
+          void disconnect();
+        }}
+      >
+        Disconnect
+      </button>
+    </div>
+  )}
+/>
+```
+
 ## Hooks
 
 - `useFiberNode(options)`

package/dist/index.d.ts

@@ -1,34 +1,25 @@
+import { BrowserNodeState, FiberBrowserNode, NodeInfoResult, PasskeySupportReason, FiberBrowserNodeConfig, FiberWasmFactory, GetPaymentResult } from '@fiber-pay/sdk/browser';
+export { BrowserNodeState, ChannelState, ConfigBuilder, FiberBrowserNode, FiberBrowserNodeConfig, FiberRpcError, FiberWasmFactory, NodeInfoResult, PasskeyCredentialProvider, PasskeySupportReason, PasswordCredentialProvider, RawKeyCredentialProvider, ckbHash, ckbToShannons, derivePublicKey, formatShannonsAsCkb, fromHex, getLockBalanceShannons, scriptToAddress, shannonsToCkb, toHex } from '@fiber-pay/sdk/browser';
 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;
+import { CSSProperties, ReactNode } from 'react';
 
 interface UseFiberNodeOptions {
     network: 'testnet' | 'mainnet';
     walletId?: string;
     nodeConfig?: FiberBrowserNodeConfig['nodeConfig'];
     wasmFactory?: FiberWasmFactory;
+    /** If false, suppresses initialization effects (like passkey detection). Default true. */
+    enabled?: boolean;
 }
 interface UseFiberNodeResult {
     state: BrowserNodeState;
     node: FiberBrowserNode | null;
     nodeInfo: NodeInfoResult | null;
     error: string | null;
+    /** Whether the node is currently starting (unlocking or starting state) */
+    isStarting: boolean;
+    /** Whether the node is running and ready for RPC calls */
+    isRunning: boolean;
     isPasskeySupported: boolean;
     passkeySupportReason: PasskeySupportReason | null;
     passkeyUnavailableReason: string | null;
@@ -36,10 +27,106 @@ interface UseFiberNodeResult {
     startWithPassword: (password: string) => Promise<void>;
     createPasskeyAndStart: (username?: string) => Promise<void>;
     startWithPasskey: () => Promise<void>;
+    startWithRawKey: (fiberKey: Uint8Array, ckbSecretKey?: Uint8Array) => Promise<void>;
     stop: () => Promise<void>;
 }
 declare function useFiberNode(options: UseFiberNodeOptions): UseFiberNodeResult;
 
+/** Credential strategy the ConnectButton should use */
+type ConnectStrategy = 'passkey' | 'password' | 'rawKey' | 'auto';
+interface ConnectButtonProps {
+    /** Network to connect to. Required in standalone mode; ignored when `fiber` is provided. */
+    network?: 'testnet' | 'mainnet';
+    /**
+     * Pre-existing hook result from `useFiberNode()`.
+     * When provided, the button delegates to this instead of creating its own hook.
+     */
+    fiber?: UseFiberNodeResult;
+    /** Credential strategy. Defaults to `"auto"`. */
+    strategy?: ConnectStrategy;
+    /** Password for the "password" strategy. */
+    password?: string;
+    /** Raw Fiber key (32 bytes) for the "rawKey" strategy. */
+    rawKey?: Uint8Array;
+    /** Raw CKB secret key (32 bytes) for the "rawKey" strategy (optional). */
+    rawCkbKey?: Uint8Array;
+    /** Wallet identifier for IndexedDB isolation. */
+    walletId?: string;
+    /** Display name for passkey registration. */
+    passkeyUsername?: string;
+    /** Optional WASM factory override. */
+    wasmFactory?: FiberWasmFactory;
+    /** Additional node config. */
+    nodeConfig?: UseFiberNodeOptions['nodeConfig'];
+    /** Additional CSS class name(s) for the root container. */
+    className?: string;
+    /** Inline styles for the root container. */
+    style?: CSSProperties;
+    /** Inline styles for the connected dropdown container. */
+    dropdownStyle?: CSSProperties;
+    /**
+     * Optional custom renderer for the connected dropdown content.
+     * Use this to render project-specific controls (for example peer/channel actions)
+     * while reusing the SDK's connect/disconnect lifecycle logic via the provided context.
+     * When set, this replaces the default dropdown content, so custom renderers must
+     * render their own disconnect UI if they want to expose disconnect actions.
+     */
+    renderConnectedDropdown?: (context: ConnectButtonConnectedDropdownContext) => ReactNode;
+    /**
+     * Called when the node reaches the "running" state.
+     * Receives the `FiberBrowserNode` instance and its `NodeInfoResult`.
+     */
+    onConnect?: (node: FiberBrowserNode, nodeInfo: NodeInfoResult) => void;
+    /** Called after the node is stopped. */
+    onDisconnect?: () => void;
+    /** Called when an error occurs. */
+    onError?: (error: string) => void;
+}
+interface ConnectButtonConnectedDropdownContext {
+    fiber: UseFiberNodeResult;
+    closeDropdown: () => void;
+    disconnect: () => Promise<void>;
+}
+declare function ConnectButton(props: ConnectButtonProps): react_jsx_runtime.JSX.Element;
+
+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 NodeInfoPanelProps {
+    /** The running FiberBrowserNode instance. */
+    node: FiberBrowserNode | null;
+    /** Network (needed for address derivation and RPC URL defaults). */
+    network: 'testnet' | 'mainnet';
+    /** How often to refresh stats (ms). Default: 15000. */
+    pollInterval?: number;
+    /** Whether to show a QR code of the CKB address. Requires `qrcode.react` to be installed. */
+    showQrCode?: boolean;
+    /**
+     * Optional QR code render function — allows consumers to bring their own QR library.
+     * Called with the CKB address string. If not provided and `showQrCode` is true,
+     * the component will attempt to dynamically import `qrcode.react`.
+     */
+    renderQrCode?: (value: string) => ReactNode;
+    /** Additional CSS class name(s). */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+}
+declare function NodeInfoPanel(props: NodeInfoPanelProps): react_jsx_runtime.JSX.Element;
+
 interface UseFiberPaymentResult {
     payInvoice: (invoice: string) => Promise<void>;
     isPaying: boolean;
@@ -48,4 +135,4 @@ interface UseFiberPaymentResult {
 }
 declare function useFiberPayment(node: FiberBrowserNode | null): UseFiberPaymentResult;
 
-export { FiberPayQuickCard, type FiberPayQuickCardProps, type UseFiberNodeOptions, type UseFiberNodeResult, type UseFiberPaymentResult, useFiberNode, useFiberPayment };
+export { ConnectButton, type ConnectButtonConnectedDropdownContext, type ConnectButtonProps, type ConnectStrategy, FiberPayQuickCard, type FiberPayQuickCardProps, NodeInfoPanel, type NodeInfoPanelProps, type UseFiberNodeOptions, type UseFiberNodeResult, type UseFiberPaymentResult, useFiberNode, useFiberPayment };