stellar-wallet-kit 2.0.0 → 2.0.3

package/dist/index.js

@@ -12,6 +12,7 @@ var React3__default = /*#__PURE__*/_interopDefault(React3);
 // src/types/index.ts
 var WalletType = /* @__PURE__ */ ((WalletType2) => {
   WalletType2["FREIGHTER"] = "freighter";
+  WalletType2["ALBEDO"] = "albedo";
   return WalletType2;
 })(WalletType || {});
 var NetworkType = /* @__PURE__ */ ((NetworkType2) => {
@@ -177,7 +178,131 @@ function groupBalancesByType(balances) {
   }, {});
 }
 
+// src/utils/albedoCallback.ts
+function openAlbedoPopup(url) {
+  const popup = window.open(
+    url,
+    "albedo",
+    "width=420,height=720,resizable=yes,scrollbars=yes"
+  );
+  if (!popup) {
+    throw new Error("Failed to open Albedo popup (blocked by browser)");
+  }
+  return popup;
+}
+function waitForAlbedoResult() {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error("Albedo response timeout"));
+    }, 2 * 60 * 1e3);
+    const parseResult = () => {
+      const params = new URLSearchParams(window.location.search);
+      if (!params.has("pubkey") && !params.has("signed_envelope_xdr") && !params.has("signed_xdr")) {
+        return;
+      }
+      clearTimeout(timeout);
+      const result = {};
+      params.forEach((value, key) => {
+        result[key] = value;
+      });
+      window.history.replaceState({}, document.title, window.location.pathname);
+      resolve(result);
+    };
+    parseResult();
+    window.addEventListener("popstate", parseResult);
+  });
+}
+function waitForAlbedoPopup() {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error("Albedo response timeout"));
+    }, 2 * 60 * 1e3);
+    function handler(event) {
+      if (event.origin !== window.location.origin || event.data?.type !== "ALBEDO_RESULT") {
+        return;
+      }
+      clearTimeout(timeout);
+      window.removeEventListener("message", handler);
+      resolve(event.data.payload);
+    }
+    window.addEventListener("message", handler);
+  });
+}
+
+// src/adapters/AlbedoAdapter.ts
+var AlbedoAdapter = class {
+  constructor() {
+    this.type = "albedo" /* ALBEDO */;
+  }
+  async isAvailable() {
+    return typeof window !== "undefined";
+  }
+  async connect() {
+    const url = new URL("https://albedo.link");
+    url.searchParams.set("intent", "public-key");
+    url.searchParams.set("app_name", "Stellar Wallet Kit");
+    url.searchParams.set("network", "testnet");
+    url.searchParams.set(
+      "callback",
+      `${window.location.origin}/albedo-callback`
+    );
+    url.searchParams.set("origin", window.location.origin);
+    openAlbedoPopup(url.toString());
+    const result = await waitForAlbedoPopup();
+    if (!result.pubkey) {
+      throw new Error("Albedo connection rejected");
+    }
+    return {
+      address: result.pubkey,
+      publicKey: result.pubkey
+    };
+  }
+  async disconnect() {
+  }
+  async getPublicKey() {
+    return null;
+  }
+  async getNetwork() {
+    throw new Error("Albedo does not expose network");
+  }
+  async signTransaction(xdr, _options) {
+    const url = new URL("https://albedo.link");
+    url.searchParams.set("intent", "tx");
+    url.searchParams.set("xdr", xdr);
+    url.searchParams.set("app_name", "Stellar Wallet Kit");
+    url.searchParams.set("network", "testnet");
+    url.searchParams.set("callback", window.location.href);
+    url.searchParams.set("origin", window.location.origin);
+    window.location.href = url.toString();
+    const result = await waitForAlbedoResult();
+    if (!result.signed_envelope_xdr) {
+      throw new Error("Albedo signing rejected");
+    }
+    return { signedTxXdr: result.signed_envelope_xdr };
+  }
+  async signAuthEntry(entryXdr, _options) {
+    const url = new URL("https://albedo.link");
+    url.searchParams.set("intent", "sign-auth-entry");
+    url.searchParams.set("xdr", entryXdr);
+    url.searchParams.set("app_name", "Stellar Wallet Kit");
+    url.searchParams.set("network", "testnet");
+    url.searchParams.set("callback", window.location.href);
+    url.searchParams.set("origin", window.location.origin);
+    window.location.href = url.toString();
+    const result = await waitForAlbedoResult();
+    if (!result.signed_xdr) {
+      throw new Error("Albedo auth entry rejected");
+    }
+    return { signedAuthEntry: result.signed_xdr };
+  }
+};
+
 // src/context/WalletContext.tsx
