@cookill/wallet-adapter 3.1.6 → 3.1.7

package/README.md

@@ -23,9 +23,38 @@ function App() {
 }
 ```
 
-`WalletProvider` renders a built-in connect modal automatically. On desktop it opens centered; on mobile it slides up as a sheet.
+`WalletProvider` renders a built-in connect modal automatically. On desktop it opens as a centered dialog; on mobile it slides up as a bottom sheet with swipe-to-dismiss.
 
-> **Note:** The built-in modal has known interaction issues (tab switching may close the modal, connect button may not trigger the extension). For production use, we recommend building a custom modal using the `connect()` function directly — see [Custom Modal](#custom-modal) below.
+## Built-in Modal
+
+The built-in modal is rendered inside `WalletProvider` and includes:
+
+- **Extension tab** — detects Sheep Wallet, shows install link if not found, triggers `window.rialo.connect()` on click
+- **Scan to Connect tab** — generates a `rialo-wc://` QR code for cross-device pairing
+- **Responsive layout** — centered dialog on desktop, slide-up sheet on mobile
+- **Auto-close** — closes automatically after successful connection
+
+Control it programmatically:
+
+```tsx
+const { openModal, closeModal } = useWallet();
+
+// Open the built-in modal
+openModal();
+```
+
+Or use `ConnectButton` which handles everything:
+
+```tsx
+<ConnectButton
+  connectLabel="Connect Wallet"
+  disconnectLabel="Disconnect"
+  showAddress={true}
+  showBalance={false}
+/>
+```
+
+> When the extension is installed, `ConnectButton` calls `connect()` directly without opening the modal. When not installed, it opens the modal with a download link.
 
 ## React Hooks
 
@@ -53,7 +82,7 @@ const {
   sendTransaction,         // (tx) => Promise<TransactionResult>
   signAndSendTransaction,  // (tx) => Promise<TransactionResult>
 
-  // Built-in modal control (has known issues — see note above)
+  // Modal control
   openModal,   // () => void
   closeModal,  // () => void
 } = useWallet();
@@ -92,9 +121,9 @@ const { positions, credits, hasCredits, createPosition, sendGasless, refresh } =
 const { scanURI, status, generateQR, approveSession, rejectSession } = useScanConnect();
 ```
 
-## Custom Modal
+## Custom Modal (Optional)
 
-The built-in modal rendered by `WalletProvider` has known issues with event propagation. For a reliable connection experience, build your own modal and call `connect()` directly:
+If you need full control over the UI, build your own modal using the hooks:
 
 ```tsx
 import { useConnectWallet, useScanConnect, isInstalled } from '@cookill/wallet-adapter/react';
