stellar-wallet-kit 2.0.2 → 2.0.5

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var React3 = require('react');
 var freighterApi = require('@stellar/freighter-api');
+var appkitUniversalConnector = require('@reown/appkit-universal-connector');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -13,6 +14,8 @@ var React3__default = /*#__PURE__*/_interopDefault(React3);
 var WalletType = /* @__PURE__ */ ((WalletType2) => {
   WalletType2["FREIGHTER"] = "freighter";
   WalletType2["ALBEDO"] = "albedo";
+  WalletType2["WALLETCONNECT"] = "walletconnect";
+  WalletType2["LOBSTR"] = "lobstr";
   return WalletType2;
 })(WalletType || {});
 var NetworkType = /* @__PURE__ */ ((NetworkType2) => {
@@ -118,66 +121,6 @@ var FreighterAdapter = class {
   }
 };
 
-// src/utils/balanceUtils.ts
-var HORIZON_URLS = {
-  PUBLIC: "https://horizon.stellar.org",
-  TESTNET: "https://horizon-testnet.stellar.org",
-  FUTURENET: "https://horizon-futurenet.stellar.org",
-  STANDALONE: "http://localhost:8000"
-};
-async function fetchAccountBalances(publicKey, network) {
-  const horizonUrl = HORIZON_URLS[network];
-  try {
-    const response = await fetch(`${horizonUrl}/accounts/${publicKey}`);
-    if (!response.ok) {
-      if (response.status === 404) {
-        throw new Error("Account not found. Make sure the account is funded.");
-      }
-      throw new Error(`Failed to fetch account: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.balances;
-  } catch (error) {
-    console.error("Error fetching balances:", error);
-    throw error;
-  }
-}
-function getNativeBalance(balances) {
-  const nativeBalance = balances.find((b) => b.asset_type === "native");
-  return nativeBalance?.balance || "0";
-}
-function formatBalance(balance, decimals = 7) {
-  const num = parseFloat(balance);
-  if (isNaN(num)) return "0";
-  return num.toFixed(decimals).replace(/\.?0+$/, "");
-}
-function getAssetBalance(balances, assetCode, assetIssuer) {
-  if (!assetCode) {
-    return getNativeBalance(balances);
-  }
-  const asset = balances.find(
-    (b) => b.asset_code === assetCode && (!assetIssuer || b.asset_issuer === assetIssuer)
-  );
-  return asset?.balance || "0";
-}
-function hasSufficientBalance(balances, requiredAmount, assetCode, assetIssuer) {
-  const balance = getAssetBalance(balances, assetCode, assetIssuer);
-  return parseFloat(balance) >= parseFloat(requiredAmount);
-}
-function getTotalValueXLM(balances) {
-  return getNativeBalance(balances);
-}
-function groupBalancesByType(balances) {
-  return balances.reduce((acc, balance) => {
-    const type = balance.asset_type;
-    if (!acc[type]) {
-      acc[type] = [];
-    }
-    acc[type].push(balance);
-    return acc;
-  }, {});
-}
-
 // src/utils/albedoCallback.ts
 function openAlbedoPopup(url) {
   const popup = window.open(
@@ -297,39 +240,75 @@ var AlbedoAdapter = class {
   }
 };
 
+// src/utils/balanceUtils.ts
+var HORIZON_URLS = {
+  PUBLIC: "https://horizon.stellar.org",
+  TESTNET: "https://horizon-testnet.stellar.org",
+  FUTURENET: "https://horizon-futurenet.stellar.org",
+  STANDALONE: "http://localhost:8000"
+};
+async function fetchAccountBalances(publicKey, network) {
+  const horizonUrl = HORIZON_URLS[network];
+  try {
+    const response = await fetch(`${horizonUrl}/accounts/${publicKey}`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new Error("Account not found. Make sure the account is funded.");
+      }
+      throw new Error(`Failed to fetch account: ${response.statusText}`);
+    }
+    const data = await response.json();
+    return data.balances;
+  } catch (error) {
+    console.error("Error fetching balances:", error);
+    throw error;
+  }
+}
+function getNativeBalance(balances) {
+  const nativeBalance = balances.find((b) => b.asset_type === "native");
+  return nativeBalance?.balance || "0";
+}
+function formatBalance(balance, decimals = 7) {
+  const num = parseFloat(balance);
+  if (isNaN(num)) return "0";
+  return num.toFixed(decimals).replace(/\.?0+$/, "");
+}
+function getAssetBalance(balances, assetCode, assetIssuer) {
+  if (!assetCode) {
+    return getNativeBalance(balances);
+  }
+  const asset = balances.find(
+    (b) => b.asset_code === assetCode && (!assetIssuer || b.asset_issuer === assetIssuer)
+  );
+  return asset?.balance || "0";
+}
+function hasSufficientBalance(balances, requiredAmount, assetCode, assetIssuer) {
+  const balance = getAssetBalance(balances, assetCode, assetIssuer);
+  return parseFloat(balance) >= parseFloat(requiredAmount);
+}
+function getTotalValueXLM(balances) {
+  return getNativeBalance(balances);
+}
+function groupBalancesByType(balances) {
+  return balances.reduce((acc, balance) => {
+    const type = balance.asset_type;
+    if (!acc[type]) {
+      acc[type] = [];
+    }
+    acc[type].push(balance);
+    return acc;
+  }, {});
+}
+
 // src/context/WalletContext.tsx
+var STORAGE_KEY = "stellar_wallet_kit";
+var isBrowser = typeof window !== "undefined";
 var DEFAULT_SUPPORTS = {
   silentReconnect: false,
   networkDetection: false,
   authEntrySigning: false
 };
 var WalletContext = React3.createContext(void 0);
-var STORAGE_KEY = "stellar_wallet_kit";
-var getStorageData = () => {
-  if (typeof window === "undefined") {
-    return { selectedWallet: null, autoConnect: false };
-  }
-  try {
-    const data = localStorage.getItem(STORAGE_KEY);
-    return data ? JSON.parse(data) : { selectedWallet: null, autoConnect: false };
-  } catch {
-    return { selectedWallet: null, autoConnect: false };
-  }
-};
-var setStorageData = (data) => {
-  if (typeof window === "undefined") return;
-  try {
-    const existing = getStorageData();
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...existing, ...data }));
-  } catch (error) {
-    console.error("Failed to save to localStorage:", error);
-  }
-};
-var isBrowser = typeof window !== "undefined";
-var walletAdapters = {
-  ["freighter" /* FREIGHTER */]: new FreighterAdapter(),
-  ["albedo" /* ALBEDO */]: new AlbedoAdapter()
-};
 var walletMetadata = {
   ["freighter" /* FREIGHTER */]: {
     id: "freighter" /* FREIGHTER */,
@@ -355,11 +334,55 @@ var walletMetadata = {
       networkDetection: false,
       authEntrySigning: true
     }
+  },
+  ["walletconnect" /* WALLETCONNECT */]: {
+    id: "walletconnect" /* WALLETCONNECT */,
+    name: "WalletConnect",
+    icon: "https://walletconnect.com/walletconnect-logo.png",
+    description: "Connect mobile wallets via WalletConnect",
+    kind: "web",
+    capabilities: {
+      silentReconnect: true,
+      networkDetection: false,
+      authEntrySigning: false
+    }
+  },
+  ["lobstr" /* LOBSTR */]: {
+    id: "lobstr" /* LOBSTR */,
+    name: "LOBSTR",
+    icon: "https://lobstr.co/favicon.ico",
+    description: "LOBSTR mobile wallet",
+    kind: "web",
+    capabilities: {
+      silentReconnect: true,
+      networkDetection: false,
+      authEntrySigning: false
+    }
   }
 };
+function getStorageData() {
+  if (!isBrowser) {
+    return { selectedWallet: null, autoConnect: false };
+  }
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : { selectedWallet: null, autoConnect: false };
+  } catch {
+    return { selectedWallet: null, autoConnect: false };
+  }
+}
+function setStorageData(data) {
+  if (!isBrowser) return;
+  const existing = getStorageData();
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({ ...existing, ...data })
+  );
+}
 function WalletProvider({ config = {}, children }) {
   const [account, setAccount] = React3.useState(null);
   const [isConnecting, setIsConnecting] = React3.useState(false);
+  const [connectingWallet, setConnectingWallet] = React3.useState(null);
   const [error, setError] = React3.useState(null);
   const [network, setNetwork] = React3.useState(
     config.network || "TESTNET" /* TESTNET */
@@ -368,164 +391,138 @@ function WalletProvider({ config = {}, children }) {
   const [availableWallets, setAvailableWallets] = React3.useState([]);
   const [isLoadingBalances, setIsLoadingBalances] = React3.useState(false);
   const isConnected2 = !!account;
+  const walletAdapters = React3.useMemo(
+    () => ({
+      ["freighter" /* FREIGHTER */]: new FreighterAdapter(),
+      ["albedo" /* ALBEDO */]: new AlbedoAdapter(),
+      ...config.adapters ?? {}
+    }),
+    [config.adapters]
+  );
   React3.useEffect(() => {
     if (!isBrowser) return;
-    const checkWallets = async () => {
+    (async () => {
       const wallets = [];
-      for (const [type, adapter] of Object.entries(walletAdapters)) {
-        const walletType = type;
+      const entries = Object.entries(walletAdapters);
+      for (const [walletType, adapter] of entries) {
+        if (!adapter) continue;
         const meta = walletMetadata[walletType];
         let installed = true;
         if (meta.kind === "extension") {
           installed = await adapter.isAvailable();
         }
-        wallets.push({
-          ...meta,
-          installed
-        });
+        wallets.push({ ...meta, installed });
       }
       setAvailableWallets(wallets);
-    };
-    checkWallets();
-  }, []);
+    })();
+  }, [walletAdapters]);
   React3.useEffect(() => {
-    if (!isBrowser) return;
-    const autoConnectWallet = async () => {
-      const storage = getStorageData();
-      if (config.autoConnect && storage.selectedWallet) {
-        try {
-          await connect(storage.selectedWallet);
-        } catch (err) {
-          console.error("Auto-connect failed:", err);
-        }
-      }
-    };
-    autoConnectWallet();
+    if (!isBrowser || !config.autoConnect) return;
+    const { selectedWallet: selectedWallet2 } = getStorageData();
+    if (selectedWallet2) {
+      connect(selectedWallet2).catch(() => {
+      });
+    }
   }, [config.autoConnect]);
   const refreshBalances = React3.useCallback(async () => {
-    if (!account?.publicKey) {
-      return;
-    }
+    if (!account?.publicKey) return;
     setIsLoadingBalances(true);
     try {
-      const balances = await fetchAccountBalances(account.publicKey, network);
+      const balances = await fetchAccountBalances(
+        account.publicKey,
+        network
+      );
       setAccount((prev) => prev ? { ...prev, balances } : null);
-    } catch (err) {
-      console.error("Failed to fetch balances:", err);
     } finally {
       setIsLoadingBalances(false);
     }
   }, [account?.publicKey, network]);
   const connect = React3.useCallback(
     async (walletType) => {
+      const type = walletType || config.defaultWallet || "freighter" /* FREIGHTER */;
       setIsConnecting(true);
+      setConnectingWallet(type);
       setError(null);
       try {
-        const typeToConnect = walletType || config.defaultWallet || "freighter" /* FREIGHTER */;
-        const adapter = walletAdapters[typeToConnect];
+        const adapter = walletAdapters[type];
         if (!adapter) {
-          throw new Error(`Wallet adapter not found for ${typeToConnect}`);
+          throw new Error(`Wallet adapter not configured: ${type}`);
         }
-        const meta = walletMetadata[typeToConnect];
+        const meta = walletMetadata[type];
         if (meta.kind === "extension") {
-          const available = await adapter.isAvailable();
-          if (!available) {
+          const ok = await adapter.isAvailable();
+          if (!ok) {
             throw new Error(`${meta.name} is not installed`);
           }
         }
-        const response = await adapter.connect();
-        const newAccount = {
-          address: response.address,
-          publicKey: response.publicKey,
-          displayName: `${response.address.slice(
-            0,
-            4
-          )}...${response.address.slice(-4)}`
-        };
-        setAccount(newAccount);
-        setSelectedWallet(typeToConnect);
-        setStorageData({ selectedWallet: typeToConnect, autoConnect: true });
-        try {
-          const balances = await fetchAccountBalances(
-            response.publicKey,
-            network
-          );
-          setAccount((prev) => prev ? { ...prev, balances } : null);
-        } catch (balanceError) {
-          console.error("Failed to fetch initial balances:", balanceError);
-        }
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to connect wallet");
-        setError(error2);
-        throw error2;
+        const res = await adapter.connect();
+        setAccount({
+          address: res.address,
+          publicKey: res.publicKey,
+          displayName: `${res.address.slice(0, 4)}\u2026${res.address.slice(-4)}`
+        });
+        setSelectedWallet(type);
+        setStorageData({ selectedWallet: type, autoConnect: true });
+        await refreshBalances();
+      } catch (e) {
+        setError(e);
+        throw e;
       } finally {
         setIsConnecting(false);
+        setConnectingWallet(null);
       }
     },
-    [config.defaultWallet]
+    [config.defaultWallet, refreshBalances, walletAdapters]
   );
   const disconnect = React3.useCallback(async () => {
-    try {
-      if (selectedWallet) {
-        const adapter = walletAdapters[selectedWallet];
-        await adapter.disconnect();
-      }
-      setAccount(null);
-      setSelectedWallet(null);
-      setError(null);
-      setStorageData({ selectedWallet: null, autoConnect: false });
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Failed to disconnect wallet");
-      setError(error2);
-      throw error2;
+    if (selectedWallet) {
+      await walletAdapters[selectedWallet]?.disconnect();
     }
-  }, [selectedWallet]);
+    setAccount(null);
+    setSelectedWallet(null);
+    setError(null);
+    setStorageData({ selectedWallet: null, autoConnect: false });
+  }, [selectedWallet, walletAdapters]);
   const signTransaction2 = React3.useCallback(
-    async (xdr, options) => {
+    (xdr, options) => {
       if (!selectedWallet) {
         throw new Error("No wallet connected");
       }
       const adapter = walletAdapters[selectedWallet];
+      if (!adapter) {
+        throw new Error("Wallet adapter missing");
+      }
       return adapter.signTransaction(xdr, options);
     },
-    [selectedWallet]
+    [selectedWallet, walletAdapters]
   );
   const signAuthEntry2 = React3.useCallback(
-    async (entryXdr, options) => {
+    (entryXdr, options) => {
       if (!selectedWallet) {
         throw new Error("No wallet connected");
       }
       const adapter = walletAdapters[selectedWallet];
+      if (!adapter) {
+        throw new Error("Wallet adapter missing");
+      }
       return adapter.signAuthEntry(entryXdr, options);
     },
-    [selectedWallet]
+    [selectedWallet, walletAdapters]
   );
   const switchNetwork = React3.useCallback(
-    async (newNetwork) => {
-      setNetwork(newNetwork);
-      if (account?.publicKey) {
-        await refreshBalances();
-      }
+    async (n) => {
+      setNetwork(n);
+      await refreshBalances();
     },
-    [account?.publicKey, refreshBalances]
+    [refreshBalances]
   );
-  React3.useEffect(() => {
-    if (!account?.publicKey || !isBrowser) return;
-    refreshBalances();
-    const interval = setInterval(() => {
-      refreshBalances();
-    }, 3e4);
-    return () => clearInterval(interval);
-  }, [account?.publicKey, refreshBalances]);
   const supports = React3.useMemo(() => {
-    if (!selectedWallet) {
-      return DEFAULT_SUPPORTS;
-    }
-    const meta = walletMetadata[selectedWallet];
+    if (!selectedWallet) return DEFAULT_SUPPORTS;
+    const caps = walletMetadata[selectedWallet].capabilities;
     return {
-      silentReconnect: !!meta.capabilities?.silentReconnect,
-      networkDetection: !!meta.capabilities?.networkDetection,
-      authEntrySigning: !!meta.capabilities?.authEntrySigning
+      silentReconnect: caps?.silentReconnect ?? false,
+      networkDetection: caps?.networkDetection ?? false,
+      authEntrySigning: caps?.authEntrySigning ?? false
     };
   }, [selectedWallet]);
   const value = React3.useMemo(
@@ -533,6 +530,7 @@ function WalletProvider({ config = {}, children }) {
       account,
       isConnected: isConnected2,
       isConnecting,
+      connectingWallet,
       error,
       network,
       selectedWallet,
@@ -550,6 +548,7 @@ function WalletProvider({ config = {}, children }) {
       account,
       isConnected2,
       isConnecting,
+      connectingWallet,
       error,
       network,
       selectedWallet,
@@ -567,11 +566,11 @@ function WalletProvider({ config = {}, children }) {
   return /* @__PURE__ */ React3__default.default.createElement(WalletContext.Provider, { value }, children);
 }
 function useWallet() {
-  const context = React3.useContext(WalletContext);
-  if (context === void 0) {
+  const ctx = React3.useContext(WalletContext);
+  if (!ctx) {
     throw new Error("useWallet must be used within a WalletProvider");
   }
-  return context;
+  return ctx;
 }
 function WalletModal({
   isOpen,
@@ -583,216 +582,149 @@ function WalletModal({
   appIcon
 }) {
   React3.useEffect(() => {
-    const handleEsc = (e) => {
+    const onEsc = (e) => {
       if (e.key === "Escape") onClose();
     };
     if (isOpen) {
-      document.addEventListener("keydown", handleEsc);
+      document.addEventListener("keydown", onEsc);
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "unset";
+      document.removeEventListener("keydown", onEsc);
+      document.body.style.overflow = "auto";
     };
   }, [isOpen, onClose]);
   if (!isOpen) return null;
-  const themeMode = theme?.mode || "light";
-  const isDark = themeMode === "dark" || themeMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const styles = {
-    overlay: {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: theme?.overlayBackground || (isDark ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.5)"),
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      zIndex: 9999,
-      animation: "swk-fade-in 0.2s ease-out"
-    },
-    modal: {
-      backgroundColor: theme?.modalBackground || (isDark ? "#1a1a1a" : "#ffffff"),
-      borderRadius: theme?.borderRadius || "16px",
-      padding: "24px",
-      maxWidth: "420px",
-      width: "90%",
-      maxHeight: "80vh",
-      overflowY: "auto",
-      boxShadow: isDark ? "0 8px 32px rgba(0, 0, 0, 0.4)" : "0 8px 32px rgba(0, 0, 0, 0.1)",
-      animation: "swk-slide-up 0.3s ease-out",
-      fontFamily: theme?.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-    },
-    header: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: "24px"
-    },
-    title: {
-      fontSize: "20px",
-      fontWeight: 600,
-      color: theme?.textColor || (isDark ? "#ffffff" : "#000000"),
-      margin: 0,
-      display: "flex",
-      alignItems: "center",
-      gap: "12px"
-    },
-    closeButton: {
-      background: "none",
-      border: "none",
-      fontSize: "24px",
-      cursor: "pointer",
-      padding: "4px",
-      color: theme?.textColor || (isDark ? "#888888" : "#666666"),
-      transition: "color 0.2s",
-      lineHeight: 1
-    },
-    walletList: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "12px"
-    },
-    walletButton: {
-      display: "flex",
-      alignItems: "center",
-      gap: "16px",
-      padding: "16px",
-      border: `1px solid ${isDark ? "#333333" : "#e5e5e5"}`,
-      borderRadius: theme?.borderRadius || "12px",
-      background: "none",
-      cursor: "pointer",
-      transition: "all 0.2s",
-      width: "100%",
-      textAlign: "left",
-      fontFamily: "inherit"
-    },
-    walletIcon: {
-      width: "40px",
-      height: "40px",
-      borderRadius: "8px",
-      flexShrink: 0
-    },
-    walletInfo: {
-      flex: 1
-    },
-    walletName: {
-      fontSize: "16px",
-      fontWeight: 500,
-      color: theme?.textColor || (isDark ? "#ffffff" : "#000000"),
-      margin: 0,
-      marginBottom: "4px"
-    },
-    walletDescription: {
-      fontSize: "13px",
-      color: theme?.textColor || (isDark ? "#888888" : "#666666"),
-      margin: 0
-    },
-    badge: {
-      padding: "4px 8px",
-      borderRadius: "6px",
-      fontSize: "12px",
-      fontWeight: 500,
-      flexShrink: 0
-    },
-    installedBadge: {
-      backgroundColor: theme?.primaryColor || (isDark ? "#4CAF50" : "#4CAF50"),
-      color: "#ffffff"
-    },
-    notInstalledBadge: {
-      backgroundColor: isDark ? "#333333" : "#f0f0f0",
-      color: isDark ? "#888888" : "#666666"
-    },
-    footer: {
-      marginTop: "24px",
-      paddingTop: "16px",
-      borderTop: `1px solid ${isDark ? "#333333" : "#e5e5e5"}`,
-      fontSize: "13px",
-      color: isDark ? "#888888" : "#666666",
-      textAlign: "center"
-    },
-    link: {
-      color: theme?.primaryColor || "#8b5cf6",
-      textDecoration: "none"
-    }
-  };
-  const handleWalletClick = (wallet) => {
-    if (wallet.installed) {
-      onSelectWallet(wallet.id);
-    } else if (wallet.downloadUrl) {
-      window.open(wallet.downloadUrl, "_blank");
-    }
-  };
+  const isDark = theme?.mode === "dark" || theme?.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const bg = theme?.modalBackground || (isDark ? "#0f0f11" : "#ffffff");
+  const text = theme?.textColor || (isDark ? "#ffffff" : "#0a0a0a");
+  const muted = isDark ? "#8b8b8b" : "#6b6b6b";
+  const border = isDark ? "#1f1f23" : "#eaeaea";
+  const hover = theme?.buttonHoverColor || (isDark ? "#1a1a1f" : "#f6f6f6");
   return /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, /* @__PURE__ */ React3__default.default.createElement("style", null, `
-        @keyframes swk-fade-in {
-          from { opacity: 0; }
-          to { opacity: 1; }
+        .swk-overlay {
+          position: fixed;
+          inset: 0;
+          background: rgba(0,0,0,0.55);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 9999;
         }
-        @keyframes swk-slide-up {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+
+        .swk-modal {
+          width: 420px;
+          max-width: 92vw;
+          background: ${bg};
+          border-radius: 20px;
+          padding: 28px;
+          box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+          font-family: ${theme?.fontFamily || "Inter, system-ui, sans-serif"};
         }
-        .swk-wallet-button:hover {
-          background-color: ${theme?.buttonHoverColor || (isDark ? "#252525" : "#f5f5f5")} !important;
-          border-color: ${theme?.primaryColor || "#8b5cf6"} !important;
+
+        .swk-wallet {
+          display: flex;
+          align-items: center;
+          gap: 14px;
+          padding: 14px 16px;
+          border-radius: 14px;
+          cursor: pointer;
+          transition: background 0.15s ease;
         }
-        .swk-close-button:hover {
-          color: ${theme?.primaryColor || "#8b5cf6"} !important;
+
+        .swk-wallet:hover {
+          background: ${hover};
         }
-      `), /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.overlay, onClick: onClose }, /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.modal, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.header }, /* @__PURE__ */ React3__default.default.createElement("h2", { style: styles.title }, appIcon && /* @__PURE__ */ React3__default.default.createElement("img", { src: appIcon, alt: "", style: { width: "32px", height: "32px", borderRadius: "8px" } }), "Connect Wallet"), /* @__PURE__ */ React3__default.default.createElement(
-    "button",
+
+        .swk-pill {
+          font-size: 12px;
+          padding: 4px 10px;
+          border-radius: 999px;
+          background: ${theme?.primaryColor || "#6c5ce7"};
+          color: white;
+          font-weight: 500;
+        }
+      `), /* @__PURE__ */ React3__default.default.createElement("div", { className: "swk-overlay", onClick: onClose }, /* @__PURE__ */ React3__default.default.createElement("div", { className: "swk-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ React3__default.default.createElement(
+    "div",
     {
-      className: "swk-close-button",
-      style: styles.closeButton,
-      onClick: onClose,
-      "aria-label": "Close modal"
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        marginBottom: 8
+      }
     },
-    "\xD7"
-  )), /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.walletList }, wallets.map((wallet) => /* @__PURE__ */ React3__default.default.createElement(
-    "button",
+    appIcon && /* @__PURE__ */ React3__default.default.createElement(
+      "img",
+      {
+        src: appIcon,
+        alt: "",
+        style: { width: 32, height: 32, borderRadius: 8 }
+      }
+    ),
+    /* @__PURE__ */ React3__default.default.createElement("span", { style: { color: muted, fontSize: 14 } }, "Log in or sign up")
+  ), /* @__PURE__ */ React3__default.default.createElement(
+    "h2",
+    {
+      style: {
+        margin: 0,
+        fontSize: 22,
+        fontWeight: 600,
+        color: text
+      }
+    },
+    appName
+  )), /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, wallets.map((wallet, i) => /* @__PURE__ */ React3__default.default.createElement(
+    "div",
     {
       key: wallet.id,
-      className: "swk-wallet-button",
-      style: styles.walletButton,
-      onClick: () => handleWalletClick(wallet),
-      disabled: !wallet.installed && !wallet.downloadUrl
+      className: "swk-wallet",
+      onClick: () => onSelectWallet(wallet.id)
     },
     /* @__PURE__ */ React3__default.default.createElement(
       "img",
       {
         src: wallet.icon,
-        alt: `${wallet.name} icon`,
-        style: styles.walletIcon
+        alt: wallet.name,
+        style: { width: 36, height: 36, borderRadius: 10 }
       }
     ),
-    /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.walletInfo }, /* @__PURE__ */ React3__default.default.createElement("p", { style: styles.walletName }, wallet.name), wallet.description && /* @__PURE__ */ React3__default.default.createElement("p", { style: styles.walletDescription }, wallet.description)),
-    /* @__PURE__ */ React3__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React3__default.default.createElement(
       "div",
       {
         style: {
-          ...styles.badge,
-          ...wallet.installed ? styles.installedBadge : styles.notInstalledBadge
+          fontSize: 15,
+          fontWeight: 500,
+          color: text
         }
       },
-      wallet.installed ? "Installed" : "Get"
-    )
-  ))), /* @__PURE__ */ React3__default.default.createElement("div", { style: styles.footer }, /* @__PURE__ */ React3__default.default.createElement("p", { style: { margin: 0 } }, "Don't have a wallet?", " ", /* @__PURE__ */ React3__default.default.createElement(
-    "a",
+      wallet.name
+    ), wallet.description && /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: muted,
+          marginTop: 2
+        }
+      },
+      wallet.description
+    )),
+    i === 0 && /* @__PURE__ */ React3__default.default.createElement("div", { className: "swk-pill" }, "Recent")
+  ))), /* @__PURE__ */ React3__default.default.createElement(
+    "div",
     {
-      href: "https://www.stellar.org/ecosystem/projects#wallets",
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: styles.link
+      style: {
+        marginTop: 24,
+        paddingTop: 16,
+        borderTop: `1px solid ${border}`,
+        textAlign: "center",
+        fontSize: 13,
+        color: muted
+      }
     },
-    "Learn more"
-  ))))));
+    "Powered by Stellar Wallet Kit"
+  ))));
 }
 
 // src/components/ConnectButton.tsx
