@algobright/solana-connector-kit 1.0.0

package/dist/WalletModal.js

@@ -0,0 +1,838 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/WalletModal/index.ts
+var WalletModal_exports = {};
+__export(WalletModal_exports, {
+  default: () => WalletModal_default2
+});
+module.exports = __toCommonJS(WalletModal_exports);
+
+// src/components/WalletModal/WalletModal.tsx
+var import_connector = require("@solana/connector");
+var import_lucide_react3 = require("lucide-react");
+var import_react3 = require("react");
+var import_WalletModal = __toESM(require("./WalletModal.module-PVV5PRXU.module.css"));
+
+// src/components/shared/Dialog/Dialog.tsx
+var React = __toESM(require("react"));
+var import_dialog = require("@base-ui/react/dialog");
+var import_lucide_react = require("lucide-react");
+var import_Dialog = __toESM(require("./Dialog.module-HCRT743N.module.css"));
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Dialog = import_dialog.Dialog.Root;
+var DialogTrigger = import_dialog.Dialog.Trigger;
+var DialogPortal = import_dialog.Dialog.Portal;
+var DialogClose = import_dialog.Dialog.Close;
+var DialogBackdrop = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      ref,
+      className: `${import_Dialog.default.backdrop} ${className || ""}`,
+      ...props
+    }
+  )
+);
+DialogBackdrop.displayName = "DialogBackdrop";
+var DialogContent = React.forwardRef(
+  ({ className, children, theme, showCloseButton = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogBackdrop, { "data-theme": theme }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dialog.Dialog.Popup,
+      {
+        ref,
+        "data-theme": theme,
+        className: (0, import_clsx.default)(import_Dialog.default.content, className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogClose, { className: import_Dialog.default.closeButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, {}) })
+        ]
+      }
+    )
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${import_Dialog.default.header} ${className || ""}`, ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${import_Dialog.default.footer} ${className || ""}`, ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Title,
+    {
+      ref,
+      className: `${import_Dialog.default.title} ${className || ""}`,
+      ...props
+    }
+  )
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_dialog.Dialog.Description,
+  {
+    ref,
+    className: `${import_Dialog.default.description} ${className || ""}`,
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+
+// src/components/shared/Button/Button.tsx
+var React2 = __toESM(require("react"));
+var import_button = require("@base-ui/react/button");
+var import_Button = __toESM(require("./Button.module-7TPMDOJN.module.css"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React2.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_button.Button,
+      {
+        ref,
+        className: `${import_Button.default.button} ${className || ""}`,
+        "data-variant": variant,
+        "data-size": size,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/components/shared/Button/index.ts
+var Button_default2 = Button_default;
+
+// src/components/shared/CustomQRCode/CustomQRCode.tsx
+var import_react = require("react");
+var import_qrcode = __toESM(require("qrcode"));
+var import_CustomQRCode = __toESM(require("./CustomQRCode.module-FOXENMZG.module.css"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function generateMatrix(value, errorCorrectionLevel) {
+  const arr = Array.prototype.slice.call(import_qrcode.default.create(value, { errorCorrectionLevel }).modules.data, 0);
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce(
+    (rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+}
+function QRCodeSVG({
+  value,
+  size: sizeProp = 200,
+  ecl = "M",
+  clearArea = false,
+  dotColor = "currentColor",
+  backgroundColor = "#ffffff"
+}) {
+  const logoSize = clearArea ? 76 : 0;
+  const size = sizeProp - 10 * 2;
+  const dots = (0, import_react.useMemo)(() => {
+    const dots2 = [];
+    const matrix = generateMatrix(value, ecl);
+    const cellSize = size / matrix.length;
+    const qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - 7) * cellSize * x;
+      const y1 = (matrix.length - 7) * cellSize * y;
+      for (let i = 0; i < 3; i++) {
+        dots2.push(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "rect",
+            {
+              fill: i % 2 !== 0 ? backgroundColor : dotColor,
+              rx: (i - 2) * -5 + (i === 0 ? 2 : 3),
+              ry: (i - 2) * -5 + (i === 0 ? 2 : 3),
+              width: cellSize * (7 - i * 2),
+              height: cellSize * (7 - i * 2),
+              x: x1 + cellSize * i,
+              y: y1 + cellSize * i
+            },
+            `finder-${i}-${x}-${y}`
+          )
+        );
+      }
+    });
+    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+    matrix.forEach((row, i) => {
+      row.forEach((_, j) => {
+        if (matrix[i][j]) {
+          if (!(i < 7 && j < 7 || i > matrix.length - 8 && j < 7 || i < 7 && j > matrix.length - 8)) {
+            if (!clearArea || !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
+              dots2.push(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "circle",
+                  {
+                    cx: j * cellSize + cellSize / 2,
+                    cy: i * cellSize + cellSize / 2,
+                    fill: dotColor,
+                    r: cellSize / 3
+                  },
+                  `dot-${i}-${j}`
+                )
+              );
+            }
+          }
+        }
+      });
+    });
+    return dots2;
+  }, [value, ecl, size, clearArea, logoSize, dotColor, backgroundColor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      height: size,
+      width: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: import_CustomQRCode.default.svgFull,
+      style: { maxWidth: size, maxHeight: size },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { fill: "transparent", height: size, width: size }),
+        dots
+      ]
+    }
+  );
+}
+function ViewfinderFrame({
+  size,
+  color = "#2D2D2D",
+  opacity = 0.01
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 283 283",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: import_CustomQRCode.default.viewfinder,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "path",
+        {
+          d: "M3.5 264.06C3.5 272.587 10.4127 279.5 18.9399 279.5H32.8799C33.7083 279.5 34.3799 280.172 34.3799 281V281C34.3799 281.828 33.7083 282.5 32.8799 282.5H17.4399C8.08427 282.5 0.5 274.916 0.5 265.56V250.12C0.5 249.292 1.17157 248.62 2 248.62V248.62C2.82843 248.62 3.5 249.292 3.5 250.12V264.06ZM282.5 266.058C282.5 275.139 275.139 282.5 266.058 282.5H251.116C250.288 282.5 249.616 281.828 249.616 281V281C249.616 280.172 250.288 279.5 251.116 279.5H264.558C272.81 279.5 279.5 272.81 279.5 264.558V250.12C279.5 249.292 280.172 248.62 281 248.62V248.62C281.828 248.62 282.5 249.292 282.5 250.12V266.058ZM34.3799 2C34.3799 2.82843 33.7083 3.5 32.8799 3.5H18.9399C10.4127 3.5 3.5 10.4127 3.5 18.9399V32.8799C3.5 33.7083 2.82843 34.3799 2 34.3799V34.3799C1.17157 34.3799 0.5 33.7083 0.5 32.8799V17.4399C0.5 8.08427 8.08427 0.5 17.4399 0.5H32.8799C33.7083 0.5 34.3799 1.17157 34.3799 2V2ZM282.5 32.8799C282.5 33.7083 281.828 34.3799 281 34.3799V34.3799C280.172 34.3799 279.5 33.7083 279.5 32.8799V18.4419C279.5 10.1897 272.81 3.5 264.558 3.5H251.116C250.288 3.5 249.616 2.82843 249.616 2V2C249.616 1.17157 250.288 0.5 251.116 0.5H266.058C275.139 0.5 282.5 7.86129 282.5 16.9419V32.8799Z",
+          fill: color,
+          fillOpacity: opacity
+        }
+      )
+    }
+  );
+}
+function CustomQRCode({
+  value,
+  size = 280,
+  ecl = "M",
+  clearArea = false,
+  image,
+  imageBackground = "transparent",
+  dotColor,
+  backgroundColor,
+  className,
+  style,
+  loading = false,
+  scanning = true,
+  error = false,
+  frameColor
+}) {
+  const showPlaceholder = loading || !value;
+  const resolvedBackground = backgroundColor || "#ffffff";
+  const resolvedDotColor = dotColor || "#000000";
+  const resolvedFrameColor = error ? "#FF0000" : frameColor || "#2D2D2D";
+  const frameOpacity = error ? 0.56 : 0.01;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `${import_CustomQRCode.default.container} ${className || ""}`,
+      style: {
+        width: size,
+        height: size,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewfinderFrame, { size, color: resolvedFrameColor, opacity: frameOpacity }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: import_CustomQRCode.default.contentArea,
+            style: { background: resolvedBackground },
+            "data-error": error,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_CustomQRCode.default.glow, "data-error": error }),
+              scanning && !showPlaceholder && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_CustomQRCode.default.shine }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_CustomQRCode.default.qrWrapper, children: showPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(QRPlaceholder, { size, dotColor: resolvedDotColor, backgroundColor: resolvedBackground }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  QRCodeSVG,
+                  {
+                    value,
+                    size: size - 40,
+                    ecl,
+                    clearArea: clearArea || !!image,
+                    dotColor: resolvedDotColor,
+                    backgroundColor: resolvedBackground
+                  }
+                ),
+                image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: import_CustomQRCode.default.logoWrapper,
+                    style: {
+                      width: "28%",
+                      height: "28%",
+                      background: imageBackground || resolvedBackground
+                    },
+                    children: image
+                  }
+                )
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function QRPlaceholder({
+  size,
+  dotColor,
+  backgroundColor
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_CustomQRCode.default.placeholderContainer, style: { width: size - 40, height: size - 40 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: import_CustomQRCode.default.placeholderPattern,
+        style: {
+          backgroundImage: `radial-gradient(${dotColor} 41%, transparent 41%)`
+        }
+      }
+    ),
+    [
+      { top: 0, left: 0 },
+      { top: 0, right: 0 },
+      { bottom: 0, left: 0 }
+    ].map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        className: import_CustomQRCode.default.cornerSquare,
+        style: {
+          ...pos,
+          background: dotColor
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: import_CustomQRCode.default.centerArea,
+        style: {
+          background: backgroundColor,
+          boxShadow: `0 0 0 7px ${backgroundColor}`
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_CustomQRCode.default.loaderWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          className: import_CustomQRCode.default.spinner,
+          style: { color: `${dotColor}40` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: import_CustomQRCode.default.loadingText, style: { color: `${dotColor}70` }, children: "Generating QR code..." })
+    ] })
+  ] });
+}
+CustomQRCode.displayName = "CustomQRCode";
+
+// src/components/shared/CustomQRCode/index.ts
+var CustomQRCode_default = CustomQRCode;
+
+// src/components/shared/Spinner/Spinner.tsx
+var import_Spinner = __toESM(require("./Spinner.module-G7GUQJZJ.module.css"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Spinner = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: import_Spinner.default.spinner });
+};
+var Spinner_default = Spinner;
+
+// src/components/shared/Spinner/index.ts
+var Spinner_default2 = Spinner_default;
+
+// src/components/WalletModal/WalletModal.tsx
+var import_si = require("react-icons/si");
+
+// src/components/shared/Collapsible/Collapsible.tsx
+var React3 = __toESM(require("react"));
+var import_collapsible = require("@base-ui/react/collapsible");
+var import_Collapsible = __toESM(require("./Collapsible.module-NXSN3MGI.module.css"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Collapsible = import_collapsible.Collapsible.Root;
+var CollapsibleTrigger = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  import_collapsible.Collapsible.Trigger,
+  {
+    ref,
+    className: `${import_Collapsible.default.trigger} ${className || ""}`,
+    ...props
+  }
+));
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  import_collapsible.Collapsible.Panel,
+  {
+    ref,
+    className: `${import_Collapsible.default.content} ${className || ""}`,
+    ...props
+  }
+));
+CollapsibleContent.displayName = "CollapsibleContent";
+
+// src/components/shared/Avatar/Avatar.tsx
+var import_react2 = require("react");
+var import_Avatar = __toESM(require("./Avatar.module-P7KEBP7R.module.css"));
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Avatar({
+  height,
+  width,
+  src,
+  alt,
+  theme = "light"
+}) {
+  const [hasError, setHasError] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: import_Avatar.default.avatar, "data-theme": theme, children: src && !hasError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "img",
+    {
+      height,
+      width,
+      src,
+      alt: alt || "Avatar",
+      onError: () => setHasError(true)
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: import_Avatar.default.fallback, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Wallet, {}) }) });
+}
+
+// src/components/shared/Avatar/index.ts
+var Avatar_default = Avatar;
+
+// src/components/WalletModal/WalletModal.tsx
+var import_clsx2 = require("clsx");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function WalletModal(props) {
+  var _a;
+  const {
+    CN_Modal,
+    theme = "light",
+    open,
+    onOpenChange,
+    walletConnectUri,
+    onClearWalletConnectUri
+  } = props;
+  const { walletStatus: { status }, isConnecting, connectorId, connectors, connectWallet, disconnectWallet } = (0, import_connector.useConnector)();
+  const [connectingConnectorId, setConnectingConnectorId] = (0, import_react3.useState)(null);
+  const [isOtherWalletsOpen, setIsOtherWalletsOpen] = (0, import_react3.useState)(false);
+  const [errorConnectorId, setErrorConnectorId] = (0, import_react3.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(null);
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const isClient = (0, import_react3.useSyncExternalStore)(
+    () => () => {
+    },
+    () => true,
+    () => false
+  );
+  const recentlyConnectedConnectorId = (0, import_react3.useSyncExternalStore)(
+    () => () => {
+    },
+    () => localStorage.getItem("recentlyConnectedConnectorId"),
+    () => null
+  );
+  (0, import_react3.useEffect)(() => {
+    if (status === "connected" && connectorId) {
+      localStorage.setItem("recentlyConnectedConnectorId", connectorId);
+    }
+  }, [status, connectorId]);
+  const walletConnectConnector = (_a = connectors.find((c) => c.name === "WalletConnect")) != null ? _a : null;
+  const isWalletConnectFlow = !!walletConnectConnector && (connectingConnectorId === walletConnectConnector.id || status === "connecting" && connectorId === walletConnectConnector.id) || !!walletConnectUri;
+  function cancelConnection() {
+    onClearWalletConnectUri == null ? void 0 : onClearWalletConnectUri();
+    setConnectingConnectorId(null);
+    disconnectWallet().catch(() => {
+    });
+  }
+  const clearError = () => {
+    setErrorConnectorId(null);
+    setErrorMessage(null);
+  };
+  const handleSelectWallet = async (connector) => {
+    clearError();
+    setConnectingConnectorId(connector.id);
+    try {
+      if (connector.name === "WalletConnect") {
+        onClearWalletConnectUri == null ? void 0 : onClearWalletConnectUri();
+      }
+      await connectWallet(connector.id);
+      localStorage.setItem("recentlyConnectedConnectorId", connector.id);
+      if (connector.name !== "WalletConnect") {
+        onOpenChange(false);
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "An unexpected error occurred";
+      if (message.includes("Connection cancelled")) return;
+      setErrorConnectorId(connector.id);
+      setErrorMessage(message);
+      console.error("Failed to connect wallet:", {
+        wallet: connector.name,
+        connectorId: connector.id,
+        error,
+        message,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    } finally {
+      setConnectingConnectorId(null);
+    }
+  };
+  const handleCopyUri = async () => {
+    if (!walletConnectUri) return;
+    try {
+      await navigator.clipboard.writeText(walletConnectUri);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy URI:", err);
+    }
+  };
+  const handleBackFromWalletConnect = () => {
+    cancelConnection();
+  };
+  const readyConnectors = connectors.filter((c) => c.ready);
+  const notReadyConnectors = connectors.filter((c) => !c.ready);
+  const sortedReadyConnectors = [...readyConnectors].sort((a, b) => {
+    const aIsRecent = recentlyConnectedConnectorId === a.id;
+    const bIsRecent = recentlyConnectedConnectorId === b.id;
+    if (aIsRecent && !bIsRecent) return -1;
+    if (!aIsRecent && bIsRecent) return 1;
+    return 0;
+  });
+  const primaryWallets = sortedReadyConnectors.slice(0, 3);
+  const otherWallets = sortedReadyConnectors.slice(3);
+  const primayOuterHr = otherWallets.length > 0 && primaryWallets.length > 0;
+  const getInstallUrl = (walletName, walletUrl) => {
+    if (walletUrl) return walletUrl;
+    const name = walletName.toLowerCase();
+    if (name.includes("phantom")) return "https://phantom.app";
+    if (name.includes("solflare")) return "https://solflare.com";
+    if (name.includes("backpack")) return "https://backpack.app";
+    if (name.includes("glow")) return "https://glow.app";
+    if (name.includes("coinbase")) return "https://www.coinbase.com/wallet";
+    if (name.includes("ledger")) return "https://www.ledger.com";
+    if (name.includes("trust")) return "https://trustwallet.com";
+    if (name.includes("exodus")) return "https://www.exodus.com";
+    return void 0;
+  };
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      clearError();
+      if (isConnecting || connectingConnectorId || walletConnectUri) {
+        cancelConnection();
+      }
+    }
+    onOpenChange(isOpen);
+  };
+  const walletLinkOpen = (walletName) => {
+    const installUrl = getInstallUrl(walletName);
+    if (installUrl) {
+      window.open(installUrl, "_blank");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: (0, import_clsx2.clsx)(import_WalletModal.default.dialogContent, CN_Modal),
+      theme,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.dialogHeader, children: [
+          isWalletConnectFlow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              onClick: handleBackFromWalletConnect,
+              className: import_WalletModal.default.iconButton,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronLeft, {})
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogTitle, { className: import_WalletModal.default.dialogTitle, children: isWalletConnectFlow ? "WalletConnect" : "Connect your wallet" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogClose, { className: import_WalletModal.default.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.X, {}) })
+        ] }),
+        isWalletConnectFlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.walletsContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.tooltipBubble, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Use a WalletConnect" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.tooltipIconWrapper, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_si.SiWalletconnect, { className: import_WalletModal.default.tooltipIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.tooltipCaret })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "supported wallet to scan" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.qrWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            CustomQRCode_default,
+            {
+              value: walletConnectUri != null ? walletConnectUri : "",
+              size: 280,
+              ecl: "M",
+              loading: !walletConnectUri,
+              scanning: !!walletConnectUri
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Button_default2,
+            {
+              variant: "outline",
+              onClick: handleCopyUri,
+              disabled: !walletConnectUri,
+              className: import_WalletModal.default.copyButton,
+              "data-theme": theme,
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Check, { className: `${import_WalletModal.default.icon} ${import_WalletModal.default.successIcon}` }),
+                "Copy to Clipboard"
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Copy, { className: import_WalletModal.default.icon }),
+                "Copy to Clipboard"
+              ] })
+            }
+          )
+        ] }),
+        !isWalletConnectFlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.walletsContainer, children: [
+          !isClient && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.detectingWallets, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner_default2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Detecting wallets..." })
+          ] }),
+          connectors.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.emptyStateContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Wallet, { className: import_WalletModal.default.emptyStateIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: import_WalletModal.default.emptyStateTitle, children: "No Wallets Detected" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: import_WalletModal.default.emptyStateDesc, children: "Install a Solana wallet extension to get started" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.emptyStateActions, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                Button_default2,
+                {
+                  variant: "outline",
+                  "data-theme": theme,
+                  onClick: () => walletLinkOpen("Phantom"),
+                  children: "Get Phantom"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                Button_default2,
+                {
+                  "data-theme": theme,
+                  variant: "outline",
+                  onClick: () => walletLinkOpen("Backpack"),
+                  children: "Get Backpack"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.allWallets, children: primaryWallets.map((connector) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            WalletButton,
+            {
+              theme,
+              connector,
+              isThisConnecting: isConnecting && connectingConnectorId === connector.id,
+              hasError: errorConnectorId === connector.id,
+              isRecent: recentlyConnectedConnectorId === connector.id,
+              onSelect: () => handleSelectWallet(connector),
+              getInstallUrl
+            },
+            connector.id
+          )) }),
+          otherWallets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            primayOuterHr && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.seprator }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              Collapsible,
+              {
+                open: isOtherWalletsOpen,
+                onOpenChange: setIsOtherWalletsOpen,
+                className: import_WalletModal.default.Collapsible,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CollapsibleTrigger, { className: import_WalletModal.default.hiddenExpand, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: import_WalletModal.default.textContainer, children: "Other Wallets" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HiddenWalletIcons, { wallets: otherWallets, className: "shrink-0" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsibleContent, { className: import_WalletModal.default.allWallets, children: otherWallets.map((connector) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    WalletButton,
+                    {
+                      theme,
+                      connector,
+                      isThisConnecting: isConnecting && connectingConnectorId === connector.id,
+                      hasError: errorConnectorId === connector.id,
+                      isRecent: recentlyConnectedConnectorId === connector.id,
+                      onSelect: () => handleSelectWallet(connector),
+                      getInstallUrl
+                    },
+                    connector.id
+                  )) })
+                ]
+              }
+            )
+          ] }),
+          notReadyConnectors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            (primaryWallets.length > 0 || otherWallets.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.seprator }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: import_WalletModal.default.sectionHeader, children: readyConnectors.length > 0 ? "Unavailable Wallets" : "Wallets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.grid, children: notReadyConnectors.slice(0, 3).map((connector) => {
+                const installUrl = getInstallUrl(connector.name);
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.unavailableRow, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.walletInfo, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      Avatar_default,
+                      {
+                        width: 40,
+                        height: 40,
+                        src: connector.icon,
+                        alt: connector.name,
+                        theme
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-left", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.walletName, children: connector.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.unavailableLabel, children: "Not available" })
+                    ] })
+                  ] }),
+                  installUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    Button_default2,
+                    {
+                      "data-theme": theme,
+                      variant: "ghost",
+                      size: "sm",
+                      className: import_WalletModal.default.installButton,
+                      onClick: () => window.open(installUrl, "_blank"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ExternalLink, {})
+                    }
+                  )
+                ] }, connector.id);
+              }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+var WalletModal_default = WalletModal;
+function WalletButton(props) {
+  const { connector, isThisConnecting, hasError, isRecent, theme, onSelect, getInstallUrl } = props;
+  const handleSelectWallet = () => {
+    onSelect();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Button_default2,
+    {
+      variant: "outline",
+      "data-error": hasError,
+      "data-theme": theme,
+      className: import_WalletModal.default.walletButton,
+      onClick: handleSelectWallet,
+      disabled: isThisConnecting,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.textContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.nameRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: connector.name }),
+            isRecent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: import_WalletModal.default.recentBadge, children: "Recent" })
+          ] }),
+          isThisConnecting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.statusText, children: "Connecting..." }),
+          hasError && !isThisConnecting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: import_WalletModal.default.statusText, "data-type": "error", children: "Click to retry" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: import_WalletModal.default.iconContainer, children: [
+          isThisConnecting && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner_default2, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Avatar_default,
+            {
+              width: 40,
+              height: 40,
+              src: connector.icon,
+              alt: connector.name,
+              theme
+            }
+          )
+        ] })
+      ]
+    },
+    connector.id
+  );
+}
+function HiddenWalletIcons({ wallets, maxIcons = 4, className }) {
+  const previewWallets = wallets.slice(0, maxIcons);
+  const placeholderCount = Math.max(0, maxIcons - previewWallets.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: `${import_WalletModal.default.hiddenWalletGrid} ${className || ""}`,
+      "aria-hidden": "true",
+      children: [
+        previewWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: import_WalletModal.default.hiddenWalletIconWrapper,
+            children: wallet.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "img",
+              {
+                height: 10,
+                width: 10,
+                src: wallet.icon,
+                alt: wallet.name,
+                draggable: false,
+                onError: (e) => {
+                  e.currentTarget.style.display = "none";
+                }
+              }
+            )
+          },
+          wallet.id
+        )),
+        Array.from({ length: placeholderCount }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: import_WalletModal.default.hiddenWalletIconWrapper
+          },
+          `placeholder-${index}`
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/WalletModal/index.ts
+var WalletModal_default2 = WalletModal_default;
+//# sourceMappingURL=WalletModal.js.map