@algobright/solana-connector-kit 1.0.0

package/dist/WalletModal.mjs

@@ -0,0 +1,806 @@
+"use client";
+
+// src/components/WalletModal/WalletModal.tsx
+import { useConnector } from "@solana/connector";
+import { Check, ChevronLeft, Copy, ExternalLink, Wallet as Wallet2, X as X2 } from "lucide-react";
+import { useEffect, useState as useState2, useSyncExternalStore } from "react";
+import styles6 from "./WalletModal.module-PVV5PRXU.module.css";
+
+// src/components/shared/Dialog/Dialog.tsx
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import styles from "./Dialog.module-HCRT743N.module.css";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = BaseDialog.Root;
+var DialogTrigger = BaseDialog.Trigger;
+var DialogPortal = BaseDialog.Portal;
+var DialogClose = BaseDialog.Close;
+var DialogBackdrop = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    BaseDialog.Backdrop,
+    {
+      ref,
+      className: `${styles.backdrop} ${className || ""}`,
+      ...props
+    }
+  )
+);
+DialogBackdrop.displayName = "DialogBackdrop";
+var DialogContent = React.forwardRef(
+  ({ className, children, theme, showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogBackdrop, { "data-theme": theme }),
+    /* @__PURE__ */ jsxs(
+      BaseDialog.Popup,
+      {
+        ref,
+        "data-theme": theme,
+        className: clsx(styles.content, className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(DialogClose, { className: styles.closeButton, children: /* @__PURE__ */ jsx(X, {}) })
+        ]
+      }
+    )
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: `${styles.header} ${className || ""}`, ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: `${styles.footer} ${className || ""}`, ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    BaseDialog.Title,
+    {
+      ref,
+      className: `${styles.title} ${className || ""}`,
+      ...props
+    }
+  )
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  BaseDialog.Description,
+  {
+    ref,
+    className: `${styles.description} ${className || ""}`,
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+
+// src/components/shared/Button/Button.tsx
+import * as React2 from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import styles2 from "./Button.module-7TPMDOJN.module.css";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = React2.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      BaseButton,
+      {
+        ref,
+        className: `${styles2.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
+import { useMemo } from "react";
+import QRCodeUtil from "qrcode";
+import styles3 from "./CustomQRCode.module-FOXENMZG.module.css";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function generateMatrix(value, errorCorrectionLevel) {
+  const arr = Array.prototype.slice.call(QRCodeUtil.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 = 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__ */ jsx3(
+            "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__ */ jsx3(
+                  "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__ */ jsxs2(
+    "svg",
+    {
+      height: size,
+      width: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: styles3.svgFull,
+      style: { maxWidth: size, maxHeight: size },
+      children: [
+        /* @__PURE__ */ jsx3("rect", { fill: "transparent", height: size, width: size }),
+        dots
+      ]
+    }
+  );
+}
+function ViewfinderFrame({
+  size,
+  color = "#2D2D2D",
+  opacity = 0.01
+}) {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 283 283",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: styles3.viewfinder,
+      children: /* @__PURE__ */ jsx3(
+        "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__ */ jsxs2(
+    "div",
+    {
+      className: `${styles3.container} ${className || ""}`,
+      style: {
+        width: size,
+        height: size,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx3(ViewfinderFrame, { size, color: resolvedFrameColor, opacity: frameOpacity }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: styles3.contentArea,
+            style: { background: resolvedBackground },
+            "data-error": error,
+            children: [
+              /* @__PURE__ */ jsx3("div", { className: styles3.glow, "data-error": error }),
+              scanning && !showPlaceholder && !error && /* @__PURE__ */ jsx3("div", { className: styles3.shine }),
+              /* @__PURE__ */ jsx3("div", { className: styles3.qrWrapper, children: showPlaceholder ? /* @__PURE__ */ jsx3(QRPlaceholder, { size, dotColor: resolvedDotColor, backgroundColor: resolvedBackground }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx3(
+                  QRCodeSVG,
+                  {
+                    value,
+                    size: size - 40,
+                    ecl,
+                    clearArea: clearArea || !!image,
+                    dotColor: resolvedDotColor,
+                    backgroundColor: resolvedBackground
+                  }
+                ),
+                image && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: styles3.logoWrapper,
+                    style: {
+                      width: "28%",
+                      height: "28%",
+                      background: imageBackground || resolvedBackground
+                    },
+                    children: image
+                  }
+                )
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function QRPlaceholder({
+  size,
+  dotColor,
+  backgroundColor
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: styles3.placeholderContainer, style: { width: size - 40, height: size - 40 }, children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: styles3.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__ */ jsx3(
+      "span",
+      {
+        className: styles3.cornerSquare,
+        style: {
+          ...pos,
+          background: dotColor
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: styles3.centerArea,
+        style: {
+          background: backgroundColor,
+          boxShadow: `0 0 0 7px ${backgroundColor}`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: styles3.loaderWrapper, children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: styles3.spinner,
+          style: { color: `${dotColor}40` }
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: styles3.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
+import classes from "./Spinner.module-G7GUQJZJ.module.css";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Spinner = () => {
+  return /* @__PURE__ */ jsx4("div", { className: classes.spinner });
+};
+var Spinner_default = Spinner;
+
+// src/components/shared/Spinner/index.ts
+var Spinner_default2 = Spinner_default;
+
+// src/components/WalletModal/WalletModal.tsx
+import { SiWalletconnect } from "react-icons/si";
+
+// src/components/shared/Collapsible/Collapsible.tsx
+import * as React3 from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import styles4 from "./Collapsible.module-NXSN3MGI.module.css";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Collapsible = BaseCollapsible.Root;
+var CollapsibleTrigger = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  BaseCollapsible.Trigger,
+  {
+    ref,
+    className: `${styles4.trigger} ${className || ""}`,
+    ...props
+  }
+));
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  BaseCollapsible.Panel,
+  {
+    ref,
+    className: `${styles4.content} ${className || ""}`,
+    ...props
+  }
+));
+CollapsibleContent.displayName = "CollapsibleContent";
+
+// src/components/shared/Avatar/Avatar.tsx
+import { useState } from "react";
+import styles5 from "./Avatar.module-P7KEBP7R.module.css";
+import { Wallet } from "lucide-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Avatar({
+  height,
+  width,
+  src,
+  alt,
+  theme = "light"
+}) {
+  const [hasError, setHasError] = useState(false);
+  return /* @__PURE__ */ jsx6("div", { className: styles5.avatar, "data-theme": theme, children: src && !hasError ? /* @__PURE__ */ jsx6(
+    "img",
+    {
+      height,
+      width,
+      src,
+      alt: alt || "Avatar",
+      onError: () => setHasError(true)
+    }
+  ) : /* @__PURE__ */ jsx6("div", { className: styles5.fallback, style: { height, width }, children: /* @__PURE__ */ jsx6(Wallet, {}) }) });
+}
+
+// src/components/shared/Avatar/index.ts
+var Avatar_default = Avatar;
+
+// src/components/WalletModal/WalletModal.tsx
+import { clsx as clsx2 } from "clsx";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "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 } = useConnector();
+  const [connectingConnectorId, setConnectingConnectorId] = useState2(null);
+  const [isOtherWalletsOpen, setIsOtherWalletsOpen] = useState2(false);
+  const [errorConnectorId, setErrorConnectorId] = useState2(null);
+  const [errorMessage, setErrorMessage] = useState2(null);
+  const [copied, setCopied] = useState2(false);
+  const isClient = useSyncExternalStore(
+    () => () => {
+    },
+    () => true,
+    () => false
+  );
+  const recentlyConnectedConnectorId = useSyncExternalStore(
+    () => () => {
+    },
+    () => localStorage.getItem("recentlyConnectedConnectorId"),
+    () => null
+  );
+  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__ */ jsx7(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs3(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: clsx2(styles6.dialogContent, CN_Modal),
+      theme,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: styles6.dialogHeader, children: [
+          isWalletConnectFlow ? /* @__PURE__ */ jsx7(
+            "button",
+            {
+              onClick: handleBackFromWalletConnect,
+              className: styles6.iconButton,
+              children: /* @__PURE__ */ jsx7(ChevronLeft, {})
+            }
+          ) : null,
+          /* @__PURE__ */ jsx7(DialogTitle, { className: styles6.dialogTitle, children: isWalletConnectFlow ? "WalletConnect" : "Connect your wallet" }),
+          /* @__PURE__ */ jsx7(DialogClose, { className: styles6.iconButton, children: /* @__PURE__ */ jsx7(X2, {}) })
+        ] }),
+        isWalletConnectFlow && /* @__PURE__ */ jsxs3("div", { className: styles6.walletsContainer, children: [
+          /* @__PURE__ */ jsxs3("div", { className: styles6.tooltipBubble, children: [
+            /* @__PURE__ */ jsx7("span", { children: "Use a WalletConnect" }),
+            /* @__PURE__ */ jsxs3("div", { className: styles6.tooltipIconWrapper, children: [
+              /* @__PURE__ */ jsx7(SiWalletconnect, { className: styles6.tooltipIcon }),
+              /* @__PURE__ */ jsx7("div", { className: styles6.tooltipCaret })
+            ] }),
+            /* @__PURE__ */ jsx7("span", { children: "supported wallet to scan" })
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: styles6.qrWrapper, children: /* @__PURE__ */ jsx7(
+            CustomQRCode_default,
+            {
+              value: walletConnectUri != null ? walletConnectUri : "",
+              size: 280,
+              ecl: "M",
+              loading: !walletConnectUri,
+              scanning: !!walletConnectUri
+            }
+          ) }),
+          /* @__PURE__ */ jsx7(
+            Button_default2,
+            {
+              variant: "outline",
+              onClick: handleCopyUri,
+              disabled: !walletConnectUri,
+              className: styles6.copyButton,
+              "data-theme": theme,
+              children: copied ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx7(Check, { className: `${styles6.icon} ${styles6.successIcon}` }),
+                "Copy to Clipboard"
+              ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx7(Copy, { className: styles6.icon }),
+                "Copy to Clipboard"
+              ] })
+            }
+          )
+        ] }),
+        !isWalletConnectFlow && /* @__PURE__ */ jsxs3("div", { className: styles6.walletsContainer, children: [
+          !isClient && /* @__PURE__ */ jsxs3("div", { className: styles6.detectingWallets, children: [
+            /* @__PURE__ */ jsx7(Spinner_default2, {}),
+            /* @__PURE__ */ jsx7("p", { children: "Detecting wallets..." })
+          ] }),
+          connectors.length === 0 && /* @__PURE__ */ jsxs3("div", { className: styles6.emptyStateContainer, children: [
+            /* @__PURE__ */ jsx7(Wallet2, { className: styles6.emptyStateIcon }),
+            /* @__PURE__ */ jsx7("h3", { className: styles6.emptyStateTitle, children: "No Wallets Detected" }),
+            /* @__PURE__ */ jsx7("p", { className: styles6.emptyStateDesc, children: "Install a Solana wallet extension to get started" }),
+            /* @__PURE__ */ jsxs3("div", { className: styles6.emptyStateActions, children: [
+              /* @__PURE__ */ jsx7(
+                Button_default2,
+                {
+                  variant: "outline",
+                  "data-theme": theme,
+                  onClick: () => walletLinkOpen("Phantom"),
+                  children: "Get Phantom"
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                Button_default2,
+                {
+                  "data-theme": theme,
+                  variant: "outline",
+                  onClick: () => walletLinkOpen("Backpack"),
+                  children: "Get Backpack"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: styles6.allWallets, children: primaryWallets.map((connector) => /* @__PURE__ */ jsx7(
+            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__ */ jsxs3(Fragment2, { children: [
+            primayOuterHr && /* @__PURE__ */ jsx7("div", { className: styles6.seprator }),
+            /* @__PURE__ */ jsxs3(
+              Collapsible,
+              {
+                open: isOtherWalletsOpen,
+                onOpenChange: setIsOtherWalletsOpen,
+                className: styles6.Collapsible,
+                children: [
+                  /* @__PURE__ */ jsxs3(CollapsibleTrigger, { className: styles6.hiddenExpand, children: [
+                    /* @__PURE__ */ jsx7("span", { className: styles6.textContainer, children: "Other Wallets" }),
+                    /* @__PURE__ */ jsx7(HiddenWalletIcons, { wallets: otherWallets, className: "shrink-0" })
+                  ] }),
+                  /* @__PURE__ */ jsx7(CollapsibleContent, { className: styles6.allWallets, children: otherWallets.map((connector) => /* @__PURE__ */ jsx7(
+                    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__ */ jsxs3(Fragment2, { children: [
+            (primaryWallets.length > 0 || otherWallets.length > 0) && /* @__PURE__ */ jsx7("div", { className: styles6.seprator }),
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx7("h3", { className: styles6.sectionHeader, children: readyConnectors.length > 0 ? "Unavailable Wallets" : "Wallets" }),
+              /* @__PURE__ */ jsx7("div", { className: styles6.grid, children: notReadyConnectors.slice(0, 3).map((connector) => {
+                const installUrl = getInstallUrl(connector.name);
+                return /* @__PURE__ */ jsxs3("div", { className: styles6.unavailableRow, children: [
+                  /* @__PURE__ */ jsxs3("div", { className: styles6.walletInfo, children: [
+                    /* @__PURE__ */ jsx7(
+                      Avatar_default,
+                      {
+                        width: 40,
+                        height: 40,
+                        src: connector.icon,
+                        alt: connector.name,
+                        theme
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("div", { className: "text-left", children: [
+                      /* @__PURE__ */ jsx7("div", { className: styles6.walletName, children: connector.name }),
+                      /* @__PURE__ */ jsx7("div", { className: styles6.unavailableLabel, children: "Not available" })
+                    ] })
+                  ] }),
+                  installUrl && /* @__PURE__ */ jsx7(
+                    Button_default2,
+                    {
+                      "data-theme": theme,
+                      variant: "ghost",
+                      size: "sm",
+                      className: styles6.installButton,
+                      onClick: () => window.open(installUrl, "_blank"),
+                      children: /* @__PURE__ */ jsx7(ExternalLink, {})
+                    }
+                  )
+                ] }, connector.id);
+              }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+var WalletModal_default = WalletModal;
+function WalletButton(props) {
+  const { connector, isThisConnecting, hasError, isRecent, theme, onSelect, getInstallUrl } = props;
+  const handleSelectWallet = () => {
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxs3(
+    Button_default2,
+    {
+      variant: "outline",
+      "data-error": hasError,
+      "data-theme": theme,
+      className: styles6.walletButton,
+      onClick: handleSelectWallet,
+      disabled: isThisConnecting,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: styles6.textContainer, children: [
+          /* @__PURE__ */ jsxs3("div", { className: styles6.nameRow, children: [
+            /* @__PURE__ */ jsx7("span", { children: connector.name }),
+            isRecent && /* @__PURE__ */ jsx7("span", { className: styles6.recentBadge, children: "Recent" })
+          ] }),
+          isThisConnecting && /* @__PURE__ */ jsx7("div", { className: styles6.statusText, children: "Connecting..." }),
+          hasError && !isThisConnecting && /* @__PURE__ */ jsx7("div", { className: styles6.statusText, "data-type": "error", children: "Click to retry" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: styles6.iconContainer, children: [
+          isThisConnecting && /* @__PURE__ */ jsx7(Spinner_default2, {}),
+          /* @__PURE__ */ jsx7(
+            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__ */ jsxs3(
+    "div",
+    {
+      className: `${styles6.hiddenWalletGrid} ${className || ""}`,
+      "aria-hidden": "true",
+      children: [
+        previewWallets.map((wallet) => /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: styles6.hiddenWalletIconWrapper,
+            children: wallet.icon && /* @__PURE__ */ jsx7(
+              "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__ */ jsx7(
+          "div",
+          {
+            className: styles6.hiddenWalletIconWrapper
+          },
+          `placeholder-${index}`
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/WalletModal/index.ts
+var WalletModal_default2 = WalletModal_default;
+export {
+  WalletModal_default2 as default
+};
+//# sourceMappingURL=WalletModal.mjs.map