@compass-labs/widgets 0.1.0 → 0.1.2

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,
@@ -1123,7 +1125,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
     const prefix = value >= 0 ? "+" : "";
     return `${prefix}${value.toFixed(4)}`;
   };
-  const formatUSD = (value) => {
+  const formatUSD2 = (value) => {
     const usdValue = value * tokenPrice;
     const prefix = usdValue >= 0 ? "+$" : "-$";
     return `${prefix}${Math.abs(usdValue).toFixed(2)}`;
@@ -1200,7 +1202,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   children: formatPnL(unrealizedPnl)
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(unrealizedPnl) }, children: formatUSD(unrealizedPnl) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(unrealizedPnl) }, children: formatUSD2(unrealizedPnl) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1219,7 +1221,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   children: formatPnL(realizedPnl)
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(realizedPnl) }, children: formatUSD(realizedPnl) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", style: { color: pnlColor(realizedPnl) }, children: formatUSD2(realizedPnl) })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1244,7 +1246,7 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-mono", style: { color: pnlColor(totalPnl) }, children: [
                     "(",
-                    formatUSD(totalPnl),
+                    formatUSD2(totalPnl),
                     ")"
                   ] })
                 ] })
@@ -1256,161 +1258,327 @@ function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
     )
   ] });
 }
