@cookill/wallet-adapter 3.1.2 → 3.1.4

package/dist/react.js

@@ -1047,7 +1047,6 @@ function WalletModal({ scanConnectRelay, dispatch }) {
   const [dragY, setDragY] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
   const dragStartRef = useRef(0);
-  const sheetRef = useRef(null);
   const sheepWallet = wallets.find((w) => w.id === "sheep-wallet");
   useEffect(() => {
     const check = () => setIsMobile(window.innerWidth < 640);
@@ -1061,7 +1060,10 @@ function WalletModal({ scanConnectRelay, dispatch }) {
       setIsDragging(false);
     }
   }, [state.isModalOpen]);
-  const handleConnect = async () => {
+  const stop = (e) => e.stopPropagation();
+  const handleConnect = async (e) => {
+    e.stopPropagation();
+    e.preventDefault();
     try {
       await connect();
     } catch {
@@ -1086,7 +1088,6 @@ function WalletModal({ scanConnectRelay, dispatch }) {
     canvas.height = size;
     ctx.fillStyle = "#FFFFFF";
     ctx.fillRect(0, 0, size, size);
-    const data = generatedURI;
     ctx.fillStyle = "#011B29";
     const gridSize = 25;
     const cellSize = size / gridSize;
@@ -1096,16 +1097,12 @@ function WalletModal({ scanConnectRelay, dispatch }) {
         if (isFinderArea) {
           const isOuter = x === 0 || y === 0 || x === 6 || y === 6 || x === gridSize - 7 || x === gridSize - 1 || y === gridSize - 7 || y === gridSize - 1;
           const isInner = x >= 2 && x <= 4 && y >= 2 && y <= 4 || x >= gridSize - 5 && x <= gridSize - 3 && y >= 2 && y <= 4 || x >= 2 && x <= 4 && y >= gridSize - 5 && y <= gridSize - 3;
-          if (isOuter || isInner) {
-            ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
-          }
+          if (isOuter || isInner) ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
           continue;
         }
-        const charIndex = (y * gridSize + x) % data.length;
-        const charCode = data.charCodeAt(charIndex);
-        if (charCode % 3 !== 0) {
-          ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
-        }
+        const charIndex = (y * gridSize + x) % generatedURI.length;
+        const charCode = generatedURI.charCodeAt(charIndex);
+        if (charCode % 3 !== 0) ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
       }
     }
     const logoSize = 40;
@@ -1115,17 +1112,17 @@ function WalletModal({ scanConnectRelay, dispatch }) {
     ctx.arc(size / 2, size / 2, logoSize / 2 + 4, 0, Math.PI * 2);
     ctx.fillStyle = "#FFFFFF";
     ctx.fill();
-    const radius = 6;
     ctx.beginPath();
-    ctx.moveTo(logoX + radius, logoY);
-    ctx.lineTo(logoX + logoSize - radius, logoY);
-    ctx.quadraticCurveTo(logoX + logoSize, logoY, logoX + logoSize, logoY + radius);
-    ctx.lineTo(logoX + logoSize, logoY + logoSize - radius);
-    ctx.quadraticCurveTo(logoX + logoSize, logoY + logoSize, logoX + logoSize - radius, logoY + logoSize);
-    ctx.lineTo(logoX + radius, logoY + logoSize);
-    ctx.quadraticCurveTo(logoX, logoY + logoSize, logoX, logoY + logoSize - radius);
-    ctx.lineTo(logoX, logoY + radius);
-    ctx.quadraticCurveTo(logoX, logoY, logoX + radius, logoY);
+    const r = 6;
+    ctx.moveTo(logoX + r, logoY);
+    ctx.lineTo(logoX + logoSize - r, logoY);
+    ctx.quadraticCurveTo(logoX + logoSize, logoY, logoX + logoSize, logoY + r);
+    ctx.lineTo(logoX + logoSize, logoY + logoSize - r);
+    ctx.quadraticCurveTo(logoX + logoSize, logoY + logoSize, logoX + logoSize - r, logoY + logoSize);
+    ctx.lineTo(logoX + r, logoY + logoSize);
+    ctx.quadraticCurveTo(logoX, logoY + logoSize, logoX, logoY + logoSize - r);
+    ctx.lineTo(logoX, logoY + r);
+    ctx.quadraticCurveTo(logoX, logoY, logoX + r, logoY);
     ctx.fillStyle = "#6EB9A8";
     ctx.fill();
     ctx.fillStyle = "#FFFFFF";
@@ -1147,64 +1144,95 @@ function WalletModal({ scanConnectRelay, dispatch }) {
   const handleTouchMove = (e) => {
     if (!isDragging || !isMobile) return;
     const delta = e.touches[0].clientY - dragStartRef.current;
-    if (delta > 0) {
-      setDragY(delta);
-    }
+    if (delta > 0) setDragY(delta);
   };
   const handleTouchEnd = () => {
     if (!isMobile) return;
     setIsDragging(false);
-    if (dragY > 120) {
-      closeModal();
-    }
+    if (dragY > 120) closeModal();
     setDragY(0);
   };
   if (!state.isModalOpen) return null;
+  const ExtensionIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 3h5v5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 3H3v5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 9 6-6" })
+  ] });
+  const QrIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 14h7v7h-7z" })
+  ] });
+  const CameraIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3" })
+  ] });
+  const RefreshIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+  ] });
+  const tabBaseStyle = {
+    flex: 1,
+    padding: "10px 0",
+    border: "none",
+    borderRadius: "10px",
+    fontSize: "13px",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px"
+  };
   const renderContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { style: {
       display: "flex",
       gap: "4px",
       padding: "4px",
-      backgroundColor: "#0a2435",
-      borderRadius: "12px",
+      backgroundColor: "rgba(255,255,255,0.04)",
+      borderRadius: "14px",
       marginBottom: "20px"
     }, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setActiveTab("extension");
+          },
           style: {
-            flex: 1,
-            padding: "10px",
-            backgroundColor: activeTab === "extension" ? "#1a3a4d" : "transparent",
-            border: "none",
-            borderRadius: "8px",
-            color: activeTab === "extension" ? "#6EB9A8" : "#64748b",
-            fontSize: "13px",
-            fontWeight: activeTab === "extension" ? 600 : 400,
-            cursor: "pointer",
-            transition: "all 0.2s"
+            ...tabBaseStyle,
+            backgroundColor: activeTab === "extension" ? "rgba(255,255,255,0.08)" : "transparent",
+            color: activeTab === "extension" ? "#6EB9A8" : "rgba(255,255,255,0.4)",
+            fontWeight: activeTab === "extension" ? 600 : 400
           },