+var DEFAULT_SUPPORTS = {
+  silentReconnect: false,
+  networkDetection: false,
+  authEntrySigning: false
+};
 var WalletContext = React3.createContext(void 0);
 var STORAGE_KEY = "stellar_wallet_kit";
 var getStorageData = () => {
@@ -202,7 +327,8 @@ var setStorageData = (data) => {
 };
 var isBrowser = typeof window !== "undefined";
 var walletAdapters = {
-  ["freighter" /* FREIGHTER */]: new FreighterAdapter()
+  ["freighter" /* FREIGHTER */]: new FreighterAdapter(),
+  ["albedo" /* ALBEDO */]: new AlbedoAdapter()
 };
 var walletMetadata = {
   ["freighter" /* FREIGHTER */]: {
@@ -210,14 +336,34 @@ var walletMetadata = {
     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"
+    downloadUrl: "https://chrome.google.com/webstore/detail/freighter/bcacfldlkkdogcmkkibnjlakofdplcbk",
+    kind: "extension",
+    capabilities: {
+      silentReconnect: true,
+      networkDetection: true,
+      authEntrySigning: true
+    }
+  },
+  ["albedo" /* ALBEDO */]: {
+    id: "albedo" /* ALBEDO */,
+    name: "Albedo",
+    icon: "https://stellar.creit.tech/wallet-icons/albedo.svg",
+    description: "Web-based Stellar wallet",
+    kind: "web",
+    capabilities: {
+      silentReconnect: false,
+      networkDetection: false,
+      authEntrySigning: true
+    }
   }
 };
 function WalletProvider({ config = {}, children }) {
   const [account, setAccount] = React3.useState(null);
   const [isConnecting, setIsConnecting] = React3.useState(false);
   const [error, setError] = React3.useState(null);
-  const [network, setNetwork] = React3.useState(config.network || "TESTNET" /* TESTNET */);
+  const [network, setNetwork] = React3.useState(
+    config.network || "TESTNET" /* TESTNET */
+  );
   const [selectedWallet, setSelectedWallet] = React3.useState(null);
   const [availableWallets, setAvailableWallets] = React3.useState([]);
   const [isLoadingBalances, setIsLoadingBalances] = React3.useState(false);
@@ -227,9 +373,14 @@ function WalletProvider({ config = {}, children }) {
     const checkWallets = async () => {
       const wallets = [];
       for (const [type, adapter] of Object.entries(walletAdapters)) {
-        const installed = await adapter.isAvailable();
+        const walletType = type;
+        const meta = walletMetadata[walletType];
+        let installed = true;
+        if (meta.kind === "extension") {
+          installed = await adapter.isAvailable();
+        }
         wallets.push({
-          ...walletMetadata[type],
+          ...meta,
           installed
         });
       }
@@ -265,42 +416,54 @@ function WalletProvider({ config = {}, children }) {
       setIsLoadingBalances(false);
     }
   }, [account?.publicKey, network]);
-  const connect = React3.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 });
+  const connect = React3.useCallback(
+    async (walletType) => {
+      setIsConnecting(true);
+      setError(null);
       try {
-        const balances = await fetchAccountBalances(response.publicKey, network);
-        setAccount((prev) => prev ? { ...prev, balances } : null);
-      } catch (balanceError) {
-        console.error("Failed to fetch initial balances:", balanceError);
+        const typeToConnect = walletType || config.defaultWallet || "freighter" /* FREIGHTER */;
+        const adapter = walletAdapters[typeToConnect];
+        if (!adapter) {
+          throw new Error(`Wallet adapter not found for ${typeToConnect}`);
+        }
+        const meta = walletMetadata[typeToConnect];
+        if (meta.kind === "extension") {
+          const available = await adapter.isAvailable();
+          if (!available) {
+            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;
+      } finally {
+        setIsConnecting(false);
       }
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Failed to connect wallet");
-      setError(error2);
-      throw error2;
-    } finally {
-      setIsConnecting(false);
-    }
-  }, [config.defaultWallet]);
+    },
+    [config.defaultWallet]
+  );
   const disconnect = React3.useCallback(async () => {
     try {
       if (selectedWallet) {
@@ -317,26 +480,35 @@ function WalletProvider({ config = {}, children }) {
       throw error2;
     }
   }, [selectedWallet]);
-  const signTransaction2 = React3.useCallback(async (xdr, options) => {
-    if (!selectedWallet) {
-      throw new Error("No wallet connected");
-    }
-    const adapter = walletAdapters[selectedWallet];
-    return adapter.signTransaction(xdr, options);
-  }, [selectedWallet]);
-  const signAuthEntry2 = React3.useCallback(async (entryXdr, options) => {
-    if (!selectedWallet) {
-      throw new Error("No wallet connected");
-    }
-    const adapter = walletAdapters[selectedWallet];
-    return adapter.signAuthEntry(entryXdr, options);
-  }, [selectedWallet]);
-  const switchNetwork = React3.useCallback(async (newNetwork) => {
-    setNetwork(newNetwork);
-    if (account?.publicKey) {
-      await refreshBalances();
-    }
-  }, [account?.publicKey, refreshBalances]);
+  const signTransaction2 = React3.useCallback(
+    async (xdr, options) => {
+      if (!selectedWallet) {
+        throw new Error("No wallet connected");
+      }
+      const adapter = walletAdapters[selectedWallet];
+      return adapter.signTransaction(xdr, options);
+    },
+    [selectedWallet]
+  );
+  const signAuthEntry2 = React3.useCallback(
+    async (entryXdr, options) => {
+      if (!selectedWallet) {
+        throw new Error("No wallet connected");
+      }
+      const adapter = walletAdapters[selectedWallet];
+      return adapter.signAuthEntry(entryXdr, options);
+    },
+    [selectedWallet]
+  );
+  const switchNetwork = React3.useCallback(
+    async (newNetwork) => {
+      setNetwork(newNetwork);
+      if (account?.publicKey) {
+        await refreshBalances();
+      }
+    },
+    [account?.publicKey, refreshBalances]
+  );
   React3.useEffect(() => {
     if (!account?.publicKey || !isBrowser) return;
     refreshBalances();
@@ -345,6 +517,17 @@ function WalletProvider({ config = {}, children }) {
     }, 3e4);
     return () => clearInterval(interval);
   }, [account?.publicKey, refreshBalances]);
+  const supports = React3.useMemo(() => {
+    if (!selectedWallet) {
+      return DEFAULT_SUPPORTS;
+    }
+    const meta = walletMetadata[selectedWallet];
+    return {
+      silentReconnect: !!meta.capabilities?.silentReconnect,
+      networkDetection: !!meta.capabilities?.networkDetection,
+      authEntrySigning: !!meta.capabilities?.authEntrySigning
+    };
+  }, [selectedWallet]);
   const value = React3.useMemo(
     () => ({
       account,
@@ -360,7 +543,8 @@ function WalletProvider({ config = {}, children }) {
       switchNetwork,
       availableWallets,
       refreshBalances,
-      isLoadingBalances
+      isLoadingBalances,
+      supports
     }),
     [
       account,
@@ -376,7 +560,8 @@ function WalletProvider({ config = {}, children }) {
       switchNetwork,
       availableWallets,
       refreshBalances,
-      isLoadingBalances
+      isLoadingBalances,
+      supports
     ]
   );
   return /* @__PURE__ */ React3__default.default.createElement(WalletContext.Provider, { value }, children);
@@ -398,216 +583,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 {
+          display: flex;
+          align-items: center;
+          gap: 14px;
+          padding: 14px 16px;
+          border-radius: 14px;
+          cursor: pointer;
+          transition: background 0.15s ease;
         }
-        .swk-wallet-button:hover {
-          background-color: ${theme?.buttonHoverColor || (isDark ? "#252525" : "#f5f5f5")} !important;
-          border-color: ${theme?.primaryColor || "#8b5cf6"} !important;
+
+        .swk-wallet:hover {
+          background: ${hover};
         }
-        .swk-close-button:hover {
-          color: ${theme?.primaryColor || "#8b5cf6"} !important;
+
+        .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", { 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",
+      `), /* @__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