@@ -136,7 +165,7 @@ function MyConnectModal({ open, onClose }) {
 ```
 
 Key points:
-- Use `connect()` from `useConnectWallet()` — this calls `window.rialo.connect()` which triggers the extension's approval popup
+- `connect()` calls `window.rialo.connect()` which triggers the extension's approval popup
 - The `connect()` call has a 20-second timeout to prevent dApp freezes
 - Use `isInstalled()` to check if the extension is present before connecting
 
@@ -163,20 +192,6 @@ await wallet.signAndSendTransaction({
 await wallet.disconnect();
 ```
 
-## ConnectButton
-
-```tsx
-<ConnectButton
-  connectLabel="Connect Wallet"
-  disconnectLabel="Disconnect"
-  showAddress={true}
-  showBalance={false}
-  showFeatures={false}
-/>
-```
-
-> **Note:** When the extension is installed, `ConnectButton` calls `connect()` directly (no modal). When not installed, it opens the built-in modal with a download link.
-
 ## WalletProvider Props
 
 | Prop | Type | Default | Description |
@@ -246,14 +261,9 @@ import {
 
 - All provider calls have a 20-second timeout to prevent dApp freezes
 - `autoConnect` uses `checkSession()` — never triggers a user-facing popup
-- The built-in modal is rendered inside `WalletProvider` automatically
+- The built-in modal uses a sibling DOM architecture (backdrop and content are separate elements) to prevent click events from interfering with tab switching or button interactions
 - `ConnectButton` bypasses the modal when the extension is installed
 
-## Known Issues
-
-1. **Built-in modal tab switching** — Clicking "Scan to Connect" tab may close the modal due to event propagation. Workaround: use a custom modal.
-2. **Built-in modal connect button** — May not trigger the extension popup in some environments. Workaround: use `connect()` directly.
-
 ## License
 
 MIT

package/dist/react.cjs

@@ -1528,124 +1528,111 @@ function WalletModal({ scanConnectRelay, dispatch }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
   ] });
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(0,0,0,0.6)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)"
+          },
+          onClick: closeModal
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onTouchStart: handleTouchStart,
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
+          style: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: "#011B29",
+            borderTopLeftRadius: "24px",
+            borderTopRightRadius: "24px",
+            padding: "0 20px 28px",
+            maxHeight: "85vh",
+            overflow: "auto",
+            boxShadow: "0 -8px 40px rgba(0,0,0,0.5)",
+            transform: `translateY(${dragY}px)`,
+            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__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", padding: "12px 0 16px", cursor: "grab", touchAction: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "36px", height: "4px", borderRadius: "2px", backgroundColor: "rgba(255,255,255,0.12)" } }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: closeModal, style: closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+            ] }),
+            renderContent()
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes walletModalSlideUp {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+          }
+          @keyframes walletModalPulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+          }
+        ` })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
-          position: "fixed",
+          position: "absolute",
           inset: 0,
-          zIndex: 9999,
           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();
+        onClick: closeModal
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      position: "fixed",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none"
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          pointerEvents: "auto",
+          backgroundColor: "#011B29",
+          borderRadius: "20px",
+          padding: "24px",
+          width: "100%",
+          maxWidth: "400px",
+          margin: "16px",
+          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.25s cubic-bezier(0.4,0,0.2,1)"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              onTouchStart: handleTouchStart,
-              onTouchMove: handleTouchMove,
-              onTouchEnd: handleTouchEnd,
-              onClick: stop,
-              style: {
-                position: "fixed",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                backgroundColor: "#011B29",
-                borderTopLeftRadius: "24px",
-                borderTopRightRadius: "24px",
-                padding: "0 20px 28px",
-                maxHeight: "85vh",
-                overflow: "auto",
-                boxShadow: "0 -8px 40px rgba(0,0,0,0.5)",
-                transform: `translateY(${dragY}px)`,
-                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__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", padding: "12px 0 16px", cursor: "grab", touchAction: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "36px", height: "4px", borderRadius: "2px", backgroundColor: "rgba(255,255,255,0.12)" } }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
-                    stop(e);
-                    closeModal();
-                  }, style: closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
-                ] }),
-                renderContent()
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes walletModalSlideUp {
-            from { transform: translateY(100%); }
-            to { transform: translateY(0); }
-          }
-          @keyframes walletModalPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
-          }
-        ` })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: closeModal, style: closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+          ] }),
+          renderContent()
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            onClick: stop,
-            style: {
-              backgroundColor: "#011B29",
-              borderRadius: "20px",
-              padding: "24px",
-              width: "100%",
-              maxWidth: "400px",
-              margin: "16px",
-              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.25s cubic-bezier(0.4,0,0.2,1)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" }, children: "Connect Wallet" }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
-                  stop(e);
-                  closeModal();
-                }, style: closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
-              ] }),
-              renderContent()
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes walletModalFadeIn {
           from { opacity: 0; transform: scale(0.97) translateY(8px); }
           to { opacity: 1; transform: scale(1) translateY(0); }
@@ -1655,9 +1642,7 @@ function WalletModal({ scanConnectRelay, dispatch }) {
           50% { opacity: 0.3; }
         }
       ` })
-      ]
-    }
-  );
+  ] });
 }
 function ConnectButton({
   connectLabel = "Connect Wallet",