-          onClick: () => setActiveTab("extension"),
-          children: "\u{1F50C} Extension"
+          children: [
+            /* @__PURE__ */ jsx(ExtensionIcon, {}),
+            " Extension"
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setActiveTab("scan");
+          },
           style: {
-            flex: 1,
-            padding: "10px",
-            backgroundColor: activeTab === "scan" ? "#1a3a4d" : "transparent",
-            border: "none",
-            borderRadius: "8px",
-            color: activeTab === "scan" ? "#6EB9A8" : "#64748b",
-            fontSize: "13px",
-            fontWeight: activeTab === "scan" ? 600 : 400,
-            cursor: "pointer",
-            transition: "all 0.2s"
+            ...tabBaseStyle,
+            backgroundColor: activeTab === "scan" ? "rgba(255,255,255,0.08)" : "transparent",
+            color: activeTab === "scan" ? "#6EB9A8" : "rgba(255,255,255,0.4)",
+            fontWeight: activeTab === "scan" ? 600 : 400
           },
-          onClick: () => setActiveTab("scan"),
-          children: "\u{1F4F1} Scan to Connect"
+          children: [
+            /* @__PURE__ */ jsx(QrIcon, {}),
+            " Scan to Connect"
+          ]
         }
       )
     ] }),
@@ -1212,86 +1240,151 @@ function WalletModal({ scanConnectRelay, dispatch }) {
       sheepWallet && /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: installed ? handleConnect : () => window.open(sheepWallet.downloadUrl, "_blank"),
+          type: "button",
+          onClick: installed ? handleConnect : (e) => {
+            stop(e);
+            window.open(sheepWallet.downloadUrl, "_blank");
+          },
           disabled: state.status === "connecting",
           style: {
             width: "100%",
             display: "flex",
             alignItems: "center",
-            gap: "12px",
+            gap: "14px",
             padding: "16px",
-            backgroundColor: installed ? "#1a3a4d" : "#0f2535",
-            border: "1px solid #2a4a5d",
-            borderRadius: "12px",
+            backgroundColor: "rgba(255,255,255,0.04)",
+            border: "1px solid rgba(255,255,255,0.08)",
+            borderRadius: "14px",
             cursor: state.status === "connecting" ? "wait" : "pointer",
-            transition: "all 0.2s"
+            transition: "all 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.07)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
           },
           children: [
-            /* @__PURE__ */ jsx("img", { src: sheepWallet.icon, alt: "Sheep Wallet", style: { width: "40px", height: "40px", borderRadius: "8px" } }),
+            /* @__PURE__ */ jsx("div", { style: {
+              width: "44px",
+              height: "44px",
+              borderRadius: "12px",
+              background: "linear-gradient(135deg, #6EB9A8, #4a9a8a)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontWeight: 700,
+              fontSize: "18px"
+            }, children: "S" }),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1, textAlign: "left" }, children: [
-              /* @__PURE__ */ jsx("div", { style: { color: "#ffffff", fontWeight: 500 }, children: sheepWallet.name }),
-              /* @__PURE__ */ jsx("div", { style: { color: "#6EB9A8", fontSize: "12px" }, children: state.status === "connecting" ? "Connecting..." : installed ? "Detected" : "Not installed" })
+              /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "15px", marginBottom: "2px" }, children: sheepWallet.name }),
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: "12px",
+                color: installed ? "#6EB9A8" : "rgba(255,255,255,0.4)",
+                display: "flex",
+                alignItems: "center",
+                gap: "5px"
+              }, children: state.status === "connecting" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  display: "inline-block",
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "#F59E0B",
+                  animation: "walletModalPulse 1.2s infinite"
+                } }),
+                "Connecting..."
+              ] }) : installed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  display: "inline-block",
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "#6EB9A8"
+                } }),
+                "Detected \u2014 Click to connect"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  display: "inline-block",
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "rgba(255,255,255,0.2)"
+                } }),
+                "Not installed"
+              ] }) })
             ] }),
