@rialo/frost 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1025 @@
+'use strict';
+
+var frostCore = require('@rialo/frost-core');
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactStore = require('@tanstack/react-store');
+var tsCdk = require('@rialo/ts-cdk');
+
+// src/index.ts
+var FrostContext = react.createContext(null);
+function FrostProvider({
+  children,
+  config,
+  queryClient: externalQueryClient
+}) {
+  const queryClientRef = react.useRef(null);
+  if (!queryClientRef.current && !externalQueryClient) {
+    queryClientRef.current = new reactQuery.QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 1e3 * 60,
+          // 1 minute
+          gcTime: 1e3 * 60 * 5
+          // 5 minutes
+        }
+      }
+    });
+  }
+  const queryClient = externalQueryClient ?? queryClientRef.current;
+  react.useEffect(() => {
+    if (!config._registry) {
+      const registry = new frostCore.WalletRegistry(config);
+      const bridge = new frostCore.WalletEventBridge(config);
+      frostCore.initializeConfig(config, registry, bridge);
+    }
+    const shouldAutoReconnect = config.options.autoConnect && config.store.state.walletName && !config.store.state.userDisconnected;
+    if (shouldAutoReconnect) {
+      void frostCore.reconnect(config);
+    }
+  }, [config]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(FrostContext.Provider, { value: config, children }) });
+}
+function useFrostConfig() {
+  const config = react.useContext(FrostContext);
+  if (!config) {
+    throw new Error("useFrostConfig must be used within a FrostProvider");
+  }
+  return config;
+}
+var selectActiveAccount = (state) => {
+  if (!state.accountAddress) return null;
+  return state.accounts.get(state.accountAddress) ?? null;
+};
+function useActiveAccount() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectActiveAccount);
+}
+var selectActiveWallet = (state) => {
+  if (!state.walletName) return null;
+  return state.wallets.get(state.walletName) ?? null;
+};
+function useActiveWallet() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectActiveWallet);
+}
+var selectStatus = (state) => state.status;
+var selectIsConnected = (state) => state.status === "connected";
+function useConnectionStatus() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectStatus);
+}
+function useIsConnected() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectIsConnected);
+}
+function useConnectWallet(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "connect"],
+    mutationFn: (connectOptions) => frostCore.connect(config, connectOptions),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+function useDisconnectWallet(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "disconnect"],
+    mutationFn: () => frostCore.disconnect(config),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Close modal",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function WalletPlaceholderIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Wallet placeholder icon",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6 6V5C6 3.89543 6.89543 3 8 3H16C17.1046 3 18 3.89543 18 5V6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "13", r: "1.5", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function DisconnectIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Disconnect icon",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5.25 12.25H3.5C2.53333 12.25 1.75 11.4667 1.75 10.5V3.5C1.75 2.53333 2.53333 1.75 3.5 1.75H5.25",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M9.33331 9.91669L12.25 7.00002L9.33331 4.08335",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.25 7H5.25", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Chevron icon",
+      style: {
+        marginLeft: "0.25rem",
+        transition: "transform 0.15s ease",
+        transform: direction === "up" ? "rotate(180deg)" : void 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M2.5 4.5L6 8L9.5 4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CopyIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "Copy icon",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.25" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 4V3C10 2.17157 9.32843 1.5 8.5 1.5H3C2.17157 1.5 1.5 2.17157 1.5 3V8.5C1.5 9.32843 2.17157 10 3 10H4",
+            stroke: "currentColor",
+            strokeWidth: "1.25"
+          }
+        )
+      ]
+    }
+  );
+}
+var selectWalletsMap = (state) => state.wallets;
+var selectWalletsReady = (state) => state.wallets.size > 0;
+function useWallets() {
+  const config = useFrostConfig();
+  const walletsMap = reactStore.useStore(config.store, selectWalletsMap);
+  return react.useMemo(
+    () => Array.from(walletsMap.values()).sort((a, b) => {
+      const priorityDiff = (b.priority ?? 0) - (a.priority ?? 0);
+      if (priorityDiff !== 0) return priorityDiff;
+      return (b.lastConnectedAt ?? 0) - (a.lastConnectedAt ?? 0);
+    }),
+    [walletsMap]
+  );
+}
+function useWalletsReady() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectWalletsReady);
+}
+var defaultStyles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "var(--frost-overlay-bg, rgba(0, 0, 0, 0.5))",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: "var(--frost-z-index, 9999)",
+    padding: "1rem"
+  },
+  content: {
+    backgroundColor: "var(--frost-modal-bg, #ffffff)",
+    borderRadius: "var(--frost-border-radius, 12px)",
+    boxShadow: "var(--frost-shadow, 0 4px 24px rgba(0, 0, 0, 0.15))",
+    maxWidth: "var(--frost-modal-max-width, 400px)",
+    width: "100%",
+    maxHeight: "80vh",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 1.25rem",
+    borderBottom: "1px solid var(--frost-border-color, #e5e7eb)"
+  },
+  title: {
+    margin: 0,
+    fontSize: "1.125rem",
+    fontWeight: 600,
+    color: "var(--frost-text-color, #111827)"
+  },
+  closeButton: {
+    background: "none",
+    border: "none",
+    padding: "0.5rem",
+    cursor: "pointer",
+    borderRadius: "var(--frost-border-radius-sm, 6px)",
+    color: "var(--frost-text-secondary, #6b7280)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.15s ease"
+  },
+  walletList: {
+    listStyle: "none",
+    margin: 0,
+    padding: "0.5rem",
+    overflowY: "auto",
+    flex: 1
+  },
+  walletItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.875rem 1rem",
+    borderRadius: "var(--frost-border-radius-sm, 8px)",
+    cursor: "pointer",
+    border: "none",
+    background: "none",
+    width: "100%",
+    textAlign: "left",
+    transition: "background-color 0.15s ease",
+    color: "var(--frost-text-color, #111827)"
+  },
+  walletIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: "var(--frost-border-radius-sm, 8px)",
+    objectFit: "contain",
+    backgroundColor: "var(--frost-icon-bg, #f3f4f6)"
+  },
+  walletInfo: {
+    flex: 1,
+    minWidth: 0
+  },
+  walletName: {
+    margin: 0,
+    fontSize: "0.9375rem",
+    fontWeight: 500,
+    color: "inherit"
+  },
+  walletStatus: {
+    margin: 0,
+    fontSize: "0.8125rem",
+    color: "var(--frost-text-secondary, #6b7280)"
+  },
+  spinner: {
+    width: 20,
+    height: 20,
+    border: "2px solid var(--frost-border-color, #e5e7eb)",
+    borderTopColor: "var(--frost-primary, #3b82f6)",
+    borderRadius: "50%",
+    animation: "frost-spin 0.8s linear infinite"
+  },
+  emptyState: {
+    padding: "2rem 1rem",
+    textAlign: "center",
+    color: "var(--frost-text-secondary, #6b7280)"
+  }
+};
+var SPINNER_KEYFRAMES = `
+@keyframes frost-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+var stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = SPINNER_KEYFRAMES;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+function WalletModal({
+  open,
+  onClose,
+  onConnect,
+  onError,
+  title = "Connect Wallet",
+  className,
+  contentClassName,
+  style,
+  renderWallet
+}) {
+  const wallets = useWallets();
+  const status = useConnectionStatus();
+  const {
+    mutate: connect2,
+    variables: connectingWallet,
+    isPending
+  } = useConnectWallet({
+    onSuccess: (result) => {
+      onConnect?.(result.walletName, result.accountAddress);
+    },
+    onError: (error) => {
+      onError?.(error, connectingWallet?.walletName ?? "unknown");
+    }
+  });
+  const modalRef = react.useRef(null);
+  const previousActiveElement = react.useRef(null);
+  const wasOpen = react.useRef(false);
+  react.useEffect(() => {
+    injectStyles();
+  }, []);
+  react.useEffect(() => {
+    if (open && !wasOpen.current) {
+      previousActiveElement.current = document.activeElement;
+      modalRef.current?.focus();
+    } else if (!open && wasOpen.current) {
+      previousActiveElement.current?.focus();
+    }
+    wasOpen.current = open;
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab" && modalRef.current) {
+        const focusableElements = modalRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [open, onClose]);
+  const handleOverlayClick = react.useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const handleWalletClick = react.useCallback(
+    (walletName) => {
+      connect2({ walletName });
+    },
+    [connect2]
+  );
+  const handleWalletKeyDown = react.useCallback(
+    (e, walletName) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        connect2({ walletName });
+      }
+    },
+    [connect2]
+  );
+  if (!open) return null;
+  const isConnecting = status === "connecting" || isPending;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <modal>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "frost-modal-title",
+        className,
+        style: { ...defaultStyles.overlay, ...style },
+        onClick: handleOverlayClick,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: modalRef,
+            className: contentClassName,
+            style: defaultStyles.content,
+            tabIndex: -1,
+            "data-frost": "modal-content",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.header, "data-frost": "modal-header", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "frost-modal-title", style: defaultStyles.title, children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: defaultStyles.closeButton,
+                    "aria-label": "Close modal",
+                    "data-frost": "modal-close",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { style: defaultStyles.walletList, "data-frost": "wallet-list", children: wallets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { style: defaultStyles.emptyState, "data-frost": "empty-state", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No wallets detected." }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "0.5rem", fontSize: "0.875rem" }, children: "Please install a Rialo-compatible wallet extension." })
+              ] }) : wallets.map((wallet) => {
+                const isThisConnecting = isConnecting && connectingWallet?.walletName === wallet.name;
+                if (renderWallet) {
+                  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderWallet(wallet, () => handleWalletClick(wallet.name), isThisConnecting) }, wallet.name);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleWalletClick(wallet.name),
+                    onKeyDown: (e) => handleWalletKeyDown(e, wallet.name),
+                    disabled: isConnecting,
+                    style: {
+                      ...defaultStyles.walletItem,
+                      opacity: isConnecting && !isThisConnecting ? 0.5 : 1,
+                      cursor: isConnecting ? "not-allowed" : "pointer"
+                    },
+                    "data-frost": "wallet-item",
+                    "data-connecting": isThisConnecting ? "true" : void 0,
+                    onMouseEnter: (e) => {
+                      if (!isConnecting) {
+                        e.currentTarget.style.backgroundColor = "var(--frost-hover-bg, #f3f4f6)";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: [
+                      wallet.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: wallet.icon,
+                          alt: `${wallet.name} icon`,
+                          style: defaultStyles.walletIcon,
+                          "data-frost": "wallet-icon"
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            ...defaultStyles.walletIcon,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "var(--frost-text-secondary, #6b7280)"
+                          },
+                          "data-frost": "wallet-icon-placeholder",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(WalletPlaceholderIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.walletInfo, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { style: defaultStyles.walletName, children: wallet.name }),
+                        wallet.installedVersion && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: defaultStyles.walletStatus, children: [
+                          "v",
+                          wallet.installedVersion
+                        ] })
+                      ] }),
+                      isThisConnecting && /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.spinner, "data-frost": "spinner" })
+                    ]
+                  }
+                ) }, wallet.name);
+              }) })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+var defaultStyles2 = {
+  container: {
+    position: "relative",
+    display: "inline-block"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    padding: "0.625rem 1rem",
+    fontSize: "0.9375rem",
+    fontWeight: 500,
+    color: "var(--frost-button-text, #ffffff)",
+    backgroundColor: "var(--frost-primary, #3b82f6)",
+    border: "none",
+    borderRadius: "var(--frost-border-radius, 8px)",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    minWidth: "140px",
+    fontFamily: "inherit"
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  buttonConnected: {
+    backgroundColor: "var(--frost-button-connected-bg, #f3f4f6)",
+    color: "var(--frost-button-connected-text, #111827)"
+  },
+  walletIcon: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    objectFit: "contain"
+  },
+  dropdown: {
+    position: "absolute",
+    top: "calc(100% + 4px)",
+    right: 0,
+    minWidth: "100%",
+    backgroundColor: "var(--frost-dropdown-bg, #ffffff)",
+    borderRadius: "var(--frost-border-radius, 8px)",
+    boxShadow: "var(--frost-shadow, 0 4px 16px rgba(0, 0, 0, 0.12))",
+    border: "1px solid var(--frost-border-color, #e5e7eb)",
+    overflow: "hidden",
+    zIndex: "var(--frost-z-index, 9999)"
+  },
+  dropdownItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    width: "100%",
+    padding: "0.75rem 1rem",
+    fontSize: "0.875rem",
+    color: "var(--frost-text-color, #111827)",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    textAlign: "left",
+    fontFamily: "inherit",
+    transition: "background-color 0.15s ease"
+  },
+  dropdownDivider: {
+    height: 1,
+    backgroundColor: "var(--frost-border-color, #e5e7eb)",
+    margin: 0
+  },
+  addressDisplay: {
+    padding: "0.75rem 1rem",
+    fontSize: "0.75rem",
+    color: "var(--frost-text-secondary, #6b7280)",
+    fontFamily: "monospace",
+    wordBreak: "break-all"
+  },
+  spinner: {
+    width: 16,
+    height: 16,
+    border: "2px solid rgba(255, 255, 255, 0.3)",
+    borderTopColor: "#ffffff",
+    borderRadius: "50%",
+    animation: "frost-spin 0.8s linear infinite"
+  }
+};
+function truncateAddress(address, startChars = 6, endChars = 4) {
+  if (address.length <= startChars + endChars) return address;
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
+}
+function ConnectButton({
+  label = "Connect Wallet",
+  connectingLabel = "Connecting...",
+  connectedLabel,
+  onConnect,
+  onDisconnect,
+  onError,
+  className,
+  style,
+  disabled = false,
+  modalTitle,
+  showDropdown = true,
+  dropdownClassName
+}) {
+  const [modalOpen, setModalOpen] = react.useState(false);
+  const [dropdownOpen, setDropdownOpen] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const copyTimeoutRef = react.useRef(null);
+  const status = useConnectionStatus();
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const { mutate: disconnect2 } = useDisconnectWallet({
+    onSuccess: () => {
+      setDropdownOpen(false);
+      onDisconnect?.();
+    }
+  });
+  const isConnected = status === "connected" && account;
+  const isConnecting = status === "connecting" || status === "reconnecting";
+  const handlersRef = react.useRef(null);
+  const removeListeners = react.useCallback(() => {
+    if (handlersRef.current) {
+      document.removeEventListener("mousedown", handlersRef.current.clickOutside);
+      document.removeEventListener("keydown", handlersRef.current.escape);
+    }
+  }, []);
+  const addListeners = react.useCallback(() => {
+    if (handlersRef.current) {
+      document.addEventListener("mousedown", handlersRef.current.clickOutside);
+      document.addEventListener("keydown", handlersRef.current.escape);
+    }
+  }, []);
+  if (!handlersRef.current) {
+    handlersRef.current = {
+      clickOutside: (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setDropdownOpen(false);
+          removeListeners();
+        }
+      },
+      escape: (e) => {
+        if (e.key === "Escape") {
+          setDropdownOpen(false);
+          removeListeners();
+        }
+      }
+    };
+  }
+  const setDropdownOpenWithListeners = react.useCallback(
+    (open) => {
+      setDropdownOpen(open);
+      if (open) {
+        addListeners();
+      } else {
+        removeListeners();
+      }
+    },
+    [addListeners, removeListeners]
+  );
+  react.useEffect(() => {
+    return () => {
+      removeListeners();
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, [removeListeners]);
+  const handleButtonClick = react.useCallback(() => {
+    if (isConnected) {
+      if (showDropdown) {
+        setDropdownOpenWithListeners(!dropdownOpen);
+      } else {
+        disconnect2();
+      }
+    } else if (!isConnecting) {
+      setModalOpen(true);
+    }
+  }, [
+    isConnected,
+    isConnecting,
+    showDropdown,
+    disconnect2,
+    setDropdownOpenWithListeners,
+    dropdownOpen
+  ]);
+  const handleCopyAddress = react.useCallback(async () => {
+    if (!account?.address) return;
+    try {
+      await navigator.clipboard.writeText(account.address);
+      setCopied(true);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy address:", err);
+    }
+  }, [account?.address]);
+  const handleModalConnect = react.useCallback(
+    (walletName, address) => {
+      setModalOpen(false);
+      onConnect?.(walletName, address);
+    },
+    [onConnect]
+  );
+  const getButtonLabel = () => {
+    if (isConnecting) return connectingLabel;
+    if (isConnected && account) {
+      if (typeof connectedLabel === "function") {
+        return connectedLabel(account.address, wallet?.name ?? "");
+      }
+      if (typeof connectedLabel === "string") return connectedLabel;
+      return truncateAddress(account.address);
+    }
+    return label;
+  };
+  const buttonStyles = {
+    ...defaultStyles2.button,
+    ...isConnected ? defaultStyles2.buttonConnected : {},
+    ...disabled || isConnecting ? defaultStyles2.buttonDisabled : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: defaultStyles2.container, "data-frost": "connect-button-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleButtonClick,
+        disabled: disabled || isConnecting,
+        className,
+        style: buttonStyles,
+        "data-frost": "connect-button",
+        "data-connected": isConnected ? "true" : void 0,
+        "data-connecting": isConnecting ? "true" : void 0,
+        "aria-expanded": dropdownOpen,
+        "aria-haspopup": isConnected && showDropdown ? "menu" : void 0,
+        onMouseEnter: (e) => {
+          if (!disabled && !isConnecting) e.currentTarget.style.opacity = "0.9";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        children: [
+          isConnecting && /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.spinner, "data-frost": "spinner" }),
+          isConnected && wallet?.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: wallet.icon,
+              alt: wallet.name,
+              style: defaultStyles2.walletIcon,
+              "data-frost": "wallet-icon"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: getButtonLabel() }),
+          isConnected && showDropdown && /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { direction: dropdownOpen ? "up" : "down" })
+        ]
+      }
+    ),
+    isConnected && showDropdown && dropdownOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "menu",
+        className: dropdownClassName,
+        style: defaultStyles2.dropdown,
+        "data-frost": "dropdown",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.addressDisplay, "data-frost": "address-display", children: account.address }),
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { style: defaultStyles2.dropdownDivider }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: handleCopyAddress,
+              style: defaultStyles2.dropdownItem,
+              "data-frost": "dropdown-item",
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--frost-hover-bg, #f3f4f6)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: copied ? "Copied!" : "Copy Address" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              onClick: () => disconnect2(),
+              style: { ...defaultStyles2.dropdownItem, color: "var(--frost-danger, #ef4444)" },
+              "data-frost": "dropdown-item",
+              "data-action": "disconnect",
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--frost-hover-bg, #f3f4f6)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DisconnectIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disconnect" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WalletModal,
+      {
+        open: modalOpen,
+        onClose: () => setModalOpen(false),
+        onConnect: handleModalConnect,
+        onError,
+        title: modalTitle
+      }
+    )
+  ] });
+}
+var selectAccountsMap = (state) => state.accounts;
+function useAccounts() {
+  const config = useFrostConfig();
+  const accountsMap = reactStore.useStore(config.store, selectAccountsMap);
+  return react.useMemo(() => Array.from(accountsMap.values()), [accountsMap]);
+}
+var selectChainId = (state) => state.chainId;
+function useSwitchChain() {
+  const config = useFrostConfig();
+  const switchChain = react.useCallback(
+    () => (clientConfig) => {
+      config.switchChain(clientConfig);
+    },
+    [config]
+  );
+  return switchChain;
+}
+function useChainId() {
+  const config = useFrostConfig();
+  return reactStore.useStore(config.store, selectChainId);
+}
+
+// src/hooks/useClient.ts
+function useClient() {
+  const config = useFrostConfig();
+  return config.client;
+}
+var selectAccountAddress = (state) => state.accountAddress;
+function formatBalance(balance, decimals) {
+  const divisor = BigInt(10 ** decimals);
+  const integerPart = balance / divisor;
+  const fractionalPart = balance % divisor;
+  const fractionalStr = fractionalPart.toString().padStart(decimals, "0");
+  const trimmed = fractionalStr.replace(/0+$/, "");
+  if (!trimmed) {
+    return integerPart.toString();
+  }
+  return `${integerPart}.${trimmed}`;
+}
+function useNativeBalance(options = {}) {
+  const { decimals = 9 } = options;
+  const config = useFrostConfig();
+  const activeAddress = reactStore.useStore(config.store, selectAccountAddress);
+  const address = options.address ?? activeAddress;
+  const hasAddress = !!address;
+  const query = reactQuery.useQuery({
+    queryKey: ["frost", "nativeBalance", address, config.getChainId()],
+    queryFn: () => {
+      if (!address) throw new Error("No address provided");
+      return config.client.getBalance(tsCdk.PublicKey.fromString(address));
+    },
+    enabled: hasAddress
+  });
+  return {
+    balance: query.data,
+    formatted: query.data !== void 0 ? formatBalance(query.data, decimals) : void 0,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refetch: () => {
+      void query.refetch();
+    }
+  };
+}
+function useSignMessage(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "signMessage"],
+    mutationFn: (msgOptions) => frostCore.signMessage(config, msgOptions),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+function useSignTransaction(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "signTransaction"],
+    mutationFn: (txOptions) => frostCore.signTransaction(config, txOptions),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+function useSendTransaction(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "sendTransaction"],
+    mutationFn: (txOptions) => frostCore.sendTransaction(config, txOptions),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+function useSignAndSendTransaction(options) {
+  const config = useFrostConfig();
+  return reactQuery.useMutation({
+    mutationKey: ["frost", "signAndSendTransaction"],
+    mutationFn: (txOptions) => frostCore.signAndSendTransaction(config, txOptions),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
+
+exports.ConnectButton = ConnectButton;
+exports.FrostProvider = FrostProvider;
+exports.WalletModal = WalletModal;
+exports.useAccounts = useAccounts;
+exports.useActiveAccount = useActiveAccount;
+exports.useActiveWallet = useActiveWallet;
+exports.useChainId = useChainId;
+exports.useClient = useClient;
+exports.useConnectWallet = useConnectWallet;
+exports.useConnectionStatus = useConnectionStatus;
+exports.useDisconnectWallet = useDisconnectWallet;
+exports.useFrostConfig = useFrostConfig;
+exports.useIsConnected = useIsConnected;
+exports.useNativeBalance = useNativeBalance;
+exports.useSendTransaction = useSendTransaction;
+exports.useSignAndSendTransaction = useSignAndSendTransaction;
+exports.useSignMessage = useSignMessage;
+exports.useSignTransaction = useSignTransaction;
+exports.useSwitchChain = useSwitchChain;
+exports.useWallets = useWallets;
+exports.useWalletsReady = useWalletsReady;
+Object.keys(frostCore).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return frostCore[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map