@cookill/wallet-adapter 3.1.4 → 3.1.7

package/README.md

@@ -2,8 +2,6 @@
 
 Wallet adapter for **Sheep Wallet** — the browser extension wallet for the Rialo blockchain.
 
-Provides a drop-in React provider, responsive connect modal, and vanilla JS class so dApp developers can integrate Sheep Wallet without writing custom UI.
-
 ## Installation
 
 ```bash
@@ -25,7 +23,38 @@ function App() {
 }
 ```
 
-`WalletProvider` renders a built-in connect modal automatically. On desktop the modal opens centered; on mobile it slides up from the bottom as a sheet. No custom modal code needed.
+`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.
+
+## 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
 
@@ -34,31 +63,29 @@ function App() {
 ```tsx
 import { useWallet } from '@cookill/wallet-adapter/react';
 
-function MyComponent() {
-  const {
-    connected,       // boolean — is wallet connected
-    connecting,      // boolean — connection in progress
-    activeAccount,   // WalletAccount | null — first connected account
-    chainId,         // string — e.g. "rialo:devnet"
-    isInstalled,     // boolean — extension detected in browser
-
-    // Actions
-    connect,         // () => Promise<WalletAccount[]>
-    disconnect,      // () => Promise<void>
-    switchNetwork,   // (network) => Promise<void>
-    refreshBalance,  // () => Promise<void>
-
-    // Signing & Transactions
-    signMessage,             // (msg: string) => Promise<SignedMessage>
-    signTransaction,         // (tx) => Promise<string>
-    sendTransaction,         // (tx) => Promise<TransactionResult>
-    signAndSendTransaction,  // (tx) => Promise<TransactionResult>
-
-    // Modal control
-    openModal,   // () => void — open the connect modal
-    closeModal,  // () => void — close it
-  } = useWallet();
-}
+const {
+  connected,       // boolean
+  connecting,      // boolean
+  activeAccount,   // WalletAccount | null
+  chainId,         // string — e.g. "rialo:devnet"
+  isInstalled,     // boolean — extension detected
+
+  // Actions
+  connect,         // () => Promise<WalletAccount[]>
+  disconnect,      // () => Promise<void>
+  switchNetwork,   // (network) => Promise<void>
+  refreshBalance,  // () => Promise<void>
+
+  // Signing & Transactions
+  signMessage,             // (msg: string) => Promise<SignedMessage>
+  signTransaction,         // (tx) => Promise<string>
+  sendTransaction,         // (tx) => Promise<TransactionResult>
+  signAndSendTransaction,  // (tx) => Promise<TransactionResult>
+
+  // Modal control
+  openModal,   // () => void
+  closeModal,  // () => void
+} = useWallet();
 ```
 
 ### Focused Hooks
@@ -72,30 +99,76 @@ const accounts = useAccounts();
 const { balance, refresh } = useBalance();
 const { network, chainId } = useNetwork();
 const { switchNetwork } = useSwitchNetwork();
-const { sendTransaction, signAndSendTransaction } = useSendTransaction();
+const { sendTransaction, signAndSendTransaction, sendGaslessTransaction } = useSendTransaction();
 const { signMessage } = useSignMessage();
 ```
 
-## Connect Modal
+### REX (Confidential Transactions)
 
-The modal is rendered automatically by `WalletProvider`. It has two tabs:
+```tsx
+const { capabilities, supported, submitREXTransaction } = useREX();
+```
 
-1. **Extension** — Detects the installed Sheep Wallet extension and connects directly. If the extension is not installed, a download link is shown.
-2. **Scan to Connect** — Generates a QR code that a mobile Sheep Wallet can scan to pair cross-device. Also supports the reverse flow (wallet shows QR, dApp scans).
+### SfS (Stake-for-Service / Gasless)
 
-On mobile viewports the modal slides up from the bottom as a sheet and can be dismissed by swiping down. On desktop it opens as a centered dialog.
+```tsx
+const { positions, credits, hasCredits, createPosition, sendGasless, refresh } = useSfS();
+```
+
+### Scan-to-Connect
+
+```tsx
+const { scanURI, status, generateQR, approveSession, rejectSession } = useScanConnect();
+```
 
-When the user clicks **Connect** and the extension is installed, the extension popup opens automatically — no manual action required.
+## Custom Modal (Optional)
 
-### Controlling the Modal
+If you need full control over the UI, build your own modal using the hooks:
 
 ```tsx
-const { openModal, closeModal } = useWallet();
+import { useConnectWallet, useScanConnect, isInstalled } from '@cookill/wallet-adapter/react';
+
+function MyConnectModal({ open, onClose }) {
+  const { connect, connecting, error } = useConnectWallet();
+  const { scanURI, status, generateQR } = useScanConnect();
+
+  const handleConnect = async () => {
+    try {
+      const accounts = await connect();
+      console.log('Connected:', accounts[0].address);
+      onClose();
+    } catch (err) {
+      console.error('Connection failed:', err);
+    }
+  };
+
+  if (!open) return null;
 
-// Or use the built-in button
-<ConnectButton />
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <h2>Connect Wallet</h2>
+
+        {isInstalled() ? (
+          <button onClick={handleConnect} disabled={connecting}>
+            {connecting ? 'Approve in extension...' : 'Connect Sheep Wallet'}
+          </button>
+        ) : (
+          <a href="https://rialo.io/wallet" target="_blank">Install Sheep Wallet</a>
+        )}
+
+        {error && <p className="error">{error.message}</p>}
+      </div>
+    </div>
+  );
+}
 ```
 