-var CHAINS = {
-  ethereum: {
-    id: "ethereum",
-    name: "Ethereum",
-    viemChain: chains.mainnet,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
-  },
-  base: {
-    id: "base",
-    name: "Base",
-    viemChain: chains.base,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
-  },
-  arbitrum: {
-    id: "arbitrum",
-    name: "Arbitrum",
-    viemChain: chains.arbitrum,
-    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
-  }
-};
-var TOKEN_DECIMALS = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
+
+// src/utils/format.ts
+function formatAmount(value) {
+  const num = typeof value === "string" ? parseFloat(value) : 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,
+  onSelect,
+  balances,
+  showBalances = true,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (token) => {
+    onSelect(token);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        className: "flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors min-w-[120px]",
+        style: {
+          backgroundColor: "var(--compass-color-background)",
+          borderColor: isOpen ? "var(--compass-color-primary)" : "var(--compass-color-border)",
+          color: "var(--compass-color-text)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium flex-1 text-left", children: selectedToken }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              size: 16,
+              style: {
+                color: "var(--compass-color-text-secondary)",
+                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute z-50 mt-1 w-full min-w-[160px] rounded-lg border overflow-y-auto",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)",
+          boxShadow: "var(--compass-shadow-lg)",
+          maxHeight: "200px"
+        },
+        children: tokens.map((token) => {
+          const balance = balances?.[token];
+          const isSelected = token === selectedToken;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect(token),
+              className: "w-full px-3 py-2 flex items-center justify-between transition-colors",
+              style: {
+                backgroundColor: isSelected ? "var(--compass-color-primary-muted)" : "transparent",
+                color: "var(--compass-color-text)"
+              },
+              onMouseEnter: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.backgroundColor = "var(--compass-color-surface-hover)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: token }),
+                showBalances && balance && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-sm font-mono",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: formatAmount(balance)
+                  }
+                )
+              ]
+            },
+            token
+          );
+        })
+      }
+    )
+  ] });
+}
 function DepositWithdrawForm({
   venueType,
   venueAddress,
-  tokenSymbol,
-  tokenDecimals,
+  venueToken,
+  depositTokens = ["SBC", "AUSD", "USDC", "USDT", "WETH", "DAI"],
   positionBalance = "0",
   onSuccess,
   onError
 }) {
   const [activeTab, setActiveTab] = react.useState("deposit");
+  const [selectedToken, setSelectedToken] = react.useState(venueToken);
   const [amount, setAmount] = react.useState("");
   const [isSubmitting, setIsSubmitting] = react.useState(false);
   const [statusMessage, setStatusMessage] = react.useState("");
   const [error, setError] = react.useState(null);
   const { address, isConnected, signTypedData, switchChain } = useCompassWallet();
-  const { client } = useEmbeddableApi();
-  const { chainId } = useChain();
+  const { chainId, chain } = useChain();
   const { earnAccountAddress } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
-  const chainConfig = CHAINS[chainId];
-  const targetChainId = chainConfig?.viemChain?.id;
+  const needsSwap = activeTab === "deposit" && selectedToken !== venueToken;
   const { data: tokenBalance } = reactQuery.useQuery({
-    queryKey: ["earnAccountTokenBalance", chainId, earnAccountAddress, tokenSymbol],
+    queryKey: ["earnAccountTokenBalance", chainId, earnAccountAddress, selectedToken],
     queryFn: async () => {
       if (!earnAccountAddress) return "0";
       try {
-        const response = await client.token.tokenBalance({
-          chain: chainId,
-          user: earnAccountAddress,
-          token: tokenSymbol
-        });
-        return response.amount || "0";
-      } catch (error2) {
-        console.error("Error fetching earn account token balance:", error2);
+        const response = await fetch(
+          `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}&tokens=${selectedToken}`
+        );
+        if (!response.ok) return "0";
+        const data = await response.json();
+        return data.balances?.[selectedToken]?.balance || "0";
+      } catch {
         return "0";
       }
     },
-    enabled: !!earnAccountAddress,
+    enabled: !!earnAccountAddress && !!address,
     staleTime: 10 * 1e3
   });
   const availableBalance = tokenBalance || "0";
   const maxBalance = activeTab === "deposit" ? availableBalance : positionBalance;
-  const handleQuickAmount = react.useCallback((percentage) => {
-    const max = parseFloat(maxBalance);
-    if (isNaN(max)) return;
-    setAmount((max * percentage).toFixed(tokenDecimals > 6 ? 6 : tokenDecimals));
-  }, [maxBalance, tokenDecimals]);
+  const handleQuickAmount = react.useCallback(
+    (percentage) => {
+      const max = parseFloat(maxBalance);
+      if (isNaN(max)) return;
+      setAmount(formatAmount(max * percentage));
+    },
+    [maxBalance]
+  );
   const handleSubmit = react.useCallback(async () => {
     if (!address || !amount) return;
     setIsSubmitting(true);
     setStatusMessage("Preparing transaction...");
     setError(null);
     try {
-      if (switchChain && targetChainId) {
-        setStatusMessage("Checking network...");
+      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";
-      const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
-      const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
-      const prepareBody = {
-        amount,
-        token: tokenSymbol,
-        owner: address,
-        chain: chainId,
-        venueType
-      };
-      if (venueType === "VAULT") {
-        prepareBody.vaultAddress = venueAddress;
-      } else if (venueType === "PENDLE_PT") {
-        prepareBody.marketAddress = venueAddress;
-        prepareBody.maxSlippagePercent = 1;
-      }
-      setStatusMessage("Getting transaction data...");
-      const prepareResponse = await fetch(prepareEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(prepareBody)
-      });
-      if (!prepareResponse.ok) {
-        const errorData = await prepareResponse.json();
-        throw new Error(errorData.error || "Failed to prepare transaction");
-      }
-      const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
-      setStatusMessage("Please sign the transaction...");
-      const signature = await signTypedData({
-        domain,
-        types: normalizedTypes,
-        primaryType: "SafeTx",
-        message
-      });
-      setStatusMessage("Executing transaction...");
-      const executeResponse = await fetch(executeEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
+      if (isDeposit && needsSwap) {
+        setStatusMessage("Getting swap quote...");
+        const quoteResponse = await fetch(
+          `/api/compass/swap/quote?owner=${address}&chain=${chainId}&tokenIn=${selectedToken}&tokenOut=${venueToken}&amountIn=${amount}`
+        );
+        if (!quoteResponse.ok) {
+          const errorData = await quoteResponse.json();
+          throw new Error(errorData.error || "Failed to get swap quote");
+        }
+        const quoteData = await quoteResponse.json();
+        const estimatedOutput = quoteData.estimatedAmountOut;
+        if (!estimatedOutput || parseFloat(estimatedOutput) <= 0) {
+          throw new Error("Invalid swap quote - no output amount");
+        }
+        const depositAmount = (parseFloat(estimatedOutput) * 0.99).toString();
+        setStatusMessage("Preparing swap and deposit...");
+        const bundleActions = [
+          {
+            body: {
+              actionType: "V2_SWAP",
+              tokenIn: selectedToken,
+              tokenOut: venueToken,
+              amountIn: amount,
+              maxSlippagePercent: 1
+            }
+          },
+          {
+            body: {
+              actionType: "V2_MANAGE",
+              action: "DEPOSIT",
+              venue: venueType === "VAULT" ? { type: "VAULT", vaultAddress: venueAddress } : venueType === "AAVE" ? { type: "AAVE", token: venueToken } : { type: "PENDLE_PT", marketAddress: venueAddress },
+              amount: depositAmount
+            }
+          }
+        ];
+        const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: chainId,
+            actions: bundleActions
+          })
+        });
+        if (!prepareResponse.ok) {
+          const errorData = await prepareResponse.json();
+          throw new Error(errorData.error || "Failed to prepare bundle");
+        }
+        const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
+        setStatusMessage("Please sign the transaction...");
+        const signature = await signTypedData({
+          domain,
+          types: normalizedTypes,
+          primaryType: "SafeTx",
+          message
+        });
+        setStatusMessage("Executing swap and deposit...");
+        const executeResponse = await fetch("/api/compass/bundle/execute", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            eip712,
+            signature,
+            chain: chainId
+          })
+        });
+        if (!executeResponse.ok) {
+          const errorData = await executeResponse.json();
+          throw new Error(errorData.error || "Failed to execute bundle");
+        }
+        const { txHash } = await executeResponse.json();
+        setStatusMessage("Transaction successful!");
+        onSuccess?.(activeTab, amount, txHash);
+        setAmount("");
+      } else {
+        const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
+        const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
+        const prepareBody = {
+          amount,
+          token: venueToken,
           owner: address,
-          eip712,
-          signature,
-          chain: chainId
-        })
-      });
-      if (!executeResponse.ok) {
-        const errorData = await executeResponse.json();
-        throw new Error(errorData.error || "Failed to execute transaction");
+          chain: chainId,
+          venueType
+        };
+        if (venueType === "VAULT") {
+          prepareBody.vaultAddress = venueAddress;
+        } else if (venueType === "PENDLE_PT") {
+          prepareBody.marketAddress = venueAddress;
+          prepareBody.maxSlippagePercent = 1;
+        }
+        setStatusMessage("Getting transaction data...");
+        const prepareResponse = await fetch(prepareEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(prepareBody)
+        });
+        if (!prepareResponse.ok) {
+          const errorData = await prepareResponse.json();
+          throw new Error(errorData.error || "Failed to prepare transaction");
+        }
+        const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
+        setStatusMessage("Please sign the transaction...");
+        const signature = await signTypedData({
+          domain,
+          types: normalizedTypes,
+          primaryType: "SafeTx",
+          message
+        });
+        setStatusMessage("Executing transaction...");
+        const executeResponse = await fetch(executeEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            eip712,
+            signature,
+            chain: chainId
+          })
+        });
+        if (!executeResponse.ok) {
+          const errorData = await executeResponse.json();
+          throw new Error(errorData.error || "Failed to execute transaction");
+        }
+        const { txHash } = await executeResponse.json();
+        setStatusMessage("Transaction successful!");
+        onSuccess?.(activeTab, amount, txHash);
+        setAmount("");
       }
