stellar-wallet-kit 2.0.0

package/dist/index.mjs

@@ -0,0 +1,821 @@
+import React3, { createContext, useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { isConnected, isAllowed, setAllowed, getUserInfo, getNetwork, signTransaction, signAuthEntry } from '@stellar/freighter-api';
+
+// src/context/WalletContext.tsx
+
+// src/types/index.ts
+var WalletType = /* @__PURE__ */ ((WalletType2) => {
+  WalletType2["FREIGHTER"] = "freighter";
+  return WalletType2;
+})(WalletType || {});
+var NetworkType = /* @__PURE__ */ ((NetworkType2) => {
+  NetworkType2["PUBLIC"] = "PUBLIC";
+  NetworkType2["TESTNET"] = "TESTNET";
+  NetworkType2["FUTURENET"] = "FUTURENET";
+  NetworkType2["STANDALONE"] = "STANDALONE";
+  return NetworkType2;
+})(NetworkType || {});
+var FreighterAdapter = class {
+  constructor() {
+    this.type = "freighter" /* FREIGHTER */;
+  }
+  async isAvailable() {
+    try {
+      return await isConnected();
+    } catch (error) {
+      console.error("Error checking Freighter availability:", error);
+      return false;
+    }
+  }
+  async connect() {
+    try {
+      const connected = await isConnected();
+      if (!connected) {
+        throw new Error("Freighter wallet is not installed");
+      }
+      const allowed = await isAllowed();
+      if (!allowed) {
+        await setAllowed();
+      }
+      const userInfo = await getUserInfo();
+      if (!userInfo || !userInfo.publicKey) {
+        throw new Error("Failed to get user information from Freighter");
+      }
+      return {
+        address: userInfo.publicKey,
+        publicKey: userInfo.publicKey
+      };
+    } catch (error) {
+      console.error("Error connecting to Freighter:", error);
+      throw new Error(`Failed to connect to Freighter: ${error instanceof Error ? error.message : "Unknown error"}`);
+    }
+  }
+  async disconnect() {
+    console.log("Freighter disconnect requested - user must disconnect from extension");
+  }
+  async getPublicKey() {
+    try {
+      const allowed = await isAllowed();
+      if (!allowed) {
+        return null;
+      }
+      const userInfo = await getUserInfo();
+      return userInfo?.publicKey || null;
+    } catch (error) {
+      console.error("Error getting public key:", error);
+      return null;
+    }
+  }
+  async getNetwork() {
+    try {
+      const network = await getNetwork();
+      return network;
+    } catch (error) {
+      console.error("Error getting network:", error);
+      throw error;
+    }
+  }
+  async signTransaction(xdr, options) {
+    try {
+      const result = await signTransaction(xdr, {
+        network: options?.network,
+        networkPassphrase: options?.networkPassphrase,
+        accountToSign: options?.accountToSign
+      });
+      if (!result || typeof result !== "string") {
+        throw new Error("Invalid response from Freighter");
+      }
+      return {
+        signedTxXdr: result
+      };
+    } catch (error) {
+      console.error("Error signing transaction:", error);
+      throw new Error(`Failed to sign transaction: ${error instanceof Error ? error.message : "Unknown error"}`);
+    }
+  }
+  async signAuthEntry(entryXdr, options) {
+    try {
+      const result = await signAuthEntry(entryXdr, {
+        accountToSign: options?.accountToSign
+      });
+      if (!result || typeof result !== "string") {
+        throw new Error("Invalid response from Freighter");
+      }
+      return {
+        signedAuthEntry: result
+      };
+    } catch (error) {
+      console.error("Error signing auth entry:", error);
+      throw new Error(`Failed to sign auth entry: ${error instanceof Error ? error.message : "Unknown error"}`);
+    }
+  }
+};
+
+// 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 WalletContext = 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()
+};
+var walletMetadata = {
+  ["freighter" /* FREIGHTER */]: {
+    id: "freighter" /* FREIGHTER */,
+    name: "Freighter",
+    icon: "https://stellar.creit.tech/wallet-icons/freighter.svg",
+    description: "Freighter browser extension wallet",
+    downloadUrl: "https://chrome.google.com/webstore/detail/freighter/bcacfldlkkdogcmkkibnjlakofdplcbk"
+  }
+};
+function WalletProvider({ config = {}, children }) {
+  const [account, setAccount] = useState(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState(null);
+  const [network, setNetwork] = useState(config.network || "TESTNET" /* TESTNET */);
+  const [selectedWallet, setSelectedWallet] = useState(null);
+  const [availableWallets, setAvailableWallets] = useState([]);
+  const [isLoadingBalances, setIsLoadingBalances] = useState(false);
+  const isConnected2 = !!account;
+  useEffect(() => {
+    if (!isBrowser) return;
+    const checkWallets = async () => {
+      const wallets = [];
+      for (const [type, adapter] of Object.entries(walletAdapters)) {
+        const installed = await adapter.isAvailable();
+        wallets.push({
+          ...walletMetadata[type],
+          installed
+        });
+      }
+      setAvailableWallets(wallets);
+    };
+    checkWallets();
+  }, []);
+  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();
+  }, [config.autoConnect]);
+  const refreshBalances = useCallback(async () => {
+    if (!account?.publicKey) {
+      return;
+    }
+    setIsLoadingBalances(true);
+    try {
+      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 = useCallback(async (walletType) => {
+    setIsConnecting(true);
+    setError(null);
+    try {
+      const typeToConnect = walletType || config.defaultWallet || "freighter" /* FREIGHTER */;
+      const adapter = walletAdapters[typeToConnect];
+      if (!adapter) {
+        throw new Error(`Wallet adapter not found for ${typeToConnect}`);
+      }
+      const available = await adapter.isAvailable();
+      if (!available) {
+        throw new Error(`${walletMetadata[typeToConnect].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;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [config.defaultWallet]);
+  const disconnect = 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;
+    }
+  }, [selectedWallet]);
+  const signTransaction2 = useCallback(async (xdr, options) => {
+    if (!selectedWallet) {
+      throw new Error("No wallet connected");
+    }
+    const adapter = walletAdapters[selectedWallet];
+    return adapter.signTransaction(xdr, options);
+  }, [selectedWallet]);
+  const signAuthEntry2 = useCallback(async (entryXdr, options) => {
+    if (!selectedWallet) {
+      throw new Error("No wallet connected");
+    }
+    const adapter = walletAdapters[selectedWallet];
+    return adapter.signAuthEntry(entryXdr, options);
+  }, [selectedWallet]);
+  const switchNetwork = useCallback(async (newNetwork) => {
+    setNetwork(newNetwork);
+    if (account?.publicKey) {
+      await refreshBalances();
+    }
+  }, [account?.publicKey, refreshBalances]);
+  useEffect(() => {
+    if (!account?.publicKey || !isBrowser) return;
+    refreshBalances();
+    const interval = setInterval(() => {
+      refreshBalances();
+    }, 3e4);
+    return () => clearInterval(interval);
+  }, [account?.publicKey, refreshBalances]);
+  const value = useMemo(
+    () => ({
+      account,
+      isConnected: isConnected2,
+      isConnecting,
+      error,
+      network,
+      selectedWallet,
+      connect,
+      disconnect,
+      signTransaction: signTransaction2,
+      signAuthEntry: signAuthEntry2,
+      switchNetwork,
+      availableWallets,
+      refreshBalances,
+      isLoadingBalances
+    }),
+    [
+      account,
+      isConnected2,
+      isConnecting,
+      error,
+      network,
+      selectedWallet,
+      connect,
+      disconnect,
+      signTransaction2,
+      signAuthEntry2,
+      switchNetwork,
+      availableWallets,
+      refreshBalances,
+      isLoadingBalances
+    ]
+  );
+  return /* @__PURE__ */ React3.createElement(WalletContext.Provider, { value }, children);
+}
+function useWallet() {
+  const context = useContext(WalletContext);
+  if (context === void 0) {
+    throw new Error("useWallet must be used within a WalletProvider");
+  }
+  return context;
+}
+function WalletModal({
+  isOpen,
+  onClose,
+  wallets,
+  onSelectWallet,
+  theme,
+  appName = "Your App",
+  appIcon
+}) {
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEsc);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEsc);
+      document.body.style.overflow = "unset";
+    };
+  }, [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");
+    }
+  };
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("style", null, `
+        @keyframes swk-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes swk-slide-up {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .swk-wallet-button:hover {
+          background-color: ${theme?.buttonHoverColor || (isDark ? "#252525" : "#f5f5f5")} !important;
+          border-color: ${theme?.primaryColor || "#8b5cf6"} !important;
+        }
+        .swk-close-button:hover {
+          color: ${theme?.primaryColor || "#8b5cf6"} !important;
+        }
+      `), /* @__PURE__ */ React3.createElement("div", { style: styles.overlay, onClick: onClose }, /* @__PURE__ */ React3.createElement("div", { style: styles.modal, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React3.createElement("div", { style: styles.header }, /* @__PURE__ */ React3.createElement("h2", { style: styles.title }, appIcon && /* @__PURE__ */ React3.createElement("img", { src: appIcon, alt: "", style: { width: "32px", height: "32px", borderRadius: "8px" } }), "Connect Wallet"), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      className: "swk-close-button",
+      style: styles.closeButton,
+      onClick: onClose,
+      "aria-label": "Close modal"
+    },
+    "\xD7"
+  )), /* @__PURE__ */ React3.createElement("div", { style: styles.walletList }, wallets.map((wallet) => /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      key: wallet.id,
+      className: "swk-wallet-button",
+      style: styles.walletButton,
+      onClick: () => handleWalletClick(wallet),
+      disabled: !wallet.installed && !wallet.downloadUrl
+    },
+    /* @__PURE__ */ React3.createElement(
+      "img",
+      {
+        src: wallet.icon,
+        alt: `${wallet.name} icon`,
+        style: styles.walletIcon
+      }
+    ),
+    /* @__PURE__ */ React3.createElement("div", { style: styles.walletInfo }, /* @__PURE__ */ React3.createElement("p", { style: styles.walletName }, wallet.name), wallet.description && /* @__PURE__ */ React3.createElement("p", { style: styles.walletDescription }, wallet.description)),
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        style: {
+          ...styles.badge,
+          ...wallet.installed ? styles.installedBadge : styles.notInstalledBadge
+        }
+      },
+      wallet.installed ? "Installed" : "Get"
+    )
+  ))), /* @__PURE__ */ React3.createElement("div", { style: styles.footer }, /* @__PURE__ */ React3.createElement("p", { style: { margin: 0 } }, "Don't have a wallet?", " ", /* @__PURE__ */ React3.createElement(
+    "a",
+    {
+      href: "https://www.stellar.org/ecosystem/projects#wallets",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: styles.link
+    },
+    "Learn more"
+  ))))));
+}
+
+// src/components/ConnectButton.tsx
+function ConnectButton({
+  label = "Connect Wallet",
+  theme,
+  className,
+  style,
+  showBalance = false,
+  onConnect,
+  onDisconnect
+}) {
+  const {
+    account,
+    isConnected: isConnected2,
+    isConnecting,
+    connect,
+    disconnect,
+    availableWallets,
+    selectedWallet,
+    refreshBalances,
+    isLoadingBalances
+  } = useWallet();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const themeMode = theme?.mode || "light";
+  const isDark = themeMode === "dark" || themeMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const defaultButtonStyles = {
+    padding: "12px 24px",
+    borderRadius: theme?.borderRadius || "12px",
+    border: "none",
+    fontSize: "15px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.2s",
+    fontFamily: theme?.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    ...style
+  };
+  const connectButtonStyles = {
+    ...defaultButtonStyles,
+    backgroundColor: theme?.primaryColor || "#8b5cf6",
+    color: "#ffffff"
+  };
+  const accountButtonStyles = {
+    ...defaultButtonStyles,
+    backgroundColor: isDark ? "#252525" : "#f5f5f5",
+    color: theme?.textColor || (isDark ? "#ffffff" : "#000000"),
+    border: `1px solid ${isDark ? "#333333" : "#e5e5e5"}`,
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  };
+  const dropdownStyles = {
+    position: "absolute",
+    top: "calc(100% + 8px)",
+    right: 0,
+    backgroundColor: theme?.modalBackground || (isDark ? "#1a1a1a" : "#ffffff"),
+    border: `1px solid ${isDark ? "#333333" : "#e5e5e5"}`,
+    borderRadius: theme?.borderRadius || "12px",
+    padding: "8px",
+    minWidth: "200px",
+    boxShadow: isDark ? "0 4px 16px rgba(0, 0, 0, 0.4)" : "0 4px 16px rgba(0, 0, 0, 0.1)",
+    zIndex: 1e3
+  };
+  const dropdownItemStyles = {
+    padding: "12px 16px",
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    width: "100%",
+    textAlign: "left",
+    fontSize: "14px",
+    color: theme?.textColor || (isDark ? "#ffffff" : "#000000"),
+    borderRadius: "8px",
+    transition: "background-color 0.2s",
+    fontFamily: "inherit"
+  };
+  const handleConnect = async (walletType) => {
+    try {
+      await connect(walletType);
+      setIsModalOpen(false);
+      onConnect?.();
+    } catch (error) {
+      console.error("Connection error:", error);
+    }
+  };
+  const handleDisconnect = async () => {
+    try {
+      await disconnect();
+      setShowDropdown(false);
+      onDisconnect?.();
+    } catch (error) {
+      console.error("Disconnect error:", error);
+    }
+  };
+  const copyAddress = () => {
+    if (account?.address) {
+      navigator.clipboard.writeText(account.address);
+      setShowDropdown(false);
+    }
+  };
+  if (isConnecting) {
+    return /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        className,
+        style: connectButtonStyles,
+        disabled: true
+      },
+      "Connecting..."
+    );
+  }
+  if (!isConnected2 || !account) {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        className,
+        style: connectButtonStyles,
+        onClick: () => setIsModalOpen(true)
+      },
+      label
+    ), /* @__PURE__ */ React3.createElement(
+      WalletModal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        wallets: availableWallets,
+        onSelectWallet: handleConnect,
+        theme
+      }
+    ));
+  }
+  const walletIcon = availableWallets.find((w) => w.id === selectedWallet)?.icon;
+  const nativeBalance = account?.balances ? getNativeBalance(account.balances) : null;
+  const formattedBalance = nativeBalance ? formatBalance(nativeBalance, 2) : null;
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      className,
+      style: accountButtonStyles,
+      onClick: () => setShowDropdown(!showDropdown)
+    },
+    walletIcon && /* @__PURE__ */ React3.createElement(
+      "img",
+      {
+        src: walletIcon,
+        alt: "Wallet",
+        style: { width: "20px", height: "20px", borderRadius: "4px" }
+      }
+    ),
+    /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "2px" } }, /* @__PURE__ */ React3.createElement("span", null, account.displayName), showBalance && formattedBalance && /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px", opacity: 0.7, fontWeight: 400 } }, isLoadingBalances ? "..." : `${formattedBalance} XLM`)),
+    /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px", opacity: 0.7 } }, "\u25BC")
+  ), showDropdown && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 999
+      },
+      onClick: () => setShowDropdown(false)
+    }
+  ), /* @__PURE__ */ React3.createElement("div", { style: dropdownStyles }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      style: dropdownItemStyles,
+      onClick: () => {
+        refreshBalances();
+        setShowDropdown(false);
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = theme?.buttonHoverColor || (isDark ? "#333333" : "#f0f0f0");
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      }
+    },
+    "\u{1F504} Refresh Balances"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      style: dropdownItemStyles,
+      onClick: copyAddress,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = theme?.buttonHoverColor || (isDark ? "#333333" : "#f0f0f0");
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      }
+    },
+    "\u{1F4CB} Copy Address"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      style: {
+        ...dropdownItemStyles,
+        color: "#ef4444"
+      },
+      onClick: handleDisconnect,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = theme?.buttonHoverColor || (isDark ? "#333333" : "#f0f0f0");
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      }
+    },
+    "\u{1F6AA} Disconnect"
+  )))));
+}
+
+export { ConnectButton, FreighterAdapter, NetworkType, WalletModal, WalletProvider, WalletType, fetchAccountBalances, formatBalance, getAssetBalance, getNativeBalance, getTotalValueXLM, groupBalancesByType, hasSufficientBalance, useWallet };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map