@compass-labs/widgets 0.1.25 → 0.1.27

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
-import { QueryClient, QueryClientProvider, useQueryClient, useQuery } from '@tanstack/react-query';
+import { createContext, forwardRef, useState, useCallback, useImperativeHandle, useContext, useEffect, useRef, useMemo } from 'react';
+import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CompassApiSDK } from '@compass-labs/api-sdk';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-import { Wallet, LogOut, X, ChevronDown, AlertCircle, ArrowRight, Loader2, ArrowDownLeft, ArrowUpRight, ExternalLink, Coins, Search, SlidersHorizontal, TrendingUp, Plus, ChevronRight, Minus, Shield, CheckCircle, Calendar, ArrowDownUp, ChevronUp, Inbox, Percent, Clock, TrendingDown } from 'lucide-react';
+import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, Coins, X, ChevronDown, LogOut, AlertCircle, ArrowRight, ExternalLink, Plus, ChevronRight, Minus, Shield, CheckCircle, ArrowDownUp, AlertTriangle, Check, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar, TrendingUp, TrendingDown } from 'lucide-react';
 
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -1402,6 +1402,7 @@ function TokenSelector({
           borderColor: "var(--compass-color-border)",
           boxShadow: "var(--compass-shadow-lg)",
           maxHeight: "200px",
+          scrollbarWidth: "none",
           borderRadius: "var(--compass-border-radius-lg)"
         },
         children: tokens.map((token) => {
@@ -1965,7 +1966,8 @@ function TransactionHistory({
         className: "mt-2 max-h-48 overflow-y-auto border",
         style: {
           borderColor: "var(--compass-color-border)",
-          borderRadius: "var(--compass-border-radius-lg)"
+          borderRadius: "var(--compass-border-radius-lg)",
+          scrollbarWidth: "none"
         },
         children: /* @__PURE__ */ jsx("div", { children: allEvents.map((item, index) => /* @__PURE__ */ jsxs(
           "div",
@@ -2449,10 +2451,11 @@ function AccountBalancesModal({
   ] });
 }
 var TRANSFER_TOKENS = ["USDC"];
-function EarnAccountBalance({
+var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
   compact = false,
+  hideVisual = false,
   onTransferComplete
-}) {
+}, ref) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeAction, setActiveAction] = useState("deposit");
   const [selectedToken, setSelectedToken] = useState(TRANSFER_TOKENS[0]);
@@ -2526,6 +2529,9 @@ function EarnAccountBalance({
     resetForm();
     setIsModalOpen(true);
   };
+  useImperativeHandle(ref, () => ({
+    openTransferModal: handleOpenModal
+  }));
   const handleCloseModal = () => {
     setIsModalOpen(false);
     resetForm();
@@ -2688,7 +2694,7 @@ function EarnAccountBalance({
     return null;
   }
   const isProcessing = transferState !== "idle" && transferState !== "success" && transferState !== "error";
-  if (!isDeployed) {
+  if (!isDeployed && !hideVisual) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2714,44 +2720,46 @@ function EarnAccountBalance({
     );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setIsBalancesModalOpen(true),
-        className: `flex items-center gap-2 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",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-primary)" } }),
-          balancesLoading ? /* @__PURE__ */ jsx(Loader2, { size: compact ? 12 : 14, className: "animate-spin", style: { color: "var(--compass-color-text-secondary)" } }) : /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `font-medium ${compact ? "text-xs" : "text-sm"}`,
-              style: { color: "var(--compass-color-text)" },
-              children: formatUSD(totalUsdValue)
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleOpenModal,
-        className: `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)",
-          borderRadius: "var(--compass-border-radius-md)"
-        },
-        children: "Fund"
-      }
-    ),
+    !hideVisual && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setIsBalancesModalOpen(true),
+          className: `flex items-center gap-2 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",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Wallet, { size: compact ? 14 : 16, style: { color: "var(--compass-color-primary)" } }),
+            balancesLoading ? /* @__PURE__ */ jsx(Loader2, { size: compact ? 12 : 14, className: "animate-spin", style: { color: "var(--compass-color-text-secondary)" } }) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `font-medium ${compact ? "text-xs" : "text-sm"}`,
+                style: { color: "var(--compass-color-text)" },
+                children: formatUSD(totalUsdValue)
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleOpenModal,
+          className: `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)",
+            borderRadius: "var(--compass-border-radius-md)"
+          },
+          children: "Fund"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       AccountBalancesModal,
       {
@@ -2942,1270 +2950,435 @@ function EarnAccountBalance({
       }
     )
   ] });
-}
-function formatTVL(tvl) {
-  if (!tvl) return "$0";
-  const num = parseFloat(tvl);
-  if (isNaN(num)) return "$0";
-  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
-  if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
-  if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
-  return `$${num.toFixed(2)}`;
-}
-function formatAPY(apy) {
-  if (!apy) return "0.00%";
-  const num = parseFloat(apy);
-  if (isNaN(num)) return "0.00%";
-  return `${num.toFixed(2)}%`;
-}
-function VaultCard({
-  vault,
-  showApy,
-  sortBy,
-  showTvl,
-  showUserPosition,
-  onClick
+});
+var MARKET_TABS = [
+  { value: "variable", label: "VARIABLE" },
+  { value: "fixed", label: "FIXED" }
+];
+var TAB_TO_MARKET_TYPES = {
+  variable: ["aave", "vaults"],
+  fixed: ["pendle"]
+};
+function MarketSelector({
+  markets,
+  selectedMarket,
+  onMarketSelect,
+  marketTab,
+  onMarketTabChange,
+  isLoading,
+  allowedMarketIds
 }) {
-  const getDisplayApy = () => {
-    switch (sortBy) {
-      case "apy_30d":
-        return { value: vault.apy30d, period: "30d" };
-      case "apy_90d":
-        return { value: vault.apy90d, period: "90d" };
-      case "apy_7d":
-      case "tvl":
-      default:
-        return { value: vault.apy7d, period: "7d" };
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsDropdownOpen(false);
+      }
     }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const allowedTypes = TAB_TO_MARKET_TYPES[marketTab];
+  const showTvl = marketTab === "variable";
+  const filteredMarkets = useMemo(() => {
+    return markets.filter((m) => {
+      if (!allowedTypes.includes(m.type)) return false;
+      if (allowedMarketIds !== void 0) {
+        return allowedMarketIds.includes(m.id);
+      }
+      return true;
+    }).sort((a, b) => b.apy - a.apy);
+  }, [markets, allowedTypes, allowedMarketIds]);
+  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}`;
   };
-  const displayApy = getDisplayApy();
-  const hasPosition = vault.userPosition && parseFloat(vault.userPosition.balance) > 0;
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      onClick,
-      className: "w-full border text-left hover:scale-[1.01]",
       style: {
-        backgroundColor: "var(--compass-color-surface)",
-        borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
-        borderRadius: "var(--compass-border-radius-xl)",
-        fontFamily: "var(--compass-font-family)",
-        padding: "var(--compass-spacing-card)",
-        transition: "var(--compass-transition-normal)"
+        display: "flex",
+        flexDirection: "column",
+        gap: "calc(var(--compass-spacing-unit) * 1.5)"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx(
-              "h3",
-              {
-                className: "font-semibold",
-                style: {
-                  fontSize: "var(--compass-font-size-body)",
-                  color: "var(--compass-color-text)"
-                },
-                children: vault.name
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "text-sm",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: vault.assetSymbol
-              }
-            )
-          ] }),
-          showApy && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(TrendingUp, { size: 16, style: { color: "var(--compass-color-success)" } }),
-              /* @__PURE__ */ jsx(
-                "span",
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                borderRadius: "var(--compass-border-radius-md, 8px)",
+                border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
+                overflow: "hidden"
+              },
+              children: MARKET_TABS.map((tab) => /* @__PURE__ */ jsx(
+                "button",
                 {
-                  className: "font-mono text-lg font-bold",
-                  style: { color: "var(--compass-color-success)" },
-                  children: formatAPY(displayApy.value)
-                }
-              )
-            ] }),
+                  onClick: () => onMarketTabChange(tab.value),
+                  style: {
+                    flex: 1,
+                    padding: "6px 8px",
+                    backgroundColor: marketTab === tab.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
+                    color: marketTab === tab.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    fontWeight: 500,
+                    fontFamily: "var(--compass-font-family)",
+                    transition: "var(--compass-transition-normal, all 0.2s ease)"
+                  },
+                  children: tab.label
+                },
+                tab.value
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxs(
-              "span",
+              "button",
               {
-                className: "text-xs",
-                style: { color: "var(--compass-color-text-tertiary)" },
+                onClick: () => hasMarkets && setIsDropdownOpen(!isDropdownOpen),
+                disabled: !hasMarkets || isLoading,
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  backgroundColor: "var(--compass-color-surface, #12121a)",
+                  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
+                  borderRadius: "var(--compass-border-radius-md, 8px)",
+                  fontSize: "13px",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  cursor: hasMarkets ? "pointer" : "not-allowed",
+                  opacity: hasMarkets ? 1 : 0.5,
+                  fontFamily: "var(--compass-font-family)"
+                },
                 children: [
-                  displayApy.period,
-                  " APY"
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        color: selectedMarket ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
+                      },
+                      children: isLoading ? "Loading markets..." : !hasMarkets ? "No markets available" : selectedMarket ? selectedMarket.name : "Select a market"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
+                    selectedMarket && /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--compass-color-success)",
+                          fontSize: "var(--compass-font-size-sm)"
+                        },
+                        children: [
+                          selectedMarket.apy.toFixed(2),
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        size: 16,
+                        style: {
+                          color: "var(--compass-color-text-secondary)",
+                          transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
+                          transition: "var(--compass-transition-normal)"
+                        }
+                      }
+                    )
+                  ] })
                 ]
               }
-            )
-          ] })
-        ] }),
-        (showTvl || showUserPosition && hasPosition) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center justify-between border-t",
-            style: {
-              borderColor: "var(--compass-color-border)",
-              marginTop: "calc(var(--compass-spacing-unit) * 2)",
-              paddingTop: "calc(var(--compass-spacing-unit) * 2)"
-            },
-            children: [
-              showTvl && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: { color: "var(--compass-color-text-tertiary)" },
-                    children: "TVL"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-mono text-sm",
-                    style: { color: "var(--compass-color-text-secondary)" },
-                    children: formatTVL(vault.tvlUsd)
-                  }
-                )
-              ] }),
-              showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: { color: "var(--compass-color-text-tertiary)" },
-                    children: "Position"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "span",
+            ),
+            isDropdownOpen && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "100%",
+                  left: 0,
+                  right: 0,
+                  marginTop: "var(--compass-spacing-unit, 8px)",
+                  backgroundColor: "var(--compass-color-background, #0a0a0f)",
+                  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
+                  borderRadius: "var(--compass-border-radius-lg, 12px)",
+                  boxShadow: "var(--compass-shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.5))",
+                  zIndex: 50,
+                  maxHeight: "200px",
+                  overflowY: "auto",
+                  scrollbarWidth: "none"
+                },
+                children: filteredMarkets.map((market) => /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    className: "font-mono text-sm font-medium",
-                    style: { color: "var(--compass-color-primary)" },
+                    onClick: () => {
+                      onMarketSelect(market);
+                      setIsDropdownOpen(false);
+                    },
+                    style: {
+                      width: "100%",
+                      padding: "calc(var(--compass-spacing-unit, 8px) * 2)",
+                      backgroundColor: selectedMarket?.id === market.id ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.15))" : "var(--compass-color-surface, #12121a)",
+                      border: "none",
+                      borderBottom: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontFamily: "var(--compass-font-family)"
+                    },
                     children: [
-                      parseFloat(vault.userPosition.balance).toFixed(4),
-                      " ",
-                      vault.assetSymbol
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text)" }, children: market.name }),
+                            /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: {
+                                  color: "var(--compass-color-success)",
+                                  fontSize: "var(--compass-font-size-sm)"
+                                },
+                                children: [
+                                  market.apy.toFixed(2),
+                                  "% APY"
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      (showTvl && market.tvl > 0 || market.expiry) && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "var(--compass-font-size-xs)",
+                            color: "var(--compass-color-text-tertiary)",
+                            marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
+                          },
+                          children: [
+                            showTvl && market.tvl > 0 && `TVL: ${formatTvl(market.tvl)}`,
+                            showTvl && market.tvl > 0 && market.expiry && " \xB7 ",
+                            market.expiry && `Expires: ${market.expiry}`
+                          ]
+                        }
+                      )
                     ]
-                  }
-                )
-              ] })
-            ]
-          }
-        )
+                  },
+                  market.id
+                ))
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
 }
-function useVaultsData(options = {}) {
-  const { address } = useEmbeddableWallet();
-  const { chainId } = useChain();
-  const { sortBy = "apy_7d", assetFilter, minApy, minTvl } = options;
-  const vaultsQuery = useQuery({
-    queryKey: ["vaults", chainId, sortBy, assetFilter, minApy, minTvl],
-    queryFn: async () => {
-      const assetSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
-      const params = new URLSearchParams({
-        chain: chainId,
-        orderBy: sortBy === "tvl" ? "tvl_usd" : sortBy,
-        direction: "desc",
-        limit: "100",
-        ...assetSymbol && { assetSymbol }
-      });
-      const response = await fetch(`/api/compass/vaults?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch vaults");
-      }
-      const data = await response.json();
-      let vaults = (data.vaults || []).map((v) => ({
-        vaultAddress: v.vaultAddress,
-        name: v.name || "Unknown Vault",
-        assetSymbol: v.assetSymbol || "UNKNOWN",
-        apy7d: v.apy7d ?? null,
-        apy30d: v.apy30d ?? null,
-        apy90d: v.apy90d ?? null,
-        tvlUsd: v.tvlUsd ?? null
-      }));
-      if (assetFilter && assetFilter.length > 1) {
-        vaults = vaults.filter(
-          (v) => assetFilter.includes(v.assetSymbol.toUpperCase())
-        );
-      }
-      if (minApy !== void 0 && minApy > 0) {
-        vaults = vaults.filter((v) => {
-          const apy = parseFloat(v.apy7d || "0");
-          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
-  });
-  const positionsQuery = useQuery({
-    queryKey: ["vaultPositions", chainId, address],
-    queryFn: async () => {
-      if (!address) return [];
-      const params = new URLSearchParams({
-        chain: chainId,
-        owner: address
-      });
-      const response = await fetch(`/api/compass/positions?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch positions");
-      }
-      const data = await response.json();
-      return (data.vaults || []).map((p) => ({
-        vaultAddress: p.vaultAddress,
-        balance: p.balance || "0",
-        pnl: p.pnl ? {
-          unrealizedPnl: p.pnl.unrealizedPnl || "0",
-          realizedPnl: p.pnl.realizedPnl || "0",
-          totalPnl: p.pnl.totalPnl || "0",
-          totalDeposited: p.pnl.totalDeposited || "0"
-        } : void 0,
-        deposits: (p.deposits || []).map((d) => ({
-          amount: d.inputAmount || d.amount || "0",
-          blockNumber: d.blockNumber || 0,
-          txHash: d.transactionHash || d.txHash || ""
-        })),
-        withdrawals: (p.withdrawals || []).map((w) => ({
-          amount: w.outputAmount || w.amount || "0",
-          blockNumber: w.blockNumber || 0,
-          txHash: w.transactionHash || w.txHash || ""
-        }))
-      }));
-    },
-    enabled: !!address,
-    staleTime: 30 * 1e3
-  });
-  const vaultsWithPositions = (vaultsQuery.data || []).map((vault) => {
-    const position = positionsQuery.data?.find(
-      (p) => p.vaultAddress.toLowerCase() === vault.vaultAddress.toLowerCase()
-    );
-    return { ...vault, userPosition: position };
-  });
-  return {
-    vaults: vaultsWithPositions,
-    isLoading: vaultsQuery.isLoading,
-    isError: vaultsQuery.isError,
-    error: vaultsQuery.error,
-    refetch: () => {
-      vaultsQuery.refetch();
-      positionsQuery.refetch();
-    }
-  };
-}
-function VaultsList({
-  showApy = true,
-  apyPeriods = ["7d", "30d", "90d"],
-  showTvl = true,
-  showUserPosition = true,
-  showPnL = true,
-  showHistory = true,
-  showSearch = true,
-  showSort = true,
-  defaultSort = "apy_7d",
-  assetFilter,
-  minApy,
-  minTvl: initialMinTvl,
-  showTvlFilter = true,
-  onVaultSelect,
-  onDeposit,
-  onWithdraw
-}) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortBy, setSortBy] = useState(defaultSort);
-  const [selectedVault, setSelectedVault] = useState(null);
-  const [minTvlFilter, setMinTvlFilter] = useState(initialMinTvl);
-  const [showFilterPanel, setShowFilterPanel] = useState(false);
-  const { vaults, isLoading, isError, refetch } = useVaultsData({
-    sortBy,
-    assetFilter,
-    minApy,
-    minTvl: minTvlFilter
-  });
-  const handleMinTvlChange = useCallback((value) => {
-    const num = parseFloat(value);
-    setMinTvlFilter(isNaN(num) || num <= 0 ? void 0 : num);
-  }, []);
-  const filteredVaults = useMemo(() => {
-    if (!searchQuery) return vaults;
-    const query = searchQuery.toLowerCase();
-    return vaults.filter(
-      (v) => v.name.toLowerCase().includes(query) || v.assetSymbol.toLowerCase().includes(query)
-    );
-  }, [vaults, searchQuery]);
-  const handleVaultClick = (vault) => {
-    setSelectedVault(vault);
-    onVaultSelect?.(vault);
-  };
-  const handleActionSuccess = (action, amount, txHash) => {
-    if (action === "deposit") {
-      onDeposit?.(selectedVault, amount, txHash);
-    } else {
-      onWithdraw?.(selectedVault, amount, txHash);
-    }
-    refetch();
+function PositionCard({ position }) {
+  const [isHistoryExpanded, setIsHistoryExpanded] = useState(false);
+  const formatShortDate = (dateStr) => {
+    if (!dateStr) return null;
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return null;
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
-        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
-      ] })
-    ] }),
-    (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        showSearch && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "var(--compass-color-surface, #12121a)",
+        border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
+        borderRadius: "var(--compass-border-radius-lg, 12px)",
+        padding: "var(--compass-spacing-card, 16px)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex-1 flex items-center border",
             style: {
-              backgroundColor: "var(--compass-color-background)",
-              borderColor: "var(--compass-color-border)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)",
-              gap: "calc(var(--compass-spacing-unit) * 0.5)"
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
             },
             children: [
-              /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
               /* @__PURE__ */ jsx(
-                "input",
+                "span",
+                {
+                  style: {
+                    fontWeight: 600,
+                    color: "var(--compass-color-text)",
+                    fontSize: "var(--compass-font-size-base)"
+                  },
+                  children: position.marketName
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
                 {
-                  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)" }
+                  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),
+                    "%"
+                  ]
                 }
               )
             ]
           }
         ),
-        showSort && /* @__PURE__ */ jsxs(
-          "select",
-          {
-            value: sortBy,
-            onChange: (e) => setSortBy(e.target.value),
-            className: "border text-sm cursor-pointer",
-            style: {
-              backgroundColor: "var(--compass-color-background)",
-              borderColor: "var(--compass-color-border)",
-              color: "var(--compass-color-text)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)"
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "apy_7d", children: "APY (7D)" }),
-              /* @__PURE__ */ jsx("option", { value: "apy_30d", children: "APY (30D)" }),
-              /* @__PURE__ */ jsx("option", { value: "apy_90d", children: "APY (90D)" }),
-              /* @__PURE__ */ jsx("option", { value: "tvl", children: "TVL" })
-            ]
-          }
-        ),
-        showTvlFilter && /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: () => setShowFilterPanel(!showFilterPanel),
-            className: "border text-sm flex items-center",
             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)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)",
-              gap: "calc(var(--compass-spacing-unit) * 0.5)",
-              transition: "var(--compass-transition-normal)"
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "calc(var(--compass-spacing-unit) * 2)",
+              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
             },
             children: [
-              /* @__PURE__ */ jsx(SlidersHorizontal, { size: 14 }),
-              "Filter"
-            ]
-          }
-        )
-      ] }),
-      showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center border",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            borderColor: "var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            fontFamily: "var(--compass-font-family)",
-            padding: "calc(var(--compass-spacing-unit) * 0.75)",
-            gap: "calc(var(--compass-spacing-unit) * 0.75)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                className: "text-sm font-medium whitespace-nowrap",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: "Min TVL:"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-              /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "number",
-                  placeholder: "0",
-                  value: minTvlFilter || "",
-                  onChange: (e) => handleMinTvlChange(e.target.value),
-                  className: "w-24 border text-sm bg-transparent",
-                  style: {
-                    borderColor: "var(--compass-color-border)",
-                    color: "var(--compass-color-text)",
-                    borderRadius: "var(--compass-border-radius-sm)",
-                    fontFamily: "var(--compass-font-family)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)"
-                  }
-                }
-              )
-            ] }),
-            minTvlFilter && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setMinTvlFilter(void 0),
-                className: "text-xs",
-                style: {
-                  backgroundColor: "var(--compass-color-error-muted)",
-                  color: "var(--compass-color-error)",
-                  borderRadius: "var(--compass-border-radius-sm)",
-                  padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)",
-                  transition: "var(--compass-transition-fast)"
-                },
-                children: "Clear"
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: {
-          backgroundColor: "var(--compass-color-error-muted)",
-          color: "var(--compass-color-error)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "var(--compass-spacing-card)"
-        },
-        children: "Failed to load vaults. Please try again."
-      }
-    ) : filteredVaults.length === 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
-        children: "No vaults found"
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredVaults.map((vault) => /* @__PURE__ */ jsx(
-      VaultCard,
-      {
-        vault,
-        showApy,
-        sortBy,
-        showTvl,
-        showUserPosition,
-        onClick: () => handleVaultClick(vault)
-      },
-      vault.vaultAddress
-    )) }),
-    selectedVault && /* @__PURE__ */ jsx(
-      ActionModal,
-      {
-        isOpen: !!selectedVault,
-        onClose: () => setSelectedVault(null),
-        title: selectedVault.name,
-        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-          showPnL && selectedVault.userPosition?.pnl && /* @__PURE__ */ jsx(
-            PnLSummary,
-            {
-              pnl: selectedVault.userPosition.pnl,
-              tokenSymbol: selectedVault.assetSymbol,
-              tokenPrice: 1
-            }
-          ),
-          showHistory && (selectedVault.userPosition?.deposits?.length || selectedVault.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
-            TransactionHistory,
-            {
-              deposits: selectedVault.userPosition?.deposits,
-              withdrawals: selectedVault.userPosition?.withdrawals,
-              tokenSymbol: selectedVault.assetSymbol
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DepositWithdrawForm,
-            {
-              venueType: "VAULT",
-              venueAddress: selectedVault.vaultAddress,
-              venueToken: selectedVault.assetSymbol,
-              positionBalance: selectedVault.userPosition?.balance,
-              onSuccess: handleActionSuccess
-            }
-          )
-        ] }) })
-      }
-    )
-  ] });
-}
-function useAaveData(options = {}) {
-  const { address } = useEmbeddableWallet();
-  const { chainId } = useChain();
-  const { assetFilter } = options;
-  const marketsQuery = useQuery({
-    queryKey: ["aaveMarkets", chainId, assetFilter],
-    queryFn: async () => {
-      const params = new URLSearchParams({ chain: chainId });
-      const response = await fetch(`/api/compass/aave/markets?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch Aave markets");
-      }
-      const data = await response.json();
-      const marketsDict = data.markets || {};
-      let markets = [];
-      for (const [symbol, tokenData] of Object.entries(marketsDict)) {
-        if (assetFilter && assetFilter.length > 0) {
-          if (!assetFilter.includes(symbol.toUpperCase())) {
-            continue;
-          }
-        }
-        const token = tokenData;
-        const chainData = token.chains?.[chainId];
-        if (chainData) {
-          markets.push({
-            marketAddress: chainData.address || "",
-            reserveSymbol: symbol,
-            underlyingSymbol: symbol,
-            supplyApy: chainData.supplyApy?.toString() ?? null,
-            borrowApy: chainData.borrowApy?.toString() ?? null
-          });
-        }
-      }
-      markets.sort((a, b) => {
-        return parseFloat(b.supplyApy || "0") - parseFloat(a.supplyApy || "0");
-      });
-      return markets;
-    },
-    staleTime: 30 * 1e3
-  });
-  const positionsQuery = useQuery({
-    queryKey: ["aavePositions", chainId, address],
-    queryFn: async () => {
-      if (!address) return [];
-      const params = new URLSearchParams({
-        chain: chainId,
-        owner: address
-      });
-      const response = await fetch(`/api/compass/positions?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch positions");
-      }
-      const data = await response.json();
-      return (data.aave || []).map((p) => ({
-        marketAddress: p.marketAddress || "",
-        reserveSymbol: p.reserveSymbol || "",
-        balance: p.balance || "0",
-        pnl: p.pnl ? {
-          unrealizedPnl: p.pnl.unrealizedPnl || "0",
-          realizedPnl: p.pnl.realizedPnl || "0",
-          totalPnl: p.pnl.totalPnl || "0",
-          totalDeposited: p.pnl.totalDeposited || "0"
-        } : void 0,
-        deposits: (p.deposits || []).map((d) => ({
-          amount: d.inputAmount || d.amount || "0",
-          blockNumber: d.blockNumber || 0,
-          txHash: d.transactionHash || d.txHash || ""
-        })),
-        withdrawals: (p.withdrawals || []).map((w) => ({
-          amount: w.outputAmount || w.amount || "0",
-          blockNumber: w.blockNumber || 0,
-          txHash: w.transactionHash || w.txHash || ""
-        }))
-      }));
-    },
-    enabled: !!address,
-    staleTime: 30 * 1e3
-  });
-  const marketsWithPositions = (marketsQuery.data || []).map((market) => {
-    const position = positionsQuery.data?.find(
-      (p) => p.reserveSymbol.toLowerCase() === market.reserveSymbol.toLowerCase()
-    );
-    return { ...market, userPosition: position };
-  });
-  return {
-    markets: marketsWithPositions,
-    isLoading: marketsQuery.isLoading,
-    isError: marketsQuery.isError,
-    error: marketsQuery.error,
-    refetch: () => {
-      marketsQuery.refetch();
-      positionsQuery.refetch();
-    }
-  };
-}
-function formatAPY2(apy) {
-  if (!apy) return "0.00%";
-  const num = parseFloat(apy);
-  return `${num.toFixed(2)}%`;
-}
-function AaveMarketsList({
-  showApy = true,
-  showUserPosition = true,
-  showPnL = true,
-  showHistory = true,
-  showSearch = true,
-  assetFilter,
-  onMarketSelect,
-  onSupply,
-  onWithdraw
-}) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedMarket, setSelectedMarket] = useState(null);
-  const { markets, isLoading, isError, refetch } = useAaveData({ assetFilter });
-  const filteredMarkets = useMemo(() => {
-    if (!searchQuery) return markets;
-    const query = searchQuery.toLowerCase();
-    return markets.filter(
-      (m) => m.reserveSymbol.toLowerCase().includes(query) || m.underlyingSymbol.toLowerCase().includes(query)
-    );
-  }, [markets, searchQuery]);
-  const handleMarketClick = (market) => {
-    setSelectedMarket(market);
-    onMarketSelect?.(market);
-  };
-  const handleActionSuccess = (action, amount, txHash) => {
-    if (action === "deposit") {
-      onSupply?.(selectedMarket, amount, txHash);
-    } else {
-      onWithdraw?.(selectedMarket, amount, txHash);
-    }
-    refetch();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
-        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
-      ] })
-    ] }),
-    showSearch && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center border",
-        style: {
-          backgroundColor: "var(--compass-color-background)",
-          borderColor: "var(--compass-color-border)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)",
-          padding: "var(--compass-spacing-input)",
-          gap: "calc(var(--compass-spacing-unit) * 0.5)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
-          /* @__PURE__ */ 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)" }
-            }
-          )
-        ]
-      }
-    ),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: {
-          backgroundColor: "var(--compass-color-error-muted)",
-          color: "var(--compass-color-error)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "var(--compass-spacing-card)"
-        },
-        children: "Failed to load Aave markets. Please try again."
-      }
-    ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
-        children: "No markets found"
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredMarkets.map((market) => {
-      const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => handleMarketClick(market),
-          className: "w-full border text-left hover:scale-[1.01]",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-xl)",
-            fontFamily: "var(--compass-font-family)",
-            padding: "var(--compass-spacing-card)",
-            transition: "var(--compass-transition-normal)"
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
+              /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx(
-                  "h3",
+                  "div",
                   {
-                    className: "font-semibold",
                     style: {
-                      fontSize: "var(--compass-font-size-body)",
-                      color: "var(--compass-color-text)"
+                      fontSize: "var(--compass-font-size-xs)",
+                      color: "var(--compass-color-text-tertiary)",
+                      marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
                     },
-                    children: market.underlyingSymbol
+                    children: "Amount"
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "text-sm",
-                    style: { color: "var(--compass-color-text-secondary)" },
-                    children: "Aave V3"
-                  }
-                )
+                /* @__PURE__ */ jsxs("div", { style: { color: "var(--compass-color-text)", fontWeight: 500 }, children: [
+                  position.amount.toLocaleString(),
+                  " ",
+                  position.token
+                ] })
               ] }),
-              showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-                /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-mono font-semibold",
-                    style: { color: "var(--compass-color-success)" },
-                    children: formatAPY2(market.supplyApy)
-                  }
-                )
-              ] })
-            ] }),
-            showUserPosition && hasPosition && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex items-center justify-end border-t",
-                style: {
-                  borderColor: "var(--compass-color-border)",
-                  marginTop: "calc(var(--compass-spacing-unit) * 0.75)",
-                  paddingTop: "calc(var(--compass-spacing-unit) * 0.75)"
-                },
-                children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+              (() => {
+                const deposits = position.transactions.filter((t) => t.type === "deposit" && t.timestamp);
+                const earliest = deposits.length > 0 ? deposits.reduce((min, t) => !min || t.timestamp < min ? t.timestamp : min, "") : void 0;
+                const formatted = formatShortDate(earliest);
+                if (!formatted) return null;
+                return /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(
-                    "span",
+                    "div",
                     {
-                      className: "text-xs",
-                      style: { color: "var(--compass-color-text-tertiary)" },
-                      children: "Your Position"
+                      style: {
+                        fontSize: "var(--compass-font-size-xs)",
+                        color: "var(--compass-color-text-tertiary)",
+                        marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                      },
+                      children: "Entered"
                     }
                   ),
-                  /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: "font-mono text-sm font-medium",
-                      style: { color: "var(--compass-color-primary)" },
-                      children: [
-                        parseFloat(market.userPosition.balance).toFixed(4),
-                        " ",
-                        market.underlyingSymbol
-                      ]
-                    }
-                  )
-                ] })
-              }
-            )
-          ]
-        },
-        market.marketAddress
-      );
-    }) }),
-    selectedMarket && /* @__PURE__ */ jsx(
-      ActionModal,
-      {
-        isOpen: !!selectedMarket,
-        onClose: () => setSelectedMarket(null),
-        title: `${selectedMarket.underlyingSymbol} - Aave`,
-        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-          showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsx(
-            PnLSummary,
-            {
-              pnl: selectedMarket.userPosition.pnl,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenPrice: 1
-            }
-          ),
-          showHistory && (selectedMarket.userPosition?.deposits?.length || selectedMarket.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
-            TransactionHistory,
-            {
-              deposits: selectedMarket.userPosition?.deposits,
-              withdrawals: selectedMarket.userPosition?.withdrawals,
-              tokenSymbol: selectedMarket.underlyingSymbol
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DepositWithdrawForm,
-            {
-              venueType: "AAVE",
-              venueAddress: selectedMarket.marketAddress,
-              venueToken: selectedMarket.underlyingSymbol,
-              positionBalance: selectedMarket.userPosition?.balance,
-              onSuccess: handleActionSuccess
-            }
-          )
-        ] }) })
-      }
-    )
-  ] });
-}
-var MARKET_TABS = [
-  { value: "variable", label: "VARIABLE" },
-  { value: "fixed", label: "FIXED" }
-];
-var TAB_TO_MARKET_TYPES = {
-  variable: ["aave", "vaults"],
-  fixed: ["pendle"]
-};
-function MarketSelector({
-  markets,
-  selectedMarket,
-  onMarketSelect,
-  marketTab,
-  onMarketTabChange,
-  isLoading,
-  allowedMarketIds
-}) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef(null);
-  useEffect(() => {
-    function handleClickOutside(e) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsDropdownOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const allowedTypes = TAB_TO_MARKET_TYPES[marketTab];
-  const showTvl = marketTab === "variable";
-  const filteredMarkets = useMemo(() => {
-    return markets.filter((m) => {
-      if (!allowedTypes.includes(m.type)) return false;
-      if (allowedMarketIds !== void 0) {
-        return allowedMarketIds.includes(m.id);
-      }
-      return true;
-    }).sort((a, b) => b.apy - a.apy);
-  }, [markets, allowedTypes, allowedMarketIds]);
-  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__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "calc(var(--compass-spacing-unit) * 1.5)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ 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__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                borderRadius: "var(--compass-border-radius-md, 8px)",
-                border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                overflow: "hidden"
-              },
-              children: MARKET_TABS.map((tab) => /* @__PURE__ */ jsx(
-                "button",
+                  /* @__PURE__ */ jsx("div", { style: { color: "var(--compass-color-text)" }, children: formatted })
+                ] });
+              })()
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              paddingTop: "calc(var(--compass-spacing-unit) * 2)",
+              borderTop: "1px solid var(--compass-color-border)",
+              display: "flex",
+              flexDirection: "column",
+              gap: "calc(var(--compass-spacing-unit) * 1.5)"
+            },
+            children: [
+              position.pnl ? /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  onClick: () => onMarketTabChange(tab.value),
                   style: {
-                    flex: 1,
-                    padding: "6px 8px",
-                    backgroundColor: marketTab === tab.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
-                    color: marketTab === tab.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
-                    border: "none",
-                    cursor: "pointer",
-                    fontSize: "12px",
-                    fontWeight: 500,
-                    fontFamily: "var(--compass-font-family)",
-                    transition: "var(--compass-transition-normal, all 0.2s ease)"
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1fr",
+                    gap: "calc(var(--compass-spacing-unit) * 2)"
                   },
-                  children: tab.label
-                },
-                tab.value
-              ))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ 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__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => hasMarkets && setIsDropdownOpen(!isDropdownOpen),
-                disabled: !hasMarkets || isLoading,
-                style: {
-                  width: "100%",
-                  padding: "8px 12px",
-                  backgroundColor: "var(--compass-color-surface, #12121a)",
-                  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                  borderRadius: "var(--compass-border-radius-md, 8px)",
-                  fontSize: "13px",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  cursor: hasMarkets ? "pointer" : "not-allowed",
-                  opacity: hasMarkets ? 1 : 0.5,
-                  fontFamily: "var(--compass-font-family)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        color: selectedMarket ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)"
-                      },
-                      children: isLoading ? "Loading markets..." : !hasMarkets ? "No markets available" : selectedMarket ? selectedMarket.name : "Select a market"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--compass-spacing-unit)" }, children: [
-                    selectedMarket && /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          color: "var(--compass-color-success)",
-                          fontSize: "var(--compass-font-size-sm)"
-                        },
-                        children: [
-                          selectedMarket.apy.toFixed(2),
-                          "%"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ChevronDown,
-                      {
-                        size: 16,
-                        style: {
-                          color: "var(--compass-color-text-secondary)",
-                          transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
-                          transition: "var(--compass-transition-normal)"
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "var(--compass-font-size-xs)",
+                            color: "var(--compass-color-text-tertiary)",
+                            marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
+                          },
+                          children: "Unrealised P&L"
                         }
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            isDropdownOpen && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: "100%",
-                  left: 0,
-                  right: 0,
-                  marginTop: "var(--compass-spacing-unit, 8px)",
-                  backgroundColor: "var(--compass-color-background, #0a0a0f)",
-                  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                  borderRadius: "var(--compass-border-radius-lg, 12px)",
-                  boxShadow: "var(--compass-shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.5))",
-                  zIndex: 50,
-                  maxHeight: "200px",
-                  overflowY: "auto"
-                },
-                children: filteredMarkets.map((market) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      onMarketSelect(market);
-                      setIsDropdownOpen(false);
-                    },
-                    style: {
-                      width: "100%",
-                      padding: "calc(var(--compass-spacing-unit, 8px) * 2)",
-                      backgroundColor: selectedMarket?.id === market.id ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.15))" : "var(--compass-color-surface, #12121a)",
-                      border: "none",
-                      borderBottom: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      fontFamily: "var(--compass-font-family)"
-                    },
-                    children: [
+                      ),
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
                           style: {
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center"
+                            fontWeight: 600,
+                            color: position.pnl.unrealizedPnl >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
                           },
                           children: [
-                            /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text)" }, children: market.name }),
-                            /* @__PURE__ */ jsxs(
-                              "span",
-                              {
-                                style: {
-                                  color: "var(--compass-color-success)",
-                                  fontSize: "var(--compass-font-size-sm)"
-                                },
-                                children: [
-                                  market.apy.toFixed(2),
-                                  "% APY"
-                                ]
-                              }
-                            )
+                            position.pnl.unrealizedPnl >= 0 ? "+" : "",
+                            "$",
+                            position.pnl.unrealizedPnl.toFixed(2)
                           ]
                         }
-                      ),
-                      (showTvl && market.tvl > 0 || market.expiry) && /* @__PURE__ */ jsxs(
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
                         "div",
                         {
                           style: {
                             fontSize: "var(--compass-font-size-xs)",
                             color: "var(--compass-color-text-tertiary)",
-                            marginTop: "calc(var(--compass-spacing-unit) * 0.5)"
+                            marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
                           },
-                          children: [
-                            showTvl && market.tvl > 0 && `TVL: ${formatTvl(market.tvl)}`,
-                            showTvl && market.tvl > 0 && market.expiry && " \xB7 ",
-                            market.expiry && `Expires: ${market.expiry}`
-                          ]
-                        }
-                      )
-                    ]
-                  },
-                  market.id
-                ))
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function PositionCard({ position }) {
-  const [isHistoryExpanded, setIsHistoryExpanded] = useState(false);
-  const formatShortDate = (dateStr) => {
-    if (!dateStr) return null;
-    const date = new Date(dateStr);
-    if (isNaN(date.getTime())) return null;
-    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "var(--compass-color-surface, #12121a)",
-        border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
-        borderRadius: "var(--compass-border-radius-lg, 12px)",
-        padding: "var(--compass-spacing-card, 16px)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontWeight: 600,
-                    color: "var(--compass-color-text)",
-                    fontSize: "var(--compass-font-size-base)"
-                  },
-                  children: position.marketName
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "calc(var(--compass-spacing-unit) * 2)",
-              marginBottom: "calc(var(--compass-spacing-unit) * 2)"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ 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__ */ jsxs("div", { style: { color: "var(--compass-color-text)", fontWeight: 500 }, children: [
-                  position.amount.toLocaleString(),
-                  " ",
-                  position.token
-                ] })
-              ] }),
-              (() => {
-                const deposits = position.transactions.filter((t) => t.type === "deposit" && t.timestamp);
-                const earliest = deposits.length > 0 ? deposits.reduce((min, t) => !min || t.timestamp < min ? t.timestamp : min, "") : void 0;
-                const formatted = formatShortDate(earliest);
-                if (!formatted) return null;
-                return /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ 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__ */ jsx("div", { style: { color: "var(--compass-color-text)" }, children: formatted })
-                ] });
-              })()
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              paddingTop: "calc(var(--compass-spacing-unit) * 2)",
-              borderTop: "1px solid var(--compass-color-border)",
-              display: "flex",
-              flexDirection: "column",
-              gap: "calc(var(--compass-spacing-unit) * 1.5)"
-            },
-            children: [
-              position.pnl ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: "calc(var(--compass-spacing-unit) * 2)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "var(--compass-font-size-xs)",
-                            color: "var(--compass-color-text-tertiary)",
-                            marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
-                          },
-                          children: "Unrealised P&L"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          style: {
-                            fontWeight: 600,
-                            color: position.pnl.unrealizedPnl >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
-                          },
-                          children: [
-                            position.pnl.unrealizedPnl >= 0 ? "+" : "",
-                            "$",
-                            position.pnl.unrealizedPnl.toFixed(2)
-                          ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "var(--compass-font-size-xs)",
-                            color: "var(--compass-color-text-tertiary)",
-                            marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
-                          },
-                          children: "Realised P&L"
+                          children: "Realised P&L"
                         }
                       ),
                       /* @__PURE__ */ jsxs(
@@ -4566,6 +3739,7 @@ function EarningsModal({ isOpen, onClose, positions, totalEarned, isLoading }) {
                 style: {
                   flex: 1,
                   overflowY: "auto",
+                  scrollbarWidth: "none",
                   padding: "var(--compass-spacing-card, 16px)",
                   display: "flex",
                   flexDirection: "column",
@@ -4759,7 +3933,7 @@ function EarnAccount({
       if (!response.ok) return [];
       const data = await response.json();
       const marketsList = data.markets || [];
-      const parseExpiry = (expiry) => {
+      const parseExpiry2 = (expiry) => {
         if (!expiry || expiry === 0) return void 0;
         const timestamp = typeof expiry === "number" ? expiry : parseInt(expiry, 10);
         if (isNaN(timestamp) || timestamp <= 0) return void 0;
@@ -4769,7 +3943,7 @@ function EarnAccount({
         return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
       };
       return marketsList.map((m) => {
-        const expiryStr = parseExpiry(m.expiry);
+        const expiryStr = parseExpiry2(m.expiry);
         return {
           id: `pendle-${m.marketAddress || m.address}`,
           name: m.name || `${m.underlyingSymbol || "PT"}${expiryStr ? ` ${expiryStr}` : ""}`,
@@ -6016,551 +5190,53 @@ function EarnAccount({
     )
   ] });
 }
-function usePendleData(options = {}) {
-  const { address } = useEmbeddableWallet();
+function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
   const { chainId } = useChain();
-  const { sortBy = "fixed_apy", assetFilter, minTvl } = options;
-  const marketsQuery = useQuery({
-    queryKey: ["pendleMarkets", chainId, sortBy, assetFilter, minTvl],
+  const { address } = useCompassWallet();
+  const query = useQuery({
+    queryKey: ["swapQuote", chainId, fromToken, toToken, amount, address],
     queryFn: async () => {
-      const underlyingSymbol = assetFilter && assetFilter.length === 1 ? assetFilter[0] : void 0;
-      const orderBy = sortBy === "tvl" ? "tvl_usd" : "implied_apy";
-      const params = new URLSearchParams({
-        chain: chainId,
-        orderBy,
-        direction: "desc",
-        limit: "100",
-        ...underlyingSymbol && { underlyingSymbol }
-      });
-      const response = await fetch(`/api/compass/pendle/markets?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch Pendle markets");
-      }
-      const data = await response.json();
-      const now = Date.now() / 1e3;
-      let markets = (data.markets || []).filter((m) => m.expiry && m.expiry > now).map((m) => ({
-        marketAddress: m.marketAddress || "",
-        ptAddress: m.ptAddress || "",
-        name: m.ptName || `PT-${m.underlyingSymbol || "UNKNOWN"}`,
-        underlyingSymbol: m.underlyingSymbol || "UNKNOWN",
-        // Use impliedApy as the main APY (this is what wallet-earn displays)
-        fixedApy: m.impliedApy?.toString() ?? null,
-        impliedApy: m.impliedApy?.toString() ?? null,
-        tvlUsd: m.tvlUsd?.toString() ?? null,
-        // Convert Unix timestamp to ISO string for display
-        expiry: new Date(m.expiry * 1e3).toISOString()
-      }));
-      if (assetFilter && assetFilter.length > 1) {
-        markets = markets.filter(
-          (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 (!fromToken || !toToken || !amount || parseFloat(amount) <= 0 || !address) {
+        return null;
       }
-      if (sortBy === "expiry") {
-        markets.sort((a, b) => {
-          return new Date(a.expiry).getTime() - new Date(b.expiry).getTime();
+      try {
+        const params = new URLSearchParams({
+          owner: address,
+          chain: chainId,
+          tokenIn: fromToken,
+          tokenOut: toToken,
+          amountIn: amount
         });
+        const response = await fetch(`/api/compass/swap/quote?${params}`);
+        if (!response.ok) {
+          const errorData = await response.json();
+          const errorMessage = errorData.message || errorData.error || "Failed to get swap quote";
+          throw new Error(errorMessage);
+        }
+        const data = await response.json();
+        const outputAmount = data.estimatedAmountOut || "0";
+        const inputAmountNum = parseFloat(amount);
+        const outputAmountNum = parseFloat(outputAmount);
+        return {
+          inputAmount: amount,
+          outputAmount,
+          rate: inputAmountNum > 0 ? (outputAmountNum / inputAmountNum).toString() : "0"
+        };
+      } catch (error) {
+        throw error;
       }
-      return markets;
-    },
-    staleTime: 30 * 1e3
-  });
-  const positionsQuery = useQuery({
-    queryKey: ["pendlePositions", chainId, address],
-    queryFn: async () => {
-      if (!address) return [];
-      const params = new URLSearchParams({
-        chain: chainId,
-        owner: address
-      });
-      const response = await fetch(`/api/compass/positions?${params}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch positions");
-      }
-      const data = await response.json();
-      return (data.pendlePt || []).map((p) => ({
-        marketAddress: p.marketAddress || "",
-        balance: p.balance || "0",
-        pnl: p.pnl ? {
-          unrealizedPnl: p.pnl.unrealizedPnl || "0",
-          realizedPnl: p.pnl.realizedPnl || "0",
-          totalPnl: p.pnl.totalPnl || "0",
-          totalDeposited: p.pnl.totalDeposited || "0"
-        } : void 0,
-        deposits: (p.deposits || []).map((d) => ({
-          amount: d.inputAmount || d.amount || "0",
-          blockNumber: d.blockNumber || 0,
-          txHash: d.transactionHash || d.txHash || ""
-        })),
-        withdrawals: (p.withdrawals || []).map((w) => ({
-          amount: w.outputAmount || w.amount || "0",
-          blockNumber: w.blockNumber || 0,
-          txHash: w.transactionHash || w.txHash || ""
-        }))
-      }));
     },
-    enabled: !!address,
-    staleTime: 30 * 1e3
-  });
-  const marketsWithPositions = (marketsQuery.data || []).map((market) => {
-    const position = positionsQuery.data?.find(
-      (p) => p.marketAddress.toLowerCase() === market.marketAddress.toLowerCase()
-    );
-    return { ...market, userPosition: position };
+    enabled: enabled && !!address && !!fromToken && !!toToken && !!amount && parseFloat(amount) > 0,
+    staleTime: 10 * 1e3,
+    refetchInterval: 15 * 1e3,
+    retry: 1
   });
   return {
-    markets: marketsWithPositions,
-    isLoading: marketsQuery.isLoading,
-    isError: marketsQuery.isError,
-    error: marketsQuery.error,
-    refetch: () => {
-      marketsQuery.refetch();
-      positionsQuery.refetch();
-    }
-  };
-}
-function formatAPY3(apy) {
-  if (!apy) return "0.00%";
-  return `${parseFloat(apy).toFixed(2)}%`;
-}
-function formatExpiry(expiry) {
-  const date = new Date(expiry);
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-}
-function formatTVL2(tvl) {
-  if (!tvl) return "$0";
-  const num = parseFloat(tvl);
-  if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
-  if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
-  if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
-  return `$${num.toFixed(2)}`;
-}
-function PendleMarketsList({
-  showApy = true,
-  showTvl = true,
-  showExpiry = true,
-  showUserPosition = true,
-  showPnL = true,
-  showHistory = true,
-  showSearch = true,
-  showSort = true,
-  defaultSort = "fixed_apy",
-  assetFilter,
-  minTvl: initialMinTvl,
-  showTvlFilter = true,
-  onMarketSelect,
-  onDeposit,
-  onWithdraw
-}) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortBy, setSortBy] = useState(defaultSort);
-  const [selectedMarket, setSelectedMarket] = useState(null);
-  const [minTvlFilter, setMinTvlFilter] = useState(initialMinTvl);
-  const [showFilterPanel, setShowFilterPanel] = useState(false);
-  const { markets, isLoading, isError, refetch } = usePendleData({ sortBy, assetFilter, minTvl: minTvlFilter });
-  const handleMinTvlChange = useCallback((value) => {
-    const num = parseFloat(value);
-    setMinTvlFilter(isNaN(num) || num <= 0 ? void 0 : num);
-  }, []);
-  const filteredMarkets = useMemo(() => {
-    if (!searchQuery) return markets;
-    const query = searchQuery.toLowerCase();
-    return markets.filter(
-      (m) => m.name.toLowerCase().includes(query) || m.underlyingSymbol.toLowerCase().includes(query)
-    );
-  }, [markets, searchQuery]);
-  const handleMarketClick = (market) => {
-    setSelectedMarket(market);
-    onMarketSelect?.(market);
-  };
-  const handleActionSuccess = (action, amount, txHash) => {
-    if (action === "deposit") {
-      onDeposit?.(selectedMarket, amount, txHash);
-    } else {
-      onWithdraw?.(selectedMarket, amount, txHash);
-    }
-    refetch();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsx(ChainSwitcher, {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
-        /* @__PURE__ */ jsx(WalletStatus, { compact: true })
-      ] })
-    ] }),
-    (showSearch || showSort || showTvlFilter) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        showSearch && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex-1 flex items-center border",
-            style: {
-              backgroundColor: "var(--compass-color-background)",
-              borderColor: "var(--compass-color-border)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)",
-              gap: "calc(var(--compass-spacing-unit) * 0.5)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Search, { size: 16, style: { color: "var(--compass-color-text-tertiary)" } }),
-              /* @__PURE__ */ 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__ */ jsxs(
-          "select",
-          {
-            value: sortBy,
-            onChange: (e) => setSortBy(e.target.value),
-            className: "border text-sm cursor-pointer",
-            style: {
-              backgroundColor: "var(--compass-color-background)",
-              borderColor: "var(--compass-color-border)",
-              color: "var(--compass-color-text)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)"
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "fixed_apy", children: "Fixed APY" }),
-              /* @__PURE__ */ jsx("option", { value: "tvl", children: "TVL" }),
-              /* @__PURE__ */ jsx("option", { value: "expiry", children: "Expiry" })
-            ]
-          }
-        ),
-        showTvlFilter && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setShowFilterPanel(!showFilterPanel),
-            className: "border text-sm flex items-center",
-            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)",
-              borderRadius: "var(--compass-border-radius-lg)",
-              fontFamily: "var(--compass-font-family)",
-              padding: "var(--compass-spacing-input)",
-              gap: "calc(var(--compass-spacing-unit) * 0.5)",
-              transition: "var(--compass-transition-normal)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(SlidersHorizontal, { size: 14 }),
-              "Filter"
-            ]
-          }
-        )
-      ] }),
-      showTvlFilter && showFilterPanel && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center border",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            borderColor: "var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            fontFamily: "var(--compass-font-family)",
-            padding: "calc(var(--compass-spacing-unit) * 0.75)",
-            gap: "calc(var(--compass-spacing-unit) * 0.75)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                className: "text-sm font-medium whitespace-nowrap",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: "Min TVL:"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-              /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)" }, children: "$" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "number",
-                  placeholder: "0",
-                  value: minTvlFilter || "",
-                  onChange: (e) => handleMinTvlChange(e.target.value),
-                  className: "w-24 border text-sm bg-transparent",
-                  style: {
-                    borderColor: "var(--compass-color-border)",
-                    color: "var(--compass-color-text)",
-                    borderRadius: "var(--compass-border-radius-sm)",
-                    fontFamily: "var(--compass-font-family)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)"
-                  }
-                }
-              )
-            ] }),
-            minTvlFilter && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setMinTvlFilter(void 0),
-                className: "text-xs",
-                style: {
-                  backgroundColor: "var(--compass-color-error-muted)",
-                  color: "var(--compass-color-error)",
-                  borderRadius: "var(--compass-border-radius-sm)",
-                  padding: "calc(var(--compass-spacing-unit) * 0.25) calc(var(--compass-spacing-unit) * 0.5)",
-                  transition: "var(--compass-transition-fast)"
-                },
-                children: "Clear"
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 3) 0" }, children: /* @__PURE__ */ jsx(Loader2, { size: 24, className: "animate-spin", style: { color: "var(--compass-color-primary)" } }) }) : isError ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: {
-          backgroundColor: "var(--compass-color-error-muted)",
-          color: "var(--compass-color-error)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          padding: "var(--compass-spacing-card)"
-        },
-        children: "Failed to load Pendle markets. Please try again."
-      }
-    ) : filteredMarkets.length === 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center",
-        style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2)" },
-        children: "No active markets found"
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: filteredMarkets.map((market) => {
-      const hasPosition = market.userPosition && parseFloat(market.userPosition.balance) > 0;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => handleMarketClick(market),
-          className: "w-full border text-left hover:scale-[1.01]",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            borderColor: hasPosition ? "var(--compass-color-primary)" : "var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-xl)",
-            fontFamily: "var(--compass-font-family)",
-            padding: "var(--compass-spacing-card)",
-            transition: "var(--compass-transition-normal)"
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    className: "font-semibold",
-                    style: {
-                      fontSize: "var(--compass-font-size-body)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: market.name
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "text-sm",
-                    style: { color: "var(--compass-color-text-secondary)" },
-                    children: market.underlyingSymbol
-                  }
-                )
-              ] }),
-              showApy && /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-                /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-mono font-semibold",
-                    style: { color: "var(--compass-color-success)" },
-                    children: formatAPY3(market.fixedApy)
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between border-t",
-                style: {
-                  borderColor: "var(--compass-color-border)",
-                  marginTop: "calc(var(--compass-spacing-unit) * 0.75)",
-                  paddingTop: "calc(var(--compass-spacing-unit) * 0.75)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex", style: { gap: "var(--compass-spacing-card)" }, children: [
-                    showTvl && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-xs",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "TVL"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "font-mono text-sm",
-                          style: { color: "var(--compass-color-text-secondary)" },
-                          children: formatTVL2(market.tvlUsd)
-                        }
-                      )
-                    ] }),
-                    showExpiry && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "text-xs",
-                          style: { color: "var(--compass-color-text-tertiary)" },
-                          children: "Expiry"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
-                        /* @__PURE__ */ jsx(Calendar, { size: 12, style: { color: "var(--compass-color-text-secondary)" } }),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: "font-mono text-sm",
-                            style: { color: "var(--compass-color-text-secondary)" },
-                            children: formatExpiry(market.expiry)
-                          }
-                        )
-                      ] })
-                    ] })
-                  ] }),
-                  showUserPosition && hasPosition && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "text-xs",
-                        style: { color: "var(--compass-color-text-tertiary)" },
-                        children: "Your Position"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        className: "font-mono text-sm font-medium",
-                        style: { color: "var(--compass-color-primary)" },
-                        children: [
-                          parseFloat(market.userPosition.balance).toFixed(4),
-                          " PT"
-                        ]
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ]
-        },
-        market.marketAddress
-      );
-    }) }),
-    selectedMarket && /* @__PURE__ */ jsx(
-      ActionModal,
-      {
-        isOpen: !!selectedMarket,
-        onClose: () => setSelectedMarket(null),
-        title: selectedMarket.name,
-        children: /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "var(--compass-spacing-card)" }, children: [
-          showPnL && selectedMarket.userPosition?.pnl && /* @__PURE__ */ jsx(
-            PnLSummary,
-            {
-              pnl: selectedMarket.userPosition.pnl,
-              tokenSymbol: selectedMarket.underlyingSymbol,
-              tokenPrice: 1
-            }
-          ),
-          showHistory && (selectedMarket.userPosition?.deposits?.length || selectedMarket.userPosition?.withdrawals?.length) && /* @__PURE__ */ jsx(
-            TransactionHistory,
-            {
-              deposits: selectedMarket.userPosition?.deposits,
-              withdrawals: selectedMarket.userPosition?.withdrawals,
-              tokenSymbol: selectedMarket.underlyingSymbol
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DepositWithdrawForm,
-            {
-              venueType: "PENDLE_PT",
-              venueAddress: selectedMarket.marketAddress,
-              venueToken: selectedMarket.underlyingSymbol,
-              positionBalance: selectedMarket.userPosition?.balance,
-              onSuccess: handleActionSuccess
-            }
-          )
-        ] }) })
-      }
-    )
-  ] });
-}
-function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
-  const { chainId } = useChain();
-  const { address } = useCompassWallet();
-  const query = useQuery({
-    queryKey: ["swapQuote", chainId, fromToken, toToken, amount, address],
-    queryFn: async () => {
-      if (!fromToken || !toToken || !amount || parseFloat(amount) <= 0 || !address) {
-        return null;
-      }
-      try {
-        const params = new URLSearchParams({
-          owner: address,
-          chain: chainId,
-          tokenIn: fromToken,
-          tokenOut: toToken,
-          amountIn: amount
-        });
-        const response = await fetch(`/api/compass/swap/quote?${params}`);
-        if (!response.ok) {
-          const errorData = await response.json();
-          const errorMessage = errorData.message || errorData.error || "Failed to get swap quote";
-          throw new Error(errorMessage);
-        }
-        const data = await response.json();
-        const outputAmount = data.estimatedAmountOut || "0";
-        const inputAmountNum = parseFloat(amount);
-        const outputAmountNum = parseFloat(outputAmount);
-        return {
-          inputAmount: amount,
-          outputAmount,
-          rate: inputAmountNum > 0 ? (outputAmountNum / inputAmountNum).toString() : "0"
-        };
-      } catch (error) {
-        throw error;
-      }
-    },
-    enabled: enabled && !!address && !!fromToken && !!toToken && !!amount && parseFloat(amount) > 0,
-    staleTime: 10 * 1e3,
-    refetchInterval: 15 * 1e3,
-    retry: 1
-  });
-  return {
-    quote: query.data,
-    isLoading: query.isLoading,
-    isError: query.isError,
-    error: query.error,
-    refetch: query.refetch
+    quote: query.data,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: query.error,
+    refetch: query.refetch
   };
 }
 
@@ -7397,343 +6073,2039 @@ function PositionDetailModal({ position, onClose }) {
               isPendle && duration && /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  className: "p-3 rounded-lg",
+                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                      /* @__PURE__ */ jsx(Clock, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Duration" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "font-semibold",
+                        style: { color: "var(--compass-color-text)" },
+                        children: duration
+                      }
+                    )
+                  ]
+                }
+              ),
+              isPendle && expiryDate && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "p-3 rounded-lg",
+                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                      /* @__PURE__ */ jsx(Calendar, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Expiry (UTC)" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "font-semibold",
+                        style: { color: "var(--compass-color-text)" },
+                        children: expiryDate
+                      }
+                    )
+                  ]
+                }
+              ),
+              position.pnl && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "p-3 rounded-lg",
+                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                      isPnlPositive ? /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsx(TrendingDown, { size: 14, style: { color: "var(--compass-color-error)" } }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Total P&L" })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: "font-semibold",
+                        style: {
+                          color: isPnlPositive ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                        },
+                        children: [
+                          isPnlPositive ? "+" : "",
+                          formatUSD(position.pnl.totalPnl)
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            (position.deposits.length > 0 || position.withdrawals.length > 0) && /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: "font-semibold mb-3",
+                  style: { color: "var(--compass-color-text)" },
+                  children: "Transaction History"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                position.deposits.map((tx, i) => {
+                  const date = formatDate(tx.timestamp);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex items-center justify-between p-3 rounded-lg",
+                      style: { backgroundColor: "var(--compass-color-surface)" },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "p",
+                            {
+                              className: "font-medium",
+                              style: { color: "var(--compass-color-success)" },
+                              children: [
+                                "+",
+                                formatAmount(tx.amount),
+                                " ",
+                                position.assetSymbol
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              className: "text-xs",
+                              style: { color: "var(--compass-color-text-tertiary)" },
+                              children: date ? `Deposit - ${date}` : "Deposit"
+                            }
+                          )
+                        ] }),
+                        tx.txHash && /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: `https://etherscan.io/tx/${tx.txHash}`,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
+                            style: { backgroundColor: "var(--compass-color-background)" },
+                            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
+                          }
+                        )
+                      ]
+                    },
+                    `deposit-${i}`
+                  );
+                }),
+                position.withdrawals.map((tx, i) => {
+                  const date = formatDate(tx.timestamp);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex items-center justify-between p-3 rounded-lg",
+                      style: { backgroundColor: "var(--compass-color-surface)" },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "p",
+                            {
+                              className: "font-medium",
+                              style: { color: "var(--compass-color-error)" },
+                              children: [
+                                "-",
+                                formatAmount(tx.amount),
+                                " ",
+                                position.assetSymbol
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              className: "text-xs",
+                              style: { color: "var(--compass-color-text-tertiary)" },
+                              children: date ? `Withdrawal - ${date}` : "Withdrawal"
+                            }
+                          )
+                        ] }),
+                        tx.txHash && /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: `https://etherscan.io/tx/${tx.txHash}`,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
+                            style: { backgroundColor: "var(--compass-color-background)" },
+                            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
+                          }
+                        )
+                      ]
+                    },
+                    `withdraw-${i}`
+                  );
+                })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function EarnPositionsList({
+  showApy = true,
+  showPnL = true,
+  defaultCollapsed = [],
+  onPositionSelect
+}) {
+  const { isConnected } = useEmbeddableWallet();
+  const { venuePositions, totalPositions, totalBalanceUsd, isLoading, isError } = usePositionsData();
+  const [selectedPosition, setSelectedPosition] = useState(null);
+  const handlePositionClick = (position) => {
+    setSelectedPosition(position);
+    onPositionSelect?.(position);
+  };
+  const renderContent = () => {
+    if (!isConnected) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center justify-center py-12 text-center",
+          style: { color: "var(--compass-color-text-secondary)" },
+          children: [
+            /* @__PURE__ */ jsx(Inbox, { size: 48, className: "mb-4 opacity-50" }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Connect your wallet" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "to view your earn positions" })
+          ]
+        }
+      );
+    }
+    if (isLoading) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(
+        Loader2,
+        {
+          size: 32,
+          className: "animate-spin",
+          style: { color: "var(--compass-color-primary)" }
+        }
+      ) });
+    }
+    if (isError) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center justify-center py-12 text-center",
+          style: { color: "var(--compass-color-error)" },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Failed to load positions" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Please try again later" })
+          ]
+        }
+      );
+    }
+    if (totalPositions === 0) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center justify-center py-12 text-center",
+          style: { color: "var(--compass-color-text-secondary)" },
+          children: [
+            /* @__PURE__ */ jsx(Inbox, { size: 48, className: "mb-4 opacity-50" }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No positions yet" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Deposit to a vault or market to get started" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between p-4 rounded-xl",
+          style: { backgroundColor: "var(--compass-color-surface)" },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: "font-bold text-lg",
+                  style: { color: "var(--compass-color-text)" },
+                  children: "Your Positions"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  className: "text-sm",
+                  style: { color: "var(--compass-color-text-secondary)" },
+                  children: [
+                    totalPositions,
+                    " position",
+                    totalPositions !== 1 ? "s" : "",
+                    " across ",
+                    venuePositions.length,
+                    " venue",
+                    venuePositions.length !== 1 ? "s" : ""
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-sm",
+                  style: { color: "var(--compass-color-text-secondary)" },
+                  children: "Total Value"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "font-bold text-xl",
+                  style: { color: "var(--compass-color-text)" },
+                  children: formatUSD(totalBalanceUsd)
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: venuePositions.map((vp) => /* @__PURE__ */ jsx(
+        VenueSection,
+        {
+          venuePositions: vp,
+          defaultCollapsed: defaultCollapsed.includes(vp.venue),
+          showApy,
+          showPnL,
+          onPositionSelect: handlePositionClick
+        },
+        vp.venue
+      )) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+        /* @__PURE__ */ jsx(ChainSwitcher, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
+          /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+        ] })
+      ] }),
+      renderContent()
+    ] }),
+    selectedPosition && /* @__PURE__ */ jsx(
+      PositionDetailModal,
+      {
+        position: selectedPosition,
+        onClose: () => setSelectedPosition(null)
+      }
+    )
+  ] });
+}
+function parseExpiry(expiry) {
+  if (!expiry || expiry === 0) return void 0;
+  const timestamp = typeof expiry === "number" ? expiry : parseInt(expiry, 10);
+  if (isNaN(timestamp) || timestamp <= 0) return void 0;
+  const ms = timestamp < 3250368e4 ? timestamp * 1e3 : timestamp;
+  const date = new Date(ms);
+  if (date.getFullYear() < 2e3) return void 0;
+  return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+}
+function useRebalancingData(chainOverride) {
+  const { address } = useEmbeddableWallet();
+  const { chainId: contextChainId } = useChain();
+  const chainId = chainOverride || contextChainId;
+  const positionsQuery = useQuery({
+    queryKey: ["rebalancing", "portfolio", chainId, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const params = new URLSearchParams({ chain: chainId, owner: address });
+      const response = await fetch(`/api/compass/positions?${params}`);
+      if (!response.ok) throw new Error("Failed to fetch positions");
+      const data = await response.json();
+      const positions2 = [];
+      for (const p of data.positions || []) {
+        const usdValue = parseFloat(p.balanceUsd || p.balance || "0");
+        if (usdValue <= 0) continue;
+        let venueType;
+        let venueAddress = "";
+        if (p.protocol === "vaults") {
+          venueType = "vault";
+          venueAddress = p.vaultAddress || "";
+        } else if (p.protocol === "aave") {
+          venueType = "aave";
+          venueAddress = p.symbol || "";
+        } else if (p.protocol === "pendle") {
+          venueType = "pendle_pt";
+          venueAddress = p.marketAddress || "";
+        } else {
+          continue;
+        }
+        positions2.push({
+          id: `${p.protocol}-${venueAddress}`,
+          venueType,
+          venueName: p.name || `${p.symbol} on ${p.protocol}`,
+          venueAddress,
+          token: p.symbol || "UNKNOWN",
+          balance: parseFloat(p.balance || "0"),
+          usdValue,
+          apy: p.apy || 0,
+          allocationPercent: 0
+          // computed below
+        });
+      }
+      return positions2;
+    },
+    enabled: !!address,
+    staleTime: 3e4
+  });
+  const balancesQuery = useQuery({
+    queryKey: ["rebalancing", "balances", chainId, address],
+    queryFn: async () => {
+      if (!address) return [];
+      const params = new URLSearchParams({ chain: chainId, owner: address });
+      const response = await fetch(`/api/compass/earn-account/balances?${params}`);
+      if (!response.ok) throw new Error("Failed to fetch balances");
+      const data = await response.json();
+      const balances = [];
+      for (const [symbol, tokenData] of Object.entries(data.balances || {})) {
+        const td = tokenData;
+        const usdValue = parseFloat(td.usdValue || "0");
+        if (usdValue <= 0) continue;
+        balances.push({
+          token: symbol,
+          balance: parseFloat(td.balance || "0"),
+          usdValue
+        });
+      }
+      return balances;
+    },
+    enabled: !!address,
+    staleTime: 3e4
+  });
+  const venuesQuery = useQuery({
+    queryKey: ["rebalancing", "venues", chainId],
+    queryFn: async () => {
+      const [vaultsRes, aaveRes, pendleRes] = await Promise.all([
+        fetch(`/api/compass/vaults?chain=${chainId}&orderBy=apy_7d&direction=desc&limit=200`),
+        fetch(`/api/compass/aave/markets?chain=${chainId}`),
+        fetch(`/api/compass/pendle/markets?chain=${chainId}&orderBy=implied_apy&direction=desc&limit=200`)
+      ]);
+      const venues = [];
+      const earnMarkets = [];
+      if (vaultsRes.ok) {
+        const data = await vaultsRes.json();
+        const vaultsList = data.vaults || [];
+        for (const v of vaultsList) {
+          const vaultAddress = v.vaultAddress || v.address || "";
+          const name = v.name || `${v.curatorName || "Morpho"} ${v.assetSymbol || "Vault"}`;
+          const token = (v.assetSymbol || "UNKNOWN").toUpperCase();
+          const apy = parseFloat(v.apy7d || v.apy || "0");
+          venues.push({
+            venueType: "vault",
+            venueAddress: vaultAddress,
+            venueName: name,
+            token,
+            apy
+          });
+          earnMarkets.push({
+            id: `vault-${vaultAddress}`,
+            name,
+            apy,
+            tvl: parseFloat(v.tvlUsd || v.tvl || "0"),
+            type: "vaults",
+            underlyingToken: token,
+            curator: v.curatorName || v.curator,
+            vaultAddress
+          });
+        }
+      }
+      if (aaveRes.ok) {
+        const data = await aaveRes.json();
+        const marketsDict = data.markets || {};
+        for (const [symbol, marketData] of Object.entries(marketsDict)) {
+          const chainData = marketData.chains?.[chainId];
+          if (chainData) {
+            const upperSymbol = symbol.toUpperCase();
+            const apy = parseFloat(chainData.supplyApy || "0");
+            venues.push({
+              venueType: "aave",
+              venueAddress: upperSymbol,
+              venueName: `${upperSymbol} on Aave`,
+              token: upperSymbol,
+              apy
+            });
+            earnMarkets.push({
+              id: `aave-${symbol.toLowerCase()}`,
+              name: upperSymbol,
+              apy,
+              tvl: parseFloat(chainData.totalSupplyUsd || "0"),
+              type: "aave",
+              underlyingToken: upperSymbol
+            });
+          }
+        }
+      }
+      if (pendleRes.ok) {
+        const data = await pendleRes.json();
+        const marketsList = data.markets || [];
+        for (const m of marketsList) {
+          const symbol = (m.underlyingSymbol || "PT").toUpperCase();
+          const marketAddress = m.marketAddress || m.address || "";
+          const expiryStr = parseExpiry(m.expiry);
+          const name = m.name || `PT-${symbol}${expiryStr ? ` ${expiryStr}` : ""}`;
+          const apy = parseFloat(m.impliedApy || m.apy || "0");
+          venues.push({
+            venueType: "pendle_pt",
+            venueAddress: marketAddress,
+            venueName: name,
+            token: symbol,
+            apy
+          });
+          earnMarkets.push({
+            id: `pendle-${marketAddress}`,
+            name,
+            apy,
+            tvl: parseFloat(m.tvlUsd || m.tvl || "0"),
+            type: "pendle",
+            underlyingToken: symbol,
+            expiry: expiryStr,
+            marketAddress
+          });
+        }
+      }
+      return { venues, earnMarkets };
+    },
+    staleTime: 6e4
+  });
+  const positions = positionsQuery.data || [];
+  const idleBalances = balancesQuery.data || [];
+  const totalPositionUsd = positions.reduce((sum, p) => sum + p.usdValue, 0);
+  const totalIdleUsd = idleBalances.reduce((sum, b) => sum + b.usdValue, 0);
+  const totalUsd = totalPositionUsd + totalIdleUsd;
+  const positionsWithAllocation = positions.map((p) => ({
+    ...p,
+    allocationPercent: totalUsd > 0 ? p.usdValue / totalUsd * 100 : 0
+  }));
+  const portfolio = address ? {
+    positions: positionsWithAllocation,
+    idleBalances,
+    totalUsd,
+    totalIdleUsd
+  } : null;
+  return {
+    portfolio,
+    availableVenues: venuesQuery.data?.venues || [],
+    earnAccountMarkets: venuesQuery.data?.earnMarkets || [],
+    isMarketsLoading: venuesQuery.isLoading,
+    isLoading: positionsQuery.isLoading || balancesQuery.isLoading || venuesQuery.isLoading,
+    isError: positionsQuery.isError || balancesQuery.isError || venuesQuery.isError,
+    error: positionsQuery.error || balancesQuery.error || venuesQuery.error,
+    refetch: () => {
+      positionsQuery.refetch();
+      balancesQuery.refetch();
+      venuesQuery.refetch();
+    }
+  };
+}
+
+// src/components/RebalancingWidget/rebalancingEngine.ts
+var DEFAULT_OPTIONS = {
+  slippagePercent: 0.5,
+  minThresholdUsd: 0.01
+};
+function computeRebalancePlan(portfolio, targets, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const warnings = [];
+  const actions = [];
+  const totalUsd = portfolio.totalUsd;
+  if (totalUsd <= 0) {
+    return { actions: [], totalActions: 0, estimatedGasSavings: "$0", warnings: ["No portfolio value to rebalance"] };
+  }
+  const deltas = [];
+  for (const target of targets) {
+    const targetUsd = totalUsd * (target.targetPercent / 100);
+    const position = portfolio.positions.find(
+      (p) => p.venueType === target.venueType && p.venueAddress.toLowerCase() === target.venueAddress.toLowerCase()
+    );
+    const currentUsd = position?.usdValue || 0;
+    const deltaUsd = targetUsd - currentUsd;
+    if (Math.abs(deltaUsd) < opts.minThresholdUsd) continue;
+    deltas.push({
+      venueType: target.venueType,
+      venueAddress: target.venueAddress,
+      venueName: target.venueName,
+      token: target.token,
+      currentUsd,
+      targetUsd,
+      deltaUsd
+    });
+  }
+  for (const position of portfolio.positions) {
+    const hasTarget = targets.some(
+      (t) => t.venueType === position.venueType && t.venueAddress.toLowerCase() === position.venueAddress.toLowerCase()
+    );
+    if (!hasTarget && position.usdValue >= opts.minThresholdUsd) {
+      deltas.push({
+        venueType: position.venueType,
+        venueAddress: position.venueAddress,
+        venueName: position.venueName,
+        token: position.token,
+        currentUsd: position.usdValue,
+        targetUsd: 0,
+        deltaUsd: -position.usdValue
+      });
+    }
+  }
+  const overAllocated = deltas.filter((d) => d.deltaUsd < 0);
+  const underAllocated = deltas.filter((d) => d.deltaUsd > 0);
+  for (const delta of overAllocated) {
+    const withdrawUsd = Math.abs(delta.deltaUsd);
+    const withdrawAmount = delta.currentUsd > 0 ? withdrawUsd / delta.currentUsd * (portfolio.positions.find(
+      (p) => p.venueType === delta.venueType && p.venueAddress.toLowerCase() === delta.venueAddress.toLowerCase()
+    )?.balance || 0) : 0;
+    actions.push({
+      type: "withdraw",
+      venueType: delta.venueType,
+      venueAddress: delta.venueAddress,
+      token: delta.token,
+      amount: withdrawAmount,
+      usdValue: withdrawUsd
+    });
+    if (delta.venueType === "pendle_pt") {
+      warnings.push(`Withdrawing from Pendle PT position (${delta.venueName}) - check maturity date before proceeding`);
+    }
+  }
+  const withdrawnTokenAmounts = {};
+  for (const action of actions) {
+    if (action.type === "withdraw") {
+      const key = action.token.toUpperCase();
+      withdrawnTokenAmounts[key] = (withdrawnTokenAmounts[key] || 0) + action.usdValue;
+    }
+  }
+  for (const idle of portfolio.idleBalances) {
+    const key = idle.token.toUpperCase();
+    withdrawnTokenAmounts[key] = (withdrawnTokenAmounts[key] || 0) + idle.usdValue;
+  }
+  const depositTokenNeeds = {};
+  for (const delta of underAllocated) {
+    const key = delta.token.toUpperCase();
+    depositTokenNeeds[key] = (depositTokenNeeds[key] || 0) + delta.deltaUsd;
+  }
+  for (const [depositToken, neededUsd] of Object.entries(depositTokenNeeds)) {
+    const availableUsd = withdrawnTokenAmounts[depositToken] || 0;
+    const shortfallUsd = neededUsd - availableUsd;
+    if (shortfallUsd > opts.minThresholdUsd) {
+      for (const [withdrawToken, excessUsd] of Object.entries(withdrawnTokenAmounts)) {
+        if (withdrawToken === depositToken) continue;
+        if (excessUsd <= opts.minThresholdUsd) continue;
+        const swapUsd = Math.min(shortfallUsd, excessUsd);
+        if (swapUsd < opts.minThresholdUsd) continue;
+        const slippageFactor = 1 - opts.slippagePercent / 100;
+        actions.push({
+          type: "swap",
+          token: withdrawToken,
+          amount: swapUsd,
+          // USD-denominated for now
+          usdValue: swapUsd,
+          tokenOut: depositToken,
+          estimatedAmountOut: swapUsd * slippageFactor
+          // Approximate
+        });
+        withdrawnTokenAmounts[withdrawToken] -= swapUsd;
+        withdrawnTokenAmounts[depositToken] = (withdrawnTokenAmounts[depositToken] || 0) + swapUsd * slippageFactor;
+        warnings.push(`Swap ${withdrawToken} to ${depositToken} involves slippage risk`);
+        break;
+      }
+    }
+  }
+  for (const delta of underAllocated) {
+    const depositUsd = delta.deltaUsd;
+    const depositAmount = depositUsd;
+    actions.push({
+      type: "deposit",
+      venueType: delta.venueType,
+      venueAddress: delta.venueAddress,
+      token: delta.token,
+      amount: depositAmount,
+      usdValue: depositUsd
+    });
+  }
+  const totalRebalanceUsd = actions.filter((a) => a.type === "withdraw" || a.type === "deposit").reduce((sum, a) => sum + a.usdValue, 0);
+  if (totalRebalanceUsd > totalUsd * 0.5) {
+    warnings.push("This rebalance involves more than 50% of your portfolio");
+  }
+  if (actions.some((a) => a.type === "swap")) {
+    warnings.push("Swap amounts are estimates - actual amounts may vary due to slippage");
+  }
+  const sortOrder = { withdraw: 0, swap: 1, deposit: 2 };
+  actions.sort((a, b) => sortOrder[a.type] - sortOrder[b.type]);
+  const individualTxCount = actions.length;
+  const bundleTxCount = 1;
+  const savedTxs = Math.max(0, individualTxCount - bundleTxCount);
+  const estimatedGasSavings = `~$${(savedTxs * 2).toFixed(0)}`;
+  return {
+    actions,
+    totalActions: actions.length,
+    estimatedGasSavings,
+    warnings
+  };
+}
+function PortfolioBalanceCard({
+  totalUsd,
+  totalIdleUsd,
+  idleBalances,
+  earnAccountAddress,
+  isPositionsExpanded,
+  onTogglePositions,
+  positionCount,
+  showTopUp = true,
+  onTopUp
+}) {
+  const [showBalancesModal, setShowBalancesModal] = useState(false);
+  const tokenBalances = idleBalances.map((b) => ({
+    symbol: b.token,
+    balance: b.balance.toString(),
+    usdValue: b.usdValue.toString()
+  }));
+  const earningInterestUsd = totalUsd - totalIdleUsd;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderRadius: "var(--compass-border-radius-xl)",
+          border: "1px solid var(--compass-color-border)",
+          fontFamily: "var(--compass-font-family)",
+          padding: "var(--compass-spacing-card)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setShowBalancesModal(true),
+                className: "flex items-center text-left transition-opacity hover:opacity-80",
+                style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-xs font-medium uppercase tracking-wide",
+                      style: { color: "var(--compass-color-text-tertiary)" },
+                      children: "Total Balance"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowBalancesModal(true),
+                  className: "transition-opacity hover:opacity-80",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "font-bold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: "2rem",
+                        lineHeight: "1"
+                      },
+                      children: formatUSD(totalUsd)
+                    }
+                  )
+                }
+              ),
+              showTopUp && onTopUp && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: onTopUp,
+                  className: "flex items-center font-medium transition-all hover:opacity-80",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-surface))",
+                    border: "1px solid var(--compass-color-border)",
+                    color: "var(--compass-color-text-secondary)",
+                    borderRadius: "var(--compass-border-radius-md)",
+                    padding: "6px 10px",
+                    gap: "4px",
+                    fontSize: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { size: 14 }),
+                    "Top Up"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "1px",
+                backgroundColor: "var(--compass-color-border)",
+                margin: "var(--compass-spacing-card) 0"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onTogglePositions,
+              className: "flex items-center justify-between w-full text-left transition-opacity hover:opacity-80",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                    "Earning interest",
+                    positionCount > 0 ? ` \xB7 ${positionCount} ${positionCount === 1 ? "position" : "positions"}` : ""
+                  ] }),
+                  positionCount > 0 && (isPositionsExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }))
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-semibold",
+                    style: {
+                      color: "var(--compass-color-text)",
+                      fontSize: "1rem"
+                    },
+                    children: formatUSD(earningInterestUsd)
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AccountBalancesModal,
+      {
+        isOpen: showBalancesModal,
+        onClose: () => setShowBalancesModal(false),
+        balances: tokenBalances,
+        totalUsdValue: totalIdleUsd.toString(),
+        earnAccountAddress
+      }
+    )
+  ] });
+}
+
+// src/components/RebalancingWidget/constants.ts
+var VENUE_COLORS = {
+  vault: "var(--compass-color-primary)",
+  aave: "#9333ea",
+  pendle_pt: "#22c55e"
+};
+var VENUE_LABELS = {
+  vault: "Vault",
+  aave: "Aave",
+  pendle_pt: "Pendle PT"
+};
+function AllocationEditor({
+  portfolio,
+  targets,
+  targetSum,
+  hasChanges,
+  highlightedVenueAddress,
+  onUpdatePercent,
+  onRemoveVenue,
+  onResetToCurrent,
+  onEqualSplit
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end mb-2", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onResetToCurrent,
+          className: "text-xs px-2 py-1 rounded-md transition-colors",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            color: "var(--compass-color-text-secondary)"
+          },
+          title: "Reset to current",
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { size: 12, className: "inline mr-1" }),
+            "Reset"
+          ]
+        }
+      ),
+      targets.length > 1 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onEqualSplit,
+          className: "text-xs px-2 py-1 rounded-md transition-colors",
+          style: {
+            backgroundColor: "var(--compass-color-background)",
+            color: "var(--compass-color-text-secondary)"
+          },
+          title: "Split equally",
+          children: [
+            /* @__PURE__ */ jsx(Equal, { size: 12, className: "inline mr-1" }),
+            "Equal"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col",
+        style: { gap: "6px" },
+        children: [
+          targets.map((target, index) => {
+            const currentPos = portfolio.positions.find(
+              (p) => p.venueType === target.venueType && p.venueAddress === target.venueAddress
+            );
+            const currentPercent = currentPos?.allocationPercent ?? 0;
+            const diff = target.targetPercent - currentPercent;
+            const hasDiff = Math.abs(diff) > 0.1;
+            const isHighlighted = highlightedVenueAddress === target.venueAddress;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "p-2.5 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-background)",
+                  borderLeft: isHighlighted ? "3px solid var(--compass-color-primary)" : "3px solid transparent"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "w-1.5 rounded-full flex-shrink-0",
+                        style: {
+                          backgroundColor: VENUE_COLORS[target.venueType],
+                          alignSelf: "stretch"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium truncate block", style: { color: "var(--compass-color-text)" }, children: target.venueName }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "text-xs px-1 py-0.5 rounded",
+                            style: {
+                              backgroundColor: VENUE_COLORS[target.venueType] + "20",
+                              color: VENUE_COLORS[target.venueType],
+                              fontSize: "10px"
+                            },
+                            children: VENUE_LABELS[target.venueType]
+                          }
+                        ),
+                        currentPos && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono", style: { color: "var(--compass-color-text-secondary)", fontSize: "10px" }, children: formatUSD(currentPos.usdValue) }),
+                          /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-success)", fontSize: "10px" }, children: [
+                            currentPos.apy.toFixed(1),
+                            "%"
+                          ] })
+                        ] }),
+                        !currentPos && /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "10px" }, children: "New" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => onRemoveVenue(index),
+                        className: "w-5 h-5 flex items-center justify-center rounded flex-shrink-0 opacity-40 hover:opacity-100 transition-opacity",
+                        style: { color: "var(--compass-color-text-secondary)" },
+                        children: /* @__PURE__ */ jsx(X, { size: 11 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex-1 h-1.5 rounded-full overflow-hidden",
+                        style: { backgroundColor: "var(--compass-color-border)" },
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "h-full rounded-full transition-all",
+                            style: {
+                              width: `${Math.min(target.targetPercent, 100)}%`,
+                              backgroundColor: VENUE_COLORS[target.venueType],
+                              opacity: hasDiff ? 0.85 : 1
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "number",
+                          value: target.targetPercent.toFixed(3),
+                          onChange: (e) => onUpdatePercent(index, parseFloat(e.target.value) || 0),
+                          className: "w-16 text-center text-xs font-mono rounded bg-transparent outline-none",
+                          style: {
+                            color: "var(--compass-color-text)",
+                            border: "1px solid var(--compass-color-border)",
+                            padding: "2px 0"
+                          },
+                          min: 0,
+                          max: 100,
+                          step: 1e-3
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)", width: "12px" }, children: "%" })
+                    ] })
+                  ] }),
+                  hasDiff && /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-0.5", children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "text-xs font-mono",
+                      style: { color: diff > 0 ? "var(--compass-color-success)" : "var(--compass-color-error)", fontSize: "10px" },
+                      children: [
+                        currentPercent.toFixed(3),
+                        "% \u2192 ",
+                        target.targetPercent.toFixed(3),
+                        "%"
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              `${target.venueType}-${target.venueAddress}`
+            );
+          }),
+          portfolio.totalIdleUsd > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-2.5 rounded-lg",
+              style: { backgroundColor: "var(--compass-color-background)" },
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-1.5 rounded-full flex-shrink-0",
+                    style: {
+                      backgroundColor: "var(--compass-color-text-tertiary)",
+                      alignSelf: "stretch",
+                      minHeight: "20px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-secondary)" }, children: "Idle (undeployed)" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-mono ml-auto", style: { color: "var(--compass-color-text-secondary)" }, children: formatUSD(portfolio.totalIdleUsd) })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "text-xs font-mono font-medium",
+        style: {
+          color: "var(--compass-color-text-secondary)"
+        },
+        children: [
+          targetSum.toFixed(3),
+          "% allocated"
+        ]
+      }
+    ) })
+  ] });
+}
+var SUPPORTED_TOKENS2 = ["USDC", "USDT", "DAI", "WETH", "SBC", "AUSD"];
+var EVM_CHAIN_IDS2 = {
+  ethereum: 1,
+  base: 8453,
+  arbitrum: 42161
+};
+function formatAmount3(value) {
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) return "0";
+  return num.toFixed(6).replace(/\.?0+$/, "");
+}
+function RebalancingWidget({
+  showChainSwitcher = true,
+  showWalletStatus = true,
+  minRebalanceThresholdUsd = 0.01,
+  defaultSlippage = 0.5,
+  chain,
+  onRebalance,
+  onError,
+  title = "Portfolio Manager",
+  venues,
+  showTopUp = true,
+  height = "600px"
+}) {
+  const { chainId: contextChainId, setChainId } = useChain();
+  const CHAIN_ID = chain || contextChainId;
+  const { address, signTypedData, isConnected, login, switchChain, walletChainId } = useEmbeddableWallet();
+  const queryClient = useQueryClient();
+  const { portfolio, earnAccountMarkets, isMarketsLoading, isLoading, isError, error, refetch } = useRebalancingData(chain);
+  const allowedVariableMarketIds = useMemo(() => {
+    if (!venues) return void 0;
+    if (!venues.aave && !venues.vaults) return void 0;
+    const ids = [];
+    if (venues.aave) {
+      for (const symbol of venues.aave) ids.push(`aave-${symbol.toLowerCase()}`);
+    }
+    if (venues.vaults) {
+      for (const addr of venues.vaults) ids.push(`vault-${addr}`);
+    }
+    return ids;
+  }, [venues]);
+  const allowedFixedMarketIds = useMemo(() => {
+    if (!venues) return void 0;
+    if (!venues.pendle) return void 0;
+    const ids = [];
+    for (const addr of venues.pendle) ids.push(`pendle-${addr}`);
+    return ids;
+  }, [venues]);
+  useEffect(() => {
+    if (chain && chain !== contextChainId) {
+      setChainId(chain);
+    }
+  }, [chain, contextChainId, setChainId]);
+  const [targets, setTargets] = useState([]);
+  const [previewPlan, setPreviewPlan] = useState(null);
+  const [serverPreview, setServerPreview] = useState(null);
+  const [widgetState, setWidgetState] = useState("editing");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [txHash, setTxHash] = useState(null);
+  const [hasInitializedTargets, setHasInitializedTargets] = useState(false);
+  const [isPositionsExpanded, setIsPositionsExpanded] = useState(false);
+  const [marketTab, setMarketTab] = useState("variable");
+  const [selectedMarket, setSelectedMarket] = useState(null);
+  const [selectedToken, setSelectedToken] = useState("USDC");
+  const [depositAmount, setDepositAmount] = useState("");
+  const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [depositError, setDepositError] = useState(null);
+  const [depositStatus, setDepositStatus] = useState("");
+  const earnBalanceRef = useRef(null);
+  useEffect(() => {
+    setTargets([]);
+    setPreviewPlan(null);
+    setServerPreview(null);
+    setWidgetState("editing");
+    setErrorMessage(null);
+    setTxHash(null);
+    setHasInitializedTargets(false);
+    setIsPositionsExpanded(false);
+    setSelectedMarket(null);
+    setDepositAmount("");
+    setDepositError(null);
+    setDepositStatus("");
+  }, [CHAIN_ID]);
+  useEffect(() => {
+    if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets) {
+      setTargets(
+        portfolio.positions.map((p) => ({
+          venueType: p.venueType,
+          venueAddress: p.venueAddress,
+          venueName: p.venueName,
+          token: p.token,
+          targetPercent: p.allocationPercent
+        }))
+      );
+      setHasInitializedTargets(true);
+    }
+  }, [portfolio, hasInitializedTargets]);
+  const state = useMemo(() => {
+    if (isLoading) return "loading";
+    if (!portfolio || portfolio.positions.length === 0) return "empty";
+    return widgetState;
+  }, [isLoading, portfolio, widgetState]);
+  const targetSum = useMemo(() => targets.reduce((s, t) => s + t.targetPercent, 0), [targets]);
+  const hasChanges = useMemo(() => {
+    if (!portfolio || targets.length === 0) return false;
+    const hasDiff = targets.some((t) => {
+      const pos = portfolio.positions.find(
+        (p) => p.venueType === t.venueType && p.venueAddress === t.venueAddress
+      );
+      return Math.abs(t.targetPercent - (pos?.allocationPercent ?? 0)) > 0.1;
+    });
+    const hasRemovedPositions = portfolio.positions.some(
+      (p) => p.usdValue > 1 && !targets.some((t) => t.venueType === p.venueType && t.venueAddress === p.venueAddress)
+    );
+    return hasDiff || hasRemovedPositions;
+  }, [portfolio, targets]);
+  const clientPreview = useMemo(() => {
+    if (!portfolio || !hasChanges) return null;
+    return computeRebalancePlan(portfolio, targets, {
+      slippagePercent: defaultSlippage,
+      minThresholdUsd: minRebalanceThresholdUsd
+    });
+  }, [portfolio, targets, hasChanges, defaultSlippage, minRebalanceThresholdUsd]);
+  const handleResetToCurrent = useCallback(() => {
+    if (!portfolio) return;
+    setTargets(
+      portfolio.positions.map((p) => ({
+        venueType: p.venueType,
+        venueAddress: p.venueAddress,
+        venueName: p.venueName,
+        token: p.token,
+        targetPercent: p.allocationPercent
+      }))
+    );
+    setPreviewPlan(null);
+    setServerPreview(null);
+    setWidgetState("editing");
+  }, [portfolio]);
+  const handleEqualSplit = useCallback(() => {
+    if (targets.length === 0) return;
+    const equalPercent = 100 / targets.length;
+    setTargets((prev) => prev.map((t) => ({ ...t, targetPercent: parseFloat(equalPercent.toFixed(2)) })));
+  }, [targets.length]);
+  const handleRemoveVenue = useCallback((index) => {
+    setTargets((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const handleUpdatePercent = useCallback((index, value) => {
+    setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: Math.max(0, Math.min(100, value)) } : t));
+  }, []);
+  const handlePreview = useCallback(async () => {
+    if (!portfolio || !hasChanges || !address) return;
+    setWidgetState("previewing");
+    setErrorMessage(null);
+    try {
+      const response = await fetch("/api/compass/rebalance/preview", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: CHAIN_ID,
+          targets: targets.map((t) => ({
+            venueType: t.venueType === "vault" ? "VAULT" : t.venueType === "aave" ? "AAVE" : "PENDLE_PT",
+            venueAddress: t.venueAddress,
+            targetPercent: t.targetPercent,
+            token: t.token
+          })),
+          slippage: defaultSlippage
+        })
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || "Failed to compute rebalance preview");
+      }
+      const data = await response.json();
+      setServerPreview(data);
+      setPreviewPlan(clientPreview);
+      setWidgetState("ready");
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Preview failed");
+      setWidgetState("error");
+      onError?.(err instanceof Error ? err : new Error("Preview failed"));
+    }
+  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError]);
+  const handleExecute = useCallback(async () => {
+    if (!serverPreview?.eip712 || !address) return;
+    setWidgetState("signing");
+    setErrorMessage(null);
+    try {
+      const signature = await signTypedData({
+        domain: serverPreview.domain,
+        types: serverPreview.normalizedTypes,
+        primaryType: "SafeTx",
+        message: serverPreview.message
+      });
+      setWidgetState("executing");
+      const response = await fetch("/api/compass/bundle/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: CHAIN_ID,
+          eip712: serverPreview.eip712,
+          signature
+        })
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || "Transaction execution failed");
+      }
+      const data = await response.json();
+      setTxHash(data.txHash);
+      setWidgetState("success");
+      setTimeout(() => refetch(), 5e3);
+      setTimeout(() => refetch(), 15e3);
+      setTimeout(() => refetch(), 3e4);
+      if (previewPlan) {
+        onRebalance?.(previewPlan, data.txHash);
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Execution failed");
+      setWidgetState("error");
+      onError?.(err instanceof Error ? err : new Error("Execution failed"));
+    }
+  }, [serverPreview, address, signTypedData, CHAIN_ID, refetch, previewPlan, onRebalance, onError]);
+  const earnBalancesQuery = useMemo(() => {
+    const idleBalance = portfolio?.idleBalances.find((b) => b.token === selectedToken);
+    return idleBalance?.balance ?? 0;
+  }, [portfolio, selectedToken]);
+  const needsSwap = selectedMarket ? selectedToken !== selectedMarket.underlyingToken : false;
+  const ensureCorrectChain = useCallback(async () => {
+    const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
+    if (!targetChainId) return;
+    if (walletChainId !== void 0 && walletChainId !== targetChainId) {
+      if (!switchChain) {
+        throw new Error(`Please switch your wallet to ${CHAIN_ID} (chain ${targetChainId})`);
+      }
+      await switchChain(targetChainId);
+    }
+  }, [walletChainId, switchChain, CHAIN_ID]);
+  const buildVenueParamsFromMarket = (market) => {
+    switch (market.type) {
+      case "aave":
+        return { venueType: "AAVE", token: market.underlyingToken };
+      case "vaults":
+        return { venueType: "VAULT", token: market.underlyingToken, vaultAddress: market.vaultAddress };
+      case "pendle":
+        return { venueType: "PENDLE_PT", token: market.underlyingToken, marketAddress: market.marketAddress, maxSlippagePercent: 1 };
+    }
+  };
+  const buildVenueFromMarket = (market) => {
+    switch (market.type) {
+      case "aave":
+        return { type: "AAVE", token: market.underlyingToken };
+      case "vaults":
+        return { type: "VAULT", vaultAddress: market.vaultAddress };
+      case "pendle":
+        return { type: "PENDLE_PT", marketAddress: market.marketAddress, token: market.underlyingToken, maxSlippagePercent: 1 };
+    }
+  };
+  const handleDeposit = useCallback(async () => {
+    if (!selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || !address || !signTypedData) return;
+    setIsProcessing(true);
+    setDepositError(null);
+    const underlyingToken = selectedMarket.underlyingToken;
+    try {
+      let resultTxHash;
+      if (needsSwap) {
+        setDepositStatus("Getting swap quote...");
+        const quoteResponse = await fetch(
+          `/api/compass/swap/quote?owner=${address}&chain=${CHAIN_ID}&tokenIn=${selectedToken}&tokenOut=${underlyingToken}&amountIn=${depositAmount}`
+        );
+        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 actualDepositAmount = (parseFloat(estimatedOutput) * 0.99999).toString();
+        setDepositStatus("Preparing swap and deposit...");
+        const bundleActions = [
+          {
+            body: {
+              actionType: "V2_SWAP",
+              tokenIn: selectedToken,
+              tokenOut: underlyingToken,
+              amountIn: depositAmount,
+              maxSlippagePercent: 1
+            }
+          },
+          {
+            body: {
+              actionType: "V2_MANAGE",
+              action: "DEPOSIT",
+              venue: buildVenueFromMarket(selectedMarket),
+              amount: actualDepositAmount
+            }
+          }
+        ];
+        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();
+        setDepositStatus("Please sign the transaction...");
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain,
+          types: normalizedTypes,
+          primaryType: "SafeTx",
+          message
+        });
+        setDepositStatus("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();
+        resultTxHash = result.txHash;
+      } else {
+        setDepositStatus("Preparing deposit...");
+        const venueParams = buildVenueParamsFromMarket(selectedMarket);
+        const prepareResponse = await fetch("/api/compass/deposit/prepare", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            owner: address,
+            chain: CHAIN_ID,
+            ...venueParams,
+            amount: depositAmount
+          })
+        });
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare deposit");
+        }
+        const prepareData = await prepareResponse.json();
+        setDepositStatus("Please sign the transaction...");
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: "SafeTx",
+          message: prepareData.message
+        });
+        setDepositStatus("Executing deposit...");
+        const executeResponse = await fetch("/api/compass/deposit/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 || "Transaction failed");
+        }
+        const result = await executeResponse.json();
+        resultTxHash = result.txHash;
+      }
+      setDepositStatus("Deposit successful!");
+      setDepositAmount("");
+      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+      queryClient.invalidateQueries({ queryKey: ["rebalancing"] });
+      refetch();
+      const delays = [5e3, 15e3, 3e4];
+      for (const delay of delays) {
+        setTimeout(() => {
+          queryClient.invalidateQueries({ queryKey: ["rebalancing"] });
+          refetch();
+        }, delay);
+      }
+      setTimeout(() => setDepositStatus(""), 3e3);
+    } catch (err) {
+      setDepositError(err instanceof Error ? err.message : "Deposit failed");
+      setDepositStatus("");
+      onError?.(err instanceof Error ? err : new Error("Deposit failed"));
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [selectedMarket, depositAmount, address, signTypedData, selectedToken, needsSwap, CHAIN_ID, ensureCorrectChain, queryClient, refetch, onError]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col w-full",
+      style: {
+        gap: "calc(var(--compass-spacing-unit) * 0.75)",
+        fontFamily: "var(--compass-font-family)",
+        height,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "font-semibold",
+              style: {
+                color: "var(--compass-color-text)",
+                fontSize: "var(--compass-font-size-subheading, 1.25rem)"
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(WalletStatus, { compact: true })
+        ] }),
+        showChainSwitcher && !chain && /* @__PURE__ */ jsx(ChainSwitcher, {}),
+        /* @__PURE__ */ jsx(EarnAccountGuard, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              scrollbarWidth: "none",
+              display: "flex",
+              flexDirection: "column",
+              gap: "calc(var(--compass-spacing-unit) * 0.75)"
+            },
+            children: [
+              state === "loading" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "p-8 text-center",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    borderRadius: "var(--compass-border-radius-xl)"
+                  },
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      /* @__PURE__ */ jsx(Clock, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Duration" })
-                    ] }),
                     /* @__PURE__ */ jsx(
-                      "p",
+                      Loader2,
                       {
-                        className: "font-semibold",
-                        style: { color: "var(--compass-color-text)" },
-                        children: duration
+                        size: 24,
+                        className: "animate-spin mx-auto mb-3",
+                        style: { color: "var(--compass-color-primary)" }
                       }
-                    )
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: "Loading portfolio..." })
                   ]
                 }
               ),
