@cookill/wallet-adapter 3.1.7 → 3.2.0

package/dist/react.cjs

@@ -1,11 +1,11 @@
 '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 React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/core/types.ts
 var NETWORKS = {
@@ -57,6 +57,14 @@ var NETWORKS = {
 
 // src/core/provider.ts
 function isInstalled() {
+  if (typeof window === "undefined") return false;
+  try {
+    return !!window.rialo?.isRialo && !window.rialo?.isWebWallet;
+  } catch {
+    return false;
+  }
+}
+function hasProvider() {
   if (typeof window === "undefined") return false;
   try {
     return !!window.rialo?.isRialo;
@@ -164,9 +172,14 @@ var SheepWallet = class {
   // =========================================================================
   // Getters (all synchronous, never block)
   // =========================================================================
+  /** True only if the browser extension is installed (not web wallet) */
   get isInstalled() {
     return isInstalled();
   }
+  /** True if any provider (extension or web wallet) is available */
+  get hasProvider() {
+    return hasProvider();
+  }
   get connected() {
     return this._connected;
   }
@@ -191,7 +204,7 @@ var SheepWallet = class {
   async connect() {
     this._provider = getProvider();
     if (!this._provider) {
-      throw new Error("Sheep Wallet not installed. Get it at https://rialo.io/wallet");
+      throw new Error("No wallet provider found. Install Sheep Wallet extension or set up a web wallet.");
     }
     try {
       const rawAccounts = await withTimeout(
@@ -562,190 +575,997 @@ var SheepWallet = class {
     );
   }
 };
-var initialState = {
-  status: "disconnected",
-  accounts: [],
-  network: "devnet",
-  balance: null,
-  error: null,
-  isModalOpen: false,
-  scanConnectStatus: "idle"
-};
-function walletReducer(state, action) {
-  switch (action.type) {
-    case "CONNECTING":
-      return { ...state, status: "connecting", error: null };
-    case "CONNECTED":
-      return {
-        ...state,
-        status: "connected",
-        accounts: action.accounts,
-        network: action.network,
-        error: null,
-        isModalOpen: false,
-        scanConnectStatus: "idle"
-      };
-    case "DISCONNECTED":
-      return { ...state, status: "disconnected", accounts: [], balance: null, error: null };
-    case "ERROR":
-      return { ...state, status: "error", error: action.error };
-    case "SET_BALANCE":
-      return { ...state, balance: action.balance };
-    case "SET_NETWORK":
-      return { ...state, network: action.network };
-    case "SET_ACCOUNTS":
-      return { ...state, accounts: action.accounts };
-    case "OPEN_MODAL":
-      return { ...state, isModalOpen: true };
-    case "CLOSE_MODAL":
-      return { ...state, isModalOpen: false, scanConnectStatus: "idle" };
-    case "RESET_ERROR":
-      return { ...state, error: null, status: state.accounts.length > 0 ? "connected" : "disconnected" };
-    case "SET_SCAN_STATUS":
-      return { ...state, scanConnectStatus: action.status };
-    default:
-      return state;
+var IconClose = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var IconExtension = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3h5v5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H3v5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9 6-6" })
+] });
+var IconQR = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 14h7v7h-7z" })
+] });
+var IconWeb = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 10h20" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17v4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 21h8" })
+] });
+var IconCheck = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#6EB9A8", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var IconCamera = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
+] });
+var IconRefresh = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" })
+] });
+var S = {
+  backdrop: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0,0,0,0.6)",
+    backdropFilter: "blur(8px)",
+    WebkitBackdropFilter: "blur(8px)"
+  },
+  dialog: {
+    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: "swModalFadeIn 0.25s cubic-bezier(0.4,0,0.2,1)"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px"
+  },
+  title: { color: "#fff", fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.01em" },
+  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"
+  },
+  tabBar: {
+    display: "flex",
+    gap: "4px",
+    padding: "4px",
+    backgroundColor: "rgba(255,255,255,0.04)",
+    borderRadius: "14px",
+    marginBottom: "20px"
+  },
+  walletBtn: (isConnecting) => ({
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    gap: "14px",
+    padding: "16px",
+    backgroundColor: "rgba(255,255,255,0.04)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    borderRadius: "14px",
+    cursor: isConnecting ? "wait" : "pointer",
+    transition: "all 0.15s",
+    color: "inherit"
+  }),
+  walletIcon: {
+    width: "44px",
+    height: "44px",
+    borderRadius: "12px",
+    background: "linear-gradient(135deg, #6EB9A8, #4a9a8a)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#fff",
+    fontWeight: 700,
+    fontSize: "18px",
+    flexShrink: 0
+  },
+  badge: (color) => ({
+    padding: "5px 10px",
+    backgroundColor: `${color}10`,
+    borderRadius: "8px",
+    border: `1px solid ${color}18`,
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  }),
+  input: {
+    width: "100%",
+    padding: "12px 14px",
+    backgroundColor: "rgba(255,255,255,0.04)",
+    border: "1px solid rgba(255,255,255,0.1)",
+    borderRadius: "12px",
+    color: "#fff",
+    fontSize: "14px",
+    marginBottom: "12px",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  primaryBtn: (loading) => ({
+    width: "100%",
+    padding: "12px",
+    backgroundColor: "#6EB9A8",
+    border: "none",
+    borderRadius: "12px",
+    color: "#011B29",
+    fontSize: "14px",
+    fontWeight: 600,
+    cursor: loading ? "wait" : "pointer",
+    opacity: loading ? 0.6 : 1
+  }),
+  error: {
+    marginTop: "16px",
+    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
   }
+};
+function tabStyle(active) {
+  return {
+    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",
+    backgroundColor: active ? "rgba(255,255,255,0.08)" : "transparent",
+    color: active ? "#6EB9A8" : "rgba(255,255,255,0.4)",
+    fontWeight: active ? 600 : 400
+  };
 }
