@cookill/wallet-adapter 2.4.1 → 2.5.0

package/README.md

@@ -11,9 +11,8 @@ npm install @cookill/wallet-adapter
 ## Quick Start
 
 ```tsx
-import { 
-  WalletProvider, 
-  WalletModal, 
+import {
+  WalletProvider,
   ConnectButton,
   WalletErrorBoundary,
 } from '@cookill/wallet-adapter/react';
@@ -21,9 +20,9 @@ import {
 function App() {
   return (
     <WalletErrorBoundary>
+      {/* WalletProvider will render a default WalletModal automatically */}
       <WalletProvider network="devnet" autoConnect>
         <ConnectButton />
-        <WalletModal />
         <YourDApp />
       </WalletProvider>
     </WalletErrorBoundary>
@@ -31,6 +30,14 @@ function App() {
 }
 ```
 
+## Troubleshooting (Connect stuck)
+
+If clicking **Connect** does nothing or feels "stuck":
+
+- Make sure your dApp is wrapped in `<WalletProvider>` (and ideally `<WalletErrorBoundary>`).
+- Prefer `useConnectWallet().connect` (opens the modal) instead of `connectDirect`.
+- The modal is rendered automatically by `WalletProvider`.
+
 ## React Hooks
 
 ### useWallet

package/dist/react.cjs

@@ -1,8 +1,12 @@
 'use strict';
 
-var react = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
 // src/react.tsx
 
 // src/index.ts
@@ -99,7 +103,7 @@ function isValidAddress(address) {
   if (address.length < 32 || address.length > 50) return false;
   return /^[1-9A-HJ-NP-Za-km-z]+$/.test(address);
 }
