@compass-labs/widgets 0.1.12 → 0.1.14

package/dist/index.js

@@ -932,7 +932,7 @@ function CompassProvider({
     }),
     []
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(ApiProvider, { apiKey, children: /* @__PURE__ */ jsxRuntime.jsx(ChainProvider, { defaultChain, children: /* @__PURE__ */ jsxRuntime.jsx(WalletProvider, { wallet, children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "compass-widget", children }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(ApiProvider, { apiKey, children: /* @__PURE__ */ jsxRuntime.jsx(ChainProvider, { defaultChain, children: /* @__PURE__ */ jsxRuntime.jsx(WalletProvider, { wallet, children: /* @__PURE__ */ jsxRuntime.jsx(EarnAccountProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "compass-widget", style: { width: "100%", height: "100%" }, children }) }) }) }) }) }) });
 }
 var SUPPORTED_CHAINS = ["ethereum", "base", "arbitrum"];
 function ChainSwitcher() {
@@ -2341,6 +2341,48 @@ function AccountBalancesModal({
                 children: "No token balances found"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between border",
+                  style: {
+                    borderColor: "var(--compass-color-border)",
+                    backgroundColor: "var(--compass-color-surface)",
+                    borderRadius: "var(--compass-border-radius-lg)",
+                    padding: "calc(var(--compass-spacing-unit) * 1)",
+                    marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                  },
+                  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-xl",
+                        style: { color: "var(--compass-color-text)" },
+                        children: formatUSD(totalUsdValue)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-xs font-medium uppercase tracking-wide",
+                  style: {
+                    color: "var(--compass-color-text-tertiary)",
+                    padding: "calc(var(--compass-spacing-unit) * 0.5) 0"
+                  },
+                  children: "Token Breakdown"
+                }
+              ),
               balances.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -2394,38 +2436,7 @@ function AccountBalancesModal({
                   ]
                 },
                 token.symbol
-              )),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "flex items-center justify-between border",
-                  style: {
-                    borderColor: "var(--compass-color-border)",
-                    backgroundColor: "var(--compass-color-surface)",
-                    borderRadius: "var(--compass-border-radius-lg)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.75)",
-                    marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
-                  },
-                  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",
@@ -3788,202 +3799,949 @@ function AaveMarketsList({
     )
   ] });
 }