-            !installed && /* @__PURE__ */ jsx("span", { style: { color: "#6EB9A8", fontSize: "12px" }, children: "Install \u2192" })
+            !installed && /* @__PURE__ */ jsx("span", { style: {
+              color: "#6EB9A8",
+              fontSize: "12px",
+              fontWeight: 500,
+              padding: "4px 10px",
+              borderRadius: "8px",
+              backgroundColor: "rgba(110,185,168,0.1)"
+            }, children: "Install" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", marginTop: "16px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        display: "flex",
+        gap: "8px",
+        marginTop: "16px",
+        flexWrap: "wrap"
+      }, children: [
         { label: "REX", desc: "Confidential TX", color: "#8B5CF6" },
         { label: "SfS", desc: "Gasless TX", color: "#F59E0B" },
         { label: "QR", desc: "Scan Connect", color: "#6EB9A8" }
       ].map((badge) => /* @__PURE__ */ jsxs("div", { style: {
-        padding: "6px 10px",
-        backgroundColor: `${badge.color}15`,
+        padding: "5px 10px",
+        backgroundColor: `${badge.color}10`,
         borderRadius: "8px",
-        border: `1px solid ${badge.color}30`,
+        border: `1px solid ${badge.color}18`,
         display: "flex",
         alignItems: "center",
         gap: "6px"
       }, children: [
         /* @__PURE__ */ jsx("span", { style: { color: badge.color, fontSize: "11px", fontWeight: 600 }, children: badge.label }),
-        /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: "10px" }, children: badge.desc })
+        /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.35)", fontSize: "10px" }, children: badge.desc })
       ] }, badge.label)) })
     ] }),
     activeTab === "scan" && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setScanMode("show-qr"),
