coinley-test 0.0.32 → 0.0.34

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { ArrowLeft, X, Sparkles, Wallet, Zap, QrCode, Loader2, ChevronDown, CheckCircle2, Copy, ExternalLink, AlertCircle } from "lucide-react";
 import { createCoinleyWalletConfig, CoinleyWalletProvider, WalletModal, useWallet, useWalletConnect, useWalletDetection, useWalletTransaction, useWalletModal } from "@coinley/wallet-connect-core";
 import axios from "axios";
-import require$$0 from "react-dom";
+import ReactDOM from "react-dom";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -2032,28 +2032,129 @@ const ModernDropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
   const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
   const filteredOptions = options.filter((option) => {
     const searchableText = getSearchableText ? getSearchableText(option) : "";
     return searchableText.toLowerCase().includes(searchTerm.toLowerCase());
   });
   const selectedOption = options.find((option) => getOptionValue(option) === value);
+  const updateDropdownPosition = () => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      setDropdownPosition({
+        top: rect.bottom + scrollTop + 8,
+        // 8px gap
+        left: rect.left + scrollLeft,
+        width: rect.width
+      });
+    }
+  };
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
         setIsOpen(false);
         setSearchTerm("");
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const handleScroll = () => {
+      if (isOpen) {
+        updateDropdownPosition();
+      }
+    };
+    const handleResize = () => {
+      if (isOpen) {
+        updateDropdownPosition();
+      }
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("resize", handleResize);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isOpen]);
+  const handleToggle = () => {
+    if (!disabled) {
+      if (!isOpen) {
+        updateDropdownPosition();
+      }
+      setIsOpen(!isOpen);
+    }
+  };
+  const dropdownContent = isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "fixed z-[9999] bg-white border-2 border-gray-200 rounded-2xl shadow-2xl overflow-hidden",
+      style: {
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+        maxHeight: "400px",
+        // Increased max height
+        minWidth: "300px"
+        // Ensure minimum width
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search networks and tokens...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            className: "w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#7042D2]/20 focus:border-[#7042D2] text-sm",
+            style: { fontFamily: "Bricolage Grotesque, sans-serif" },
+            autoFocus: true
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-80 min-h-32 overflow-y-auto custom-scrollbar", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-400 mb-2", children: "🔍" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No options found" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 mt-1", children: "Try a different search term" })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 bg-gray-50 border-b border-gray-100 text-xs text-gray-600", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
+            filteredOptions.length,
+            " option",
+            filteredOptions.length !== 1 ? "s" : "",
+            " available"
+          ] }),
+          filteredOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange(getOptionValue(option));
+                setIsOpen(false);
+                setSearchTerm("");
+              },
+              className: `w-full p-4 text-left hover:bg-[#7042D2]/10 transition-colors duration-200 border-b border-gray-100 last:border-b-0 ${getOptionValue(option) === value ? "bg-[#7042D2]/20 text-[#7042D2]" : "text-gray-800"}`,
+              style: { fontFamily: "Bricolage Grotesque, sans-serif" },
+              children: renderOption(option)
+            },
+            getOptionKey(option)
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: filteredOptions.length > 5 ? "Scroll to see more options" : "Select an option above" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
+        ref: buttonRef,
         type: "button",
-        onClick: () => !disabled && setIsOpen(!isOpen),
+        onClick: handleToggle,
         disabled,
         className: `w-full p-4 border-2 rounded-2xl bg-gradient-to-r from-white to-gray-50 text-left focus:outline-none focus:ring-3 focus:ring-[#7042D2]/20 focus:border-[#7042D2] transition-all duration-300 ease-out shadow-lg hover:shadow-xl ${disabled ? "opacity-50 cursor-not-allowed" : "hover:border-[#7042D2]/50 cursor-pointer"} ${isOpen ? "border-[#7042D2] ring-3 ring-[#7042D2]/20" : "border-gray-200"}`,
         style: {
@@ -2067,49 +2168,8 @@ const ModernDropdown = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `transform transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 text-[#7042D2]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
         ] })
       }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white border-2 border-gray-200 rounded-2xl shadow-2xl overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "text",
-          placeholder: "Search networks and tokens...",
-          value: searchTerm,
-          onChange: (e) => setSearchTerm(e.target.value),
-          className: "w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#7042D2]/20 focus:border-[#7042D2] text-sm",
-          style: { fontFamily: "Bricolage Grotesque, sans-serif" },
-          autoFocus: true
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-80 min-h-32 overflow-y-auto custom-scrollbar", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-400 mb-2", children: "🔍" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No options found" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-400 mt-1", children: "Try a different search term" })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 bg-gray-50 border-b border-gray-100 text-xs text-gray-600", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: [
-          filteredOptions.length,
-          " option",
-          filteredOptions.length !== 1 ? "s" : "",
-          " available"
-        ] }),
-        filteredOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onChange(getOptionValue(option));
-              setIsOpen(false);
-              setSearchTerm("");
-            },
-            className: `w-full p-4 text-left hover:bg-[#7042D2]/10 transition-colors duration-200 border-b border-gray-100 last:border-b-0 ${getOptionValue(option) === value ? "bg-[#7042D2]/20 text-[#7042D2]" : "text-gray-800"}`,
-            style: { fontFamily: "Bricolage Grotesque, sans-serif" },
-            children: renderOption(option)
-          },
-          getOptionKey(option)
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-500 text-center", style: { fontFamily: "Bricolage Grotesque, sans-serif" }, children: "Scroll to see more options" })
-    ] }),
+    ) }),
+    typeof document !== "undefined" && document.body && ReactDOM.createPortal(dropdownContent, document.body),
     /* @__PURE__ */ jsxRuntimeExports.jsx("style", { jsx: true, children: `
         .custom-scrollbar {
           scrollbar-width: thin;
@@ -2951,7 +3011,7 @@ const EnhancedSimpleCoinleyPayment = ({
   ] });
 };
 var createRoot;
-var m = require$$0;
+var m = ReactDOM;
 {
   createRoot = m.createRoot;
   m.hydrateRoot;