-      const { txHash } = await executeResponse.json();
-      setStatusMessage("Transaction successful!");
-      onSuccess?.(activeTab, amount, txHash);
-      setAmount("");
       queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
       queryClient.invalidateQueries({ queryKey: ["vaults"] });
-      queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
       queryClient.invalidateQueries({ queryKey: ["aaveMarkets"] });
-      queryClient.invalidateQueries({ queryKey: ["aavePositions"] });
       queryClient.invalidateQueries({ queryKey: ["pendleMarkets"] });
-      queryClient.invalidateQueries({ queryKey: ["pendlePositions"] });
       setTimeout(() => setStatusMessage(""), 3e3);
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ["earnAccountTokenBalance"] });
-        queryClient.invalidateQueries({ queryKey: ["vaults"] });
-        queryClient.invalidateQueries({ queryKey: ["vaultPositions"] });
-      }, 5e3);
     } catch (err) {
       console.error("Transaction failed:", err);
       const errorMessage = err instanceof Error ? err.message : "Transaction failed";
@@ -1423,11 +1591,13 @@ function DepositWithdrawForm({
     address,
     amount,
     chainId,
-    targetChainId,
+    chain,
     activeTab,
+    needsSwap,
+    selectedToken,
+    venueToken,
     venueType,
     venueAddress,
-    tokenSymbol,
     signTypedData,
     switchChain,
     queryClient,
@@ -1468,6 +1638,7 @@ function DepositWithdrawForm({
           {
             onClick: () => {
               setActiveTab(tab);
+              setSelectedToken(venueToken);
               setError(null);
               setStatusMessage("");
             },
@@ -1482,6 +1653,45 @@ function DepositWithdrawForm({
         ))
       }
     ),
+    activeTab === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "text-sm font-medium mb-1 block",
+          style: { color: "var(--compass-color-text-secondary)" },
+          children: "From Token"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TokenSelector,
+        {
+          tokens: depositTokens,
+          selectedToken,
+          onSelect: setSelectedToken,
+          disabled: isSubmitting
+        }
+      )
+    ] }),
+    needsSwap && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-2 rounded-lg text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-primary-muted)",
+          color: "var(--compass-color-primary)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Swaps ",
+            selectedToken,
+            " to ",
+            venueToken,
+            ", then deposits"
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1494,9 +1704,9 @@ function DepositWithdrawForm({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
           "Available: ",
-          parseFloat(maxBalance).toFixed(4),
+          formatAmount(maxBalance),
           " ",
-          tokenSymbol
+          activeTab === "deposit" ? selectedToken : venueToken
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1527,7 +1737,7 @@ function DepositWithdrawForm({
               {
                 className: "text-sm font-medium",
                 style: { color: "var(--compass-color-text-secondary)" },
-                children: tokenSymbol
+                children: activeTab === "deposit" ? selectedToken : venueToken
               }
             )
           ]
@@ -1552,8 +1762,8 @@ function DepositWithdrawForm({
       {
         className: "p-3 rounded-lg text-sm",
         style: {
-          backgroundColor: "var(--compass-color-error-muted, rgba(239, 68, 68, 0.1))",
-          color: "var(--compass-color-error, #ef4444)"
+          backgroundColor: "var(--compass-color-error-muted)",
+          color: "var(--compass-color-error)"
         },
         children: error
       }
@@ -1563,8 +1773,8 @@ function DepositWithdrawForm({
       {
         className: "p-3 rounded-lg text-sm text-center",
         style: {
-          backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
-          color: "var(--compass-color-success, #22c55e)"
+          backgroundColor: "var(--compass-color-success-muted)",
+          color: "var(--compass-color-success)"
         },
         children: statusMessage
       }
@@ -1581,7 +1791,7 @@ function DepositWithdrawForm({
         },
         children: [
           isSubmitting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
-          isSubmitting ? "Processing..." : activeTab === "deposit" ? "Deposit" : "Withdraw"
+          isSubmitting ? "Processing..." : needsSwap ? `Swap & ${activeTab === "deposit" ? "Deposit" : "Withdraw"}` : activeTab === "deposit" ? "Deposit" : "Withdraw"
         ]
       }
     )
@@ -1889,6 +2099,678 @@ function EarnAccountGuard({
     }
   );
 }
+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({
+  compact = false,
+  onTransferComplete
+}) {
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [activeAction, setActiveAction] = react.useState("deposit");
+  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 [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],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(
+        `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}`
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch balances");
+      }
+      return response.json();
+    },
+    enabled: !!address && isDeployed,
+    staleTime: 30 * 1e3
+  });
+  const { data: eoaBalances } = reactQuery.useQuery({
+    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 || {};
+  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");
+    setStatusMessage("");
+    setError(null);
+  }, []);
+  const handleOpenModal = () => {
+    resetForm();
+    setIsModalOpen(true);
+  };
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    resetForm();
+  };
+  const handleActionChange = (action) => {
+    setActiveAction(action);
+    setAmount("");
+    setError(null);
+  };
+  const getMaxBalance = () => {
+    if (activeAction === "deposit") {
+      return eoaBalances?.[selectedToken] || "0";
+    }
+    return earnBalanceAmounts[selectedToken] || "0";
+  };
+  const handleQuickAmount = (percentage) => {
+    const max = parseFloat(getMaxBalance());
+    if (isNaN(max)) return;
+    setAmount(formatAmount(max * percentage));
+  };
+  const handleTransfer = react.useCallback(async () => {
+    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") {
+        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,
+              eip712: approvalData.eip712,
+              signature: approvalSignature
+            })
+          });
+          if (!executeApprovalResponse.ok) {
+            const errData = await executeApprovalResponse.json();
+            throw new Error(errData.error || "Approval failed");
+          }
+        }
+      }
+      setTransferState("awaiting_transfer_signature");
+      setStatusMessage("Preparing transfer...");
+      const prepareResponse = await fetch("/api/compass/transfer/prepare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          token: selectedToken,
+          amount,
+          action: activeAction.toUpperCase()
+        })
+      });
+      if (!prepareResponse.ok) {
+        const errData = await prepareResponse.json();
+        throw new Error(errData.error || "Failed to prepare transfer");
+      }
+      const prepareData = await prepareResponse.json();
+      setStatusMessage("Please sign the transfer...");
+      const transferSignature = await signTypedData({
+        domain: prepareData.domain,
+        types: prepareData.normalizedTypes,
+        primaryType: prepareData.primaryType,
+        message: prepareData.message
+      });
+      setTransferState("transferring");
+      setStatusMessage("Executing transfer...");
+      const executeResponse = await fetch("/api/compass/transfer/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          eip712: prepareData.eip712,
+          signature: transferSignature
+        })
+      });
+      if (!executeResponse.ok) {
+        const errData = await executeResponse.json();
+        throw new Error(errData.error || "Transfer failed");
+      }
+      const { txHash } = await executeResponse.json();
+      setTransferState("success");
+      setStatusMessage("Transfer successful!");
+      onTransferComplete?.(activeAction, selectedToken, amount, txHash);
+      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+      queryClient.invalidateQueries({ queryKey: ["eoaBalances"] });
+      setTimeout(() => {
+        resetForm();
+      }, 2e3);
+    } catch (err) {
+      console.error("Transfer failed:", err);
+      setTransferState("error");
+      setError(err instanceof Error ? err.message : "Transfer failed");
+    }
+  }, [
+    address,
+    amount,
+    activeAction,
+    selectedToken,
+    chainId,
+    chain,
+    walletChainId,
+    signTypedData,
+    switchChain,
+    queryClient,
+    onTransferComplete,
+    resetForm
+  ]);
+  if (!isConnected) {
+    return null;
+  }
+  const isProcessing = transferState !== "idle" && transferState !== "success" && transferState !== "error";
+  if (!isDeployed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex items-center gap-2 rounded-lg border ${compact ? "px-2 py-1.5" : "px-3 py-2"}`,
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-secondary)" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `${compact ? "text-xs" : "text-sm"}`,
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: "No Earn Account"
+            }
+          )
+        ]
+      }
+    );
+  }
+  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",
+      {
+        onClick: handleOpenModal,
+        className: `rounded-md font-medium transition-colors ${compact ? "px-2 py-1 text-xs" : "px-3 py-1.5 text-sm"}`,
+        style: {
+          backgroundColor: "var(--compass-color-primary)",
+          color: "var(--compass-color-primary-text)"
+        },
+        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(
+      ActionModal,
+      {
+        isOpen: isModalOpen,
+        onClose: handleCloseModal,
+        title: "Transfer Funds",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex gap-1 p-1 rounded-lg",
+              style: { backgroundColor: "var(--compass-color-background)" },
+              children: ["deposit", "withdraw"].map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleActionChange(action),
+                  disabled: isProcessing,
+                  className: "flex-1 py-2 rounded-md text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
+                  style: {
+                    backgroundColor: activeAction === action ? "var(--compass-color-surface)" : "transparent",
+                    color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
+                  },
+                  children: [
+                    action === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }),
+                    action
+                  ]
+                },
+                action
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                className: "text-sm font-medium mb-1 block",
+                style: { color: "var(--compass-color-text-secondary)" },
+                children: "Token"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TokenSelector,
+              {
+                tokens: TRANSFER_TOKENS,
+                selectedToken,
+                onSelect: setSelectedToken,
+                balances: activeAction === "deposit" ? eoaBalances : earnBalanceAmounts,
+                disabled: isProcessing
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "label",
+                {
+                  className: "text-sm font-medium",
+                  style: { color: "var(--compass-color-text-secondary)" },
+                  children: "Amount"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                "Available: ",
+                formatAmount(getMaxBalance()),
+                " ",
+                selectedToken
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center gap-2 p-3 rounded-lg border",
+                style: {
+                  backgroundColor: "var(--compass-color-background)",
+                  borderColor: "var(--compass-color-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "number",
+                      value: amount,
+                      onChange: (e) => {
+                        setAmount(e.target.value);
+                        setError(null);
+                      },
+                      placeholder: "0.00",
+                      disabled: isProcessing,
+                      className: "flex-1 bg-transparent outline-none text-lg font-mono",
+                      style: { color: "var(--compass-color-text)" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "text-sm font-medium",
+                      style: { color: "var(--compass-color-text-secondary)" },
+                      children: selectedToken
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => handleQuickAmount(pct),
+              disabled: isProcessing,
+              className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors",
+              style: {
+                backgroundColor: "var(--compass-color-secondary)",
+                color: "var(--compass-color-text-secondary)"
+              },
+              children: pct === 1 ? "Max" : `${pct * 100}%`
+            },
+            pct
+          )) }),
+          error && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "p-3 rounded-lg text-sm",
+              style: {
+                backgroundColor: "var(--compass-color-error-muted)",
+                color: "var(--compass-color-error)"
+              },
+              children: error
+            }
+          ),
+          statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "p-3 rounded-lg text-sm text-center",
+              style: {
+                backgroundColor: transferState === "success" ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted)",
+                color: transferState === "success" ? "var(--compass-color-success)" : "var(--compass-color-primary)"
+              },
+              children: statusMessage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: handleTransfer,
+              disabled: isProcessing || !amount || parseFloat(amount) <= 0,
+              className: "w-full py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+              style: {
+                backgroundColor: "var(--compass-color-primary)",
+                color: "var(--compass-color-primary-text)"
+              },
+              children: [
+                isProcessing && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
+                isProcessing ? "Processing..." : activeAction === "deposit" ? "Deposit to Earn Account" : "Withdraw to Wallet"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-xs text-center",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "Gas fees are sponsored by Compass"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
 function formatTVL(tvl) {
   if (!tvl) return "$0";
   const num = parseFloat(tvl);
@@ -2018,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({
@@ -2050,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
@@ -2103,15 +2991,6 @@ function useVaultsData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS2 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function VaultsList({
   showApy = true,
   apyPeriods = ["7d", "30d", "90d"],
@@ -2121,10 +3000,11 @@ function VaultsList({
   showHistory = true,
   showSearch = true,
   showSort = true,
-  actionMode = "modal",
   defaultSort = "apy_7d",
   assetFilter,
   minApy,
+  minTvl: initialMinTvl,
+  showTvlFilter = true,
   onVaultSelect,
   onDeposit,
   onWithdraw
@@ -2132,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();
@@ -2159,51 +3046,121 @@ function VaultsList({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", 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 })
+      ] })
     ] }),
-    (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(
@@ -2235,7 +3192,7 @@ function VaultsList({
       },
       vault.vaultAddress
     )) }),
-    actionMode === "modal" && selectedVault && /* @__PURE__ */ jsxRuntime.jsx(
+    selectedVault && /* @__PURE__ */ jsxRuntime.jsx(
       ActionModal,
       {
         isOpen: !!selectedVault,
@@ -2263,8 +3220,7 @@ function VaultsList({
             {
               venueType: "VAULT",
               venueAddress: selectedVault.vaultAddress,
-              tokenSymbol: selectedVault.assetSymbol,
-              tokenDecimals: TOKEN_DECIMALS2[selectedVault.assetSymbol] || 18,
+              venueToken: selectedVault.assetSymbol,
               positionBalance: selectedVault.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -2364,15 +3320,6 @@ function useAaveData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS3 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function formatAPY2(apy) {
   if (!apy) return "0.00%";
   const num = parseFloat(apy);
@@ -2396,7 +3343,6 @@ function AaveMarketsList({
   showSearch = true,
   showSort = false,
   // Only one sort option (APY), so hide by default
-  actionMode = "modal",
   defaultSort = "supply_apy",
   assetFilter,
   onMarketSelect,
@@ -2429,7 +3375,10 @@ function AaveMarketsList({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", 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 })
+      ] })
     ] }),
     (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
       showSearch && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2581,7 +3530,7 @@ function AaveMarketsList({
         market.marketAddress
       );
     }) }),
-    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsxRuntime.jsx(
+    selectedMarket && /* @__PURE__ */ jsxRuntime.jsx(
       ActionModal,
       {
         isOpen: !!selectedMarket,
@@ -2609,8 +3558,7 @@ function AaveMarketsList({
             {
               venueType: "AAVE",
               venueAddress: selectedMarket.marketAddress,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenDecimals: TOKEN_DECIMALS3[selectedMarket.underlyingSymbol] || 18,
+              venueToken: selectedMarket.underlyingSymbol,
               positionBalance: selectedMarket.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -2624,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";
@@ -2655,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();
@@ -2713,15 +3667,6 @@ function usePendleData(options = {}) {
     }
   };
 }
-var TOKEN_DECIMALS4 = {
-  USDC: 6,
-  USDT: 6,
-  DAI: 18,
-  ETH: 18,
-  WETH: 18,
-  WBTC: 8,
-  cbBTC: 8
-};
 function formatAPY3(apy) {
   if (!apy) return "0.00%";
   return `${parseFloat(apy).toFixed(2)}%`;
@@ -2747,9 +3692,10 @@ function PendleMarketsList({
   showHistory = true,
   showSearch = true,
   showSort = true,
-  actionMode = "modal",
   defaultSort = "fixed_apy",
   assetFilter,
+  minTvl: initialMinTvl,
+  showTvlFilter = true,
   onMarketSelect,
   onDeposit,
   onWithdraw
@@ -2757,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();
@@ -2780,50 +3732,120 @@ function PendleMarketsList({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", 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 })
+      ] })
     ] }),
-    (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(
@@ -2958,7 +3980,7 @@ function PendleMarketsList({
         market.marketAddress
       );
     }) }),
-    actionMode === "modal" && selectedMarket && /* @__PURE__ */ jsxRuntime.jsx(
+    selectedMarket && /* @__PURE__ */ jsxRuntime.jsx(
       ActionModal,
       {
         isOpen: !!selectedMarket,
@@ -2986,8 +4008,7 @@ function PendleMarketsList({
             {
               venueType: "PENDLE_PT",
               venueAddress: selectedMarket.marketAddress,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenDecimals: TOKEN_DECIMALS4[selectedMarket.underlyingSymbol] || 18,
+              venueToken: selectedMarket.underlyingSymbol,
               positionBalance: selectedMarket.userPosition?.balance,
               onSuccess: handleActionSuccess
             }
@@ -2998,43 +4019,55 @@ 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 error = await response.json();
+          throw new Error(error.error || "Failed to get swap quote");
+        }
+        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_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT"];
+var DEFAULT_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT", "AUSD", "SBC"];
 function SwapWidget({
   layout = "full",
   defaultFromToken = "ETH",
@@ -3042,7 +4075,6 @@ function SwapWidget({
   allowedTokens = DEFAULT_TOKENS,
   showReverseButton = true,
   showSettings = false,
-  showPriceImpact = true,
   onSwapSuccess,
   onSwapError
 }) {
@@ -3050,8 +4082,8 @@ 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({
     fromToken,
@@ -3067,32 +4099,75 @@ 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]);
+  }, [address, fromAmount, quote, chainId, fromToken, toToken, signTypedData, onSwapSuccess, onSwapError]);
   const isCompact = layout === "compact";
   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.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(
@@ -3102,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)" }
             }
           ),
@@ -3111,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))
             }
           )
         ] })
@@ -3133,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",
             {
@@ -3147,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: [
@@ -3166,6 +4233,20 @@ function SwapWidget({
         toToken
       ] })
     ] }),
+    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",
       {
@@ -3201,78 +4282,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),
@@ -3288,15 +4320,36 @@ 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, {})
     ] })
   ] });
 }
+var CHAINS = {
+  ethereum: {
+    id: "ethereum",
+    name: "Ethereum",
+    viemChain: chains.mainnet,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png"
+  },
+  base: {
+    id: "base",
+    name: "Base",
+    viemChain: chains.base,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/base/info/logo.png"
+  },
+  arbitrum: {
+    id: "arbitrum",
+    name: "Arbitrum",
+    viemChain: chains.arbitrum,
+    icon: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/arbitrum/info/logo.png"
+  }
+};
 
 exports.AaveMarketsList = AaveMarketsList;
+exports.AccountBalancesModal = AccountBalancesModal;
 exports.ActionModal = ActionModal;
 exports.ApiProvider = ApiProvider;
 exports.CHAINS = CHAINS;
@@ -3304,11 +4357,11 @@ exports.ChainSwitcher = ChainSwitcher;
 exports.CompassEarnWidget = CompassEarnWidget;
 exports.CompassProvider = CompassProvider;
 exports.DepositWithdrawForm = DepositWithdrawForm;
+exports.EarnAccountBalance = EarnAccountBalance;
 exports.EarnAccountGuard = EarnAccountGuard;
 exports.PendleMarketsList = PendleMarketsList;
 exports.PnLSummary = PnLSummary;
 exports.SwapWidget = SwapWidget;
-exports.TOKEN_DECIMALS = TOKEN_DECIMALS;
 exports.ThemeProvider = ThemeProvider;
 exports.TransactionHistory = TransactionHistory;
 exports.VaultsList = VaultsList;