-            style: {
-              flex: 1,
-              padding: "8px",
-              backgroundColor: scanMode === "show-qr" ? "#6EB9A820" : "transparent",
-              border: scanMode === "show-qr" ? "1px solid #6EB9A840" : "1px solid #2a4a5d",
-              borderRadius: "8px",
-              color: scanMode === "show-qr" ? "#6EB9A8" : "#94a3b8",
-              fontSize: "12px",
-              cursor: "pointer"
-            },
-            children: "\u{1F4FA} Show QR Code"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setScanMode("scan-qr"),
-            style: {
-              flex: 1,
-              padding: "8px",
-              backgroundColor: scanMode === "scan-qr" ? "#6EB9A820" : "transparent",
-              border: scanMode === "scan-qr" ? "1px solid #6EB9A840" : "1px solid #2a4a5d",
-              borderRadius: "8px",
-              color: scanMode === "scan-qr" ? "#6EB9A8" : "#94a3b8",
-              fontSize: "12px",
-              cursor: "pointer"
-            },
-            children: "\u{1F4F7} Scan QR Code"
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: ["show-qr", "scan-qr"].map((mode) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setScanMode(mode);
+          },
+          style: {
+            flex: 1,
+            padding: "8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "6px",
+            backgroundColor: scanMode === mode ? "rgba(110,185,168,0.1)" : "transparent",
+            border: `1px solid ${scanMode === mode ? "rgba(110,185,168,0.25)" : "rgba(255,255,255,0.08)"}`,
+            borderRadius: "10px",
+            color: scanMode === mode ? "#6EB9A8" : "rgba(255,255,255,0.4)",
+            fontSize: "12px",
+            fontWeight: scanMode === mode ? 500 : 400,
+            cursor: "pointer",
+            transition: "all 0.15s"
+          },
+          children: mode === "show-qr" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(QrIcon, {}),
+            " Show QR"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CameraIcon, {}),
+            " Scan QR"
+          ] })
+        },
+        mode
+      )) }),
       scanMode === "show-qr" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx("p", { style: { color: "#94a3b8", fontSize: "13px", marginBottom: "16px" }, children: "Scan this QR code with Sheep Wallet on your mobile device" }),
+        /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.45)", fontSize: "13px", marginBottom: "16px", lineHeight: 1.5 }, children: "Scan this QR code with Sheep Wallet on your mobile device to connect" }),
         /* @__PURE__ */ jsxs("div", { style: {
           display: "inline-block",
           padding: "16px",
@@ -1309,13 +1402,13 @@ function WalletModal({ scanConnectRelay, dispatch }) {
         ] }),
         /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
           /* @__PURE__ */ jsx("div", { style: {
-            width: "8px",
-            height: "8px",
+            width: "7px",
+            height: "7px",
             borderRadius: "50%",
             backgroundColor: state.scanConnectStatus === "waiting" ? "#6EB9A8" : "#F59E0B",
             animation: "walletModalPulse 2s infinite"
           } }),
-          /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: "12px" }, children: [
+          /* @__PURE__ */ jsxs("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: "12px" }, children: [
             state.scanConnectStatus === "generating" && "Generating session...",
             state.scanConnectStatus === "waiting" && "Waiting for wallet to scan...",
             state.scanConnectStatus === "scanned" && "Scanned! Waiting for approval...",
@@ -1324,51 +1417,64 @@ function WalletModal({ scanConnectRelay, dispatch }) {
             state.scanConnectStatus === "idle" && "Initializing..."
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: generateScanSession,
+            type: "button",
+            onClick: (e) => {
+              stop(e);
+              generateScanSession();
+            },
             style: {
               marginTop: "12px",
               padding: "8px 16px",
               backgroundColor: "transparent",
-              border: "1px solid #2a4a5d",
-              borderRadius: "8px",
+              border: "1px solid rgba(255,255,255,0.08)",
+              borderRadius: "10px",
               color: "#6EB9A8",
               fontSize: "12px",
-              cursor: "pointer"
+              cursor: "pointer",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "6px",
+              transition: "all 0.15s"
             },
-            children: "\u{1F504} Refresh QR"
+            children: [
+              /* @__PURE__ */ jsx(RefreshIcon, {}),
+              " Refresh QR"
+            ]
           }
         )
       ] }),
       scanMode === "scan-qr" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx("p", { style: { color: "#94a3b8", fontSize: "13px", marginBottom: "16px" }, children: "Open Sheep Wallet on another device, go to Settings \u2192 Show Connect QR, and scan it with your camera" }),