+Key points:
+- `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
+
 ## Vanilla JavaScript
 
 ```typescript
@@ -108,8 +181,6 @@ if (!wallet.isInstalled) {
 }
 
 const accounts = await wallet.connect();
-console.log('Address:', accounts[0].address);
-
 const balance = await wallet.getBalance();
 console.log('Balance:', formatBalance(balance));
 
@@ -121,31 +192,17 @@ await wallet.signAndSendTransaction({
 await wallet.disconnect();
 ```
 
-## ConnectButton
-
-```tsx
-<ConnectButton
-  connectLabel="Connect Wallet"   // label when disconnected
-  disconnectLabel="Disconnect"     // dropdown label when connected
-  showAddress={true}               // show truncated address when connected
-  showBalance={false}              // show RLO balance next to address
-/>
-```
-
 ## WalletProvider Props
 
-```tsx
-<WalletProvider
-  network="devnet"            // default network
-  autoConnect={true}          // silently restore previous session on load
-  onConnect={(accounts) => {}}
-  onDisconnect={() => {}}
-  onNetworkChange={(net) => {}}
-  onError={(error) => {}}
->
-  {children}
-</WalletProvider>
-```
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `network` | `RialoNetwork` | `'devnet'` | Default network |
+| `autoConnect` | `boolean` | `true` | Silently restore previous session on load |
+| `scanConnectRelay` | `string` | `'wss://relay.rialo.io'` | Relay URL for scan-to-connect |
+| `onConnect` | `(accounts) => void` | — | Called after successful connection |
+| `onDisconnect` | `() => void` | — | Called after disconnect |
+| `onError` | `(error) => void` | — | Called on connection errors |
+| `onNetworkChange` | `(network) => void` | — | Called when network changes |
 
 ## Networks
 
@@ -156,56 +213,6 @@ await wallet.disconnect();
 | Devnet   | rialo:devnet    | https://devnet.rialo.io:4101   | dRLO   |
 | Localnet | rialo:localnet  | http://localhost:4101           | lRLO   |
 
-## Provider Interface (window.rialo)
-
-When the Sheep Wallet extension is installed, it injects `window.rialo` with this interface:
-
-```typescript
-interface RialoProvider {
-  isRialo: boolean;
-  isSheepWallet: boolean;
-  version: string;
-
-  // Connection
-  connect(): Promise<WalletAccount[]>;
-  disconnect(): Promise<void>;
-  isConnected(): Promise<boolean>;
-  getAccounts(): Promise<WalletAccount[]>;
-
-  // Transactions
-  signTransaction(tx: TransactionRequest): Promise<{ signature: string }>;
-  sendTransaction(tx: TransactionRequest): Promise<TransactionResult>;
-  signAndSendTransaction(tx: TransactionRequest): Promise<TransactionResult>;
-
-  // Message Signing
-  signMessage(message: string | Uint8Array): Promise<SignedMessage>;
-
-  // Network
-  getNetwork(): Promise<RialoNetwork>;
-  switchNetwork(network: RialoNetwork): Promise<void>;
-  getBalance(address?: string): Promise<BalanceResult>;
-
-  // Events
-  on(event: WalletEvent, callback: Function): () => void;
-
-  // State (synchronous getters)
-  readonly connected: boolean;
-  readonly accounts: WalletAccount[];
-  readonly address: string | null;
-  readonly network: RialoNetwork;
-  readonly chainId: string;
-}
-```
-
-### Supported Events
-
-| Event             | Payload                           |
-|-------------------|-----------------------------------|
-| `connect`         | `{ accounts: WalletAccount[] }`   |
-| `disconnect`      | —                                 |
-| `accountsChanged` | `WalletAccount[]`                 |
-| `networkChanged`  | `{ network, chainId }`            |
-
 ## Key Types
 
 ```typescript
@@ -219,6 +226,7 @@ interface TransactionRequest {
   value: string;      // amount in kelvins (1 RLO = 1_000_000_000 kelvins)
   data?: string;
   memo?: string;
+  gasless?: boolean;   // set by sendGaslessTransaction
 }
 
 interface TransactionResult {
@@ -244,16 +252,17 @@ import {
   formatBalance,   // (kelvins, decimals?) => "1.0000"
   parseBalance,    // (rlo) => bigint (kelvins)
   isValidAddress,  // (address) => boolean
-  isInstalled,     // () => boolean
+  isInstalled,     // () => boolean — checks window.rialo
   NETWORKS,        // Record<RialoNetwork, NetworkConfig>
 } from '@cookill/wallet-adapter';
 ```
 
 ## Architecture Notes
 
-- All provider calls are wrapped with a 20-second timeout to prevent dApp freezes if the extension stops responding.
-- `autoConnect` uses a silent `checkSession()` that never triggers a user-facing approval popup — it only restores an existing session.
-- The connect modal is rendered inside `WalletProvider` so you never need to manage modal state yourself.
+- 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 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
 
 ## License
 

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",