-var WalletErrorBoundary = class extends react.Component {
+var WalletErrorBoundary = class extends React2.Component {
   constructor() {
     super(...arguments);
     this.state = {
@@ -454,7 +458,17 @@ var DEFAULT_WALLETS = [
     downloadUrl: "https://rialo.io/wallet"
   }
 ];
-var WalletContext = react.createContext(null);
+var CONNECT_TIMEOUT_MS = 2e4;
+function withTimeout(promise, ms, message) {
+  let timeoutId;
+  const timeout = new Promise((_, reject) => {
+    timeoutId = setTimeout(() => reject(new Error(message)), ms);
+  });
+  return Promise.race([promise, timeout]).finally(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+}
+var WalletContext = React2.createContext(null);
 function WalletProvider({
   children,
   network: initialNetwork = "devnet",
@@ -465,26 +479,27 @@ function WalletProvider({
   onError,
   onNetworkChange
 }) {
-  const [connected, setConnected] = react.useState(false);
-  const [connecting, setConnecting] = react.useState(false);
-  const [accounts, setAccounts] = react.useState([]);
-  const [network, setNetwork] = react.useState(initialNetwork);
-  const [balance, setBalance] = react.useState(null);
-  const [selectedWallet, setSelectedWallet] = react.useState(null);
-  const [isModalOpen, setIsModalOpen] = react.useState(false);
-  const [provider, setProvider] = react.useState();
-  const [error, setError] = react.useState(null);
-  const chainId = react.useMemo(() => `rialo:${network}`, [network]);
+  const [connected, setConnected] = React2.useState(false);
+  const [connecting, setConnecting] = React2.useState(false);
+  const [accounts, setAccounts] = React2.useState([]);
+  const [network, setNetwork] = React2.useState(initialNetwork);
+  const [balance, setBalance] = React2.useState(null);
+  const [selectedWallet, setSelectedWallet] = React2.useState(null);
+  const [isModalOpen, setIsModalOpen] = React2.useState(false);
+  const [provider, setProvider] = React2.useState();
+  const [error, setError] = React2.useState(null);
+  const connectPromiseRef = React2.useRef(null);
+  const chainId = React2.useMemo(() => `rialo:${network}`, [network]);
   const activeAccount = accounts[0] || null;
   const isInstalled = isRialoInstalled();
-  const wallets = react.useMemo(() => {
+  const wallets = React2.useMemo(() => {
     const installed = isRialoInstalled();
     return [...DEFAULT_WALLETS, ...customWallets].map((w) => ({
       ...w,
       installed: w.id === "sheep-wallet" ? installed : false
     }));
   }, [customWallets]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const init = async () => {
       const p = await waitForRialoProvider(3e3);
       setProvider(p);
@@ -494,7 +509,7 @@ function WalletProvider({
     };
     init();
   }, [wallets]);
-  const refreshBalance = react.useCallback(async () => {
+  const refreshBalance = React2.useCallback(async () => {
     if (!provider || !activeAccount) return;
     try {
       const result = await provider.getBalance(activeAccount.address);
@@ -504,24 +519,42 @@ function WalletProvider({
       console.error("Balance fetch error:", e);
     }
   }, [provider, activeAccount]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (connected && activeAccount && provider) {
       refreshBalance();
       const interval = setInterval(refreshBalance, 3e4);
       return () => clearInterval(interval);
     }
   }, [connected, activeAccount, provider, refreshBalance]);
-  react.useEffect(() => {
-    if (autoConnect && provider && !connected && !connecting) {
-      provider.isConnected().then((isConn) => {
-        if (isConn) {
-          handleConnect();
+  React2.useEffect(() => {
+    if (!autoConnect || !provider || connected || connecting) return;
+    let cancelled = false;
+    provider.isConnected().then(async (isConn) => {
+      if (!isConn || cancelled) return;
+      try {
+        const rawAccounts = await withTimeout(provider.getAccounts(), 5e3, "Auto-connect timed out");
+        const normalized = (rawAccounts || []).map((acc) => {
+          if (typeof acc === "string") return { address: acc, publicKey: acc };
+          return { address: acc.address, publicKey: acc.publicKey || acc.address };
+        });
+        if (cancelled) return;
+        setAccounts(normalized);
+        setConnected(true);
+        try {
+          const net = await provider.getNetwork();
+          if (!cancelled) setNetwork(net);
+        } catch {
         }
-      }).catch(() => {
-      });
-    }
-  }, [provider, autoConnect, connected, connecting]);
-  react.useEffect(() => {
+        onConnect?.(normalized);
+      } catch {
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [provider, autoConnect, connected, connecting, onConnect]);
+  React2.useEffect(() => {
     if (!provider) return;
     const cleanupFns = [];
     cleanupFns.push(
@@ -570,48 +603,65 @@ function WalletProvider({
       cleanupFns.forEach((fn) => fn?.());
     };
   }, [provider, onDisconnect, onNetworkChange]);
-  const handleConnect = react.useCallback(async () => {
-    if (!provider) {
-      const err = new Error("Rialo Wallet not installed");
-      setError(err);
-      onError?.(err);
-      throw err;
+  const handleConnect = React2.useCallback(async () => {
+    if (connectPromiseRef.current) {
+      return connectPromiseRef.current;
     }
-    setConnecting(true);
-    setError(null);
-    try {
-      console.log("[Adapter] Calling provider.connect()...");
-      const result = await provider.connect();
-      console.log("[Adapter] Connect result:", result);
-      const walletAccounts = result.map((acc) => {
-        if (typeof acc === "string") {
-          return { address: acc, publicKey: acc };
-        }
-        return {
-          address: acc.address,
-          publicKey: acc.publicKey || acc.address
-        };
-      });
-      setAccounts(walletAccounts);
-      setConnected(true);
-      setIsModalOpen(false);
+    const run = (async () => {
+      if (!provider) {
+        const err = new Error("Rialo Wallet not installed");
+        setError(err);
+        onError?.(err);
+        throw err;
+      }
+      setIsModalOpen(true);
+      setConnecting(true);
+      setError(null);
       try {
-        const net = await provider.getNetwork();
-        setNetwork(net);
-      } catch {
+        console.log("[Adapter] Calling provider.connect()...");
+        const result = await withTimeout(
+          provider.connect(),
+          CONNECT_TIMEOUT_MS,
+          "Connect timed out. Please open Sheep Wallet extension and approve the request."
+        );
+        console.log("[Adapter] Connect result:", result);
+        const walletAccounts = result.map((acc) => {
+          if (typeof acc === "string") {
+            return { address: acc, publicKey: acc };
+          }
+          return {
+            address: acc.address,
+            publicKey: acc.publicKey || acc.address
+          };
+        });
+        setAccounts(walletAccounts);
+        setConnected(true);
+        setIsModalOpen(false);
+        try {
+          const net = await withTimeout(provider.getNetwork(), 5e3, "Network request timed out");
+          setNetwork(net);
+        } catch {
+        }
+        onConnect?.(walletAccounts);
+        return walletAccounts;
+      } catch (e) {
+        const err = e;
+        setError(err);
+        onError?.(err);
+        setIsModalOpen(true);
+        throw err;
+      } finally {
+        setConnecting(false);
       }
-      onConnect?.(walletAccounts);
-      return walletAccounts;
-    } catch (e) {
-      const err = e;
-      setError(err);
-      onError?.(err);
-      throw err;
+    })();
+    connectPromiseRef.current = run;
+    try {
+      return await run;
     } finally {
-      setConnecting(false);
+      connectPromiseRef.current = null;
     }
   }, [provider, onConnect, onError]);
-  const handleDisconnect = react.useCallback(async () => {
+  const handleDisconnect = React2.useCallback(async () => {
     try {
       if (provider) {
         await provider.disconnect();
@@ -623,7 +673,7 @@ function WalletProvider({
     setBalance(null);
     onDisconnect?.();
   }, [provider, onDisconnect]);
-  const selectWallet = react.useCallback((walletId) => {
+  const selectWallet = React2.useCallback((walletId) => {
     const wallet = wallets.find((w) => w.id === walletId);
     if (wallet) {
       setSelectedWallet(wallet);
@@ -634,40 +684,40 @@ function WalletProvider({
       }
     }
   }, [wallets, handleConnect]);
-  const handleSwitchNetwork = react.useCallback(async (newNetwork) => {
+  const handleSwitchNetwork = React2.useCallback(async (newNetwork) => {
     if (provider) {
       await provider.switchNetwork(newNetwork);
     }
     setNetwork(newNetwork);
     onNetworkChange?.(newNetwork);
   }, [provider, onNetworkChange]);
-  const handleSignMessage = react.useCallback(async (message) => {
+  const handleSignMessage = React2.useCallback(async (message) => {
     if (!provider || !connected) {
       throw new Error("Wallet not connected");
     }
     return provider.signMessage(message);
   }, [provider, connected]);
-  const handleSignTransaction = react.useCallback(async (tx) => {
+  const handleSignTransaction = React2.useCallback(async (tx) => {
     if (!provider || !connected) {
       throw new Error("Wallet not connected");
     }
     const result = await provider.signTransaction(tx);
     return result.signature;
   }, [provider, connected]);
-  const handleSendTransaction = react.useCallback(async (tx) => {
+  const handleSendTransaction = React2.useCallback(async (tx) => {
     if (!provider || !connected) {
       throw new Error("Wallet not connected");
     }
     return provider.sendTransaction(tx);
   }, [provider, connected]);
-  const handleSignAndSendTransaction = react.useCallback(async (tx) => {
+  const handleSignAndSendTransaction = React2.useCallback(async (tx) => {
     if (!provider || !connected) {
       throw new Error("Wallet not connected");
     }
     return provider.signAndSendTransaction(tx);
   }, [provider, connected]);
-  const openModal = react.useCallback(() => setIsModalOpen(true), []);
-  const closeModal = react.useCallback(() => setIsModalOpen(false), []);
+  const openModal = React2.useCallback(() => setIsModalOpen(true), []);
+  const closeModal = React2.useCallback(() => setIsModalOpen(false), []);
   const value = {
     connected,
     connecting,
@@ -693,10 +743,13 @@ function WalletProvider({
     openModal,
     closeModal
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(WalletContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(WalletContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(WalletModal, {})
+  ] });
 }
 function useWallet() {
-  const context = react.useContext(WalletContext);
+  const context = React2.useContext(WalletContext);
   if (!context) {
     throw new Error("useWallet must be used within WalletProvider");
   }
@@ -736,9 +789,9 @@ function useChainId() {
 }
 function useSwitchNetwork() {
   const { switchNetwork, network } = useWallet();
-  const [switching, setSwitching] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const doSwitch = react.useCallback(async (newNetwork) => {
+  const [switching, setSwitching] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  const doSwitch = React2.useCallback(async (newNetwork) => {
     setSwitching(true);
     setError(null);
     try {
@@ -754,7 +807,7 @@ function useSwitchNetwork() {
 }
 function useConnectWallet() {
   const { connect, connecting, openModal, isInstalled, error } = useWallet();
-  const handleConnect = react.useCallback(() => {
+  const handleConnect = React2.useCallback(() => {
     openModal();
   }, [openModal]);
   return {
@@ -772,10 +825,10 @@ function useDisconnectWallet() {
 }
 function useSignMessage() {
   const { signMessage, connected, activeAccount } = useWallet();
-  const [signing, setSigning] = react.useState(false);
-  const [signature, setSignature] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const sign = react.useCallback(async (message) => {
+  const [signing, setSigning] = React2.useState(false);
+  const [signature, setSignature] = React2.useState(null);
+  const [error, setError] = React2.useState(null);
+  const sign = React2.useCallback(async (message) => {
     if (!connected) {
       setError(new Error("Wallet not connected"));
       return null;
@@ -797,10 +850,10 @@ function useSignMessage() {
 }
 function useSendTransaction() {
   const { signAndSendTransaction, connected } = useWallet();
-  const [sending, setSending] = react.useState(false);
-  const [txHash, setTxHash] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const send = react.useCallback(async (tx) => {
+  const [sending, setSending] = React2.useState(false);
+  const [txHash, setTxHash] = React2.useState(null);
+  const [error, setError] = React2.useState(null);
+  const send = React2.useCallback(async (tx) => {
     if (!connected) {
       setError(new Error("Wallet not connected"));
       return null;
@@ -825,10 +878,10 @@ function useSendTransaction() {
 }
 function useSignTransaction() {
   const { signTransaction, connected } = useWallet();
-  const [signing, setSigning] = react.useState(false);
-  const [signature, setSignature] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const sign = react.useCallback(async (tx) => {
+  const [signing, setSigning] = React2.useState(false);
+  const [signature, setSignature] = React2.useState(null);
+  const [error, setError] = React2.useState(null);
+  const sign = React2.useCallback(async (tx) => {
     if (!connected) {
       setError(new Error("Wallet not connected"));
       return null;
@@ -913,7 +966,24 @@ function ConnectButton({
     }
   );
 }
+var walletModalOwnerToken = null;
 function WalletModal({ title = "Connect Wallet", className = "" }) {
+  const ownerRef = React2__default.default.useRef({});
+  const [isOwner] = React2.useState(() => {
+    if (!walletModalOwnerToken) {
+      walletModalOwnerToken = ownerRef.current;
+      return true;
+    }
+    return walletModalOwnerToken === ownerRef.current;
+  });
+  React2.useEffect(() => {
+    return () => {
+      if (isOwner && walletModalOwnerToken === ownerRef.current) {
+        walletModalOwnerToken = null;
+      }
+    };
+  }, [isOwner]);
+  if (!isOwner) return null;
   const { isModalOpen, closeModal, wallets, selectWallet, connecting } = useWallet();
   if (!isModalOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(