+        /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.45)", fontSize: "13px", marginBottom: "16px", lineHeight: 1.5 }, children: "Open Sheep Wallet on another device, go to Settings \u2192 Show Connect QR, then scan it here" }),
         /* @__PURE__ */ jsxs("div", { style: {
           width: "100%",
           height: "200px",
-          backgroundColor: "#0a2435",
-          borderRadius: "12px",
-          border: "2px dashed #2a4a5d",
+          backgroundColor: "rgba(255,255,255,0.02)",
+          borderRadius: "14px",
+          border: "1px dashed rgba(255,255,255,0.1)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
           gap: "12px"
         }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "32px" }, children: "\u{1F4F7}" }),
-          /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: "13px" }, children: "Camera access required" }),
+          /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.2)" }, children: /* @__PURE__ */ jsx(CameraIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.3)", fontSize: "13px" }, children: "Camera access required" }),
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => {
+              type: "button",
+              onClick: (e) => {
+                stop(e);
                 alert("Camera scanning requires HTTPS and camera permissions. This feature works in the installed extension.");
               },
               style: {
-                padding: "8px 16px",
+                padding: "8px 20px",
                 backgroundColor: "#6EB9A8",
                 border: "none",
-                borderRadius: "8px",
+                borderRadius: "10px",
                 color: "#011B29",
                 fontSize: "13px",
                 fontWeight: 500,
@@ -1382,14 +1488,38 @@ function WalletModal({ scanConnectRelay, dispatch }) {
     ] }),
     state.error && /* @__PURE__ */ jsx("div", { style: {
       marginTop: "16px",
-      padding: "12px",
-      backgroundColor: "rgba(239, 68, 68, 0.1)",
-      border: "1px solid rgba(239, 68, 68, 0.3)",
-      borderRadius: "8px",
-      color: "#ef4444",
-      fontSize: "13px"
+      padding: "12px 14px",
+      backgroundColor: "rgba(239,68,68,0.08)",
+      border: "1px solid rgba(239,68,68,0.15)",
+      borderRadius: "12px",
+      color: "#f87171",
+      fontSize: "13px",
+      lineHeight: 1.4
     }, children: state.error.message }),
-    /* @__PURE__ */ jsx("div", { style: { marginTop: "20px", textAlign: "center", color: "#64748b", fontSize: "11px" }, children: "Powered by CookillLabs \xB7 Rialo Network" })
+    /* @__PURE__ */ jsx("div", { style: {
+      marginTop: "24px",
+      textAlign: "center",
+      color: "rgba(255,255,255,0.2)",
+      fontSize: "11px",
+      paddingTop: "16px",
+      borderTop: "1px solid rgba(255,255,255,0.04)"
+    }, children: "Powered by Rialo Network" })
+  ] });
+  const closeBtn = {
+    background: "none",
+    border: "none",
+    color: "rgba(255,255,255,0.3)",
+    cursor: "pointer",
+    padding: "6px",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.15s"
+  };
+  const CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
   ] });
   if (isMobile) {
     return /* @__PURE__ */ jsxs(
@@ -1399,67 +1529,48 @@ function WalletModal({ scanConnectRelay, dispatch }) {
           position: "fixed",
           inset: 0,
           zIndex: 9999,
-          backgroundColor: "rgba(0, 0, 0, 0.6)",
-          backdropFilter: "blur(4px)"
+          backgroundColor: "rgba(0,0,0,0.6)",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)"
         },
         onClick: (e) => {
           if (e.target === e.currentTarget) closeModal();
         },
+        onPointerDown: (e) => {
+          if (e.target !== e.currentTarget) e.stopPropagation();
+        },
         children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
-              ref: sheetRef,
               onTouchStart: handleTouchStart,
               onTouchMove: handleTouchMove,
               onTouchEnd: handleTouchEnd,
+              onClick: stop,
               style: {
                 position: "fixed",
                 bottom: 0,
                 left: 0,
                 right: 0,
                 backgroundColor: "#011B29",
-                borderTopLeftRadius: "20px",
-                borderTopRightRadius: "20px",
-                padding: "0 20px 24px",
+                borderTopLeftRadius: "24px",
+                borderTopRightRadius: "24px",
+                padding: "0 20px 28px",
                 maxHeight: "85vh",
                 overflow: "auto",
-                boxShadow: "0 -10px 40px rgba(0, 0, 0, 0.4)",
+                boxShadow: "0 -8px 40px rgba(0,0,0,0.5)",
                 transform: `translateY(${dragY}px)`,
-                transition: isDragging ? "none" : "transform 0.3s ease",
-                animation: isDragging ? "none" : "walletModalSlideUp 0.3s ease"
+                transition: isDragging ? "none" : "transform 0.3s cubic-bezier(0.4,0,0.2,1)",
+                animation: isDragging ? "none" : "walletModalSlideUp 0.35s cubic-bezier(0.4,0,0.2,1)"
               },
               children: [
-                /* @__PURE__ */ jsx("div", { style: {
-                  display: "flex",
-                  justifyContent: "center",
-                  padding: "12px 0 16px",
-                  cursor: "grab",
-                  touchAction: "none"
-                }, children: /* @__PURE__ */ jsx("div", { style: {
-                  width: "36px",
-                  height: "4px",
-                  borderRadius: "2px",
-                  backgroundColor: "#2a4a5d"
-                } }) }),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: "12px 0 16px", cursor: "grab", touchAction: "none" }, children: /* @__PURE__ */ jsx("div", { style: { width: "36px", height: "4px", borderRadius: "2px", backgroundColor: "rgba(255,255,255,0.12)" } }) }),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
-                  /* @__PURE__ */ jsx("h2", { style: { color: "#ffffff", fontSize: "20px", fontWeight: 600, margin: 0 }, children: "Connect Wallet" }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: closeModal,
-                      style: {
-                        background: "none",
-                        border: "none",
-                        color: "#64748b",
-                        fontSize: "24px",
-                        cursor: "pointer",
-                        padding: "4px",
-                        lineHeight: 1
-                      },
-                      children: "\u2715"
-                    }
-                  )
+                  /* @__PURE__ */ jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+                    stop(e);
+                    closeModal();
+                  }, style: closeBtn, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
                 ] }),
                 renderContent()
               ]