-var CHAIN_ID = "ethereum";
-function formatCurrency(amount) {
-  if (!amount) return "$0.00";
-  const num = typeof amount === "string" ? parseFloat(amount) : amount;
-  if (isNaN(num)) return "$0.00";
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }).format(num);
-}
-function formatAPY3(apy) {
-  if (!apy) return "0.00";
-  const num = parseFloat(apy);
-  return num.toFixed(2);
-}
-function formatAmount2(value) {
-  const num = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(num)) return "0";
-  return num.toFixed(6).replace(/\.?0+$/, "");
-}
-function EarnAccount({
-  showHeader = true,
-  showInterestRate = true,
-  showPnL = true,
-  showFundButton = true,
-  showTrustBadge = true,
-  compact = false,
-  title = "Savings Account",
-  onSupply,
-  onWithdraw
+var MARKET_TYPES = [
+  { value: "aave", label: "AAVE" },
+  { value: "pendle", label: "PENDLE" },
+  { value: "vaults", label: "VAULTS" }
+];
+function MarketSelector({
+  markets,
+  selectedMarket,
+  onMarketSelect,
+  marketType,
+  onMarketTypeChange,
+  minTvl,
+  onMinTvlChange,
+  isLoading
 }) {
-  const { address, signTypedData } = useEmbeddableWallet();
-  const { isDeployed } = useEarnAccount();
-  const queryClient = reactQuery.useQueryClient();
-  const [activeTab, setActiveTab] = react.useState("deposit");
-  const [amount, setAmount] = react.useState("");
-  const [isProcessing, setIsProcessing] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [statusMessage, setStatusMessage] = react.useState("");
-  const [isFundModalOpen, setIsFundModalOpen] = react.useState(false);
-  const [fundAmount, setFundAmount] = react.useState("");
-  const [fundToken, setFundToken] = react.useState("USDC");
-  const [isFunding, setIsFunding] = react.useState(false);
-  const [fundError, setFundError] = react.useState(null);
-  const [fundStatus, setFundStatus] = react.useState("");
-  const FUND_TOKENS = ["USDC", "DAI"];
-  const walletBalanceQuery = reactQuery.useQuery({
-    queryKey: ["walletBalance", CHAIN_ID, address, fundToken],
-    queryFn: async () => {
-      if (!address) return null;
-      try {
-        const response = await fetch(
-          `/api/compass/token/balance?address=${address}&chain=${CHAIN_ID}&token=${fundToken}`
-        );
-        if (!response.ok) return null;
-        const data = await response.json();
-        return data;
-      } catch {
-        return null;
-      }
-    },
-    enabled: !!address && isFundModalOpen,
-    staleTime: 15 * 1e3
-  });
-  const walletBalance = walletBalanceQuery.data?.balance || "0";
-  const balancesQuery = reactQuery.useQuery({
-    queryKey: ["earnAccountBalances", CHAIN_ID, address],
-    queryFn: async () => {
-      if (!address) return null;
-      const response = await fetch(
-        `/api/compass/earn-account/balances?owner=${address}&chain=${CHAIN_ID}`
-      );
-      if (!response.ok) {
-        throw new Error("Failed to fetch balances");
-      }
-      return response.json();
-    },
-    enabled: !!address && isDeployed,
-    staleTime: 30 * 1e3
-  });
-  const availableBalance = balancesQuery.data?.balances?.["USDC"]?.balance || "0";
-  const marketQuery = reactQuery.useQuery({
-    queryKey: ["earnAccountUSDC", CHAIN_ID],
-    queryFn: async () => {
-      const response = await fetch(`/api/compass/aave/markets?chain=${CHAIN_ID}`);
-      if (!response.ok) return null;
-      const data = await response.json();
-      const marketsDict = data.markets || {};
-      const usdcData = marketsDict["USDC"];
-      if (!usdcData) return null;
-      const chainData = usdcData.chains?.[CHAIN_ID];
-      if (!chainData) return null;
-      return {
-        marketAddress: chainData.address || "",
-        supplyApy: chainData.supplyApy?.toString() ?? null
-      };
-    },
-    staleTime: 30 * 1e3
-  });
-  const positionQuery = reactQuery.useQuery({
-    queryKey: ["earnAccountUSDCPosition", CHAIN_ID, address],
-    queryFn: async () => {
-      if (!address) return null;
-      const response = await fetch(`/api/compass/positions?chain=${CHAIN_ID}&owner=${address}`);
-      if (!response.ok) return null;
-      const data = await response.json();
-      const aavePositions = data.aave || [];
-      const usdcPosition = aavePositions.find(
-        (p) => p.reserveSymbol?.toUpperCase() === "USDC"
-      );
-      if (!usdcPosition) return null;
-      return {
-        balance: usdcPosition.balance || "0",
-        pnl: usdcPosition.pnl ? {
-          unrealizedPnl: usdcPosition.pnl.unrealizedPnl || "0",
-          realizedPnl: usdcPosition.pnl.realizedPnl || "0",
-          totalPnl: usdcPosition.pnl.totalPnl || "0",
-          totalDeposited: usdcPosition.pnl.totalDeposited || "0"
-        } : void 0,
-        deposits: (usdcPosition.deposits || []).map((d) => ({
-          amount: d.inputAmount || d.amount || "0",
-          blockNumber: d.blockNumber || 0,
-          txHash: d.transactionHash || d.txHash || ""
-        })),
-        withdrawals: (usdcPosition.withdrawals || []).map((w) => ({
-          amount: w.outputAmount || w.amount || "0",
-          blockNumber: w.blockNumber || 0,
-          txHash: w.transactionHash || w.txHash || ""
-        }))
-      };
-    },
-    enabled: !!address,
-    staleTime: 30 * 1e3
-  });
-  const market = marketQuery.data;
-  const userPosition = positionQuery.data;
-  const depositedBalance = parseFloat(userPosition?.balance || "0");
-  const available = parseFloat(availableBalance);
-  const totalBalance = available + depositedBalance;
-  const earnings = parseFloat(userPosition?.pnl?.totalPnl || "0");
-  const needsSwap = fundToken !== "USDC";
-  const ensureTokenApproval = async (token) => {
-    setFundStatus(`Checking ${token} approval...`);
-    const approveResponse = await fetch("/api/compass/transfer/approve", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        owner: address,
-        chain: CHAIN_ID,
-        token
-      })
-    });
-    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) {
-      return;
-    }
-    if (approvalData.requiresTransaction && approvalData.transaction) {
-      setFundStatus(`Approving ${token} (requires on-chain transaction)...`);
-      const executeApprovalResponse = await fetch("/api/compass/approval/execute", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          transaction: approvalData.transaction
-        })
-      });
-      if (!executeApprovalResponse.ok) {
-        const errData = await executeApprovalResponse.json();
-        throw new Error(errData.error || "Approval transaction failed");
-      }
-      return;
-    }
-    if (approvalData.eip712) {
-      setFundStatus(`Please approve ${token} for transfers...`);
-      const approvalSignature = await signTypedData({
-        domain: approvalData.domain,
-        types: approvalData.normalizedTypes,
-        primaryType: "Permit",
-        message: approvalData.message
-      });
-      setFundStatus(`Setting up ${token} approval...`);
-      const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          eip712: approvalData.eip712,
-          signature: approvalSignature
+  const [isDropdownOpen, setIsDropdownOpen] = react.useState(false);
+  const filteredMarkets = react.useMemo(() => {
+    return markets.filter((m) => m.type === marketType && m.tvl >= minTvl);
+  }, [markets, marketType, minTvl]);
+  const maxTvl = react.useMemo(() => {
+    const typeMarkets = markets.filter((m) => m.type === marketType);
+    return Math.max(...typeMarkets.map((m) => m.tvl), 1e8);
+  }, [markets, marketType]);
+  const hasMarkets = filteredMarkets.length > 0;
+  const formatTvl = (value) => {
+    if (value >= 1e9) return `$${(value / 1e9).toFixed(1)}B`;
+    if (value >= 1e6) return `$${(value / 1e6).toFixed(1)}M`;
+    if (value >= 1e3) return `$${(value / 1e3).toFixed(0)}K`;
+    return `$${value}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "calc(var(--compass-spacing-unit) * 3)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              style: {
+                display: "block",
+                fontSize: "var(--compass-font-size-sm)",
+                color: "var(--compass-color-text-secondary)",
+                marginBottom: "var(--compass-spacing-unit)"
+              },
+              children: "Market Type"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                borderRadius: "var(--compass-border-radius-lg)",
+                border: "1px solid var(--compass-color-border)",
+                overflow: "hidden"
+              },
+              children: MARKET_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => onMarketTypeChange(type.value),
+                  style: {
+                    flex: 1,
+                    padding: "calc(var(--compass-spacing-unit) * 2)",
+                    backgroundColor: marketType === type.value ? "var(--compass-color-primary)" : "var(--compass-color-surface)",
+                    color: marketType === type.value ? "var(--compass-color-primary-foreground)" : "var(--compass-color-text)",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "var(--compass-font-size-sm)",
+                    fontWeight: 500,
+                    fontFamily: "var(--compass-font-family)",
+                    transition: "var(--compass-transition-normal)"
+                  },
+                  children: type.label
+                },
+                type.value
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              style: {
+                display: "block",
+                fontSize: "var(--compass-font-size-sm)",
+                color: "var(--compass-color-text-secondary)",
+                marginBottom: "var(--compass-spacing-unit)"
+              },
+              children: "Select Market"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => hasMarkets && setIsDropdownOpen(!isDropdownOpen),
+                disabled: !hasMarkets || isLoading,
+                style: {
+                  width: "100%",
+                  padding: "calc(var(--compass-spacing-unit) * 2.5)",
+                  backgroundColor: "var(--compass-color-surface)",
+                  border: "1px solid var(--compass-color-border)",
+                  borderRadius: "var(--compass-border-radius-lg)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  cursor: hasMarkets ? "pointer" : "not-allowed",
+                  opacity: hasMarkets ? 1 : 0.5,
+                  fontFamily: "var(--compass-font-family)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: {
+                        color: selectedMarket ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
+                      },
+                      children: isLoading ? "Loading markets..." : !hasMarkets ? `No markets above ${formatTvl(minTvl)}` : selectedMarket ? selectedMarket.name : "Select a market"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
+                    selectedMarket && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--compass-color-success)",
+                          fontSize: "var(--compass-font-size-sm)"
+                        },
+                        children: [
+                          selectedMarket.apy.toFixed(2),
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.ChevronDown,
+                      {
+                        size: 16,
+                        style: {
+                          color: "var(--compass-color-text-secondary)",
+                          transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
+                          transition: "var(--compass-transition-normal)"
+                        }
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            isDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "100%",
+                  left: 0,
+                  right: 0,
+                  marginTop: "var(--compass-spacing-unit)",
+                  backgroundColor: "var(--compass-color-surface-elevated)",
+                  border: "1px solid var(--compass-color-border)",
+                  borderRadius: "var(--compass-border-radius-lg)",
+                  boxShadow: "var(--compass-shadow-lg)",
+                  zIndex: 50,
+                  maxHeight: "200px",
+                  overflowY: "auto"
+                },
+                children: filteredMarkets.map((market) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      onMarketSelect(market);
+                      setIsDropdownOpen(false);
+                    },
+                    style: {
+                      width: "100%",
+                      padding: "calc(var(--compass-spacing-unit) * 2)",
+                      backgroundColor: selectedMarket?.id === market.id ? "var(--compass-color-primary-muted)" : "transparent",
+                      border: "none",
+                      borderBottom: "1px solid var(--compass-color-border)",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontFamily: "var(--compass-font-family)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text)" }, children: market.name }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "span",
+                              {
+                                style: {
+                                  color: "var(--compass-color-success)",
+                                  fontSize: "var(--compass-font-size-sm)"
+                                },
+                                children: [
+                                  market.apy.toFixed(2),
+                                  "% APY"
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "var(--compass-font-size-xs)",
+                            color: "var(--compass-color-text-tertiary)",
+                            marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
+                          },
+                          children: [
+                            "TVL: ",
+                            formatTvl(market.tvl),
+                            market.expiry && ` \xB7 Expires: ${market.expiry}`
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  market.id
+                ))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "var(--compass-spacing-unit)"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    style: {
+                      fontSize: "var(--compass-font-size-sm)",
+                      color: "var(--compass-color-text-secondary)"
+                    },
+                    children: "Min TVL"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--compass-font-size-sm)",
+                      color: "var(--compass-color-text)"
+                    },
+                    children: formatTvl(minTvl)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: maxTvl,
+              step: 1e5,
+              value: minTvl,
+              onChange: (e) => onMinTvlChange(Number(e.target.value)),
+              style: {
+                width: "100%",
+                accentColor: "var(--compass-color-primary)"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PositionCard({ position }) {
+  const [isHistoryExpanded, setIsHistoryExpanded] = react.useState(false);
+  const formatDate2 = (dateStr) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  };
+  const formatShortDate = (dateStr) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "var(--compass-color-surface)",
+        border: "1px solid var(--compass-color-border)",
+        borderRadius: "var(--compass-border-radius-lg)",
+        padding: "var(--compass-spacing-card)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontWeight: 600,
+                    color: "var(--compass-color-text)",
+                    fontSize: "var(--compass-font-size-base)"
+                  },
+                  children: position.marketName
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    color: "var(--compass-color-success)",
+                    fontSize: "var(--compass-font-size-sm)",
+                    backgroundColor: "var(--compass-color-success-muted)",
+                    padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 1.5)",
+                    borderRadius: "var(--compass-border-radius-full)"
+                  },
+                  children: [
+                    "APY: ",
+                    position.apy.toFixed(2),
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "calc(var(--compass-spacing-unit) * 2)",
+              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--compass-font-size-xs)",
+                      color: "var(--compass-color-text-tertiary)",
+                      marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                    },
+                    children: "Amount"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--compass-color-text)", fontWeight: 500 }, children: [
+                  position.amount.toLocaleString(),
+                  " ",
+                  position.token
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--compass-font-size-xs)",
+                      color: "var(--compass-color-text-tertiary)",
+                      marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                    },
+                    children: "Entered"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--compass-color-text)" }, children: formatDate2(position.entryDate) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingTop: "calc(var(--compass-spacing-unit) * 2)",
+              borderTop: "1px solid var(--compass-color-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--compass-font-size-sm)",
+                      color: "var(--compass-color-text-secondary)"
+                    },
+                    children: [
+                      "Performance:",
+                      " "
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      color: position.performance >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                    },
+                    children: [
+                      position.performance >= 0 ? "+" : "",
+                      "$",
+                      position.performance.toFixed(2)
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setIsHistoryExpanded(!isHistoryExpanded),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "calc(var(--compass-spacing-unit) * 0.5)",
+                    padding: "calc(var(--compass-spacing-unit) * 1) calc(var(--compass-spacing-unit) * 2)",
+                    backgroundColor: "transparent",
+                    border: "1px solid var(--compass-color-border)",
+                    borderRadius: "var(--compass-border-radius-md)",
+                    cursor: "pointer",
+                    fontSize: "var(--compass-font-size-xs)",
+                    color: "var(--compass-color-text-secondary)",
+                    fontFamily: "var(--compass-font-family)"
+                  },
+                  children: [
+                    "tx history",
+                    isHistoryExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12 })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        isHistoryExpanded && position.transactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              marginTop: "calc(var(--compass-spacing-unit) * 2)",
+              backgroundColor: "var(--compass-color-background)",
+              borderRadius: "var(--compass-border-radius-md)",
+              padding: "calc(var(--compass-spacing-unit) * 2)"
+            },
+            children: position.transactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "calc(var(--compass-spacing-unit) * 1.5) 0",
+                  borderBottom: "1px solid var(--compass-color-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "calc(var(--compass-spacing-unit) * 2)" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "var(--compass-font-size-xs)",
+                          color: "var(--compass-color-text-tertiary)",
+                          minWidth: "50px"
+                        },
+                        children: formatShortDate(tx.date)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "var(--compass-font-size-sm)",
+                          color: "var(--compass-color-text-secondary)",
+                          textTransform: "capitalize"
+                        },
+                        children: tx.type
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "calc(var(--compass-spacing-unit) * 2)" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: 500,
+                          color: tx.type === "deposit" ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                        },
+                        children: [
+                          tx.type === "deposit" ? "+" : "-",
+                          tx.amount,
+                          " ",
+                          tx.token
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: `https://etherscan.io/tx/${tx.txHash}`,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: { color: "var(--compass-color-text-tertiary)" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12 })
+                      }
+                    )
+                  ] })
+                ]
+              },
+              tx.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function EarningsModal({ isOpen, onClose, positions, totalEarned, isLoading }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "var(--compass-color-overlay)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 50
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: "var(--compass-color-surface-elevated)",
+            borderRadius: "var(--compass-border-radius-xl)",
+            boxShadow: "var(--compass-shadow-lg)",
+            width: "100%",
+            maxWidth: "480px",
+            maxHeight: "80vh",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "var(--compass-spacing-card)",
+                  borderBottom: "1px solid var(--compass-color-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      style: {
+                        fontWeight: 600,
+                        fontSize: "var(--compass-font-size-lg)",
+                        color: "var(--compass-color-text)",
+                        margin: 0
+                      },
+                      children: "Your Positions"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        backgroundColor: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "var(--compass-spacing-unit)",
+                        color: "var(--compass-color-text-secondary)"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  padding: "var(--compass-spacing-card)",
+                  borderBottom: "1px solid var(--compass-color-border)",
+                  backgroundColor: "var(--compass-color-surface)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "var(--compass-font-size-sm)",
+                        color: "var(--compass-color-text-secondary)",
+                        marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                      },
+                      children: "Total Earned"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "var(--compass-font-size-xl)",
+                        fontWeight: 600,
+                        color: totalEarned >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                      },
+                      children: [
+                        totalEarned >= 0 ? "+" : "",
+                        "$",
+                        totalEarned.toFixed(2)
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  overflowY: "auto",
+                  padding: "var(--compass-spacing-card)",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "calc(var(--compass-spacing-unit) * 3)"
+                },
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      textAlign: "center",
+                      padding: "calc(var(--compass-spacing-unit) * 6)",
+                      color: "var(--compass-color-text-secondary)"
+                    },
+                    children: "Loading positions..."
+                  }
+                ) : positions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      textAlign: "center",
+                      padding: "calc(var(--compass-spacing-unit) * 6)",
+                      color: "var(--compass-color-text-secondary)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "var(--compass-spacing-unit)" }, children: "No active positions yet" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "var(--compass-font-size-sm)", color: "var(--compass-color-text-tertiary)" }, children: "Deposit into a market to start earning" })
+                    ]
+                  }
+                ) : positions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(PositionCard, { position }, position.id))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var CHAIN_ID = "ethereum";
+var SUPPORTED_TOKENS = ["USDC", "USDT", "DAI", "WETH", "SBC", "AUSD"];
+function formatCurrency(amount) {
+  if (!amount) return "$0.00";
+  const num = typeof amount === "string" ? parseFloat(amount) : amount;
+  if (isNaN(num)) return "$0.00";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(num);
+}
+function formatAPY3(apy) {
+  if (!apy) return "0.00";
+  const num = parseFloat(apy);
+  return num.toFixed(2);
+}
+function formatAmount2(value) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return num.toFixed(6).replace(/\.?0+$/, "");
+}
+function EarnAccount({
+  showHeader = true,
+  showInterestRate = true,
+  showTopUpButton = true,
+  showTrustBadge = true,
+  compact = false,
+  title = "Savings Account",
+  onDeposit,
+  onWithdraw,
+  defaultMarketType = "aave",
+  defaultMinTvl = 0
+}) {
+  const { address, signTypedData } = useEmbeddableWallet();
+  const { isDeployed } = useEarnAccount();
+  const queryClient = reactQuery.useQueryClient();
+  const [activeTab, setActiveTab] = react.useState("deposit");
+  const [selectedToken, setSelectedToken] = react.useState("USDC");
+  const [amount, setAmount] = react.useState("");
+  const [isProcessing, setIsProcessing] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [statusMessage, setStatusMessage] = react.useState("");
+  const [isTokenDropdownOpen, setIsTokenDropdownOpen] = react.useState(false);
+  const [isFundModalOpen, setIsFundModalOpen] = react.useState(false);
+  const [fundAmount, setFundAmount] = react.useState("");
+  const [fundToken, setFundToken] = react.useState("USDC");
+  const [isFunding, setIsFunding] = react.useState(false);
+  const [fundError, setFundError] = react.useState(null);
+  const [fundStatus, setFundStatus] = react.useState("");
+  const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
+  const [marketType, setMarketType] = react.useState(defaultMarketType);
+  const [selectedMarket, setSelectedMarket] = react.useState(null);
+  const [minTvl, setMinTvl] = react.useState(defaultMinTvl);
+  const [isEarningsModalOpen, setIsEarningsModalOpen] = react.useState(false);
+  const FUND_TOKENS = ["USDC", "DAI"];
+  const walletBalanceQuery = reactQuery.useQuery({
+    queryKey: ["walletBalance", CHAIN_ID, address, fundToken],
+    queryFn: async () => {
+      if (!address) return null;
+      try {
+        const response = await fetch(
+          `/api/compass/token/balance?address=${address}&chain=${CHAIN_ID}&token=${fundToken}`
+        );
+        if (!response.ok) return null;
+        const data = await response.json();
+        return data;
+      } catch {
+        return null;
+      }
+    },
+    enabled: !!address && isFundModalOpen,
+    staleTime: 15 * 1e3
+  });
+  const walletBalance = walletBalanceQuery.data?.balance || "0";
+  const balancesQuery = reactQuery.useQuery({
+    queryKey: ["earnAccountBalances", CHAIN_ID, address],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(
+        `/api/compass/earn-account/balances?owner=${address}&chain=${CHAIN_ID}`
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch balances");
+      }
+      return response.json();
+    },
+    enabled: !!address && isDeployed,
+    staleTime: 30 * 1e3
+  });
+  const selectedTokenBalance = balancesQuery.data?.balances?.[selectedToken]?.balance || "0";
+  const earnAccountTotalUsd = balancesQuery.data?.totalUsdValue || "0";
+  const marketQuery = reactQuery.useQuery({
+    queryKey: ["earnAccountUSDC", CHAIN_ID],
+    queryFn: async () => {
+      const response = await fetch(`/api/compass/aave/markets?chain=${CHAIN_ID}`);
+      if (!response.ok) return null;
+      const data = await response.json();
+      const marketsDict = data.markets || {};
+      const usdcData = marketsDict["USDC"];
+      if (!usdcData) return null;
+      const chainData = usdcData.chains?.[CHAIN_ID];
+      if (!chainData) return null;
+      return {
+        marketAddress: chainData.address || "",
+        supplyApy: chainData.supplyApy?.toString() ?? null
+      };
+    },
+    staleTime: 30 * 1e3
+  });
+  const positionQuery = reactQuery.useQuery({
+    queryKey: ["earnAccountUSDCPosition", CHAIN_ID, address],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(`/api/compass/positions?chain=${CHAIN_ID}&owner=${address}`);
+      if (!response.ok) return null;
+      const data = await response.json();
+      const aavePositions = data.aave || [];
+      const usdcPosition = aavePositions.find(
+        (p) => p.reserveSymbol?.toUpperCase() === "USDC"
+      );
+      if (!usdcPosition) return null;
+      return {
+        balance: usdcPosition.balance || "0",
+        pnl: usdcPosition.pnl ? {
+          unrealizedPnl: usdcPosition.pnl.unrealizedPnl || "0",
+          realizedPnl: usdcPosition.pnl.realizedPnl || "0",
+          totalPnl: usdcPosition.pnl.totalPnl || "0",
+          totalDeposited: usdcPosition.pnl.totalDeposited || "0"
+        } : void 0,
+        deposits: (usdcPosition.deposits || []).map((d) => ({
+          amount: d.inputAmount || d.amount || "0",
+          blockNumber: d.blockNumber || 0,
+          txHash: d.transactionHash || d.txHash || ""
+        })),
+        withdrawals: (usdcPosition.withdrawals || []).map((w) => ({
+          amount: w.outputAmount || w.amount || "0",
+          blockNumber: w.blockNumber || 0,
+          txHash: w.transactionHash || w.txHash || ""
+        }))
+      };
+    },
+    enabled: !!address,
+    staleTime: 30 * 1e3
+  });
+  const market = marketQuery.data;
+  const userPosition = positionQuery.data;
+  const depositedBalance = parseFloat(userPosition?.balance || "0");
+  const earnAccountTotal = parseFloat(earnAccountTotalUsd);
+  const totalBalance = earnAccountTotal + depositedBalance;
+  const mockMarkets = [
+    { id: "aave-usdc", name: "USDC", apy: 4.5, tvl: 5e8, type: "aave" },
+    { id: "aave-usdt", name: "USDT", apy: 4.2, tvl: 35e7, type: "aave" },
+    { id: "aave-dai", name: "DAI", apy: 3.8, tvl: 2e8, type: "aave" },
+    { id: "pendle-usdc-mar25", name: "USDC Mar 2025", apy: 8.5, tvl: 5e7, type: "pendle", expiry: "Mar 2025" },
+    { id: "pendle-usdc-jun25", name: "USDC Jun 2025", apy: 7.2, tvl: 3e7, type: "pendle", expiry: "Jun 2025" },
+    { id: "vault-steakhouse", name: "Steakhouse USDC", apy: 6.5, tvl: 15e7, type: "vaults", curator: "Steakhouse" },
+    { id: "vault-gauntlet", name: "Gauntlet USDC", apy: 5.8, tvl: 2e8, type: "vaults", curator: "Gauntlet" }
+  ];
+  const positions = userPosition?.balance && parseFloat(userPosition.balance) > 0 ? [{
+    id: "pos-1",
+    marketType: "aave",
+    marketName: "USDC on Aave",
+    marketId: "aave-usdc",
+    amount: parseFloat(userPosition.balance),
+    token: "USDC",
+    apy: parseFloat(market?.supplyApy || "0"),
+    entryDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(),
+    performance: parseFloat(userPosition.pnl?.totalPnl || "0"),
+    transactions: [
+      ...(userPosition.deposits || []).map((d, i) => ({
+        id: `dep-${i}`,
+        date: new Date(Date.now() - (i + 1) * 7 * 24 * 60 * 60 * 1e3).toISOString(),
+        type: "deposit",
+        amount: parseFloat(d.amount),
+        token: "USDC",
+        txHash: d.txHash || ""
+      })),
+      ...(userPosition.withdrawals || []).map((w, i) => ({
+        id: `wit-${i}`,
+        date: new Date(Date.now() - i * 3 * 24 * 60 * 60 * 1e3).toISOString(),
+        type: "withdraw",
+        amount: parseFloat(w.amount),
+        token: "USDC",
+        txHash: w.txHash || ""
+      }))
+    ]
+  }] : [];
+  const totalEarned = positions.reduce((sum, p) => sum + p.performance, 0);
+  const needsActionSwap = selectedToken !== "USDC";
+  const needsFundSwap = fundToken !== "USDC";
+  const ensureTokenApproval = async (token) => {
+    setFundStatus(`Checking ${token} approval...`);
+    const approveResponse = await fetch("/api/compass/transfer/approve", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        owner: address,
+        chain: CHAIN_ID,
+        token
+      })
+    });
+    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) {
+      return;
+    }
+    if (approvalData.requiresTransaction && approvalData.transaction) {
+      setFundStatus(`Approving ${token} (requires on-chain transaction)...`);
+      const executeApprovalResponse = await fetch("/api/compass/approval/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: CHAIN_ID,
+          transaction: approvalData.transaction
+        })
+      });
+      if (!executeApprovalResponse.ok) {
+        const errData = await executeApprovalResponse.json();
+        throw new Error(errData.error || "Approval transaction failed");
+      }
+      return;
+    }
+    if (approvalData.eip712) {
+      setFundStatus(`Please approve ${token} for transfers...`);
+      const approvalSignature = await signTypedData({
+        domain: approvalData.domain,
+        types: approvalData.normalizedTypes,
+        primaryType: "Permit",
+        message: approvalData.message
+      });
+      setFundStatus(`Setting up ${token} approval...`);
+      const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: CHAIN_ID,
+          eip712: approvalData.eip712,
+          signature: approvalSignature
         })
       });
       if (!executeApprovalResponse.ok) {
@@ -4000,7 +4758,7 @@ function EarnAccount({
     setFundError(null);
     try {
       await ensureTokenApproval(fundToken);
-      if (needsSwap) {
+      if (needsFundSwap) {
         setFundStatus(`Preparing ${fundToken} transfer...`);
         const transferPrepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
@@ -4089,32 +4847,233 @@ function EarnAccount({
           throw new Error(errData.error || "Swap failed");
         }
       } else {
-        setFundStatus("Preparing transfer...");
-        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
+        setFundStatus("Preparing transfer...");
+        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: CHAIN_ID,
+            token: "USDC",
+            amount: fundAmount,
+            action: "DEPOSIT"
+          })
+        });
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare transfer");
+        }
+        const prepareData = await prepareResponse.json();
+        setFundStatus("Please sign the transfer...");
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: prepareData.primaryType,
+          message: prepareData.message
+        });
+        setFundStatus("Transferring funds...");
+        const executeResponse = await fetch("/api/compass/transfer/execute", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature
+          })
+        });
+        if (!executeResponse.ok) {
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Transfer failed");
+        }
+      }
+      setFundStatus("Success! Funds added to savings.");
+      setFundAmount("");
+      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+      queryClient.invalidateQueries({ queryKey: ["walletBalance"] });
+      balancesQuery.refetch();
+      setTimeout(() => {
+        setIsFundModalOpen(false);
+        setFundStatus("");
+        setFundToken("USDC");
+      }, 2e3);
+    } catch (err) {
+      setFundError(err instanceof Error ? err.message : "Transfer failed");
+      setFundStatus("");
+    } finally {
+      setIsFunding(false);
+    }
+  }, [address, fundAmount, fundToken, needsFundSwap, signTypedData, queryClient, balancesQuery]);
+  const handleAction = async () => {
+    if (!market || !amount || parseFloat(amount) <= 0 || !address || !signTypedData) return;
+    setIsProcessing(true);
+    setError(null);
+    const isDeposit = activeTab === "deposit";
+    try {
+      let txHash;
+      if (needsActionSwap) {
+        if (isDeposit) {
+          setStatusMessage(`Getting swap quote...`);
+          const quoteResponse = await fetch(
+            `/api/compass/swap/quote?owner=${address}&chain=${CHAIN_ID}&tokenIn=${selectedToken}&tokenOut=USDC&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: "USDC",
+                amountIn: amount,
+                maxSlippagePercent: 1
+              }
+            },
+            {
+              body: {
+                actionType: "V2_MANAGE",
+                action: "DEPOSIT",
+                venue: { type: "AAVE", token: "USDC" },
+                amount: depositAmount
+              }
+            }
+          ];
+          const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              chain: CHAIN_ID,
+              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: CHAIN_ID
+            })
+          });
+          if (!executeResponse.ok) {
+            const errorData = await executeResponse.json();
+            throw new Error(errorData.error || "Failed to execute bundle");
+          }
+          const result = await executeResponse.json();
+          txHash = result.txHash;
+        } else {
+          setStatusMessage(`Preparing withdraw and swap...`);
+          const bundleActions = [
+            {
+              body: {
+                actionType: "V2_MANAGE",
+                action: "WITHDRAW",
+                venue: { type: "AAVE", token: "USDC" },
+                amount
+              }
+            },
+            {
+              body: {
+                actionType: "V2_SWAP",
+                tokenIn: "USDC",
+                tokenOut: selectedToken,
+                amountIn: amount,
+                maxSlippagePercent: 1
+              }
+            }
+          ];
+          const prepareResponse = await fetch("/api/compass/bundle/prepare", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              chain: CHAIN_ID,
+              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 withdraw and swap...");
+          const executeResponse = await fetch("/api/compass/bundle/execute", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              owner: address,
+              eip712,
+              signature,
+              chain: CHAIN_ID
+            })
+          });
+          if (!executeResponse.ok) {
+            const errorData = await executeResponse.json();
+            throw new Error(errorData.error || "Failed to execute bundle");
+          }
+          const result = await executeResponse.json();
+          txHash = result.txHash;
+        }
+      } else {
+        setStatusMessage(isDeposit ? "Preparing deposit..." : "Preparing withdrawal...");
+        const prepareEndpoint = isDeposit ? "/api/compass/deposit/prepare" : "/api/compass/withdraw/prepare";
+        const executeEndpoint = isDeposit ? "/api/compass/deposit/execute" : "/api/compass/withdraw/execute";
+        const prepareResponse = await fetch(prepareEndpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
             chain: CHAIN_ID,
+            venueType: "AAVE",
             token: "USDC",
-            amount: fundAmount,
-            action: "DEPOSIT"
+            amount
           })
         });
         if (!prepareResponse.ok) {
           const errData = await prepareResponse.json();
-          throw new Error(errData.error || "Failed to prepare transfer");
+          throw new Error(errData.error || "Failed to prepare transaction");
         }
         const prepareData = await prepareResponse.json();
-        setFundStatus("Please sign the transfer...");
+        setStatusMessage("Please sign the transaction...");
         const signature = await signTypedData({
           domain: prepareData.domain,
           types: prepareData.normalizedTypes,
-          primaryType: prepareData.primaryType,
+          primaryType: "SafeTx",
           message: prepareData.message
         });
-        setFundStatus("Transferring funds...");
-        const executeResponse = await fetch("/api/compass/transfer/execute", {
+        setStatusMessage("Executing transaction...");
+        const executeResponse = await fetch(executeEndpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -4126,74 +5085,11 @@ function EarnAccount({
         });
         if (!executeResponse.ok) {
           const errData = await executeResponse.json();
-          throw new Error(errData.error || "Transfer failed");
+          throw new Error(errData.error || "Transaction failed");
         }
+        const result = await executeResponse.json();
+        txHash = result.txHash;
       }
-      setFundStatus("Success! Funds added to savings.");
-      setFundAmount("");
-      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
-      queryClient.invalidateQueries({ queryKey: ["walletBalance"] });
-      balancesQuery.refetch();
-      setTimeout(() => {
-        setIsFundModalOpen(false);
-        setFundStatus("");
-        setFundToken("USDC");
-      }, 2e3);
-    } catch (err) {
-      setFundError(err instanceof Error ? err.message : "Transfer failed");
-      setFundStatus("");
-    } finally {
-      setIsFunding(false);
-    }
-  }, [address, fundAmount, fundToken, needsSwap, signTypedData, queryClient, balancesQuery]);
-  const handleAction = async () => {
-    if (!market || !amount || parseFloat(amount) <= 0 || !address || !signTypedData) return;
-    setIsProcessing(true);
-    setError(null);
-    setStatusMessage(activeTab === "deposit" ? "Preparing deposit..." : "Preparing withdrawal...");
-    try {
-      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 prepareResponse = await fetch(prepareEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          venueType: "AAVE",
-          token: "USDC",
-          amount
-        })
-      });
-      if (!prepareResponse.ok) {
-        const errData = await prepareResponse.json();
-        throw new Error(errData.error || "Failed to prepare transaction");
-      }
-      const prepareData = await prepareResponse.json();
-      setStatusMessage("Please sign the transaction...");
-      const signature = await signTypedData({
-        domain: prepareData.domain,
-        types: prepareData.normalizedTypes,
-        primaryType: "SafeTx",
-        message: prepareData.message
-      });
-      setStatusMessage("Executing transaction...");
-      const executeResponse = await fetch(executeEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: CHAIN_ID,
-          eip712: prepareData.eip712,
-          signature
-        })
-      });
-      if (!executeResponse.ok) {
-        const errData = await executeResponse.json();
-        throw new Error(errData.error || "Transaction failed");
-      }
-      const { txHash } = await executeResponse.json();
       setStatusMessage("Transaction successful!");
       setAmount("");
       queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
@@ -4208,10 +5104,24 @@ function EarnAccount({
         borrowApy: null,
         tvlUsd: null
       };
-      if (activeTab === "deposit") {
-        onSupply?.(marketData, amount, txHash || "");
+      if (isDeposit) {
+        const depositMarket = {
+          id: "aave-usdc",
+          name: "USDC",
+          apy: parseFloat(market.supplyApy || "0"),
+          tvl: 0,
+          type: "aave"
+        };
+        onDeposit?.(depositMarket, parseFloat(amount), txHash || "");
       } else {
-        onWithdraw?.(marketData, amount, txHash || "");
+        const withdrawMarket = {
+          id: "aave-usdc",
+          name: "USDC",
+          apy: parseFloat(market.supplyApy || "0"),
+          tvl: 0,
+          type: "aave"
+        };
+        onWithdraw?.(withdrawMarket, parseFloat(amount), txHash || "");
       }
       setTimeout(() => setStatusMessage(""), 3e3);
     } catch (err) {
@@ -4221,7 +5131,7 @@ function EarnAccount({
       setIsProcessing(false);
     }
   };
-  const maxAmount = activeTab === "deposit" ? available : depositedBalance;
+  const maxAmount = activeTab === "deposit" ? parseFloat(selectedTokenBalance) : depositedBalance;
   if (marketQuery.isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 32, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) });
   }
@@ -4240,7 +5150,7 @@ function EarnAccount({
   }
   const spacing = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)";
   const gapSize = compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "calc(var(--compass-spacing-unit) * 1.5)";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: gapSize, fontFamily: "var(--compass-font-family)" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", style: { gap: gapSize, fontFamily: "var(--compass-font-family)" }, children: [
     showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4276,28 +5186,39 @@ function EarnAccount({
             padding: compact ? "var(--compass-spacing-card)" : "calc(var(--compass-spacing-card) * 1.25)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "text-xs font-medium uppercase tracking-wide",
-                  style: { color: "var(--compass-color-text-tertiary)" },
-                  children: "Total Balance"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "font-bold",
-                  style: {
-                    color: "var(--compass-color-text)",
-                    fontSize: compact ? "2rem" : "2.5rem",
-                    lineHeight: "1"
-                  },
-                  children: formatCurrency(totalBalance)
-                }
-              )
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setIsBalancesModalOpen(true),
+                className: "flex flex-col text-left w-full transition-opacity hover:opacity-80",
+                style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "text-xs font-medium uppercase tracking-wide",
+                        style: { color: "var(--compass-color-text-tertiary)" },
+                        children: "Total Balance"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "font-bold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: compact ? "2rem" : "2.5rem",
+                        lineHeight: "1"
+                      },
+                      children: formatCurrency(totalBalance)
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -4354,48 +5275,61 @@ function EarnAccount({
           ]
         }
       ),
-      showPnL && earnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
         {
-          className: "flex items-center justify-between",
+          onClick: () => setIsEarningsModalOpen(true),
+          className: "w-full flex items-center justify-between transition-opacity hover:opacity-80",
           style: {
             backgroundColor: "var(--compass-color-surface)",
             border: "1px solid var(--compass-color-border)",
             borderRadius: "var(--compass-border-radius-lg)",
-            padding: spacing
+            padding: compact ? "calc(var(--compass-spacing-unit) * 0.75)" : "var(--compass-spacing-card)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Total Earnings" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "font-semibold",
-                style: { color: "var(--compass-color-success)" },
-                children: [
-                  "+",
-                  formatCurrency(earnings)
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)" }, children: [
+                positions.length,
+                " ",
+                positions.length === 1 ? "position" : "positions"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "|" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    color: totalEarned >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)",
+                    fontWeight: 500
+                  },
+                  children: [
+                    totalEarned >= 0 ? "+" : "",
+                    "$",
+                    totalEarned.toFixed(2),
+                    " earned"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } })
           ]
         }
       ),
-      userPosition?.pnl && /* @__PURE__ */ jsxRuntime.jsx(
-        PnLSummary,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MarketSelector,
         {
-          pnl: userPosition.pnl,
-          tokenSymbol: "USDC",
-          tokenPrice: 1
+          markets: mockMarkets,
+          selectedMarket,
+          onMarketSelect: setSelectedMarket,
+          marketType,
+          onMarketTypeChange: (type) => {
+            setMarketType(type);
+            setSelectedMarket(null);
+          },
+          minTvl,
+          onMinTvlChange: setMinTvl,
+          isLoading: marketQuery.isLoading
         }
       ),
-      userPosition?.deposits?.length || userPosition?.withdrawals?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-        TransactionHistory,
-        {
-          deposits: userPosition.deposits,
-          withdrawals: userPosition.withdrawals,
-          tokenSymbol: "USDC"
-        }
-      ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -4412,6 +5346,7 @@ function EarnAccount({
               {
                 onClick: () => {
                   setActiveTab("deposit");
+                  setSelectedToken("USDC");
                   setError(null);
                 },
                 className: "flex-1 flex items-center justify-center font-medium transition-all",
@@ -4435,6 +5370,7 @@ function EarnAccount({
               {
                 onClick: () => {
                   setActiveTab("withdraw");
+                  setSelectedToken("USDC");
                   setError(null);
                 },
                 className: "flex-1 flex items-center justify-center font-medium transition-all",
@@ -4460,22 +5396,15 @@ function EarnAccount({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex items-center",
+            className: "flex items-center flex-wrap",
             style: {
               backgroundColor: "var(--compass-color-surface)",
               border: "1px solid var(--compass-color-border)",
               borderRadius: "var(--compass-border-radius-lg)",
-              padding: spacing
+              padding: spacing,
+              gap: "calc(var(--compass-spacing-unit) * 0.5)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "font-medium",
-                  style: { color: "var(--compass-color-text-secondary)", fontSize: compact ? "1.25rem" : "1.5rem", marginRight: "calc(var(--compass-spacing-unit) * 0.25)" },
-                  children: "$"
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -4488,9 +5417,64 @@ function EarnAccount({
                   placeholder: "0.00",
                   disabled: isProcessing,
                   className: "flex-1 font-medium bg-transparent outline-none",
-                  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem" }
+                  style: { color: "var(--compass-color-text)", fontSize: compact ? "1.25rem" : "1.5rem", minWidth: 0 }
                 }
               ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsTokenDropdownOpen(!isTokenDropdownOpen),
+                    disabled: isProcessing,
+                    className: "flex items-center font-medium",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-background))",
+                      border: "1px solid var(--compass-color-border)",
+                      color: "var(--compass-color-text)",
+                      borderRadius: "var(--compass-border-radius-md)",
+                      padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                      gap: "calc(var(--compass-spacing-unit) * 0.25)",
+                      fontSize: compact ? "0.875rem" : "1rem"
+                    },
+                    children: [
+                      selectedToken,
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: compact ? 14 : 16, style: { color: "var(--compass-color-text-tertiary)" } })
+                    ]
+                  }
+                ),
+                isTokenDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute right-0 mt-1 z-10",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      border: "1px solid var(--compass-color-border)",
+                      borderRadius: "var(--compass-border-radius-lg)",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                      minWidth: "100px"
+                    },
+                    children: SUPPORTED_TOKENS.map((token) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setSelectedToken(token);
+                          setIsTokenDropdownOpen(false);
+                          setError(null);
+                        },
+                        className: "w-full text-left font-medium transition-colors",
+                        style: {
+                          padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                          color: token === selectedToken ? "var(--compass-color-primary)" : "var(--compass-color-text)",
+                          backgroundColor: token === selectedToken ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))" : "transparent",
+                          fontSize: compact ? "0.875rem" : "1rem"
+                        },
+                        children: token
+                      },
+                      token
+                    ))
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -4502,7 +5486,8 @@ function EarnAccount({
                     border: "1px solid var(--compass-color-border)",
                     color: "var(--compass-color-text-secondary)",
                     borderRadius: "var(--compass-border-radius-md)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)"
+                    padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+                    flexShrink: 0
                   },
                   children: "MAX"
                 }
@@ -4510,9 +5495,30 @@ function EarnAccount({
             ]
           }
         ),
+        needsActionSwap && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center text-sm",
+            style: {
+              backgroundColor: "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
+              color: "var(--compass-color-primary)",
+              borderRadius: "var(--compass-border-radius-lg)",
+              padding: "calc(var(--compass-spacing-unit) * 0.5) calc(var(--compass-spacing-unit) * 0.75)",
+              gap: "calc(var(--compass-spacing-unit) * 0.5)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeTab === "deposit" ? `Swaps ${selectedToken} to USDC, then deposits` : `Withdraws USDC, then swaps to ${selectedToken}` })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", style: { padding: "0 calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Available balance" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: formatCurrency(maxAmount) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: activeTab === "deposit" ? `Available ${selectedToken}` : "Available to withdraw" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: [
+            formatAmount2(maxAmount),
+            " ",
+            activeTab === "deposit" ? selectedToken : "USDC"
+          ] })
         ] })
       ] }),
       error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4545,7 +5551,7 @@ function EarnAccount({
           children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: compact ? 16 : 20, className: "animate-spin" }),
             "Processing..."
-          ] }) : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
+          ] }) : needsActionSwap ? activeTab === "deposit" ? `Swap & Deposit` : `Withdraw & Swap` : activeTab === "deposit" ? "Deposit funds" : "Withdraw funds"
         }
       ),
       statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4582,7 +5588,7 @@ function EarnAccount({
           ]
         }
       ),
-      showFundButton && /* @__PURE__ */ jsxRuntime.jsxs(
+      showTopUpButton && /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           onClick: () => setIsFundModalOpen(true),
@@ -4598,7 +5604,7 @@ function EarnAccount({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { size: compact ? 16 : 18 }),
-            "Transfer from wallet"
+            "Top Up"
           ]
         }
       )
@@ -4666,7 +5672,7 @@ function EarnAccount({
               }
             )
           ] }),
-          needsSwap && /* @__PURE__ */ jsxRuntime.jsxs(
+          needsFundSwap && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: "flex items-center gap-2 p-3 rounded-xl text-sm",
@@ -4778,7 +5784,7 @@ function EarnAccount({
                 "Processing..."
               ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 20 }),
-                needsSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
+                needsFundSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
               ] })
             }
           ),
@@ -4792,6 +5798,125 @@ function EarnAccount({
           )
         ] })
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionModal,
+      {
+        isOpen: isBalancesModalOpen,
+        onClose: () => setIsBalancesModalOpen(false),
+        title: "Balance Breakdown",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+          balancesQuery.data?.balances && Object.keys(balancesQuery.data.balances).length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-xs font-medium uppercase tracking-wide",
+                  style: { color: "var(--compass-color-text-tertiary)" },
+                  children: "Available in Account"
+                }
+              ),
+              Object.entries(balancesQuery.data.balances).map(([symbol, data]) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between p-3 rounded-lg",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    border: "1px solid var(--compass-color-border)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: symbol }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(data.balance) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatCurrency(data.usdValue) })
+                    ] })
+                  ]
+                },
+                symbol
+              ))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between pt-2",
+                style: { borderTop: "1px solid var(--compass-color-border)" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: "Subtotal" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: formatCurrency(earnAccountTotalUsd) })
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-center py-4",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "No tokens in account"
+            }
+          ),
+          depositedBalance > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 pt-2", style: { borderTop: "1px solid var(--compass-color-border)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-xs font-medium uppercase tracking-wide",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "Earning Interest (Aave)"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-3 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
+                  border: "1px solid var(--compass-color-success)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 16, style: { color: "var(--compass-color-success)" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: "USDC" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(depositedBalance) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-success)" }, children: [
+                      formatAPY3(market?.supplyApy || null),
+                      "% APY"
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between pt-3 mt-2",
+              style: { borderTop: "2px solid var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total Balance" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "font-bold text-xl",
+                    style: { color: "var(--compass-color-text)" },
+                    children: formatCurrency(totalBalance)
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EarningsModal,
+      {
+        isOpen: isEarningsModalOpen,
+        onClose: () => setIsEarningsModalOpen(false),
+        positions,
+        totalEarned,
+        isLoading: positionQuery.isLoading
+      }
     )
   ] });
 }
@@ -5804,7 +6929,7 @@ function usePositionsData() {
     refetch: positionsQuery.refetch
   };
 }
-function PositionCard({
+function PositionCard2({
   position,
   showApy = true,
   showPnL = true,
@@ -5979,7 +7104,7 @@ function VenueSection({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3" }),
               venuePositions.positions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(
-                PositionCard,
+                PositionCard2,
                 {
                   position,
                   showApy,