@@ -1006,13 +938,132 @@ function ConnectButton({
     "\u{1F6AA} Disconnect"
   )))));
 }
+var stellarTestnet = {
+  id: "testnet",
+  chainNamespace: "stellar",
+  caipNetworkId: "stellar:testnet",
+  name: "Stellar Testnet",
+  nativeCurrency: {
+    name: "XLM",
+    symbol: "XLM",
+    decimals: 7
+  },
+  rpcUrls: {
+    default: {
+      http: ["https://horizon-testnet.stellar.org"]
+    }
+  }
+};
+async function getUniversalConnector(projectId) {
+  return appkitUniversalConnector.UniversalConnector.init({
+    projectId,
+    metadata: {
+      name: "Stellar Wallet Kit",
+      description: "Connect Stellar wallets",
+      url: "https://stellar.org",
+      icons: []
+    },
+    networks: [
+      {
+        namespace: "stellar",
+        chains: [stellarTestnet],
+        methods: ["stellar_signTransaction"],
+        events: []
+      }
+    ]
+  });
+}
+
+// src/adapters/WalletConnectAdapter.ts
+var WalletConnectAdapter = class {
+  constructor(projectId) {
+    this.type = "walletconnect" /* WALLETCONNECT */;
+    this.connector = null;
+    this.session = null;
+    if (!projectId) {
+      throw new Error(
+        "WalletConnectAdapter requires a WalletConnect Project ID"
+      );
+    }
+    this.projectId = projectId;
+  }
+  async isAvailable() {
+    return typeof window !== "undefined";
+  }
+  async getConnector() {
+    if (!this.connector) {
+      this.connector = await getUniversalConnector(this.projectId);
+    }
+    return this.connector;
+  }
+  async connect() {
+    const connector = await this.getConnector();
+    const { session } = await connector.connect();
+    this.session = session;
+    const account = session.namespaces.stellar.accounts[0];
+    const publicKey = account.split(":")[2];
+    return {
+      address: publicKey,
+      publicKey
+    };
+  }
+  async disconnect() {
+    if (this.connector) {
+      await this.connector.disconnect();
+    }
+    this.session = null;
+  }
+  async getPublicKey() {
+    if (!this.session) return null;
+    const account = this.session.namespaces.stellar.accounts[0];
+    return account.split(":")[2];
+  }
+  async getNetwork() {
+    throw new Error("Network detection not supported via WalletConnect");
+  }
+  async signTransaction(xdr, _options) {
+    if (!this.connector || !this.session) {
+      throw new Error("No active WalletConnect session");
+    }
+    const result = await this.connector.request({
+      method: "stellar_signTransaction",
+      params: { xdr }
+    });
+    return {
+      signedTxXdr: result
+    };
+  }
+  async signAuthEntry(_entryXdr, _options) {
+    throw new Error(
+      "Auth entry signing is not supported via WalletConnect"
+    );
+  }
+};
+
+// src/wallets/createWalletAdapters.ts
+function createWalletAdapters(config) {
+  return {
+    // Extension wallet
+    ["freighter" /* FREIGHTER */]: new FreighterAdapter(),
+    // Web wallet
+    ["albedo" /* ALBEDO */]: new AlbedoAdapter(),
+    // WalletConnect (mobile wallets like Lobstr)
+    ...config.walletConnectProjectId ? {
+      ["walletconnect" /* WALLETCONNECT */]: new WalletConnectAdapter(
+        config.walletConnectProjectId
+      )
+    } : {}
+  };
+}
 
 exports.ConnectButton = ConnectButton;
 exports.FreighterAdapter = FreighterAdapter;
 exports.NetworkType = NetworkType;
+exports.WalletConnectAdapter = WalletConnectAdapter;
 exports.WalletModal = WalletModal;
 exports.WalletProvider = WalletProvider;
 exports.WalletType = WalletType;
+exports.createWalletAdapters = createWalletAdapters;
 exports.fetchAccountBalances = fetchAccountBalances;
 exports.formatBalance = formatBalance;
 exports.getAssetBalance = getAssetBalance;