-              isPendle && expiryDate && /* @__PURE__ */ jsxs(
+              state === "empty" && /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  className: "p-8 text-center",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    borderRadius: "var(--compass-border-radius-xl)"
+                  },
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      /* @__PURE__ */ jsx(Calendar, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Expiry (UTC)" })
-                    ] }),
                     /* @__PURE__ */ jsx(
                       "p",
                       {
-                        className: "font-semibold",
+                        className: "text-lg font-semibold mb-2",
                         style: { color: "var(--compass-color-text)" },
-                        children: expiryDate
+                        children: "No positions found"
                       }
-                    )
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: "Deposit into a vault, Aave market, or Pendle market to start rebalancing." })
                   ]
                 }
               ),
-              position.pnl && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      isPnlPositive ? /* @__PURE__ */ jsx(TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsx(TrendingDown, { size: 14, style: { color: "var(--compass-color-error)" } }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Total P&L" })
-                    ] }),
+              state !== "loading" && state !== "empty" && portfolio && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+                /* @__PURE__ */ jsx(
+                  PortfolioBalanceCard,
+                  {
+                    totalUsd: portfolio.totalUsd,
+                    totalIdleUsd: portfolio.totalIdleUsd,
+                    idleBalances: portfolio.idleBalances,
+                    isPositionsExpanded,
+                    onTogglePositions: () => setIsPositionsExpanded((prev) => !prev),
+                    positionCount: portfolio.positions.length,
+                    showTopUp,
+                    onTopUp: () => earnBalanceRef.current?.openTransferModal()
+                  }
+                ),
+                isPositionsExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  AllocationEditor,
+                  {
+                    portfolio,
+                    targets,
+                    targetSum,
+                    hasChanges,
+                    highlightedVenueAddress: void 0,
+                    onUpdatePercent: handleUpdatePercent,
+                    onRemoveVenue: handleRemoveVenue,
+                    onResetToCurrent: handleResetToCurrent,
+                    onEqualSplit: handleEqualSplit
+                  }
+                ) }),
+                !isPositionsExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    MarketSelector,
+                    {
+                      markets: earnAccountMarkets,
+                      selectedMarket,
+                      onMarketSelect: (market) => {
+                        setSelectedMarket(market);
+                        setDepositError(null);
+                      },
+                      marketTab,
+                      onMarketTabChange: (tab) => {
+                        setMarketTab(tab);
+                        setSelectedMarket(null);
+                        setDepositError(null);
+                      },
+                      isLoading: isMarketsLoading,
+                      allowedMarketIds: marketTab === "variable" ? allowedVariableMarketIds : allowedFixedMarketIds
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
                     /* @__PURE__ */ jsxs(
-                      "p",
+                      "div",
                       {
-                        className: "font-semibold",
+                        className: "flex items-center flex-wrap",
                         style: {
-                          color: isPnlPositive ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                          backgroundColor: "var(--compass-color-surface)",
+                          border: "1px solid var(--compass-color-border)",
+                          borderRadius: "var(--compass-border-radius-lg)",
+                          padding: "calc(var(--compass-spacing-unit) * 0.75)",
+                          gap: "calc(var(--compass-spacing-unit) * 0.5)"
                         },
                         children: [
-                          isPnlPositive ? "+" : "",
-                          formatUSD(position.pnl.totalPnl)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            (position.deposits.length > 0 || position.withdrawals.length > 0) && /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: "font-semibold mb-3",
-                  style: { color: "var(--compass-color-text)" },
-                  children: "Transaction History"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                position.deposits.map((tx, i) => {
-                  const date = formatDate(tx.timestamp);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "flex items-center justify-between p-3 rounded-lg",
-                      style: { backgroundColor: "var(--compass-color-surface)" },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsxs(
-                            "p",
+                          /* @__PURE__ */ jsx(
+                            "input",
                             {
-                              className: "font-medium",
-                              style: { color: "var(--compass-color-success)" },
-                              children: [
-                                "+",
-                                formatAmount(tx.amount),
-                                " ",
-                                position.assetSymbol
-                              ]
+                              type: "number",
+                              value: depositAmount,
+                              onChange: (e) => {
+                                setDepositAmount(e.target.value);
+                                setDepositError(null);
+                              },
+                              placeholder: "0.00",
+                              disabled: isProcessing,
+                              className: "flex-1 font-medium bg-transparent outline-none",
+                              style: { color: "var(--compass-color-text)", fontSize: "1.25rem", minWidth: 0 }
                             }
                           ),
+                          /* @__PURE__ */ jsxs("div", { className: "relative", style: { flexShrink: 0 }, children: [
+                            /* @__PURE__ */ 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: "0.875rem"
+                                },
+                                children: [
+                                  selectedToken,
+                                  /* @__PURE__ */ jsx(ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
+                                ]
+                              }
+                            ),
+                            isTokenDropdownOpen && /* @__PURE__ */ 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_TOKENS2.map((token) => /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setSelectedToken(token);
+                                      setIsTokenDropdownOpen(false);
+                                      setDepositError(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: "0.875rem"
+                                    },
+                                    children: token
+                                  },
+                                  token
+                                ))
+                              }
+                            )
+                          ] }),
                           /* @__PURE__ */ jsx(
-                            "p",
+                            "button",
                             {
-                              className: "text-xs",
-                              style: { color: "var(--compass-color-text-tertiary)" },
-                              children: date ? `Deposit - ${date}` : "Deposit"
+                              onClick: () => setDepositAmount(earnBalancesQuery.toString()),
+                              disabled: isProcessing,
+                              className: "text-xs font-medium uppercase tracking-wide",
+                              style: {
+                                backgroundColor: "var(--compass-color-surface-elevated, var(--compass-color-background))",
+                                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)",
+                                flexShrink: 0
+                              },
+                              children: "MAX"
                             }
                           )
