@1sat/react 0.0.17 → 0.0.18

package/dist/ConnectDialog.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+export interface ConnectDialogProviderInfo {
+    type: string;
+    name: string;
+    icon?: string;
+    isConnecting: boolean;
+    connect: () => void;
+}
+export interface ConnectDialogRenderProps {
+    providers: ConnectDialogProviderInfo[];
+    error: Error | null;
+    close: () => void;
+}
+export interface ConnectDialogProps {
+    /** Controlled open state */
+    open: boolean;
+    /** Called when dialog should close */
+    onOpenChange: (open: boolean) => void;
+    /** Render the dialog content. If omitted, a basic unstyled list is rendered. */
+    children?: (props: ConnectDialogRenderProps) => ReactNode;
+}
+/**
+ * Dialog for selecting a wallet provider when auto-detect finds nothing.
+ *
+ * Provides a list of available providers from WalletProvider config.
+ * Supports custom rendering via render-prop children, or renders a
+ * basic unstyled dialog if no children are provided.
+ */
+export declare function ConnectDialog({ open, onOpenChange, children, }: ConnectDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectDialog.d.ts.map

package/dist/ConnectDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectDialog.d.ts","sourceRoot":"","sources":["../src/ConnectDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAA;AAGhF,MAAM,WAAW,yBAAyB;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,MAAM,WAAW,wBAAwB;IACxC,SAAS,EAAE,yBAAyB,EAAE,CAAA;IACtC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,IAAI,CAAA;CACjB;AAED,MAAM,WAAW,kBAAkB;IAClC,4BAA4B;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,sCAAsC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAA;CACzD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,QAAQ,GACR,EAAE,kBAAkB,2CAgIpB"}

package/dist/ConnectDialogProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type ConnectDialogRenderProps } from './ConnectDialog';
+interface ConnectDialogContextValue {
+    openConnectDialog: () => void;
+}
+/**
+ * Hook to open the connect wallet dialog from any component.
+ */
+export declare function useConnectDialog(): ConnectDialogContextValue;
+export interface ConnectDialogProviderProps {
+    children: ReactNode;
+    /** Custom render for the dialog content */
+    renderDialog?: (props: ConnectDialogRenderProps) => ReactNode;
+}
+/**
+ * Provides the connect dialog and useConnectDialog() hook to the app.
+ *
+ * Place inside WalletProvider. Login buttons call openConnectDialog()
+ * to show the provider selector.
+ */
+export declare function ConnectDialogProvider({ children, renderDialog, }: ConnectDialogProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConnectDialogProvider.d.ts.map

package/dist/ConnectDialogProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectDialogProvider.d.ts","sourceRoot":"","sources":["../src/ConnectDialogProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,SAAS,EAKd,MAAM,OAAO,CAAA;AACd,OAAO,EAAiB,KAAK,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE9E,UAAU,yBAAyB;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAID;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,yBAAyB,CAQ5D;AAED,MAAM,WAAW,0BAA0B;IAC1C,QAAQ,EAAE,SAAS,CAAA;IACnB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAA;CAC7D;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EACrC,QAAQ,EACR,YAAY,GACZ,EAAE,0BAA0B,2CAe5B"}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from '@1sat/connect';
 export { WalletProvider, useWallet, type WalletContextValue, type WalletProviderProps, type WalletStatus, } from './wallet-context';
 export { SigmaCallback, type SigmaCallbackProps } from './SigmaCallback';
+export { ConnectDialog, type ConnectDialogProps, type ConnectDialogProviderInfo, type ConnectDialogRenderProps, } from './ConnectDialog';
+export { ConnectDialogProvider, useConnectDialog, type ConnectDialogProviderProps, } from './ConnectDialogProvider';
 export { ConnectButton, type ConnectButtonProps } from './ConnectButton';
 export { WalletSelector, type WalletSelectorProps, type WalletSelectorProviderInfo, type WalletSelectorRenderProps, } from './WalletSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAA;AAG7B,OAAO,EACN,cAAc,EACd,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GACjB,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGxE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EACN,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,GAC9B,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAA;AAG7B,OAAO,EACN,cAAc,EACd,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GACjB,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGxE,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,GAC7B,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACN,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,0BAA0B,GAC/B,MAAM,yBAAyB,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EACN,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,GAC9B,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -284,8 +284,160 @@ function SigmaCallback({
     })
   });
 }
