@cookill/wallet-adapter 2.4.0 → 2.4.2

package/dist/react.js

@@ -1,5 +1,5 @@
-import { createContext, useState, useMemo, useEffect, useCallback, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React2, { createContext, Component, useState, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/react.tsx
 
@@ -97,11 +97,359 @@ 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 Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+    this.handleRetry = () => {
+      this.setState({ hasError: false, error: null });
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[WalletAdapter] Error caught by boundary:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: "20px",
+            borderRadius: "12px",
+            border: "1px solid #fee2e2",
+            backgroundColor: "#fef2f2",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "48px",
+                  height: "48px",
+                  margin: "0 auto 12px",
+                  borderRadius: "50%",
+                  backgroundColor: "#fecaca",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "#dc2626",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: 600, color: "#991b1b" }, children: "Wallet Connection Error" }),
+            /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px", fontSize: "14px", color: "#b91c1c" }, children: this.state.error?.message || "Something went wrong" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: this.handleRetry,
+                style: {
+                  padding: "8px 16px",
+                  borderRadius: "8px",
+                  border: "none",
+                  backgroundColor: "#dc2626",
+                  color: "white",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: 500
+                },
+                children: "Try Again"
+              }
+            )
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function LoadingSpinner({ size = "md", color = "#6EB9A8", className = "" }) {
+  const sizes = {
+    sm: { container: 20, stroke: 2 },
+    md: { container: 32, stroke: 3 },
+    lg: { container: 48, stroke: 4 }
+  };
+  const { container, stroke } = sizes[size];
+  const radius = (container - stroke) / 2;
+  const circumference = radius * 2 * Math.PI;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: container,
+      height: container,
+      viewBox: `0 0 ${container} ${container}`,
+      className,
+      style: { animation: "wallet-spin 1s linear infinite" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes wallet-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: container / 2,
+            cy: container / 2,
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth: stroke,
+            strokeOpacity: 0.2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: container / 2,
+            cy: container / 2,
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth: stroke,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset: circumference * 0.75
+          }
+        )
+      ]
+    }
+  );
+}
+function ApprovalPending({
+  title = "Waiting for Approval",
+  message = "Please approve the request in your wallet",
+  walletName = "Sheep Wallet",
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "32px 24px",
+        textAlign: "center",
+        backgroundColor: "#f8fafc",
+        borderRadius: "16px",
+        border: "1px solid #e2e8f0"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "80px",
+              height: "80px",
+              margin: "0 auto 20px",
+              borderRadius: "50%",
+              backgroundColor: "#011B29",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative"
+            },
+            children: [
+              /* @__PURE__ */ jsx(LoadingSpinner, { size: "lg" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: "-4px",
+                    borderRadius: "50%",
+                    border: "2px solid transparent",
+                    borderTopColor: "#6EB9A8",
+                    animation: "wallet-spin 2s linear infinite"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              margin: "0 0 8px",
+              fontSize: "18px",
+              fontWeight: 600,
+              color: "#0f172a"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "0 0 8px",
+              fontSize: "14px",
+              color: "#64748b"
+            },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            style: {
+              margin: "0 0 24px",
+              fontSize: "12px",
+              color: "#94a3b8"
+            },
+            children: [
+              "Open ",
+              walletName,
+              " extension to continue"
+            ]
+          }
+        ),
+        onCancel && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onCancel,
+            style: {
+              padding: "10px 24px",
+              borderRadius: "10px",
+              border: "1px solid #e2e8f0",
+              backgroundColor: "white",
+              color: "#64748b",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 500,
+              transition: "all 0.2s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f1f5f9";
+              e.currentTarget.style.borderColor = "#cbd5e1";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "white";
+              e.currentTarget.style.borderColor = "#e2e8f0";
+            },
+            children: "Cancel"
+          }
+        )
+      ]
+    }
+  );
+}
+function ConnectionStatus({ status, message, onRetry }) {
+  const statusConfig = {
+    connecting: {
+      title: "Connecting",
+      defaultMessage: "Establishing connection to wallet...",
+      color: "#6EB9A8"
+    },
+    approving: {
+      title: "Approval Required",
+      defaultMessage: "Please approve the connection in Sheep Wallet",
+      color: "#f59e0b"
+    },
+    signing: {
+      title: "Signature Required",
+      defaultMessage: "Please sign the transaction in your wallet",
+      color: "#6EB9A8"
+    },
+    success: {
+      title: "Connected",
+      defaultMessage: "Successfully connected to wallet",
+      color: "#22c55e"
+    },
+    error: {
+      title: "Connection Failed",
+      defaultMessage: "Unable to connect. Please try again.",
+      color: "#ef4444"
+    }
+  };
+  const config = statusConfig[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "20px",
+        borderRadius: "12px",
+        backgroundColor: `${config.color}10`,
+        border: `1px solid ${config.color}30`,
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "48px",
+              height: "48px",
+              margin: "0 auto 12px",
+              borderRadius: "50%",
+              backgroundColor: `${config.color}20`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: status === "success" ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: config.color, strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20,6 9,17 4,12" }) }) : status === "error" ? /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: config.color, strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }) : /* @__PURE__ */ jsx(LoadingSpinner, { size: "sm", color: config.color })
+          }
+        ),
+        /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 4px", fontSize: "14px", fontWeight: 600, color: config.color }, children: config.title }),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: "#64748b" }, children: message || config.defaultMessage }),
+        status === "error" && onRetry && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onRetry,
+            style: {
+              marginTop: "12px",
+              padding: "6px 16px",
+              borderRadius: "6px",
+              border: "none",
+              backgroundColor: config.color,
+              color: "white",
+              cursor: "pointer",
+              fontSize: "12px",
+              fontWeight: 500
+            },
+            children: "Retry"
+          }
+        )
+      ]
+    }
+  );
+}
+var SHEEP_WALLET_ICON = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI4IiBmaWxsPSIjMUExQTFBIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNCIgcj0iOCIgZmlsbD0iI0ZGRjhGMCIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTAiIHI9IjQiIGZpbGw9IiNGRkY4RjAiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjEwIiByPSI0IiBmaWxsPSIjRkZGOEYwIi8+PGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iMS41IiBmaWxsPSIjMzMzIi8+PGNpcmNsZSBjeD0iMTkiIGN5PSIxMyIgcj0iMS41IiBmaWxsPSIjMzMzIi8+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMTciIHJ4PSIyIiByeT0iMS41IiBmaWxsPSIjRkZDMENCIi8+PHBhdGggZD0iTTE0IDI0QzE0IDIyLjkgMTQuOSAyMiAxNiAyMkMxNy4xIDIyIDE4IDIyLjkgMTggMjRWMjZIMTRWMjRaIiBmaWxsPSIjNkVCOUE4Ii8+PC9zdmc+";
 var DEFAULT_WALLETS = [
   {
     id: "sheep-wallet",
     name: "Sheep Wallet",
-    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI4IiBmaWxsPSIjMDExQjI5Ii8+PHRleHQgeD0iNTAlIiB5PSI1NSUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzZFQjlBOCI+Uzwvc2VsZj48L3N2Zz4=",
+    icon: SHEEP_WALLET_ICON,
     downloadUrl: "https://rialo.io/wallet"
   }
 ];
