@compass-labs/widgets 0.1.1 → 0.1.3

package/dist/index.js

@@ -81,6 +81,7 @@ var WalletContext = react.createContext(null);
 var disconnectedWallet = {
   address: null,
   isConnected: false,
+  walletChainId: void 0,
   signTypedData: async () => {
     throw new Error("No wallet connected. Please connect a wallet first.");
   },
@@ -92,6 +93,7 @@ function WalletProvider({ children, wallet }) {
   const value = wallet ? {
     address: wallet.address,
     isConnected: wallet.address !== null,
+    walletChainId: wallet.chainId,
     signTypedData: wallet.signTypedData,
     switchChain: wallet.switchChain ?? null,
     login: wallet.login ?? null,
@@ -1263,6 +1265,16 @@ function formatAmount(value) {
   if (isNaN(num)) return "0";
   return parseFloat(num.toFixed(6)).toString();
 }
+function formatUSD(value) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "$0.00";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(num);
+}
 function TokenSelector({
   tokens,
   selectedToken,
@@ -1384,8 +1396,8 @@ function DepositWithdrawForm({
   const [isSubmitting, setIsSubmitting] = react.useState(false);
   const [statusMessage, setStatusMessage] = react.useState("");
   const [error, setError] = react.useState(null);
-  const { address, isConnected, signTypedData } = useCompassWallet();
-  const { chainId } = useChain();
+  const { address, isConnected, signTypedData, switchChain } = useCompassWallet();
+  const { chainId, chain } = useChain();
   const { earnAccountAddress } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
   const needsSwap = activeTab === "deposit" && selectedToken !== venueToken;
@@ -1399,7 +1411,7 @@ function DepositWithdrawForm({
         );
         if (!response.ok) return "0";
         const data = await response.json();
-        return data.balances?.[selectedToken] || "0";
+        return data.balances?.[selectedToken]?.balance || "0";
       } catch {
         return "0";
       }
@@ -1423,6 +1435,15 @@ function DepositWithdrawForm({
     setStatusMessage("Preparing transaction...");
     setError(null);
     try {
+      const targetChainId = chain.viemChain.id;
+      if (switchChain) {
+        setStatusMessage("Switching network...");
+        try {
+          await switchChain(targetChainId);
+        } catch {
+          throw new Error(`Please switch your wallet to ${chain.name} to continue`);
+        }
+      }
       const isDeposit = activeTab === "deposit";
       if (isDeposit && needsSwap) {
         setStatusMessage("Getting swap quote...");
@@ -1570,6 +1591,7 @@ function DepositWithdrawForm({
     address,
     amount,
     chainId,
+    chain,
     activeTab,
     needsSwap,
     selectedToken,
@@ -1577,6 +1599,7 @@ function DepositWithdrawForm({
     venueType,
     venueAddress,
     signTypedData,
+    switchChain,
     queryClient,
     onSuccess,
     onError
@@ -2076,51 +2099,221 @@ function EarnAccountGuard({
     }
   );
 }
-var DEFAULT_TOKENS = ["SBC", "AUSD", "USDC", "USDT", "WETH", "DAI"];
-var APPROVAL_CACHE_KEY = "compass_approved_tokens";
-function getApprovalCacheKey(chain, owner) {
-  return `${APPROVAL_CACHE_KEY}_${chain}_${owner}`;
-}
-function getCachedApprovals(chain, owner) {
-  try {
-    const key = getApprovalCacheKey(chain, owner);
-    const cached = localStorage.getItem(key);
-    return cached ? new Set(JSON.parse(cached)) : /* @__PURE__ */ new Set();
-  } catch {
-    return /* @__PURE__ */ new Set();
-  }
-}
-function cacheApproval(chain, owner, token) {
-  try {
-    const key = getApprovalCacheKey(chain, owner);
-    const approvals = getCachedApprovals(chain, owner);
-    approvals.add(token);
-    localStorage.setItem(key, JSON.stringify([...approvals]));
-  } catch {
-  }
+function AccountBalancesModal({
+  isOpen,
+  onClose,
+  balances,
+  totalUsdValue,
+  isLoading = false,
+  earnAccountAddress
+}) {
+  react.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: { backgroundColor: "var(--compass-color-overlay)" },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative w-full max-w-md mx-4 rounded-xl overflow-hidden",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          boxShadow: "var(--compass-shadow-lg)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-4 py-3 border-b",
+              style: { borderColor: "var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "h2",
+                  {
+                    className: "font-semibold flex items-center gap-2",
+                    style: {
+                      fontSize: "var(--compass-font-size-subheading)",
+                      color: "var(--compass-color-text)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coins, { size: 20 }),
+                      "Account Balances"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "p-1 rounded-md transition-colors hover:opacity-70",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.Loader2,
+              {
+                size: 24,
+                className: "animate-spin",
+                style: { color: "var(--compass-color-primary)" }
+              }
+            ) }) : balances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "text-center py-8",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "No token balances found"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              balances.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between p-3 rounded-lg",
+                  style: { backgroundColor: "var(--compass-color-background)" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold",
+                          style: {
+                            backgroundColor: "var(--compass-color-primary-muted)",
+                            color: "var(--compass-color-primary)"
+                          },
+                          children: token.symbol.slice(0, 2)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: "font-medium",
+                            style: { color: "var(--compass-color-text)" },
+                            children: token.symbol
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: "text-sm font-mono",
+                            style: { color: "var(--compass-color-text-secondary)" },
+                            children: formatAmount(token.balance)
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "font-medium",
+                        style: { color: "var(--compass-color-text)" },
+                        children: formatUSD(token.usdValue)
+                      }
+                    )
+                  ]
+                },
+                token.symbol
+              )),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between p-3 mt-2 rounded-lg border",
+                  style: {
+                    borderColor: "var(--compass-color-border)",
+                    backgroundColor: "var(--compass-color-surface)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "font-medium",
+                        style: { color: "var(--compass-color-text-secondary)" },
+                        children: "Total Balance"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "font-bold text-lg",
+                        style: { color: "var(--compass-color-text)" },
+                        children: formatUSD(totalUsdValue)
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "mt-4 pt-4 border-t text-center",
+                style: { borderColor: "var(--compass-color-border)" },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "text-xs",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: [
+                      "Earn Account: ",
+                      earnAccountAddress.slice(0, 6),
+                      "...",
+                      earnAccountAddress.slice(-4)
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
+var TRANSFER_TOKENS = ["USDC"];
 function EarnAccountBalance({
-  tokens = DEFAULT_TOKENS,
   compact = false,
   onTransferComplete
 }) {
   const [isModalOpen, setIsModalOpen] = react.useState(false);
   const [activeAction, setActiveAction] = react.useState("deposit");
-  const [selectedToken, setSelectedToken] = react.useState(tokens[0]);
+  const [selectedToken, setSelectedToken] = react.useState(TRANSFER_TOKENS[0]);
   const [amount, setAmount] = react.useState("");
   const [transferState, setTransferState] = react.useState("idle");
   const [statusMessage, setStatusMessage] = react.useState("");
   const [error, setError] = react.useState(null);
-  const { address, isConnected, signTypedData } = useEmbeddableWallet();
-  const { chainId } = useChain();
+  const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
+  const { address, isConnected, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
+  const { chainId, chain } = useChain();
   const { earnAccountAddress, isDeployed } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
   const { data: balanceData, isLoading: balancesLoading } = reactQuery.useQuery({
-    queryKey: ["earnAccountBalances", chainId, address, tokens.join(",")],
+    queryKey: ["earnAccountBalances", chainId, address],
     queryFn: async () => {
       if (!address) return null;
       const response = await fetch(
-        `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}&tokens=${tokens.join(",")}`
+        `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}`
       );
       if (!response.ok) {
         throw new Error("Failed to fetch balances");
@@ -2131,19 +2324,41 @@ function EarnAccountBalance({
     staleTime: 30 * 1e3
   });
   const { data: eoaBalances } = reactQuery.useQuery({
-    queryKey: ["eoaBalances", chainId, address, tokens.join(",")],
+    queryKey: ["eoaBalances", chainId, address, TRANSFER_TOKENS.join(",")],
     queryFn: async () => {
       if (!address) return {};
       const balances = {};
+      for (const token of TRANSFER_TOKENS) {
+        try {
+          const response = await fetch(
+            `/api/compass/token/balance?chain=${chainId}&token=${token}&address=${address}`
+          );
+          if (response.ok) {
+            const data = await response.json();
+            balances[token] = data.balance || "0";
+          }
+        } catch {
+        }
+      }
       return balances;
     },
     enabled: !!address && activeAction === "deposit",
     staleTime: 30 * 1e3
   });
   const earnBalances = balanceData?.balances || {};
-  Object.values(earnBalances).reduce((sum, bal) => {
-    return sum + parseFloat(bal || "0");
-  }, 0);
+  const totalUsdValue = parseFloat(balanceData?.totalUsdValue || "0");
+  const tokenBalances = Object.entries(earnBalances).filter(([, data]) => {
+    const usdVal = parseFloat(data.usdValue || "0");
+    return usdVal > 0;
+  }).map(([symbol, data]) => ({
+    symbol,
+    balance: data.balance || "0",
+    usdValue: data.usdValue || "0"
+  }));
+  const earnBalanceAmounts = {};
+  for (const [symbol, data] of Object.entries(earnBalances)) {
+    earnBalanceAmounts[symbol] = data.balance;
+  }
   const resetForm = react.useCallback(() => {
     setAmount("");
     setTransferState("idle");
@@ -2167,7 +2382,7 @@ function EarnAccountBalance({
     if (activeAction === "deposit") {
       return eoaBalances?.[selectedToken] || "0";
     }
-    return earnBalances[selectedToken] || "0";
+    return earnBalanceAmounts[selectedToken] || "0";
   };
   const handleQuickAmount = (percentage) => {
     const max = parseFloat(getMaxBalance());
@@ -2178,55 +2393,70 @@ function EarnAccountBalance({
     if (!address || !amount || !signTypedData) return;
     setError(null);
     try {
+      const targetChainId = chain.viemChain.id;
+      if (walletChainId !== void 0 && walletChainId !== targetChainId) {
+        if (!switchChain) {
+          throw new Error(`Please switch your wallet to ${chain.name} (chain ID ${targetChainId}) to continue. Your wallet is currently on chain ID ${walletChainId}.`);
+        }
+        setStatusMessage(`Switching network to ${chain.name}...`);
+        try {
+          await switchChain(targetChainId);
+        } catch (switchError) {
+          throw new Error(`Please switch your wallet to ${chain.name} to continue. Your wallet is on chain ID ${walletChainId}, but ${chain.name} requires chain ID ${targetChainId}.`);
+        }
+      } else if (switchChain && walletChainId === void 0) {
+        setStatusMessage("Switching network...");
+        try {
+          await switchChain(targetChainId);
+        } catch (switchError) {
+          throw new Error(`Please switch your wallet to ${chain.name} to continue`);
+        }
+      }
       if (activeAction === "deposit") {
-        const cachedApprovals = getCachedApprovals(chainId, address);
-        if (!cachedApprovals.has(selectedToken)) {
-          setTransferState("checking_approval");
-          setStatusMessage("Checking token approval...");
-          const approveResponse = await fetch("/api/compass/transfer/approve", {
+        setTransferState("checking_approval");
+        setStatusMessage("Checking token approval...");
+        const approveResponse = await fetch("/api/compass/transfer/approve", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: chainId,
+            token: selectedToken
+          })
+        });
+        if (!approveResponse.ok) {
+          const errData = await approveResponse.json();
+          throw new Error(errData.error || "Failed to check approval");
+        }
+        const approvalData = await approveResponse.json();
+        if (!approvalData.approved) {
+          if (approvalData.requiresTransaction) {
+            throw new Error("This token requires a transaction-based approval. Please approve manually.");
+          }
+          setTransferState("awaiting_approval_signature");
+          setStatusMessage("Please sign the approval...");
+          const approvalSignature = await signTypedData({
+            domain: approvalData.domain,
+            types: approvalData.normalizedTypes,
+            primaryType: "Permit",
+            message: approvalData.message
+          });
+          setTransferState("approving");
+          setStatusMessage("Executing approval...");
+          const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               owner: address,
               chain: chainId,
-              token: selectedToken
+              eip712: approvalData.eip712,
+              signature: approvalSignature
             })
           });
-          if (!approveResponse.ok) {
-            const errData = await approveResponse.json();
-            throw new Error(errData.error || "Failed to check approval");
-          }
-          const approvalData = await approveResponse.json();
-          if (!approvalData.approved) {
-            if (approvalData.requiresTransaction) {
-              throw new Error("This token requires a transaction-based approval. Please approve manually.");
-            }
-            setTransferState("awaiting_approval_signature");
-            setStatusMessage("Please sign the approval...");
-            const approvalSignature = await signTypedData({
-              domain: approvalData.domain,
-              types: approvalData.normalizedTypes,
-              primaryType: "Permit",
-              message: approvalData.message
-            });
-            setTransferState("approving");
-            setStatusMessage("Executing approval...");
-            const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                owner: address,
-                chain: chainId,
-                eip712: approvalData.eip712,
-                signature: approvalSignature
-              })
-            });
-            if (!executeApprovalResponse.ok) {
-              const errData = await executeApprovalResponse.json();
-              throw new Error(errData.error || "Approval failed");
-            }
+          if (!executeApprovalResponse.ok) {
+            const errData = await executeApprovalResponse.json();
+            throw new Error(errData.error || "Approval failed");
           }
-          cacheApproval(chainId, address, selectedToken);
         }
       }
       setTransferState("awaiting_transfer_signature");
@@ -2290,7 +2520,10 @@ function EarnAccountBalance({
     activeAction,
     selectedToken,
     chainId,
+    chain,
+    walletChainId,
     signTypedData,
+    switchChain,
     queryClient,
     onTransferComplete,
     resetForm
@@ -2323,6 +2556,29 @@ function EarnAccountBalance({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsBalancesModalOpen(true),
+        className: `flex items-center gap-2 rounded-lg border transition-colors hover:border-[var(--compass-color-primary)] ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-primary)" } }),
+          balancesLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 12 : 14, className: "animate-spin", style: { color: "var(--compass-color-text-secondary)" } }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `font-medium ${compact ? "text-xs" : "text-sm"}`,
+              style: { color: "var(--compass-color-text)" },
+              children: formatUSD(totalUsdValue)
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2332,7 +2588,18 @@ function EarnAccountBalance({
           backgroundColor: "var(--compass-color-primary)",
           color: "var(--compass-color-primary-text)"
         },
-        children: "Transfer"
+        children: "Fund"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AccountBalancesModal,
+      {
+        isOpen: isBalancesModalOpen,
+        onClose: () => setIsBalancesModalOpen(false),
+        balances: tokenBalances,
+        totalUsdValue: totalUsdValue.toString(),
+        isLoading: balancesLoading,
+        earnAccountAddress: earnAccountAddress ?? void 0
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2378,10 +2645,10 @@ function EarnAccountBalance({
             /* @__PURE__ */ jsxRuntime.jsx(
               TokenSelector,
               {
-                tokens,
+                tokens: TRANSFER_TOKENS,
                 selectedToken,
                 onSelect: setSelectedToken,
-                balances: activeAction === "deposit" ? eoaBalances : earnBalances,
+                balances: activeAction === "deposit" ? eoaBalances : earnBalanceAmounts,
                 disabled: isProcessing
               }
             )
@@ -2633,9 +2900,9 @@ function useVaultsData(options = {}) {
   const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
-  const { sortBy = "apy_7d", assetFilter, minApy } = options;
+  const { sortBy = "apy_7d", assetFilter, minApy, minTvl } = options;
   const vaultsQuery = reactQuery.useQuery({
-    queryKey: ["vaults", chainId, sortBy, assetFilter, minApy],
+    queryKey: ["vaults", chainId, sortBy, assetFilter, minApy, minTvl],
     queryFn: async () => {
       const assetSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
       const response = await client.earn.earnVaults({
@@ -2665,6 +2932,12 @@ function useVaultsData(options = {}) {
           return apy >= minApy;
         });
       }
+      if (minTvl !== void 0 && minTvl > 0) {
+        vaults = vaults.filter((v) => {
+          const tvl = parseFloat(v.tvlUsd || "0");
+          return tvl >= minTvl;
+        });
+      }
       return vaults;
     },
     staleTime: 30 * 1e3
@@ -2730,6 +3003,8 @@ function VaultsList({
   defaultSort = "apy_7d",
   assetFilter,
   minApy,
+  minTvl: initialMinTvl,
+  showTvlFilter = true,
   onVaultSelect,
   onDeposit,
   onWithdraw
@@ -2737,11 +3012,18 @@ function VaultsList({
   const [searchQuery, setSearchQuery] = react.useState("");
   const [sortBy, setSortBy] = react.useState(defaultSort);
   const [selectedVault, setSelectedVault] = react.useState(null);
+  const [minTvlFilter, setMinTvlFilter] = react.useState(initialMinTvl);
+  const [showFilterPanel, setShowFilterPanel] = react.useState(false);
   const { vaults, isLoading, isError, refetch } = useVaultsData({
     sortBy,
     assetFilter,
-    minApy
+    minApy,
+    minTvl: minTvlFilter
   });
+  const handleMinTvlChange = react.useCallback((value) => {
+    const num = parseFloat(value);
+    setMinTvlFilter(isNaN(num) || num <= 0 ? void 0 : num);
+  }, []);
   const filteredVaults = react.useMemo(() => {
     if (!searchQuery) return vaults;
     const query = searchQuery.toLowerCase();
@@ -2769,49 +3051,116 @@ function VaultsList({
         /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
       ] })
     ] }),
-    (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
+    (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+            style: {
+              backgroundColor: "var(--compass-color-background)",
+              borderColor: "var(--compass-color-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search vaults...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  className: "flex-1 bg-transparent outline-none text-sm",
+                  style: { color: "var(--compass-color-text)" }
+                }
+              )
+            ]
+          }
+        ),
+        showSort && /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: sortBy,
+            onChange: (e) => setSortBy(e.target.value),
+            className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
+            style: {
+              backgroundColor: "var(--compass-color-background)",
+              borderColor: "var(--compass-color-border)",
+              color: "var(--compass-color-text)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_7d", children: "APY (7D)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_30d", children: "APY (30D)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_90d", children: "APY (90D)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "tvl", children: "TVL" })
+            ]
+          }
+        ),
+        showTvlFilter && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            className: "px-3 py-2 rounded-lg border text-sm flex items-center gap-2",
+            style: {
+              backgroundColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary-muted)" : "var(--compass-color-background)",
+              borderColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-border)",
+              color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { size: 14 }),
+              "Filter"
+            ]
+          }
+        )
+      ] }),
+      showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+          className: "flex items-center gap-3 p-3 rounded-lg border",
           style: {
-            backgroundColor: "var(--compass-color-background)",
+            backgroundColor: "var(--compass-color-surface)",
             borderColor: "var(--compass-color-border)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              "label",
               {
-                type: "text",
-                placeholder: "Search vaults...",
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                className: "flex-1 bg-transparent outline-none text-sm",
-                style: { color: "var(--compass-color-text)" }
+                className: "text-sm font-medium whitespace-nowrap",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Min TVL:"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "number",
+                  placeholder: "0",
+                  value: minTvlFilter || "",
+                  onChange: (e) => handleMinTvlChange(e.target.value),
+                  className: "w-24 px-2 py-1 rounded border text-sm bg-transparent",
+                  style: {
+                    borderColor: "var(--compass-color-border)",
+                    color: "var(--compass-color-text)"
+                  }
+                }
+              )
+            ] }),
+            minTvlFilter && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setMinTvlFilter(void 0),
+                className: "text-xs px-2 py-1 rounded",
+                style: {
+                  backgroundColor: "var(--compass-color-error-muted)",
+                  color: "var(--compass-color-error)"
+                },
+                children: "Clear"
               }
             )
           ]
         }
-      ),
-      showSort && /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: sortBy,
-          onChange: (e) => setSortBy(e.target.value),
-          className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
-          style: {
-            backgroundColor: "var(--compass-color-background)",
-            borderColor: "var(--compass-color-border)",
-            color: "var(--compass-color-text)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_7d", children: "APY (7D)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_30d", children: "APY (30D)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "apy_90d", children: "APY (90D)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "tvl", children: "TVL" })
-          ]
-        }
       )
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3223,9 +3572,9 @@ function usePendleData(options = {}) {
   const { client } = useEmbeddableApi();
   const { address } = useEmbeddableWallet();
   const { chainId } = useChain();
-  const { sortBy = "fixed_apy", assetFilter } = options;
+  const { sortBy = "fixed_apy", assetFilter, minTvl } = options;
   const marketsQuery = reactQuery.useQuery({
-    queryKey: ["pendleMarkets", chainId, sortBy, assetFilter],
+    queryKey: ["pendleMarkets", chainId, sortBy, assetFilter, minTvl],
     queryFn: async () => {
       const underlyingSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
       const orderBy = sortBy === "tvl" ? "tvl_usd" : "implied_apy";
@@ -3254,6 +3603,12 @@ function usePendleData(options = {}) {
           (m) => assetFilter.includes(m.underlyingSymbol.toUpperCase())
         );
       }
+      if (minTvl !== void 0 && minTvl > 0) {
+        markets = markets.filter((m) => {
+          const tvl = parseFloat(m.tvlUsd || "0");
+          return tvl >= minTvl;
+        });
+      }
       if (sortBy === "expiry") {
         markets.sort((a, b) => {
           return new Date(a.expiry).getTime() - new Date(b.expiry).getTime();
@@ -3339,6 +3694,8 @@ function PendleMarketsList({
   showSort = true,
   defaultSort = "fixed_apy",
   assetFilter,
+  minTvl: initialMinTvl,
+  showTvlFilter = true,
   onMarketSelect,
   onDeposit,
   onWithdraw
@@ -3346,7 +3703,13 @@ function PendleMarketsList({
   const [searchQuery, setSearchQuery] = react.useState("");
   const [sortBy, setSortBy] = react.useState(defaultSort);
   const [selectedMarket, setSelectedMarket] = react.useState(null);
-  const { markets, isLoading, isError, refetch } = usePendleData({ sortBy, assetFilter });
+  const [minTvlFilter, setMinTvlFilter] = react.useState(initialMinTvl);
+  const [showFilterPanel, setShowFilterPanel] = react.useState(false);
+  const { markets, isLoading, isError, refetch } = usePendleData({ sortBy, assetFilter, minTvl: minTvlFilter });
+  const handleMinTvlChange = react.useCallback((value) => {
+    const num = parseFloat(value);
+    setMinTvlFilter(isNaN(num) || num <= 0 ? void 0 : num);
+  }, []);
   const filteredMarkets = react.useMemo(() => {
     if (!searchQuery) return markets;
     const query = searchQuery.toLowerCase();
@@ -3374,48 +3737,115 @@ function PendleMarketsList({
         /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
       ] })
     ] }),
-    (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
+    (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+            style: {
+              backgroundColor: "var(--compass-color-background)",
+              borderColor: "var(--compass-color-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search markets...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  className: "flex-1 bg-transparent outline-none text-sm",
+                  style: { color: "var(--compass-color-text)" }
+                }
+              )
+            ]
+          }
+        ),
+        showSort && /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: sortBy,
+            onChange: (e) => setSortBy(e.target.value),
+            className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
+            style: {
+              backgroundColor: "var(--compass-color-background)",
+              borderColor: "var(--compass-color-border)",
+              color: "var(--compass-color-text)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "fixed_apy", children: "Fixed APY" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "tvl", children: "TVL" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "expiry", children: "Expiry" })
+            ]
+          }
+        ),
+        showTvlFilter && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            className: "px-3 py-2 rounded-lg border text-sm flex items-center gap-2",
+            style: {
+              backgroundColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary-muted)" : "var(--compass-color-background)",
+              borderColor: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-border)",
+              color: showFilterPanel || minTvlFilter ? "var(--compass-color-primary)" : "var(--compass-color-text)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { size: 14 }),
+              "Filter"
+            ]
+          }
+        )
+      ] }),
+      showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border",
+          className: "flex items-center gap-3 p-3 rounded-lg border",
           style: {
-            backgroundColor: "var(--compass-color-background)",
+            backgroundColor: "var(--compass-color-surface)",
             borderColor: "var(--compass-color-border)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              "label",
               {
-                type: "text",
-                placeholder: "Search markets...",
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                className: "flex-1 bg-transparent outline-none text-sm",
-                style: { color: "var(--compass-color-text)" }
+                className: "text-sm font-medium whitespace-nowrap",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Min TVL:"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "number",
+                  placeholder: "0",
+                  value: minTvlFilter || "",
+                  onChange: (e) => handleMinTvlChange(e.target.value),
+                  className: "w-24 px-2 py-1 rounded border text-sm bg-transparent",
+                  style: {
+                    borderColor: "var(--compass-color-border)",
+                    color: "var(--compass-color-text)"
+                  }
+                }
+              )
+            ] }),
+            minTvlFilter && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setMinTvlFilter(void 0),
+                className: "text-xs px-2 py-1 rounded",
+                style: {
+                  backgroundColor: "var(--compass-color-error-muted)",
+                  color: "var(--compass-color-error)"
+                },
+                children: "Clear"
               }
             )
           ]
         }
-      ),
-      showSort && /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: sortBy,
-          onChange: (e) => setSortBy(e.target.value),
-          className: "px-3 py-2 rounded-lg border text-sm cursor-pointer",
-          style: {
-            backgroundColor: "var(--compass-color-background)",
-            borderColor: "var(--compass-color-border)",
-            color: "var(--compass-color-text)"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "fixed_apy", children: "Fixed APY" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "tvl", children: "TVL" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "expiry", children: "Expiry" })
-          ]
-        }
       )
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3589,51 +4019,63 @@ function PendleMarketsList({
   ] });
 }
 function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
-  const { client } = useEmbeddableApi();
   const { chainId } = useChain();
+  const { address } = useCompassWallet();
   const query = reactQuery.useQuery({
-    queryKey: ["swapQuote", chainId, fromToken, toToken, amount],
+    queryKey: ["swapQuote", chainId, fromToken, toToken, amount, address],
     queryFn: async () => {
-      if (!fromToken || !toToken || !amount || parseFloat(amount) <= 0) {
+      if (!fromToken || !toToken || !amount || parseFloat(amount) <= 0 || !address) {
         return null;
       }
       try {
-        const estimatedRate = 1;
-        const outputAmount = (parseFloat(amount) * estimatedRate).toString();
+        const params = new URLSearchParams({
+          owner: address,
+          chain: chainId,
+          tokenIn: fromToken,
+          tokenOut: toToken,
+          amountIn: amount
+        });
+        const response = await fetch(`/api/compass/swap/quote?${params}`);
+        if (!response.ok) {
+          const errorData = await response.json();
+          const errorMessage = errorData.message || errorData.error || "Failed to get swap quote";
+          throw new Error(errorMessage);
+        }
+        const data = await response.json();
+        const outputAmount = data.estimatedAmountOut || "0";
+        const inputAmountNum = parseFloat(amount);
+        const outputAmountNum = parseFloat(outputAmount);
         return {
           inputAmount: amount,
           outputAmount,
-          rate: estimatedRate.toString(),
-          priceImpact: "0",
-          fee: "0"
+          rate: inputAmountNum > 0 ? (outputAmountNum / inputAmountNum).toString() : "0"
         };
       } catch (error) {
         console.error("Failed to get swap quote:", error);
-        return null;
+        throw error;
       }
     },
-    enabled: enabled && !!fromToken && !!toToken && !!amount && parseFloat(amount) > 0,
+    enabled: enabled && !!address && !!fromToken && !!toToken && !!amount && parseFloat(amount) > 0,
     staleTime: 10 * 1e3,
-    // 10 seconds - quotes change frequently
-    refetchInterval: 15 * 1e3
-    // Refresh every 15 seconds
+    refetchInterval: 15 * 1e3,
+    retry: 1
   });
   return {
     quote: query.data,
     isLoading: query.isLoading,
     isError: query.isError,
+    error: query.error,
     refetch: query.refetch
   };
 }
-var DEFAULT_TOKENS2 = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT"];
+var DEFAULT_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT", "AUSD", "SBC"];
 function SwapWidget({
   layout = "full",
   defaultFromToken = "ETH",
   defaultToToken = "USDC",
-  allowedTokens = DEFAULT_TOKENS2,
+  allowedTokens = DEFAULT_TOKENS,
   showReverseButton = true,
   showSettings = false,
-  showPriceImpact = true,
   onSwapSuccess,
   onSwapError
 }) {
@@ -3641,10 +4083,10 @@ function SwapWidget({
   const [toToken, setToToken] = react.useState(defaultToToken);
   const [fromAmount, setFromAmount] = react.useState("");
   const [isSwapping, setIsSwapping] = react.useState(false);
-  const { address, isConnected } = useCompassWallet();
-  const { client } = useEmbeddableApi();
+  const [swapStatus, setSwapStatus] = react.useState("");
+  const { address, isConnected, signTypedData } = useCompassWallet();
   const { chainId } = useChain();
-  const { quote, isLoading: isQuoteLoading } = useSwapQuote({
+  const { quote, isLoading: isQuoteLoading, error: quoteError } = useSwapQuote({
     fromToken,
     toToken,
     amount: fromAmount,
@@ -3658,32 +4100,74 @@ function SwapWidget({
   const handleSwap = react.useCallback(async () => {
     if (!address || !fromAmount || !quote) return;
     setIsSwapping(true);
+    setSwapStatus("Preparing swap...");
     try {
-      const response = await client.earn.earnSwap({
-        chain: chainId,
-        sender: address,
-        tokenIn: fromToken,
-        tokenOut: toToken,
-        humanReadableAmountIn: fromAmount
+      const prepareResponse = await fetch("/api/compass/swap/prepare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          tokenIn: fromToken,
+          tokenOut: toToken,
+          amountIn: fromAmount
+        })
+      });
+      if (!prepareResponse.ok) {
+        const error = await prepareResponse.json();
+        throw new Error(error.error || "Failed to prepare swap");
+      }
+      const prepareData = await prepareResponse.json();
+      const { eip712, normalizedTypes } = prepareData;
+      if (!eip712) {
+        throw new Error("No EIP-712 data returned from prepare");
+      }
+      setSwapStatus("Please sign the transaction...");
+      const signature = await signTypedData({
+        domain: eip712.domain,
+        types: normalizedTypes || eip712.types,
+        primaryType: "SafeTx",
+        message: eip712.message
+      });
+      setSwapStatus("Executing swap...");
+      const executeResponse = await fetch("/api/compass/swap/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          eip712,
+          signature
+        })
       });
-      console.log("Swap prepared:", response);
-      onSwapSuccess?.(fromToken, toToken, fromAmount, quote.outputAmount, "pending");
+      if (!executeResponse.ok) {
+        const error = await executeResponse.json();
+        throw new Error(error.error || "Failed to execute swap");
+      }
+      const executeData = await executeResponse.json();
+      const txHash = executeData.txHash;
+      setSwapStatus("Swap successful!");
+      onSwapSuccess?.(fromToken, toToken, fromAmount, quote.outputAmount, txHash);
       setFromAmount("");
+      setTimeout(() => setSwapStatus(""), 3e3);
     } catch (error) {
       console.error("Swap failed:", error);
+      setSwapStatus("");
       onSwapError?.(error);
     } finally {
       setIsSwapping(false);
     }
-  }, [address, fromAmount, quote, client, chainId, fromToken, toToken, onSwapSuccess, onSwapError]);
-  const isCompact = layout === "compact";
+  }, [address, fromAmount, quote, chainId, fromToken, toToken, signTypedData, onSwapSuccess, onSwapError]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-    !isCompact && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EarnAccountBalance, { compact: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-xl border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-xl border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3693,7 +4177,7 @@ function SwapWidget({
               value: fromAmount,
               onChange: (e) => setFromAmount(e.target.value),
               placeholder: "0.00",
-              className: "flex-1 bg-transparent outline-none text-2xl font-mono",
+              className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
               style: { color: "var(--compass-color-text)" }
             }
           ),
@@ -3702,9 +4186,9 @@ function SwapWidget({
             {
               value: fromToken,
               onChange: (e) => setFromToken(e.target.value),
-              className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer",
+              className: "px-3 py-2 rounded-lg border text-sm font-medium cursor-pointer flex-shrink-0",
               style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)" },
-              children: allowedTokens.map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
+              children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
             }
           )
         ] })
@@ -3724,7 +4208,7 @@ function SwapWidget({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
             "Loading..."
-          ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(6) : "0.00" }),
+          ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
@@ -3738,14 +4222,6 @@ function SwapWidget({
         ] })
       ] })
     ] }),
-    showPriceImpact && quote && parseFloat(quote.priceImpact) > 0.01 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg", style: { backgroundColor: "var(--compass-color-warning-muted)" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16, style: { color: "var(--compass-color-warning)" } }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", style: { color: "var(--compass-color-warning)" }, children: [
-        "Price impact: ",
-        (parseFloat(quote.priceImpact) * 100).toFixed(2),
-        "%"
-      ] })
-    ] }),
     quote && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rate" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
@@ -3757,6 +4233,34 @@ function SwapWidget({
         toToken
       ] })
     ] }),
+    quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-3 rounded-lg text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: quoteError.message })
+        ]
+      }
+    ),
+    swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-3 rounded-lg text-sm",
+        style: {
+          backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
+          color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)"
+        },
+        children: [
+          !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
+          swapStatus
+        ]
+      }
+    ),
     !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3792,78 +4296,29 @@ function SwapWidget({
     )
   ] });
 }
-
-// src/components/CompassEarnWidget/presets.ts
-var allTabs = [
+var tabs = [
   { id: "vaults", label: "Vaults", enabled: true },
   { id: "aave", label: "Aave", enabled: true },
   { id: "pendle", label: "Pendle", enabled: true },
   { id: "swap", label: "Swap", enabled: true }
 ];
-function getTabsForPreset(preset) {
-  switch (preset) {
-    case "full":
-      return allTabs;
-    case "earn-only":
-      return allTabs.map((tab) => ({
-        ...tab,
-        enabled: tab.id !== "swap"
-      }));
-    case "swap-only":
-      return allTabs.map((tab) => ({
-        ...tab,
-        enabled: tab.id === "swap"
-      }));
-    case "vaults-only":
-      return allTabs.map((tab) => ({
-        ...tab,
-        enabled: tab.id === "vaults"
-      }));
-    default:
-      return allTabs;
-  }
-}
-function getDefaultTab(tabs) {
-  const enabledTab = tabs.find((t) => t.enabled);
-  return enabledTab?.id || "vaults";
-}
 function CompassEarnWidget({
-  preset = "full",
-  enableVaults,
-  enableAave,
-  enablePendle,
-  enableSwap,
-  defaultTab,
-  showHeader = true,
+  defaultTab = "vaults",
   onTabChange
 }) {
-  const tabs = react.useMemo(() => {
-    const baseTabs = getTabsForPreset(preset);
-    return baseTabs.map((tab) => {
-      let enabled = tab.enabled;
-      if (tab.id === "vaults" && enableVaults !== void 0) enabled = enableVaults;
-      if (tab.id === "aave" && enableAave !== void 0) enabled = enableAave;
-      if (tab.id === "pendle" && enablePendle !== void 0) enabled = enablePendle;
-      if (tab.id === "swap" && enableSwap !== void 0) enabled = enableSwap;
-      return { ...tab, enabled };
-    });
-  }, [preset, enableVaults, enableAave, enablePendle, enableSwap]);
-  const enabledTabs = tabs.filter((t) => t.enabled);
-  const initialTab = defaultTab && tabs.find((t) => t.id === defaultTab)?.enabled ? defaultTab : getDefaultTab(tabs);
-  const [activeTab, setActiveTab] = react.useState(initialTab);
+  const [activeTab, setActiveTab] = react.useState(defaultTab);
   const handleTabChange = (tab) => {
     setActiveTab(tab);
     onTabChange?.(tab);
   };
-  const showTabs = enabledTabs.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-    showHeader && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-xl", style: { color: "var(--compass-color-text)" }, children: "Compass Earn" }),
-    showTabs && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-xl", style: { color: "var(--compass-color-text)" }, children: "Compass Earn" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "flex gap-1 p-1 rounded-lg",
         style: { backgroundColor: "var(--compass-color-surface)" },
-        children: enabledTabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => handleTabChange(tab.id),
@@ -3879,10 +4334,10 @@ function CompassEarnWidget({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      activeTab === "vaults" && tabs.find((t) => t.id === "vaults")?.enabled && /* @__PURE__ */ jsxRuntime.jsx(VaultsList, { showSearch: true, showSort: true }),
-      activeTab === "aave" && tabs.find((t) => t.id === "aave")?.enabled && /* @__PURE__ */ jsxRuntime.jsx(AaveMarketsList, { showSearch: true, showSort: true }),
-      activeTab === "pendle" && tabs.find((t) => t.id === "pendle")?.enabled && /* @__PURE__ */ jsxRuntime.jsx(PendleMarketsList, { showSearch: true, showSort: true }),
-      activeTab === "swap" && tabs.find((t) => t.id === "swap")?.enabled && /* @__PURE__ */ jsxRuntime.jsx(SwapWidget, { layout: "full" })
+      activeTab === "vaults" && /* @__PURE__ */ jsxRuntime.jsx(VaultsList, {}),
+      activeTab === "aave" && /* @__PURE__ */ jsxRuntime.jsx(AaveMarketsList, {}),
+      activeTab === "pendle" && /* @__PURE__ */ jsxRuntime.jsx(PendleMarketsList, {}),
+      activeTab === "swap" && /* @__PURE__ */ jsxRuntime.jsx(SwapWidget, {})
     ] })
   ] });
 }
@@ -3908,6 +4363,7 @@ var CHAINS = {
 };
 
 exports.AaveMarketsList = AaveMarketsList;
+exports.AccountBalancesModal = AccountBalancesModal;
 exports.ActionModal = ActionModal;
 exports.ApiProvider = ApiProvider;
 exports.CHAINS = CHAINS;