-                        ] }),
-                        tx.txHash && /* @__PURE__ */ jsx(
-                          "a",
-                          {
-                            href: `https://etherscan.io/tx/${tx.txHash}`,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
-                            style: { backgroundColor: "var(--compass-color-background)" },
-                            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
-                          }
-                        )
-                      ]
-                    },
-                    `deposit-${i}`
-                  );
-                }),
-                position.withdrawals.map((tx, i) => {
-                  const date = formatDate(tx.timestamp);
-                  return /* @__PURE__ */ jsxs(
+                        ]
+                      }
+                    ),
+                    needsSwap && /* @__PURE__ */ 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__ */ jsx(ArrowRight, { size: 14 }),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            "Swaps ",
+                            selectedToken,
+                            " to ",
+                            selectedMarket?.underlyingToken,
+                            ", then deposits"
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex justify-between", style: { padding: "0 calc(var(--compass-spacing-unit) * 0.25)" }, children: [
+                      /* @__PURE__ */ jsxs("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                        "Available ",
+                        selectedToken
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", style: { color: "var(--compass-color-text-secondary)" }, children: [
+                        formatAmount3(earnBalancesQuery),
+                        " ",
+                        selectedToken
+                      ] })
+                    ] })
+                  ] }),
+                  depositError && /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "flex items-center justify-between p-3 rounded-lg",
-                      style: { backgroundColor: "var(--compass-color-surface)" },
+                      className: "text-sm",
+                      style: {
+                        backgroundColor: "var(--compass-color-error-muted)",
+                        color: "var(--compass-color-error)",
+                        borderRadius: "var(--compass-border-radius-lg)",
+                        padding: "calc(var(--compass-spacing-unit) * 0.75)"
+                      },
+                      children: depositError
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: !isConnected && login ? login : handleDeposit,
+                      disabled: isConnected && (isProcessing || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery),
+                      className: "w-full font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+                      style: {
+                        backgroundColor: "var(--compass-color-primary)",
+                        color: "var(--compass-color-primary-text, white)",
+                        borderRadius: "var(--compass-border-radius-lg)",
+                        padding: "calc(var(--compass-spacing-unit) * 0.75)",
+                        fontSize: "0.875rem",
+                        transition: "var(--compass-transition-normal)"
+                      },
+                      children: !isConnected ? "Connect Wallet" : isProcessing ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                        /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+                        "Processing..."
+                      ] }) : !selectedMarket ? "Select a market" : needsSwap ? "Swap & Deposit" : "Deposit"
+                    }
+                  ),
+                  depositStatus && !depositError && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "text-sm text-center",
+                      style: {
+                        backgroundColor: depositStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))",
+                        color: depositStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-primary)",
+                        borderRadius: "var(--compass-border-radius-lg)",
+                        padding: "calc(var(--compass-spacing-unit) * 0.75)"
+                      },
+                      children: depositStatus
+                    }
+                  )
+                ] }),
+                clientPreview && clientPreview.actions.length > 0 && state === "editing" && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "p-4",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      borderRadius: "var(--compass-border-radius-xl)",
+                      border: "1px solid var(--compass-color-border)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-3", style: { color: "var(--compass-color-text)" }, children: "Preview" }),
+                      /* @__PURE__ */ jsx(ActionList, { actions: clientPreview.actions }),
+                      clientPreview.warnings.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-col gap-1", children: clientPreview.warnings.map((w, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", style: { color: "var(--compass-color-warning, #eab308)" }, children: [
+                        /* @__PURE__ */ jsx(AlertTriangle, { size: 12, className: "flex-shrink-0 mt-0.5" }),
+                        /* @__PURE__ */ jsx("span", { children: w })
+                      ] }, i)) }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-xs mt-2", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                        "Estimated gas savings: ",
+                        clientPreview.estimatedGasSavings
+                      ] })
+                    ]
+                  }
+                ),
+                state === "ready" && serverPreview && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "p-4",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      borderRadius: "var(--compass-border-radius-xl)",
+                      border: "1px solid var(--compass-color-primary)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-3", style: { color: "var(--compass-color-text)" }, children: "Ready to Execute" }),
+                      /* @__PURE__ */ jsx(ActionList, { actions: serverPreview.actions || [] }),
+                      (serverPreview.warnings || []).length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-col gap-1", children: serverPreview.warnings.map((w, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", style: { color: "var(--compass-color-warning, #eab308)" }, children: [
+                        /* @__PURE__ */ jsx(AlertTriangle, { size: 12, className: "flex-shrink-0 mt-0.5" }),
+                        /* @__PURE__ */ jsx("span", { children: w })
+                      ] }, i)) }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-xs mt-2", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+                        serverPreview.actionsCount,
+                        " actions in 1 atomic transaction"
+                      ] })
+                    ]
+                  }
+                ),
+                state === "success" && txHash && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "p-4 text-center",
+                    style: {
+                      backgroundColor: "var(--compass-color-success-muted, rgba(34, 197, 94, 0.1))",
+                      borderRadius: "var(--compass-border-radius-xl)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Check, { size: 24, className: "mx-auto mb-2", style: { color: "var(--compass-color-success)" } }),
+                      /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", style: { color: "var(--compass-color-success)" }, children: "Rebalance Complete" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-xs font-mono break-all", style: { color: "var(--compass-color-text-secondary)" }, children: txHash })
+                    ]
+                  }
+                ),
+                state === "error" && errorMessage && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "p-4",
+                    style: {
+                      backgroundColor: "var(--compass-color-error-muted, rgba(239, 68, 68, 0.1))",
+                      borderRadius: "var(--compass-border-radius-xl)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", style: { color: "var(--compass-color-error)" }, children: errorMessage }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            setWidgetState("editing");
+                            setErrorMessage(null);
+                          },
+                          className: "text-xs underline",
+                          style: { color: "var(--compass-color-error)" },
+                          children: "Try again"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  state === "editing" && hasChanges && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handlePreview,
+                      disabled: !address,
+                      className: "w-full py-3 rounded-xl font-semibold text-base transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+                      style: {
+                        backgroundColor: "var(--compass-color-primary)",
+                        color: "white"
+                      },
+                      children: "Preview Rebalance"
+                    }
+                  ),
+                  state === "previewing" && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      disabled: true,
+                      className: "w-full py-3 rounded-xl font-semibold text-base flex items-center justify-center gap-2",
+                      style: {
+                        backgroundColor: "var(--compass-color-surface-hover, var(--compass-color-surface))",
+                        color: "var(--compass-color-text-secondary)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+                        "Computing exact amounts..."
+                      ]
+                    }
+                  ),
+                  state === "ready" && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleExecute,
+                      className: "w-full py-3 rounded-xl font-semibold text-base transition-all",
+                      style: {
+                        backgroundColor: "var(--compass-color-primary)",
+                        color: "white"
+                      },
+                      children: "Confirm & Sign"
+                    }
+                  ),
+                  state === "signing" && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      disabled: true,
+                      className: "w-full py-3 rounded-xl font-semibold text-base flex items-center justify-center gap-2",
+                      style: {
+                        backgroundColor: "var(--compass-color-surface-hover, var(--compass-color-surface))",
+                        color: "var(--compass-color-text-secondary)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+                        "Waiting for signature..."
+                      ]
+                    }
+                  ),
+                  state === "executing" && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      disabled: true,
+                      className: "w-full py-3 rounded-xl font-semibold text-base flex items-center justify-center gap-2",
+                      style: {
+                        backgroundColor: "var(--compass-color-surface-hover, var(--compass-color-surface))",
+                        color: "var(--compass-color-text-secondary)"
+                      },
                       children: [
-                        /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsxs(
-                            "p",
-                            {
-                              className: "font-medium",
-                              style: { color: "var(--compass-color-error)" },
-                              children: [
-                                "-",
-                                formatAmount(tx.amount),
-                                " ",
-                                position.assetSymbol
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "p",
-                            {
-                              className: "text-xs",
-                              style: { color: "var(--compass-color-text-tertiary)" },
-                              children: date ? `Withdrawal - ${date}` : "Withdrawal"
-                            }
-                          )
-                        ] }),
-                        tx.txHash && /* @__PURE__ */ jsx(
-                          "a",
-                          {
-                            href: `https://etherscan.io/tx/${tx.txHash}`,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
-                            style: { backgroundColor: "var(--compass-color-background)" },
-                            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
-                          }
-                        )
+                        /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
+                        "Executing on-chain..."
                       ]