-var WalletContext = React.createContext(null);
-var DEFAULT_WALLETS = [
-  {
-    id: "sheep-wallet",
-    name: "Sheep Wallet",
-    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI4IiBmaWxsPSIjMDExQjI5Ii8+PHRleHQgeD0iNTAlIiB5PSI1NSUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzZFQjlBOCI+Uzwvc2VsZj48L3N2Zz4=",
-    downloadUrl: "https://rialo.io/wallet",
-    supportsREX: true,
-    supportsSfS: true,
-    supportsScanConnect: true
-  }
-];
-function WalletProvider({
-  children,
-  network: initialNetwork = "devnet",
-  autoConnect = true,
-  wallets: customWallets = [],
-  scanConnectRelay = "wss://relay.rialo.io",
-  onConnect,
-  onDisconnect,
-  onError,
-  onNetworkChange
-}) {
-  const [state, dispatch] = React.useReducer(walletReducer, {
-    ...initialState,
-    network: initialNetwork
-  });
-  const walletRef = React.useRef(null);
-  const providerRef = React.useRef(void 0);
-  const connectingRef = React.useRef(false);
-  const mountedRef = React.useRef(true);
-  React.useEffect(() => {
-    mountedRef.current = true;
-    walletRef.current = new SheepWallet();
-    waitForProvider(3e3).then((provider) => {
-      if (mountedRef.current) {
-        providerRef.current = provider;
-      }
-    });
-    return () => {
-      mountedRef.current = false;
-      walletRef.current?.destroy();
-    };
-  }, []);
-  React.useEffect(() => {
-    const setupEvents = async () => {
-      const provider = await waitForProvider(3e3);
-      if (!provider || !mountedRef.current) return;
-      providerRef.current = provider;
-      const cleanups = [];
-      cleanups.push(
-        provider.on("disconnect", () => {
-          if (!mountedRef.current) return;
-          dispatch({ type: "DISCONNECTED" });
-          onDisconnect?.();
-        })
-      );
-      cleanups.push(
-        provider.on("accountsChanged", (data) => {
-          if (!mountedRef.current) return;
-          const accounts = normalizeAccounts(data);
-          dispatch({ type: "SET_ACCOUNTS", accounts });
-        })
-      );
-      cleanups.push(
-        provider.on("networkChanged", (data) => {
-          if (!mountedRef.current) return;
-          const { network } = data;
-          if (network) {
-            dispatch({ type: "SET_NETWORK", network });
-            onNetworkChange?.(network);
-          }
-        })
-      );
-      return () => {
-        cleanups.forEach((fn) => {
-          try {
-            fn();
-          } catch {
+function ExtensionTab({ onConnect, extensionDetected, connecting, error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (extensionDetected) {
+            onConnect();
+          } else {
+            window.open("https://rialo.io/wallet", "_blank");
           }
-        });
-      };
-    };
-    const cleanup = setupEvents();
-    return () => {
-      cleanup.then((fn) => fn?.());
-    };
-  }, [onDisconnect, onNetworkChange]);
-  React.useEffect(() => {
-    if (!autoConnect) return;
-    if (state.status === "connected" || state.status === "connecting") return;
-    const tryAutoConnect = async () => {
-      const wallet = walletRef.current;
-      if (!wallet?.isInstalled) return;
-      try {
-        const accounts = await wallet.checkSession();
-        if (accounts && accounts.length > 0 && mountedRef.current) {
-          dispatch({ type: "CONNECTED", accounts, network: wallet.network });
-          onConnect?.(accounts);
-        }
-      } catch {
+        },
+        disabled: connecting,
+        style: S.walletBtn(connecting),
+        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__ */ jsxRuntime.jsx("div", { style: S.walletIcon, children: "S" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, textAlign: "left" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "15px", marginBottom: "2px" }, children: "Sheep Wallet" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "12px", color: extensionDetected ? "#6EB9A8" : "rgba(255,255,255,0.4)", display: "flex", alignItems: "center", gap: "5px" }, children: connecting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#F59E0B", animation: "swModalPulse 1.2s infinite" } }),
+              "Connecting..."
+            ] }) : extensionDetected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#6EB9A8" } }),
+              "Detected \u2014 Click to connect"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "rgba(255,255,255,0.2)" } }),
+              "Not installed"
+            ] }) })
+          ] }),
+          !extensionDetected && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6EB9A8", fontSize: "12px", fontWeight: 500, padding: "4px 10px", borderRadius: "8px", backgroundColor: "rgba(110,185,168,0.1)" }, children: "Install" })
+        ]
       }