@@ -1472,7 +1583,7 @@ function WalletModal({ scanConnectRelay, dispatch }) {
           }
           @keyframes walletModalPulse {
             0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
+            50% { opacity: 0.3; }
           }
         ` })
         ]
@@ -1489,47 +1600,40 @@ function WalletModal({ scanConnectRelay, dispatch }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-        backdropFilter: "blur(4px)"
+        backgroundColor: "rgba(0,0,0,0.6)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
       },
       onClick: (e) => {
         if (e.target === e.currentTarget) closeModal();
       },
+      onPointerDown: (e) => {
+        if (e.target !== e.currentTarget) e.stopPropagation();
+      },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
+            onClick: stop,
             style: {
               backgroundColor: "#011B29",
-              borderRadius: "16px",
+              borderRadius: "20px",
               padding: "24px",
               width: "100%",
               maxWidth: "400px",
               margin: "16px",
-              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+              boxShadow: "0 25px 60px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05)",
               maxHeight: "90vh",
               overflow: "auto",
-              animation: "walletModalFadeIn 0.2s ease"
+              animation: "walletModalFadeIn 0.25s cubic-bezier(0.4,0,0.2,1)"
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
-                /* @__PURE__ */ jsx("h2", { style: { color: "#ffffff", fontSize: "20px", fontWeight: 600, margin: 0 }, children: "Connect Wallet" }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: closeModal,
-                    style: {
-                      background: "none",
-                      border: "none",
-                      color: "#64748b",
-                      fontSize: "24px",
-                      cursor: "pointer",
-                      padding: "4px",
-                      lineHeight: 1
-                    },
-                    children: "\u2715"
-                  }
-                )
+                /* @__PURE__ */ jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+                  stop(e);
+                  closeModal();
+                }, style: closeBtn, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
               ] }),
               renderContent()
             ]
@@ -1537,12 +1641,12 @@ function WalletModal({ scanConnectRelay, dispatch }) {
         ),
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes walletModalFadeIn {
-          from { opacity: 0; transform: scale(0.96) translateY(10px); }
+          from { opacity: 0; transform: scale(0.97) translateY(8px); }
           to { opacity: 1; transform: scale(1) translateY(0); }
         }
         @keyframes walletModalPulse {
           0%, 100% { opacity: 1; }
-          50% { opacity: 0.4; }
+          50% { opacity: 0.3; }
         }
       ` })
       ]