+                    }
+                  ),
+                  state === "success" && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setWidgetState("editing");
+                        setTxHash(null);
+                        setServerPreview(null);
+                        setPreviewPlan(null);
+                      },
+                      className: "w-full py-3 rounded-xl font-semibold text-base transition-all",
+                      style: {
+                        backgroundColor: "var(--compass-color-primary)",
+                        color: "white"
+                      },
+                      children: "Rebalance Again"
+                    }
+                  ),
+                  (state === "ready" || state === "previewing") && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setWidgetState("editing");
+                        setServerPreview(null);
+                      },
+                      className: "w-full py-2 rounded-xl text-sm transition-all",
+                      style: {
+                        backgroundColor: "transparent",
+                        color: "var(--compass-color-text-secondary)"
+                      },
+                      children: "Back to editing"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-center",
+                    style: {
+                      gap: "calc(var(--compass-spacing-unit) * 1)",
+                      paddingTop: "calc(var(--compass-spacing-unit) * 0.5)"
                     },
-                    `withdraw-${i}`
-                  );
-                })
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                        /* @__PURE__ */ jsx(Shield, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Non-custodial" })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { color: "var(--compass-color-border)" }, children: "|" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                        /* @__PURE__ */ jsx(CheckCircle, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm", style: { color: "var(--compass-color-text-tertiary)" }, children: "Audited protocols" })
+                      ] })
+                    ]
+                  }
+                )
               ] })