-    };
-    const timer = setTimeout(tryAutoConnect, 500);
-    return () => clearTimeout(timer);
-  }, [autoConnect, onConnect]);
-  React.useEffect(() => {
-    if (state.status !== "connected" || state.accounts.length === 0) return;
-    const refresh = async () => {
-      const wallet = walletRef.current;
-      if (!wallet || !mountedRef.current) return;
-      try {
-        const balance = await wallet.getBalance();
-        if (mountedRef.current) {
-          dispatch({ type: "SET_BALANCE", balance });
+    ),
+    /* @__PURE__ */ jsxRuntime.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((b) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.badge(b.color), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: b.color, fontSize: "11px", fontWeight: 600 }, children: b.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.35)", fontSize: "10px" }, children: b.desc })
+    ] }, b.label)) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error.message })
+  ] });
+}
+function ScanTab({ scanConnectRelay }) {
+  const [scanMode, setScanMode] = React2.useState("show-qr");
+  const [generatedURI, setGeneratedURI] = React2.useState(null);
+  const canvasRef = React2.useRef(null);
+  const generateSession = React2.useCallback(() => {
+    const sessionId = crypto.randomUUID();
+    const topic = btoa(sessionId).slice(0, 32);
+    const uri = `rialo-wc://${sessionId}?relay=${encodeURIComponent(scanConnectRelay)}&topic=${topic}&networks=devnet`;
+    setGeneratedURI(uri);
+  }, [scanConnectRelay]);
+  React2.useEffect(() => {
+    generateSession();
+  }, [generateSession]);
+  React2.useEffect(() => {
+    if (!generatedURI || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const size = 200;
+    canvas.width = size;
+    canvas.height = size;
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fillRect(0, 0, size, size);
+    ctx.fillStyle = "#011B29";
+    const gridSize = 25;
+    const cellSize = size / gridSize;
+    for (let y = 0; y < gridSize; y++) {
+      for (let x = 0; x < gridSize; x++) {
+        const isFinderArea = x < 7 && y < 7 || x >= gridSize - 7 && y < 7 || x < 7 && y >= gridSize - 7;
+        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);
+          continue;
         }
-      } catch {
+        const charIndex = (y * gridSize + x) % generatedURI.length;
+        const charCode = generatedURI.charCodeAt(charIndex);
+        if (charCode % 3 !== 0) ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
       }
-    };
-    refresh();
-    const interval = setInterval(refresh, 3e4);
-    return () => clearInterval(interval);
-  }, [state.status, state.accounts]);
-  const connect = React.useCallback(async () => {
-    if (connectingRef.current) {
-      throw new Error("Connection already in progress");
-    }
-    const wallet = walletRef.current;
-    if (!wallet) {
-      const err = new Error("Wallet not initialized");
-      dispatch({ type: "ERROR", error: err });
-      throw err;
-    }
-    if (!wallet.isInstalled) {
-      dispatch({ type: "OPEN_MODAL" });
-      const err = new Error("Sheep Wallet not installed");
-      dispatch({ type: "ERROR", error: err });
-      onError?.(err);
-      throw err;
+    }
+    const logoSize = 40;
+    const logoX = (size - logoSize) / 2;
+    const logoY = (size - logoSize) / 2;
+    ctx.beginPath();
+    ctx.arc(size / 2, size / 2, logoSize / 2 + 4, 0, Math.PI * 2);
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fill();
+    ctx.beginPath();
+    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";
+    ctx.font = "bold 22px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText("S", size / 2, size / 2 + 1);
+  }, [generatedURI]);
+  const stop = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: ["show-qr", "scan-qr"].map((mode) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconQR, {}),
+          " Show QR"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconCamera, {}),
+          " Scan QR"
+        ] })
+      },
+      mode
+    )) }),
+    scanMode === "show-qr" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.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" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "inline-block", padding: "16px", backgroundColor: "#FFFFFF", borderRadius: "16px", position: "relative" }, children: [
+        [
+          { top: -2, left: -2, borderTop: "3px solid #6EB9A8", borderLeft: "3px solid #6EB9A8", borderTopLeftRadius: "12px" },
+          { top: -2, right: -2, borderTop: "3px solid #6EB9A8", borderRight: "3px solid #6EB9A8", borderTopRightRadius: "12px" },
+          { bottom: -2, left: -2, borderBottom: "3px solid #6EB9A8", borderLeft: "3px solid #6EB9A8", borderBottomLeftRadius: "12px" },
+          { bottom: -2, right: -2, borderBottom: "3px solid #6EB9A8", borderRight: "3px solid #6EB9A8", borderBottomRightRadius: "12px" }
+        ].map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", width: "24px", height: "24px", ...s } }, i)),
+        /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, style: { width: "200px", height: "200px", display: "block" } })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "7px", height: "7px", borderRadius: "50%", backgroundColor: "#6EB9A8", animation: "swModalPulse 2s infinite" } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: "12px" }, children: "Waiting for wallet to scan..." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            generateSession();
+          },
+          style: { marginTop: "12px", padding: "8px 16px", backgroundColor: "transparent", border: "1px solid rgba(255,255,255,0.08)", borderRadius: "10px", color: "#6EB9A8", fontSize: "12px", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "6px" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconRefresh, {}),
+            " Refresh QR"
+          ]
+        }
+      )
+    ] }),
+    scanMode === "scan-qr" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
+        width: "100%",
+        height: "200px",
+        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__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.2)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCamera, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.3)", fontSize: "13px" }, children: "Camera access required" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              stop(e);
+              alert("Camera scanning requires HTTPS. This feature works in the installed extension.");
+            },
+            style: { padding: "8px 20px", backgroundColor: "#6EB9A8", border: "none", borderRadius: "10px", color: "#011B29", fontSize: "13px", fontWeight: 500, cursor: "pointer" },
+            children: "Open Camera"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function WebWalletTab({ onConnected }) {
+  const { connect } = useWallet();
+  const [mode, setMode] = React2.useState("menu");
+  const [password, setPassword] = React2.useState("");
+  const [mnemonic, setMnemonic] = React2.useState("");
+  const [generatedMnemonic, setGeneratedMnemonic] = React2.useState("");
+  const [error, setError] = React2.useState("");
+  const [loading, setLoading] = React2.useState(false);
+  const stop = (e) => e.stopPropagation();
+  const webProvider = typeof window !== "undefined" ? window.rialo : null;
+  const isWebProvider = webProvider?.isWebWallet;
+  const hasWallet = isWebProvider && webProvider?.hasWallet?.();
+  const isUnlocked = isWebProvider && webProvider?.isUnlocked?.();
+  const handleAction = async (action) => {
+    setError("");
+    setLoading(true);
+    try {
+      if (!webProvider?.isWebWallet) {
+        throw new Error("Web wallet provider not available. Make sure registerWebWallet() is called at app startup.");
+      }
+      if (action === "create") {
+        if (!password || password.length < 6) throw new Error("Password must be at least 6 characters");
+        const result = await webProvider.createWallet(password);
+        setGeneratedMnemonic(result.mnemonic);
+        try {
+          await connect();
+          onConnected();
+        } catch {
+        }
+      } else if (action === "import") {
+        if (!mnemonic.trim()) throw new Error("Please enter your recovery phrase");
+        if (!password || password.length < 6) throw new Error("Password must be at least 6 characters");
+        await webProvider.importWallet(mnemonic.trim(), password);
+        try {
+          await connect();
+          onConnected();
+        } catch {
+        }
+      } else if (action === "unlock") {
+        if (!password) throw new Error("Please enter your password");
+        const unlocked = await webProvider.unlock(password);
+        if (!unlocked) throw new Error("Incorrect password");
+        try {
+          await connect();
+          onConnected();
+        } catch {
+        }
+      }
+    } catch (err) {
+      setError(err?.message || "Operation failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (generatedMnemonic) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "14px", backgroundColor: "rgba(110,185,168,0.08)", border: "1px solid rgba(110,185,168,0.2)", borderRadius: "12px", marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6EB9A8", fontSize: "12px", fontWeight: 600, marginBottom: "8px" }, children: "Wallet Created & Connected!" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.6)", fontSize: "11px", marginBottom: "8px" }, children: "Save your recovery phrase securely:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "10px", backgroundColor: "rgba(0,0,0,0.3)", borderRadius: "8px", color: "#fff", fontSize: "12px", fontFamily: "monospace", wordBreak: "break-word", lineHeight: 1.6 }, children: generatedMnemonic })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setGeneratedMnemonic("");
+            onConnected();
+          },
+          style: S.primaryBtn(false),
+          children: "I've Saved It \u2014 Continue"
+        }
+      )
+    ] });
+  }
+  if (hasWallet && !isUnlocked) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: "13px", marginBottom: "16px" }, children: "Web wallet locked. Enter password to connect." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "password",
+          placeholder: "Password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          onClick: stop,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleAction("unlock");
+          },
+          style: S.input
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+        stop(e);
+        handleAction("unlock");
+      }, disabled: loading, style: S.primaryBtn(loading), children: loading ? "Unlocking..." : "Unlock & Connect" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error })
+    ] });
+  }
+  if (hasWallet && isUnlocked) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: async (e) => {
+        stop(e);
+        setLoading(true);
+        try {
+          await connect();
+          onConnected();
+        } catch (err) {
+          setError(err?.message || "Failed");
+        } finally {
+          setLoading(false);
+        }
+      }, disabled: loading, style: S.walletBtn(loading), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "44px", height: "44px", borderRadius: "12px", background: "linear-gradient(135deg, #3B82F6, #6366F1)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(IconWeb, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, textAlign: "left" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "15px" }, children: "Web Wallet" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "12px", color: "#6EB9A8" }, children: loading ? "Connecting..." : "Ready \u2014 Click to connect" })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error })
+    ] });
+  }
+  if (mode === "create") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+        stop(e);
+        setMode("menu");
+      }, style: { background: "none", border: "none", color: "rgba(255,255,255,0.4)", cursor: "pointer", fontSize: "12px", marginBottom: "12px", padding: 0 }, children: "\u2190 Back" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: "13px", marginBottom: "16px" }, children: "Create a new web wallet with a generated recovery phrase." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "password",
+          placeholder: "Set password (min 6 chars)",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          onClick: stop,
+          style: S.input
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+        stop(e);
+        handleAction("create");
+      }, disabled: loading, style: S.primaryBtn(loading), children: loading ? "Creating..." : "Create Wallet" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error })
+    ] });
+  }
+  if (mode === "import") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+        stop(e);
+        setMode("menu");
+      }, style: { background: "none", border: "none", color: "rgba(255,255,255,0.4)", cursor: "pointer", fontSize: "12px", marginBottom: "12px", padding: 0 }, children: "\u2190 Back" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: "13px", marginBottom: "16px" }, children: "Import wallet from recovery phrase." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          placeholder: "Enter 12 or 24 word recovery phrase",
+          value: mnemonic,
+          onChange: (e) => setMnemonic(e.target.value),
+          onClick: stop,
+          style: { ...S.input, minHeight: "80px", resize: "vertical", fontFamily: "monospace", fontSize: "13px" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "password",
+          placeholder: "Set password (min 6 chars)",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          onClick: stop,
+          style: S.input
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+        stop(e);
+        handleAction("import");
+      }, disabled: loading, style: S.primaryBtn(loading), children: loading ? "Importing..." : "Import & Connect" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: "13px", marginBottom: "16px", lineHeight: 1.5 }, children: isWebProvider ? "Create or import a web wallet \u2014 no extension needed." : "Web wallet not available. Call registerWebWallet() at app startup." }),
+    isWebProvider && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setMode("create");
+            setError("");
+          },
+          style: S.walletBtn(false),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", borderRadius: "10px", background: "linear-gradient(135deg, #3B82F6, #6366F1)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "18px", flexShrink: 0 }, children: "+" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "14px" }, children: "Create New Wallet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" }, children: "Generate a new recovery phrase" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            stop(e);
+            setMode("import");
+            setError("");
+          },
+          style: S.walletBtn(false),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", borderRadius: "10px", background: "linear-gradient(135deg, #F59E0B, #EF4444)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v12" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 11 4 4 4-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "14px" }, children: "Import Wallet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" }, children: "Use existing recovery phrase" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.error, children: error })
+  ] });
+}
+function SuccessView({ address }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "24px 0" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      width: "56px",
+      height: "56px",
+      borderRadius: "50%",
+      backgroundColor: "rgba(110,185,168,0.12)",
+      border: "2px solid rgba(110,185,168,0.3)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      margin: "0 auto 16px"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontSize: "16px", fontWeight: 600, marginBottom: "6px" }, children: "Connected!" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "13px", fontFamily: "monospace" }, children: formatAddress(address) })
+  ] });
+}
+function WalletModal({ scanConnectRelay }) {
+  const { state, connect, closeModal } = useWallet();
+  const [activeTab, setActiveTab] = React2.useState("extension");
+  const [isMobile, setIsMobile] = React2.useState(false);
+  const [showSuccess, setShowSuccess] = React2.useState(false);
+  const statusOnOpenRef = React2.useRef(null);
+  const successTimerRef = React2.useRef(null);
+  const [dragY, setDragY] = React2.useState(0);
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const dragStartRef = React2.useRef(0);
+  const extensionDetected = isInstalled();
+  React2.useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 640);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  React2.useEffect(() => {
+    if (state.isModalOpen) {
+      statusOnOpenRef.current = state.status;
+      setActiveTab("extension");
+      setShowSuccess(false);
+    } else {
+      statusOnOpenRef.current = null;
+    }
+  }, [state.isModalOpen]);
+  React2.useEffect(() => {
+    if (state.isModalOpen && state.status === "connected" && state.accounts.length > 0 && !showSuccess && statusOnOpenRef.current !== "connected") {
+      setShowSuccess(true);
+      successTimerRef.current = setTimeout(() => {
+        closeModal();
+        setShowSuccess(false);
+      }, 1500);
+    }
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, [state.isModalOpen, state.status, state.accounts.length, showSuccess, closeModal]);
+  React2.useEffect(() => {
+    if (!state.isModalOpen) {
+      setShowSuccess(false);
+      setDragY(0);
+      setIsDragging(false);
+    }
+  }, [state.isModalOpen]);
+  const handleExtensionConnect = React2.useCallback(async () => {
+    try {
+      await connect();
+    } catch {
+    }
+  }, [connect]);
+  const handleTouchStart = (e) => {
+    if (!isMobile) return;
+    dragStartRef.current = e.touches[0].clientY;
+    setIsDragging(true);
+  };
+  const handleTouchMove = (e) => {
+    if (!isDragging || !isMobile) return;
+    const delta = e.touches[0].clientY - dragStartRef.current;
+    if (delta > 0) setDragY(delta);
+  };
+  const handleTouchEnd = () => {
+    if (!isMobile) return;
+    setIsDragging(false);
+    if (dragY > 120) closeModal();
+    setDragY(0);
+  };
+  if (!state.isModalOpen) return null;
+  const stop = (e) => e.stopPropagation();
+  const content = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showSuccess && state.status === "connected" && state.accounts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(SuccessView, { address: state.accounts[0]?.address || "" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.tabBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: (e) => {
+        stop(e);
+        setActiveTab("extension");
+      }, style: tabStyle(activeTab === "extension"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconExtension, {}),
+        " Extension"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: (e) => {
+        stop(e);
+        setActiveTab("scan");
+      }, style: tabStyle(activeTab === "scan"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconQR, {}),
+        " Scan"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: (e) => {
+        stop(e);
+        setActiveTab("webwallet");
+      }, style: tabStyle(activeTab === "webwallet"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconWeb, {}),
+        " Web Wallet"
+      ] })
+    ] }),
+    activeTab === "extension" && /* @__PURE__ */ jsxRuntime.jsx(
+      ExtensionTab,
+      {
+        onConnect: handleExtensionConnect,
+        extensionDetected,
+        connecting: state.status === "connecting",
+        error: state.error
+      }
+    ),
+    activeTab === "scan" && /* @__PURE__ */ jsxRuntime.jsx(ScanTab, { scanConnectRelay }),
+    activeTab === "webwallet" && /* @__PURE__ */ jsxRuntime.jsx(WebWalletTab, { onConnected: () => {
+    } }),
+    /* @__PURE__ */ jsxRuntime.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 keyframes = `
+    @keyframes swModalFadeIn {
+      from { opacity: 0; transform: scale(0.97) translateY(8px); }
+      to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    @keyframes swModalSlideUp {
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    }
+    @keyframes swModalPulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+  `;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.backdrop, 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" : "swModalSlideUp 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: S.header, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { style: S.title, children: "Connect Wallet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: closeModal, style: S.closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
+            ] }),
+            content
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: keyframes })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.backdrop, 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: S.dialog, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: S.title, children: "Connect Wallet" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: closeModal, style: S.closeBtn, children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
+      ] }),
+      content
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: keyframes })
+  ] });
+}
+var initialState = {
+  status: "disconnected",
+  accounts: [],
+  network: "devnet",
+  balance: null,
+  error: null,
+  isModalOpen: false,
+  scanConnectStatus: "idle"
+};
+function walletReducer(state, action) {
+  switch (action.type) {
+    case "CONNECTING":
+      return { ...state, status: "connecting", error: null };
+    case "CONNECTED":
+      return {
+        ...state,
+        status: "connected",
+        accounts: action.accounts,
+        network: action.network,
+        error: null
+        // Do NOT close modal here — let the modal show success state first
+      };
+    case "DISCONNECTED":
+      return { ...state, status: "disconnected", accounts: [], balance: null, error: null };
+    case "ERROR":
+      return { ...state, status: "error", error: action.error };
+    case "SET_BALANCE":
+      return { ...state, balance: action.balance };
+    case "SET_NETWORK":
+      return { ...state, network: action.network };
+    case "SET_ACCOUNTS":
+      return { ...state, accounts: action.accounts };
+    case "OPEN_MODAL":
+      return { ...state, isModalOpen: true };
+    case "CLOSE_MODAL":
+      return { ...state, isModalOpen: false, scanConnectStatus: "idle" };
+    case "RESET_ERROR":
+      return { ...state, error: null, status: state.accounts.length > 0 ? "connected" : "disconnected" };
+    case "SET_SCAN_STATUS":
+      return { ...state, scanConnectStatus: action.status };
+    default:
+      return state;
+  }
+}
+var WalletContext = React2.createContext(null);
+var DEFAULT_WALLETS = [
+  {
+    id: "sheep-wallet",
+    name: "Sheep Wallet",
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI4IiBmaWxsPSIjMDExQjI5Ii8+PHRleHQgeD0iNTAlIiB5PSI1NSUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzZFQjlBOCI+Uzwvc2VsZj48L3N2Zz4=",
+    downloadUrl: "https://rialo.io/wallet",
+    supportsREX: true,
+    supportsSfS: true,
+    supportsScanConnect: true
+  }
+];
+function WalletProvider({
+  children,
+  network: initialNetwork = "devnet",
+  autoConnect = true,
+  wallets: customWallets = [],
+  scanConnectRelay = "wss://relay.rialo.io",
+  onConnect,
+  onDisconnect,
+  onError,
+  onNetworkChange
+}) {
+  const [state, dispatch] = React2.useReducer(walletReducer, {
+    ...initialState,
+    network: initialNetwork
+  });
+  const walletRef = React2.useRef(null);
+  const providerRef = React2.useRef(void 0);
+  const connectingRef = React2.useRef(false);
+  const mountedRef = React2.useRef(true);
+  React2.useEffect(() => {
+    mountedRef.current = true;
+    walletRef.current = new SheepWallet();
+    waitForProvider(3e3).then((provider) => {
+      if (mountedRef.current) {
+        providerRef.current = provider;
+      }
+    });
+    return () => {
+      mountedRef.current = false;
+      walletRef.current?.destroy();
+    };
+  }, []);
+  React2.useEffect(() => {
+    const setupEvents = async () => {
+      const provider = await waitForProvider(3e3);
+      if (!provider || !mountedRef.current) return;
+      providerRef.current = provider;
+      const cleanups = [];
+      cleanups.push(
+        provider.on("disconnect", () => {
+          if (!mountedRef.current) return;
+          dispatch({ type: "DISCONNECTED" });
+          onDisconnect?.();
+        })
+      );
+      cleanups.push(
+        provider.on("accountsChanged", (data) => {
+          if (!mountedRef.current) return;
+          const accounts = normalizeAccounts(data);
+          dispatch({ type: "SET_ACCOUNTS", accounts });
+        })
+      );
+      cleanups.push(
+        provider.on("networkChanged", (data) => {
+          if (!mountedRef.current) return;
+          const { network } = data;
+          if (network) {
+            dispatch({ type: "SET_NETWORK", network });
+            onNetworkChange?.(network);
+          }
+        })
+      );
+      return () => {
+        cleanups.forEach((fn) => {
+          try {
+            fn();
+          } catch {
+          }
+        });
+      };
+    };
+    const cleanup = setupEvents();
+    return () => {
+      cleanup.then((fn) => fn?.());
+    };
+  }, [onDisconnect, onNetworkChange]);
+  React2.useEffect(() => {
+    if (!autoConnect) return;
+    if (state.status === "connected" || state.status === "connecting") return;
+    const tryAutoConnect = async () => {
+      const wallet = walletRef.current;
+      if (!wallet || !hasProvider()) return;
+      try {
+        const accounts = await wallet.checkSession();
+        if (accounts && accounts.length > 0 && mountedRef.current) {
+          dispatch({ type: "CONNECTED", accounts, network: wallet.network });
+          onConnect?.(accounts);
+        }
+      } catch {
+      }
+    };
+    const timer = setTimeout(tryAutoConnect, 500);
+    return () => clearTimeout(timer);
+  }, [autoConnect, onConnect]);
+  React2.useEffect(() => {
+    if (state.status !== "connected" || state.accounts.length === 0) return;
+    const refresh = async () => {
+      const wallet = walletRef.current;
+      if (!wallet || !mountedRef.current) return;
+      try {
+        const balance = await wallet.getBalance();
+        if (mountedRef.current) {
+          dispatch({ type: "SET_BALANCE", balance });
+        }
+      } catch {
+      }
+    };
+    refresh();
+    const interval = setInterval(refresh, 3e4);
+    return () => clearInterval(interval);
+  }, [state.status, state.accounts]);
+  const connect = React2.useCallback(async () => {
+    if (connectingRef.current) {
+      throw new Error("Connection already in progress");
+    }
+    const wallet = walletRef.current;
+    if (!wallet) {
+      const err = new Error("Wallet not initialized");
+      dispatch({ type: "ERROR", error: err });
+      throw err;
+    }
+    if (!hasProvider()) {
+      dispatch({ type: "OPEN_MODAL" });
+      return [];
     }
     connectingRef.current = true;
     dispatch({ type: "CONNECTING" });
@@ -767,7 +1587,7 @@ function WalletProvider({
       connectingRef.current = false;
     }
   }, [onConnect, onError]);
-  const disconnect = React.useCallback(async () => {
+  const disconnect = React2.useCallback(async () => {
     const wallet = walletRef.current;
     if (!wallet) return;
     try {
@@ -779,7 +1599,7 @@ function WalletProvider({
       onDisconnect?.();
     }
   }, [onDisconnect]);
-  const refreshBalance = React.useCallback(async () => {
+  const refreshBalance = React2.useCallback(async () => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") return;
     try {
@@ -790,7 +1610,7 @@ function WalletProvider({
     } catch {
     }
   }, [state.status]);
-  const switchNetwork = React.useCallback(async (network) => {
+  const switchNetwork = React2.useCallback(async (network) => {
     const wallet = walletRef.current;
     if (!wallet) return;
     await wallet.switchNetwork(network);
@@ -799,68 +1619,68 @@ function WalletProvider({
       onNetworkChange?.(network);
     }
   }, [onNetworkChange]);
-  const signMessage = React.useCallback(async (message) => {
+  const signMessage = React2.useCallback(async (message) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.signMessage(message);
   }, [state.status]);
-  const signTransaction = React.useCallback(async (tx) => {
+  const signTransaction = React2.useCallback(async (tx) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.signTransaction(tx);
   }, [state.status]);
-  const sendTransaction = React.useCallback(async (tx) => {
+  const sendTransaction = React2.useCallback(async (tx) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.sendTransaction(tx);
   }, [state.status]);
-  const signAndSendTransaction = React.useCallback(async (tx) => {
+  const signAndSendTransaction = React2.useCallback(async (tx) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.signAndSendTransaction(tx);
   }, [state.status]);
-  const getREXCapabilities = React.useCallback(async () => {
+  const getREXCapabilities = React2.useCallback(async () => {
     const wallet = walletRef.current;
     if (!wallet) return { supported: false, privacyModes: [], maxInputSize: 0, programs: [] };
     return wallet.getREXCapabilities();
   }, []);
-  const submitREXTransaction = React.useCallback(async (tx) => {
+  const submitREXTransaction = React2.useCallback(async (tx) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.submitREXTransaction(tx);
   }, [state.status]);
-  const sendGaslessTransaction = React.useCallback(async (tx) => {
+  const sendGaslessTransaction = React2.useCallback(async (tx) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.sendGaslessTransaction(tx);
   }, [state.status]);
-  const getSfSPositions = React.useCallback(async () => {
+  const getSfSPositions = React2.useCallback(async () => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") return [];
     return wallet.getSfSPositions();
   }, [state.status]);
-  const createSfSPosition = React.useCallback(async (params) => {
+  const createSfSPosition = React2.useCallback(async (params) => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") throw new Error("Wallet not connected");
     return wallet.createSfSPosition(params);
   }, [state.status]);
-  const getSfSCredits = React.useCallback(async () => {
+  const getSfSCredits = React2.useCallback(async () => {
     const wallet = walletRef.current;
     if (!wallet || state.status !== "connected") {
       return { available: "0", usedThisEpoch: "0", totalEarned: "0", estimatedPerEpoch: "0" };
     }
     return wallet.getSfSCredits();
   }, [state.status]);
-  const openModal = React.useCallback(() => dispatch({ type: "OPEN_MODAL" }), []);
-  const closeModal = React.useCallback(() => dispatch({ type: "CLOSE_MODAL" }), []);
-  const wallets = React.useMemo(() => {
-    const installed = isInstalled();
+  const openModal = React2.useCallback(() => dispatch({ type: "OPEN_MODAL" }), []);
+  const closeModal = React2.useCallback(() => dispatch({ type: "CLOSE_MODAL" }), []);
+  const wallets = React2.useMemo(() => {
+    const extensionInstalled = isInstalled();
     return [...DEFAULT_WALLETS, ...customWallets].map((w) => ({
       ...w,
-      installed: w.id === "sheep-wallet" ? installed : false
+      installed: w.id === "sheep-wallet" ? extensionInstalled : false
     }));
   }, [customWallets]);
-  const value = React.useMemo(() => ({
+  const value = React2.useMemo(() => ({
     state,
     connected: state.status === "connected",
     connecting: state.status === "connecting",
@@ -907,17 +1727,11 @@ function WalletProvider({
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(WalletContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      WalletModal,
-      {
-        scanConnectRelay,
-        dispatch
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(WalletModal, { scanConnectRelay })
   ] });
 }
 function useWallet() {
-  const context = React.useContext(WalletContext);
+  const context = React2.useContext(WalletContext);
   if (!context) {
     throw new Error("useWallet must be used within WalletProvider");
   }
@@ -962,8 +1776,8 @@ function useSendTransaction() {
 }
 function useREX() {
   const { getREXCapabilities, submitREXTransaction, connected } = useWallet();
-  const [capabilities, setCapabilities] = React.useState(null);
-  React.useEffect(() => {
+  const [capabilities, setCapabilities] = React2.useState(null);
+  React2.useEffect(() => {
     if (connected) {
       getREXCapabilities().then(setCapabilities).catch(() => {
       });
@@ -975,674 +1789,72 @@ function useREX() {
     submitREXTransaction,
     connected
   };
-}
-function useSfS() {
-  const { getSfSPositions, createSfSPosition, getSfSCredits, sendGaslessTransaction, connected } = useWallet();
-  const [positions, setPositions] = React.useState([]);
-  const [credits, setCredits] = React.useState(null);
-  const refresh = React.useCallback(async () => {
-    if (!connected) return;
-    const [pos, cred] = await Promise.all([
-      getSfSPositions().catch(() => []),
-      getSfSCredits().catch(() => null)
-    ]);
-    setPositions(pos);
-    if (cred) setCredits(cred);
-  }, [connected, getSfSPositions, getSfSCredits]);
-  React.useEffect(() => {
-    refresh();
-  }, [refresh]);
-  return {
-    positions,
-    credits,
-    hasCredits: BigInt(credits?.available ?? "0") > 0n,
-    createPosition: createSfSPosition,
-    sendGasless: sendGaslessTransaction,
-    refresh,
-    connected
-  };
-}
-function useScanConnect() {
-  const { wallet, state } = useWallet();
-  const [scanURI, setScanURI] = React.useState(null);
-  const [status, setStatus] = React.useState("idle");
-  const generateQR = React.useCallback(async () => {
-    if (!wallet) return;
-    setStatus("generating");
-    try {
-      const uri = await wallet.createScanSession();
-      setScanURI(uri);
-      setStatus("waiting");
-    } catch (error) {
-      setStatus("error");
-    }
-  }, [wallet]);
-  const approveSession = React.useCallback(async (sessionId) => {
-    if (!wallet) return [];
-    setStatus("approving");
-    try {
-      const accounts = await wallet.approveScanSession(sessionId);
-      setStatus("connected");
-      return accounts;
-    } catch {
-      setStatus("error");
-      return [];
-    }
-  }, [wallet]);
-  const rejectSession = React.useCallback(async (sessionId) => {
-    if (!wallet) return;
-    await wallet.rejectScanSession(sessionId);
-    setStatus("rejected");
-  }, [wallet]);
-  return {
-    scanURI,
-    status,
-    generateQR,
-    approveSession,
-    rejectSession
-  };
-}
-function WalletModal({ scanConnectRelay, dispatch }) {
-  const { state, wallets, connect, closeModal, isInstalled: installed } = useWallet();
-  const [activeTab, setActiveTab] = React.useState("extension");
-  const [scanMode, setScanMode] = React.useState("show-qr");
-  const [generatedURI, setGeneratedURI] = React.useState(null);
-  const [qrReady, setQRReady] = React.useState(false);
-  const canvasRef = React.useRef(null);
-  const [isMobile, setIsMobile] = React.useState(false);
-  const [dragY, setDragY] = React.useState(0);
-  const [isDragging, setIsDragging] = React.useState(false);
-  const dragStartRef = React.useRef(0);
-  const sheepWallet = wallets.find((w) => w.id === "sheep-wallet");
-  React.useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth < 640);
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, []);
-  React.useEffect(() => {
-    if (!state.isModalOpen) {
-      setDragY(0);
-      setIsDragging(false);
-    }
-  }, [state.isModalOpen]);
-  const stop = (e) => e.stopPropagation();
-  const handleConnect = async (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    try {
-      await connect();
-    } catch {
-    }
-  };
-  const generateScanSession = async () => {
-    dispatch({ type: "SET_SCAN_STATUS", status: "generating" });
-    const sessionId = crypto.randomUUID();
-    const topic = btoa(sessionId).slice(0, 32);
-    const uri = `rialo-wc://${sessionId}?relay=${encodeURIComponent(scanConnectRelay)}&topic=${topic}&networks=devnet`;
-    setGeneratedURI(uri);
-    dispatch({ type: "SET_SCAN_STATUS", status: "waiting" });
-    setQRReady(true);
-  };
-  React.useEffect(() => {
-    if (!qrReady || !generatedURI || !canvasRef.current) return;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const size = 200;
-    canvas.width = size;
-    canvas.height = size;
-    ctx.fillStyle = "#FFFFFF";
-    ctx.fillRect(0, 0, size, size);
-    ctx.fillStyle = "#011B29";
-    const gridSize = 25;
-    const cellSize = size / gridSize;
-    for (let y = 0; y < gridSize; y++) {
-      for (let x = 0; x < gridSize; x++) {
-        const isFinderArea = x < 7 && y < 7 || x >= gridSize - 7 && y < 7 || x < 7 && y >= gridSize - 7;
-        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);
-          continue;
-        }
-        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;
-    const logoX = (size - logoSize) / 2;
-    const logoY = (size - logoSize) / 2;
-    ctx.beginPath();
-    ctx.arc(size / 2, size / 2, logoSize / 2 + 4, 0, Math.PI * 2);
-    ctx.fillStyle = "#FFFFFF";
-    ctx.fill();
-    ctx.beginPath();
-    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";
-    ctx.font = "bold 22px sans-serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText("S", size / 2, size / 2 + 1);
-  }, [qrReady, generatedURI]);
-  React.useEffect(() => {
-    if (activeTab === "scan" && scanMode === "show-qr" && !generatedURI) {
-      generateScanSession();
-    }
-  }, [activeTab, scanMode]);
-  const handleTouchStart = (e) => {
-    if (!isMobile) return;
-    dragStartRef.current = e.touches[0].clientY;
-    setIsDragging(true);
-  };
-  const handleTouchMove = (e) => {
-    if (!isDragging || !isMobile) return;
-    const delta = e.touches[0].clientY - dragStartRef.current;
-    if (delta > 0) setDragY(delta);
-  };
-  const handleTouchEnd = () => {
-    if (!isMobile) return;
-    setIsDragging(false);
-    if (dragY > 120) closeModal();
-    setDragY(0);
-  };
-  if (!state.isModalOpen) return null;
-  const ExtensionIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3h5v5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H3v5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9 6-6" })
-  ] });
-  const QrIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 14h7v7h-7z" })
-  ] });
-  const CameraIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
-  ] });
-  const RefreshIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
-    /* @__PURE__ */ jsxRuntime.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"
+}
+function useSfS() {
+  const { getSfSPositions, createSfSPosition, getSfSCredits, sendGaslessTransaction, connected } = useWallet();
+  const [positions, setPositions] = React2.useState([]);
+  const [credits, setCredits] = React2.useState(null);
+  const refresh = React2.useCallback(async () => {
+    if (!connected) return;
+    const [pos, cred] = await Promise.all([
+      getSfSPositions().catch(() => []),
+      getSfSCredits().catch(() => null)
+    ]);
+    setPositions(pos);
+    if (cred) setCredits(cred);
+  }, [connected, getSfSPositions, getSfSCredits]);
+  React2.useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    positions,
+    credits,
+    hasCredits: BigInt(credits?.available ?? "0") > 0n,
+    createPosition: createSfSPosition,
+    sendGasless: sendGaslessTransaction,
+    refresh,
+    connected
   };
-  const renderContent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      display: "flex",
-      gap: "4px",
-      padding: "4px",
-      backgroundColor: "rgba(255,255,255,0.04)",
-      borderRadius: "14px",
-      marginBottom: "20px"
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            stop(e);
-            setActiveTab("extension");
-          },
-          style: {
-            ...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
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ExtensionIcon, {}),
-            " Extension"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            stop(e);
-            setActiveTab("scan");
-          },
-          style: {
-            ...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
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(QrIcon, {}),
-            " Scan to Connect"
-          ]
-        }
-      )
-    ] }),
-    activeTab === "extension" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      sheepWallet && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          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: "14px",
-            padding: "16px",
-            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.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { flex: 1, textAlign: "left" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 500, fontSize: "15px", marginBottom: "2px" }, children: sheepWallet.name }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                  display: "inline-block",
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "#F59E0B",
-                  animation: "walletModalPulse 1.2s infinite"
-                } }),
-                "Connecting..."
-              ] }) : installed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                  display: "inline-block",
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "#6EB9A8"
-                } }),
-                "Detected \u2014 Click to connect"
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                  display: "inline-block",
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "rgba(255,255,255,0.2)"
-                } }),
-                "Not installed"
-              ] }) })
-            ] }),
-            !installed && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-              color: "#6EB9A8",
-              fontSize: "12px",
-              fontWeight: 500,
-              padding: "4px 10px",
-              borderRadius: "8px",
-              backgroundColor: "rgba(110,185,168,0.1)"
-            }, children: "Install" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
-        padding: "5px 10px",
-        backgroundColor: `${badge.color}10`,
-        borderRadius: "8px",
-        border: `1px solid ${badge.color}18`,
-        display: "flex",
-        alignItems: "center",
-        gap: "6px"
-      }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: badge.color, fontSize: "11px", fontWeight: 600 }, children: badge.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.35)", fontSize: "10px" }, children: badge.desc })
-      ] }, badge.label)) })
-    ] }),
-    activeTab === "scan" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: ["show-qr", "scan-qr"].map((mode) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(QrIcon, {}),
-            " Show QR"
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CameraIcon, {}),
-            " Scan QR"
-          ] })
-        },
-        mode
-      )) }),
-      scanMode === "show-qr" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
-          display: "inline-block",
-          padding: "16px",
-          backgroundColor: "#FFFFFF",
-          borderRadius: "16px",
-          position: "relative"
-        }, children: [
-          [
-            { top: -2, left: -2, borderTop: "3px solid #6EB9A8", borderLeft: "3px solid #6EB9A8", borderTopLeftRadius: "12px" },
-            { top: -2, right: -2, borderTop: "3px solid #6EB9A8", borderRight: "3px solid #6EB9A8", borderTopRightRadius: "12px" },
-            { bottom: -2, left: -2, borderBottom: "3px solid #6EB9A8", borderLeft: "3px solid #6EB9A8", borderBottomLeftRadius: "12px" },
-            { bottom: -2, right: -2, borderBottom: "3px solid #6EB9A8", borderRight: "3px solid #6EB9A8", borderBottomRightRadius: "12px" }
-          ].map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", width: "24px", height: "24px", ...s } }, i)),
-          /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, style: { width: "200px", height: "200px", display: "block" } })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-            width: "7px",
-            height: "7px",
-            borderRadius: "50%",
-            backgroundColor: state.scanConnectStatus === "waiting" ? "#6EB9A8" : "#F59E0B",
-            animation: "walletModalPulse 2s infinite"
-          } }),
-          /* @__PURE__ */ jsxRuntime.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...",
-            state.scanConnectStatus === "connected" && "Connected!",
-            state.scanConnectStatus === "error" && "Connection failed. Try again.",
-            state.scanConnectStatus === "idle" && "Initializing..."
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              stop(e);
-              generateScanSession();
-            },
-            style: {
-              marginTop: "12px",
-              padding: "8px 16px",
-              backgroundColor: "transparent",
-              border: "1px solid rgba(255,255,255,0.08)",
-              borderRadius: "10px",
-              color: "#6EB9A8",
-              fontSize: "12px",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "6px",
-              transition: "all 0.15s"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RefreshIcon, {}),
-              " Refresh QR"
-            ]
-          }
-        )
-      ] }),
-      scanMode === "scan-qr" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
-          width: "100%",
-          height: "200px",
-          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__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.2)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CameraIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.3)", fontSize: "13px" }, children: "Camera access required" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                stop(e);
-                alert("Camera scanning requires HTTPS and camera permissions. This feature works in the installed extension.");
-              },
-              style: {
-                padding: "8px 20px",
-                backgroundColor: "#6EB9A8",
-                border: "none",
-                borderRadius: "10px",
-                color: "#011B29",
-                fontSize: "13px",
-                fontWeight: 500,
-                cursor: "pointer"
-              },
-              children: "Open Camera"
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    state.error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      marginTop: "16px",
-      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__ */ jsxRuntime.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"
+}
+function useScanConnect() {
+  const { wallet, state } = useWallet();
+  const [scanURI, setScanURI] = React2.useState(null);
+  const [status, setStatus] = React2.useState("idle");
+  const generateQR = React2.useCallback(async () => {
+    if (!wallet) return;
+    setStatus("generating");
+    try {
+      const uri = await wallet.createScanSession();
+      setScanURI(uri);
+      setStatus("waiting");
+    } catch (error) {
+      setStatus("error");
+    }
+  }, [wallet]);
+  const approveSession = React2.useCallback(async (sessionId) => {
+    if (!wallet) return [];
+    setStatus("approving");
+    try {
+      const accounts = await wallet.approveScanSession(sessionId);
+      setStatus("connected");
+      return accounts;
+    } catch {
+      setStatus("error");
+      return [];
+    }
+  }, [wallet]);
+  const rejectSession = React2.useCallback(async (sessionId) => {
+    if (!wallet) return;
+    await wallet.rejectScanSession(sessionId);
+    setStatus("rejected");
+  }, [wallet]);
+  return {
+    scanURI,
+    status,
+    generateQR,
+    approveSession,
+    rejectSession
   };
-  const CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
-  ] });
-  if (isMobile) {
-    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: "absolute",
-          inset: 0,
-          backgroundColor: "rgba(0,0,0,0.6)",
-          backdropFilter: "blur(8px)",
-          WebkitBackdropFilter: "blur(8px)"
-        },
-        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", { 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 walletModalFadeIn {
-          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.3; }
-        }
-      ` })
-  ] });
 }
 function ConnectButton({
   connectLabel = "Connect Wallet",
@@ -1654,19 +1866,12 @@ function ConnectButton({
   style
 }) {
   const { connected, connecting, connect, disconnect, activeAccount, state, openModal, isInstalled: installed } = useWallet();
-  const [showMenu, setShowMenu] = React__default.default.useState(false);
+  const [showMenu, setShowMenu] = React2__default.default.useState(false);
   const handleClick = async () => {
     if (connected) {
       setShowMenu(!showMenu);
     } else {
-      if (installed) {
-        try {
-          await connect();
-        } catch {
-        }
-      } else {
-        openModal();
-      }
+      openModal();
     }
   };
   const displayText = connected && activeAccount && showAddress ? `${activeAccount.address.slice(0, 6)}...${activeAccount.address.slice(-4)}` : connecting ? "Connecting..." : connectLabel;
@@ -1761,7 +1966,7 @@ function ConnectButton({
     )
   ] });
 }
-var WalletErrorBoundary = class extends React.Component {
+var WalletErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -1977,6 +2182,7 @@ exports.LoadingSpinner = LoadingSpinner;
 exports.NETWORKS = NETWORKS;
 exports.SheepWallet = SheepWallet;
 exports.WalletErrorBoundary = WalletErrorBoundary;
+exports.WalletModal = WalletModal;
 exports.WalletProvider = WalletProvider;
 exports.formatAddress = formatAddress;
 exports.formatBalance = formatBalance;