+// src/ConnectDialog.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+"use client";
+function ConnectDialog({
+  open,
+  onOpenChange,
+  children
+}) {
+  const { availableProviders, connect, error } = useWallet();
+  const [connectingType, setConnectingType] = useState3(null);
+  const dialogRef = useRef2(null);
+  useEffect3(() => {
+    const dialog = dialogRef.current;
+    if (!dialog)
+      return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  const handleClose = useCallback2(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleConnect = useCallback2((providerType) => {
+    setConnectingType(providerType);
+    connect(providerType).finally(() => {
+      setConnectingType(null);
+    });
+  }, [connect]);
+  const providers = availableProviders.map((p) => ({
+    type: p.type,
+    name: p.name,
+    icon: p.icon,
+    isConnecting: connectingType === p.type,
+    connect: () => handleConnect(p.type)
+  }));
+  const renderProps = {
+    providers,
+    error,
+    close: handleClose
+  };
+  return /* @__PURE__ */ jsx3("dialog", {
+    ref: dialogRef,
+    onClose: handleClose,
+    style: {
+      padding: 0,
+      border: "none",
+      borderRadius: "0.75rem",
+      maxWidth: "24rem",
+      width: "100%",
+      background: "var(--background, #fff)",
+      color: "var(--foreground, #000)"
+    },
+    children: children ? children(renderProps) : /* @__PURE__ */ jsxs2("div", {
+      style: { padding: "1.5rem" },
+      children: [
+        /* @__PURE__ */ jsx3("h2", {
+          style: {
+            margin: "0 0 0.25rem",
+            fontSize: "1.125rem",
+            fontWeight: 600
+          },
+          children: "Connect Wallet"
+        }),
+        /* @__PURE__ */ jsx3("p", {
+          style: {
+            margin: "0 0 1rem",
+            fontSize: "0.875rem",
+            opacity: 0.6
+          },
+          children: "Choose how to connect."
+        }),
+        /* @__PURE__ */ jsx3("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem"
+          },
+          children: providers.map((provider) => /* @__PURE__ */ jsxs2("button", {
+            type: "button",
+            disabled: provider.isConnecting,
+            onClick: provider.connect,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              width: "100%",
+              padding: "0.75rem 1rem",
+              border: "1px solid #e5e5e5",
+              borderRadius: "0.5rem",
+              background: "transparent",
+              cursor: provider.isConnecting ? "wait" : "pointer",
+              fontSize: "0.875rem",
+              opacity: provider.isConnecting ? 0.6 : 1
+            },
+            children: [
+              provider.name,
+              provider.isConnecting && " ..."
+            ]
+          }, provider.type))
+        }),
+        error && /* @__PURE__ */ jsx3("p", {
+          style: {
+            marginTop: "0.75rem",
+            fontSize: "0.875rem",
+            color: "#dc2626"
+          },
+          children: error.message
+        })
+      ]
+    })
+  });
+}
+// src/ConnectDialogProvider.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext as useContext2,
+  useState as useState4
+} from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+"use client";
+var ConnectDialogCtx = createContext2(null);
+function useConnectDialog() {
+  const ctx = useContext2(ConnectDialogCtx);
+  if (!ctx) {
+    throw new Error("useConnectDialog must be used within ConnectDialogProvider");
+  }
+  return ctx;
+}
+function ConnectDialogProvider({
+  children,
+  renderDialog
+}) {
+  const [open, setOpen] = useState4(false);
+  const openConnectDialog = useCallback3(() => {
+    setOpen(true);
+  }, []);
+  return /* @__PURE__ */ jsxs3(ConnectDialogCtx.Provider, {
+    value: { openConnectDialog },
+    children: [
+      children,
+      /* @__PURE__ */ jsx4(ConnectDialog, {
+        open,
+        onOpenChange: setOpen,
+        children: renderDialog
+      })
+    ]
+  });
+}
 // src/ConnectButton.tsx
-import { jsx as jsx3, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx5, Fragment as Fragment2 } from "react/jsx-runtime";
 "use client";
 function truncateIdentityKey(key) {
   if (key.length <= 12)
@@ -329,7 +481,7 @@ function ConnectButton({
     }
   };
   if (children) {
-    return /* @__PURE__ */ jsx3(Fragment2, {
+    return /* @__PURE__ */ jsx5(Fragment2, {
       children: children({
         isConnected,
         isConnecting,
@@ -340,7 +492,7 @@ function ConnectButton({
     });
   }
   if (isConnecting) {
-    return /* @__PURE__ */ jsx3("button", {
+    return /* @__PURE__ */ jsx5("button", {
       className,
       style,
       disabled: true,
@@ -350,7 +502,7 @@ function ConnectButton({
   }
   if (isConnected) {
     const label = typeof connectedLabel === "function" ? connectedLabel(identityKey ?? "") : connectedLabel ?? truncateIdentityKey(identityKey ?? "");
-    return /* @__PURE__ */ jsx3("button", {
+    return /* @__PURE__ */ jsx5("button", {
       className,
       style,
       onClick: disconnectOnClick ? disconnect : undefined,
@@ -358,7 +510,7 @@ function ConnectButton({
       children: label
     });
   }
-  return /* @__PURE__ */ jsx3("button", {
+  return /* @__PURE__ */ jsx5("button", {
     className,
     style,
     onClick: connect,
@@ -367,13 +519,13 @@ function ConnectButton({
   });
 }
 // src/WalletSelector.tsx
-import { useCallback as useCallback2, useState as useState3 } from "react";
-import { jsx as jsx4, Fragment as Fragment3 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useState as useState5 } from "react";
+import { jsx as jsx6, Fragment as Fragment3 } from "react/jsx-runtime";
 "use client";
 function WalletSelector({ onClose, children }) {
   const { availableProviders, connect, error } = useWallet();
-  const [connectingType, setConnectingType] = useState3(null);
-  const handleConnect = useCallback2(async (providerType) => {
+  const [connectingType, setConnectingType] = useState5(null);
+  const handleConnect = useCallback4(async (providerType) => {
     setConnectingType(providerType);
     try {
       await connect(providerType);
@@ -390,14 +542,17 @@ function WalletSelector({ onClose, children }) {
     isConnecting: connectingType === p.type,
     connect: () => handleConnect(p.type)
   }));
-  return /* @__PURE__ */ jsx4(Fragment3, {
+  return /* @__PURE__ */ jsx6(Fragment3, {
     children: children({ providers, error })
   });
 }
 export {
   useWallet,
+  useConnectDialog,
   WalletSelector,
   WalletProvider,
   SigmaCallback,
+  ConnectDialogProvider,
+  ConnectDialog,
   ConnectButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@1sat/react",
-	"version": "0.0.17",
+	"version": "0.0.18",
 	"description": "React hooks and components for 1Sat wallet integration",
 	"type": "module",
 	"main": "./dist/index.js",