-            ] })
-          ]
-        }
-      )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() })
+      ]
     }
   );
 }
-function EarnPositionsList({
-  showApy = true,
-  showPnL = true,
-  defaultCollapsed = [],
-  onPositionSelect
-}) {
-  const { isConnected } = useEmbeddableWallet();
-  const { venuePositions, totalPositions, totalBalanceUsd, isLoading, isError } = usePositionsData();
-  const [selectedPosition, setSelectedPosition] = useState(null);
-  const handlePositionClick = (position) => {
-    setSelectedPosition(position);
-    onPositionSelect?.(position);
+function ActionList({ actions }) {
+  const actionIcons = {
+    withdraw: "Withdraw",
+    swap: "Swap",
+    deposit: "Deposit"
   };
-  const renderContent = () => {
-    if (!isConnected) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex flex-col items-center justify-center py-12 text-center",
-          style: { color: "var(--compass-color-text-secondary)" },
-          children: [
-            /* @__PURE__ */ jsx(Inbox, { size: 48, className: "mb-4 opacity-50" }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Connect your wallet" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "to view your earn positions" })
-          ]
-        }
-      );
-    }
-    if (isLoading) {
-      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(
-        Loader2,
-        {
-          size: 32,
-          className: "animate-spin",
-          style: { color: "var(--compass-color-primary)" }
-        }
-      ) });
-    }
-    if (isError) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex flex-col items-center justify-center py-12 text-center",
-          style: { color: "var(--compass-color-error)" },
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Failed to load positions" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Please try again later" })
-          ]
-        }
-      );
-    }
-    if (totalPositions === 0) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex flex-col items-center justify-center py-12 text-center",
-          style: { color: "var(--compass-color-text-secondary)" },
-          children: [
-            /* @__PURE__ */ jsx(Inbox, { size: 48, className: "mb-4 opacity-50" }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No positions yet" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Deposit to a vault or market to get started" })
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center justify-between p-4 rounded-xl",
-          style: { backgroundColor: "var(--compass-color-surface)" },
-          children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: "font-bold text-lg",
-                  style: { color: "var(--compass-color-text)" },
-                  children: "Your Positions"
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "p",
-                {
-                  className: "text-sm",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: [
-                    totalPositions,
-                    " position",
-                    totalPositions !== 1 ? "s" : "",
-                    " across ",
-                    venuePositions.length,
-                    " venue",
-                    venuePositions.length !== 1 ? "s" : ""
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: "text-sm",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: "Total Value"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: "font-bold text-xl",
-                  style: { color: "var(--compass-color-text)" },
-                  children: formatUSD(totalBalanceUsd)
-                }
-              )
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: venuePositions.map((vp) => /* @__PURE__ */ jsx(
-        VenueSection,
-        {
-          venuePositions: vp,
-          defaultCollapsed: defaultCollapsed.includes(vp.venue),
-          showApy,
-          showPnL,
-          onPositionSelect: handlePositionClick
-        },
-        vp.venue
-      )) })
-    ] });
+  const actionColors = {
+    withdraw: "var(--compass-color-error)",
+    swap: "var(--compass-color-warning, #eab308)",
+    deposit: "var(--compass-color-success)"
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
-        /* @__PURE__ */ jsx(ChainSwitcher, {}),
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: actions.map((action, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between p-2 rounded-lg text-sm",
+      style: { backgroundColor: "var(--compass-color-background)" },
+      children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(EarnAccountBalance, { compact: true }),
-          /* @__PURE__ */ jsx(WalletStatus, { compact: true })
-        ] })
-      ] }),
-      renderContent()
-    ] }),
-    selectedPosition && /* @__PURE__ */ jsx(
-      PositionDetailModal,
-      {
-        position: selectedPosition,
-        onClose: () => setSelectedPosition(null)
-      }
-    )
-  ] });
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-xs font-medium px-1.5 py-0.5 rounded",
+              style: {
+                backgroundColor: actionColors[action.type] + "20",
+                color: actionColors[action.type]
+              },
+              children: actionIcons[action.type] || action.type
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { color: "var(--compass-color-text)" }, children: [
+            action.token,
+            action.tokenOut && ` \u2192 ${action.tokenOut}`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", style: { color: "var(--compass-color-text-secondary)" }, children: formatUSD(action.usdValue || 0) })
+      ]
+    },
+    i
+  )) });
 }
 
 // src/components/CompassEarnWidget/presets.ts
 var allTabs = [
-  { id: "vaults", label: "Vaults", enabled: true },
-  { id: "aave", label: "Aave", enabled: true },
-  { id: "pendle", label: "Pendle", enabled: true },
   { id: "swap", label: "Swap", enabled: true },
+  { id: "rebalance", label: "Rebalance", enabled: true },
   // TODO: Positions tab temporarily disabled - needs more work on API response handling
   { id: "positions", label: "Positions", enabled: false }
 ];