@@ -344,7 +692,10 @@ function WalletProvider({
     openModal,
     closeModal
   };
-  return /* @__PURE__ */ jsx(WalletContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxs(WalletContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(WalletModal, {})
+  ] });
 }
 function useWallet() {
   const context = useContext(WalletContext);
@@ -405,11 +756,16 @@ function useSwitchNetwork() {
 }
 function useConnectWallet() {
   const { connect, connecting, openModal, isInstalled, error } = useWallet();
+  const handleConnect = useCallback(() => {
+    openModal();
+  }, [openModal]);
   return {
-    connect: isInstalled ? connect : openModal,
+    connect: handleConnect,
+    connectDirect: connect,
     connecting,
     isInstalled,
-    error
+    error,
+    openModal
   };
 }
 function useDisconnectWallet() {
@@ -559,7 +915,24 @@ function ConnectButton({
     }
   );
 }
+var walletModalOwnerToken = null;
 function WalletModal({ title = "Connect Wallet", className = "" }) {
+  const ownerRef = React2.useRef({});
+  const [isOwner] = useState(() => {
+    if (!walletModalOwnerToken) {
+      walletModalOwnerToken = ownerRef.current;
+      return true;
+    }
+    return walletModalOwnerToken === ownerRef.current;
+  });
+  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__ */ jsx(
@@ -636,7 +1009,16 @@ function WalletModal({ title = "Connect Wallet", className = "" }) {
     }
   );
 }
+function withWalletErrorBoundary(WrappedComponent, fallback) {
+  return function WithErrorBoundary(props) {
+    return /* @__PURE__ */ jsx(WalletErrorBoundary, { fallback, children: /* @__PURE__ */ jsx(WrappedComponent, { ...props }) });
+  };
+}
+function SafeWalletProvider(props) {
+  const { errorFallback, ...providerProps } = props;
+  return /* @__PURE__ */ jsx(WalletErrorBoundary, { fallback: errorFallback, children: /* @__PURE__ */ jsx(WalletProvider, { ...providerProps }) });
+}
 
-export { ConnectButton, NETWORKS, WalletModal, WalletProvider, formatAddress, formatBalance, getRialoProvider, isRialoInstalled, isValidAddress, useAccounts, useActiveAccount, useBalance, useChainId, useConnectWallet, useDisconnectWallet, useIsConnected, useNetwork, useSendTransaction, useSignMessage, useSignTransaction, useSwitchNetwork, useWallet };
+export { ApprovalPending, ConnectButton, ConnectionStatus, LoadingSpinner, NETWORKS, SafeWalletProvider, WalletErrorBoundary, WalletModal, WalletProvider, formatAddress, formatBalance, getRialoProvider, isRialoInstalled, isValidAddress, useAccounts, useActiveAccount, useBalance, useChainId, useConnectWallet, useDisconnectWallet, useIsConnected, useNetwork, useSendTransaction, useSignMessage, useSignTransaction, useSwitchNetwork, useWallet, withWalletErrorBoundary };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map