@@ -7741,59 +8113,39 @@ 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";
+  return enabledTab?.id || "swap";
 }
 function CompassEarnWidget({
   preset = "full",
-  enableVaults,
-  enableAave,
-  enablePendle,
   enableSwap,
   enablePositions,
+  enableRebalance,
   defaultTab,
   showHeader = true,
-  showApy = true,
-  showTvl = true,
-  showExpiry = true,
-  showUserPosition = true,
   showPnL = true,
-  showSearch = true,
-  showSort = true,
   onTabChange
 }) {
   const tabs = 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;
       if (tab.id === "positions" && enablePositions !== void 0) enabled = enablePositions;
+      if (tab.id === "rebalance" && enableRebalance !== void 0) enabled = enableRebalance;
       return { ...tab, enabled };
     });
-  }, [preset, enableVaults, enableAave, enablePendle, enableSwap, enablePositions]);
+  }, [preset, enableSwap, enablePositions, enableRebalance]);
   const enabledTabs = tabs.filter((t) => t.enabled);
   const initialTab = defaultTab && tabs.find((t) => t.id === defaultTab)?.enabled ? defaultTab : getDefaultTab(tabs);
   const [activeTab, setActiveTab] = useState(initialTab);
@@ -7834,35 +8186,8 @@ function CompassEarnWidget({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "vaults" && /* @__PURE__ */ jsx(
-        VaultsList,
-        {
-          showApy,
-          showTvl,
-          showUserPosition,
-          showSearch,
-          showSort
-        }
-      ),
-      activeTab === "aave" && /* @__PURE__ */ jsx(
-        AaveMarketsList,
-        {
-          showApy,
-          showUserPosition,
-          showSearch
-        }
-      ),
-      activeTab === "pendle" && /* @__PURE__ */ jsx(
-        PendleMarketsList,
-        {
-          showApy,
-          showExpiry,
-          showUserPosition,
-          showSearch,
-          showSort
-        }
-      ),
       activeTab === "swap" && /* @__PURE__ */ jsx(SwapWidget, {}),
+      activeTab === "rebalance" && /* @__PURE__ */ jsx(RebalancingWidget, {}),
       activeTab === "positions" && /* @__PURE__ */ jsx(
         EarnPositionsList,
         {
@@ -7893,6 +8218,6 @@ var CHAINS = {
   }
 };
 
-export { AaveMarketsList, AccountBalancesModal, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DEFAULT_SWAP_TOKENS, DepositWithdrawForm, EarnAccount, EarnAccountBalance, EarnAccountGuard, PendleMarketsList, PnLSummary, SwapWidget, ThemeProvider, TransactionHistory, VaultsList, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
+export { AccountBalancesModal, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DEFAULT_SWAP_TOKENS, DepositWithdrawForm, EarnAccount, EarnAccountBalance, EarnAccountGuard, PnLSummary, RebalancingWidget, SwapWidget, ThemeProvider, TransactionHistory, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map