npm - @compass-labs/widgets - Versions diffs - 0.1.32 → 0.1.33 - Mend

@compass-labs/widgets 0.1.32 → 0.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tan
 import { CompassApiSDK } from '@compass-labs/api-sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { arbitrum, base, mainnet } from 'viem/chains';
-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';
+import { Wallet, Loader2, ArrowDownLeft, ArrowUpRight, X, ChevronDown, LogOut, AlertCircle, ArrowRight, ExternalLink, ArrowDownUp, ArrowLeftRight, Plus, ChevronRight, Minus, Shield, CheckCircle, AlertTriangle, Check, RotateCcw, Equal, ChevronUp, Inbox, Percent, Clock, Calendar, TrendingUp, TrendingDown } from 'lucide-react';
 // src/provider/CompassProvider.tsx
 var ApiContext = createContext(null);
@@ -1109,68 +1109,75 @@ function ActionModal({ isOpen, onClose, title, children }) {
     };
   }, [isOpen, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0",
-        style: { backgroundColor: "var(--compass-color-overlay)" },
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative w-full max-w-md mx-4 overflow-hidden",
-        style: {
-          backgroundColor: "var(--compass-color-surface)",
-          boxShadow: "var(--compass-shadow-lg)",
-          borderRadius: "var(--compass-border-radius-xl)",
-          fontFamily: "var(--compass-font-family)"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center justify-between border-b",
-              style: {
-                borderColor: "var(--compass-color-border)",
-                padding: "calc(var(--compass-spacing-card) * 0.75) var(--compass-spacing-card)"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: "font-semibold",
-                    style: {
-                      fontSize: "var(--compass-font-size-subheading)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onClose,
-                    className: "hover:opacity-70",
-                    style: {
-                      color: "var(--compass-color-text-secondary)",
-                      borderRadius: "var(--compass-border-radius-md)",
-                      padding: "calc(var(--compass-spacing-unit) * 0.25)",
-                      transition: "var(--compass-transition-normal)"
-                    },
-                    children: /* @__PURE__ */ jsx(X, { size: 20 })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { padding: "var(--compass-spacing-card)" }, children })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+      style: { overflowY: "auto", scrollbarWidth: "none" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { backgroundColor: "var(--compass-color-overlay)" },
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative w-full max-w-md",
+            style: {
+              backgroundColor: "var(--compass-color-surface)",
+              boxShadow: "var(--compass-shadow-lg)",
+              borderRadius: "var(--compass-border-radius-xl)",
+              fontFamily: "var(--compass-font-family)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between border-b",
+                  style: {
+                    borderColor: "var(--compass-color-border)",
+                    padding: "calc(var(--compass-spacing-card) * 0.75) var(--compass-spacing-card)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "font-semibold",
+                        style: {
+                          fontSize: "var(--compass-font-size-subheading)",
+                          color: "var(--compass-color-text)"
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "hover:opacity-70",
+                        style: {
+                          color: "var(--compass-color-text-secondary)",
+                          borderRadius: "var(--compass-border-radius-md)",
+                          padding: "calc(var(--compass-spacing-unit) * 0.25)",
+                          transition: "var(--compass-transition-normal)"
+                        },
+                        children: /* @__PURE__ */ jsx(X, { size: 20 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { padding: "var(--compass-spacing-card)" }, children })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function PnLSummary({ pnl, tokenSymbol, tokenPrice }) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -2230,227 +2237,84 @@ function AccountBalancesModal({
   onClose,
   balances,
   totalUsdValue,
-  isLoading = false,
-  earnAccountAddress
+  isLoading = false
 }) {
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
+  return /* @__PURE__ */ jsx(ActionModal, { isOpen, onClose, title: "Balance Breakdown", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(
+    Loader2,
+    {
+      size: 24,
+      className: "animate-spin",
+      style: { color: "var(--compass-color-primary)" }
     }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0",
-        style: { backgroundColor: "var(--compass-color-overlay)" },
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative w-full max-w-md mx-4 overflow-hidden",
-        style: {
-          backgroundColor: "var(--compass-color-surface)",
-          boxShadow: "var(--compass-shadow-lg)",
-          borderRadius: "var(--compass-border-radius-xl)",
-          fontFamily: "var(--compass-font-family)"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
+  ) }) : balances.length === 0 ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "text-center py-4",
+      style: { color: "var(--compass-color-text-tertiary)" },
+      children: "No tokens in account"
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-xs font-medium uppercase tracking-wide",
+          style: { color: "var(--compass-color-text-tertiary)" },
+          children: "Available in Account"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex flex-col gap-2",
+          style: {
+            maxHeight: "50vh",
+            overflowY: "auto",
+            scrollbarWidth: "none"
+          },
+          children: balances.map((token) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-center justify-between border-b",
+              className: "flex items-center justify-between p-3 rounded-lg",
               style: {
-                borderColor: "var(--compass-color-border)",
-                padding: "calc(var(--compass-spacing-unit) * 0.75) var(--compass-spacing-card)"
+                backgroundColor: "var(--compass-color-surface)",
+                border: "1px solid var(--compass-color-border)",
+                flexShrink: 0
               },
               children: [
-                /* @__PURE__ */ jsxs(
-                  "h2",
-                  {
-                    className: "font-semibold flex items-center gap-2",
-                    style: {
-                      fontSize: "var(--compass-font-size-subheading)",
-                      color: "var(--compass-color-text)"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(Coins, { size: 20 }),
-                      "Account Balances"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onClose,
-                    className: "hover:opacity-70",
-                    style: {
-                      color: "var(--compass-color-text-secondary)",
-                      borderRadius: "var(--compass-border-radius-md)",
-                      padding: "calc(var(--compass-spacing-unit) * 0.25)",
-                      transition: "var(--compass-transition-normal)"
-                    },
-                    children: /* @__PURE__ */ jsx(X, { size: 20 })
-                  }
-                )
+                /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: token.symbol }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount(token.balance) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUSD(token.usdValue) })
+                ] })
               ]
+            },
+            token.symbol
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between pt-3 mt-2",
+        style: { borderTop: "2px solid var(--compass-color-border)" },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-bold text-xl",
+              style: { color: "var(--compass-color-text)" },
+              children: formatUSD(totalUsdValue)
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { padding: "var(--compass-spacing-card)" }, children: [
-            isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: { padding: "calc(var(--compass-spacing-unit) * 2) 0" }, children: /* @__PURE__ */ jsx(
-              Loader2,
-              {
-                size: 24,
-                className: "animate-spin",
-                style: { color: "var(--compass-color-primary)" }
-              }
-            ) }) : balances.length === 0 ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "text-center",
-                style: { color: "var(--compass-color-text-secondary)", padding: "calc(var(--compass-spacing-unit) * 2) 0" },
-                children: "No token balances found"
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "flex items-center justify-between border",
-                  style: {
-                    borderColor: "var(--compass-color-border)",
-                    backgroundColor: "var(--compass-color-surface)",
-                    borderRadius: "var(--compass-border-radius-lg)",
-                    padding: "calc(var(--compass-spacing-unit) * 1)",
-                    marginBottom: "calc(var(--compass-spacing-unit) * 0.5)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "font-medium",
-                        style: { color: "var(--compass-color-text-secondary)" },
-                        children: "Total Balance"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "font-bold text-xl",
-                        style: { color: "var(--compass-color-text)" },
-                        children: formatUSD(totalUsdValue)
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "text-xs font-medium uppercase tracking-wide",
-                  style: {
-                    color: "var(--compass-color-text-tertiary)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.5) 0"
-                  },
-                  children: "Token Breakdown"
-                }
-              ),
-              balances.map((token) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "flex items-center justify-between",
-                  style: {
-                    backgroundColor: "var(--compass-color-background)",
-                    borderRadius: "var(--compass-border-radius-lg)",
-                    padding: "calc(var(--compass-spacing-unit) * 0.75)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "w-8 h-8 flex items-center justify-center text-xs font-bold",
-                          style: {
-                            backgroundColor: "var(--compass-color-primary-muted)",
-                            color: "var(--compass-color-primary)",
-                            borderRadius: "var(--compass-border-radius-full)"
-                          },
-                          children: token.symbol.slice(0, 2)
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "font-medium",
-                            style: { color: "var(--compass-color-text)" },
-                            children: token.symbol
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "text-sm font-mono",
-                            style: { color: "var(--compass-color-text-secondary)" },
-                            children: formatAmount(token.balance)
-                          }
-                        )
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "font-medium",
-                        style: { color: "var(--compass-color-text)" },
-                        children: formatUSD(token.usdValue)
-                      }
-                    )
-                  ]
-                },
-                token.symbol
-              ))
-            ] }),
-            earnAccountAddress && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "border-t text-center",
-                style: {
-                  borderColor: "var(--compass-color-border)",
-                  marginTop: "var(--compass-spacing-card)",
-                  paddingTop: "var(--compass-spacing-card)"
-                },
-                children: /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: { color: "var(--compass-color-text-tertiary)" },
-                    children: [
-                      "Earn Account: ",
-                      earnAccountAddress.slice(0, 6),
-                      "...",
-                      earnAccountAddress.slice(-4)
-                    ]
-                  }
-                )
-              }
-            )
-          ] })
+          )
         ]
       }
     )
-  ] });
+  ] }) }) });
 }
-var TRANSFER_TOKENS = ["USDC"];
+var TRANSFER_TOKENS = ["USDC", "SBC"];
 var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
   compact = false,
   hideVisual = false,
@@ -2950,7 +2814,459 @@ var EarnAccountBalance = forwardRef(function EarnAccountBalance2({
       }
     )
   ] });
-});
+});
+function useSwapQuote({ fromToken, toToken, amount, enabled = true }) {
+  const { chainId } = useChain();
+  const { address } = useEmbeddableWallet();
+  const query = useQuery({
+    queryKey: ["swapQuote", chainId, fromToken, toToken, amount, address],
+    queryFn: async () => {
+      if (!fromToken || !toToken || !amount || parseFloat(amount) <= 0 || !address) {
+        return null;
+      }
+      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"
+      };
+    },
+    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
+  };
+}
+var COMMON_TOKENS = [
+  "USDC",
+  "USDT",
+  "DAI",
+  "USDS",
+  "USDE",
+  "sUSDE",
+  "sDAI",
+  "FRAX",
+  "LUSD",
+  "GUSD",
+  "PYUSD",
+  "crvUSD",
+  "GHO",
+  "EURC",
+  "EURS",
+  "EURA",
+  "WETH",
+  "WBTC",
+  "wstETH",
+  "cbETH",
+  "rETH"
+];
+function SwapForm({
+  availableFromTokens,
+  availableToTokens,
+  balances,
+  defaultFromToken,
+  defaultToToken,
+  onSwapSuccess,
+  onSwapError
+}) {
+  const toTokens = Array.from(/* @__PURE__ */ new Set([
+    ...availableFromTokens,
+    ...COMMON_TOKENS,
+    ...availableToTokens || []
+  ]));
+  const [fromToken, setFromToken] = useState(defaultFromToken || availableFromTokens[0] || "USDC");
+  const [toToken, setToToken] = useState(defaultToToken || toTokens.find((t) => t !== (defaultFromToken || availableFromTokens[0])) || "USDC");
+  const [fromAmount, setFromAmount] = useState("");
+  const [isSwapping, setIsSwapping] = useState(false);
+  const [swapStatus, setSwapStatus] = useState("");
+  const [isFromOpen, setIsFromOpen] = useState(false);
+  const [isToOpen, setIsToOpen] = useState(false);
+  const { address, isConnected, signTypedData } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { quote, isLoading: isQuoteLoading, error: quoteError } = useSwapQuote({
+    fromToken,
+    toToken,
+    amount: fromAmount,
+    enabled: !!fromAmount && parseFloat(fromAmount) > 0
+  });
+  const handleReverse = useCallback(() => {
+    const oldFrom = fromToken;
+    const oldTo = toToken;
+    if (availableFromTokens.includes(oldTo)) {
+      setFromToken(oldTo);
+      setToToken(oldFrom);
+      setFromAmount("");
+    }
+  }, [fromToken, toToken, availableFromTokens]);
+  const handleSwap = useCallback(async () => {
+    if (!address || !fromAmount || !quote || !signTypedData) return;
+    setIsSwapping(true);
+    setSwapStatus("Preparing swap...");
+    try {
+      const prepareResponse = await fetch("/api/compass/swap/prepare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          tokenIn: fromToken,
+          tokenOut: toToken,
+          amountIn: fromAmount
+        })
+      });
+      if (!prepareResponse.ok) {
+        const error = await prepareResponse.json();
+        throw new Error(error.error || "Failed to prepare swap");
+      }
+      const prepareData = await prepareResponse.json();
+      const { eip712, normalizedTypes } = prepareData;
+      if (!eip712) {
+        throw new Error("No EIP-712 data returned from prepare");
+      }
+      setSwapStatus("Please sign the transaction...");
+      const signature = await signTypedData({
+        domain: eip712.domain,
+        types: normalizedTypes || eip712.types,
+        primaryType: "SafeTx",
+        message: eip712.message
+      });
+      setSwapStatus("Executing swap...");
+      const executeResponse = await fetch("/api/compass/swap/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          eip712,
+          signature
+        })
+      });
+      if (!executeResponse.ok) {
+        const error = await executeResponse.json();
+        throw new Error(error.error || "Failed to execute swap");
+      }
+      const executeData = await executeResponse.json();
+      const txHash = executeData.txHash;
+      setSwapStatus("Swap successful!");
+      onSwapSuccess?.(fromToken, toToken, fromAmount, quote.outputAmount, txHash);
+      setFromAmount("");
+      setTimeout(() => setSwapStatus(""), 3e3);
+    } catch (error) {
+      setSwapStatus("");
+      onSwapError?.(error);
+    } finally {
+      setIsSwapping(false);
+    }
+  }, [address, fromAmount, quote, chainId, fromToken, toToken, signTypedData, onSwapSuccess, onSwapError]);
+  const canReverse = availableFromTokens.includes(toToken);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          border: "1px solid var(--compass-color-border)",
+          borderRadius: "var(--compass-border-radius-xl)",
+          padding: "calc(var(--compass-spacing-unit) * 0.75)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.25)" }, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }),
+            balances?.[fromToken] && /* @__PURE__ */ jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
+              "Balance: ",
+              parseFloat(balances[fromToken]).toLocaleString(void 0, { maximumFractionDigits: 6 })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: fromAmount,
+                onChange: (e) => setFromAmount(e.target.value),
+                placeholder: "0.00",
+                disabled: isSwapping,
+                className: "flex-1 bg-transparent outline-none font-medium min-w-0",
+                style: { color: "var(--compass-color-text)", fontSize: "1.25rem" }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative", style: { flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    setIsFromOpen(!isFromOpen);
+                    setIsToOpen(false);
+                  },
+                  disabled: isSwapping,
+                  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: [
+                    fromToken,
+                    /* @__PURE__ */ jsx(ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
+                  ]
+                }
+              ),
+              isFromOpen && /* @__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: "120px",
+                    maxHeight: "200px",
+                    overflowY: "auto",
+                    scrollbarWidth: "none"
+                  },
+                  children: availableFromTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setFromToken(token);
+                        setIsFromOpen(false);
+                      },
+                      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 === fromToken ? "var(--compass-color-primary)" : "var(--compass-color-text)",
+                        backgroundColor: token === fromToken ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))" : "transparent",
+                        fontSize: "0.875rem"
+                      },
+                      children: token
+                    },
+                    token
+                  ))
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleReverse,
+        disabled: !canReverse || isSwapping,
+        className: "border disabled:opacity-30",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          borderColor: "var(--compass-color-border)",
+          borderRadius: "var(--compass-border-radius-full)",
+          padding: "calc(var(--compass-spacing-unit) * 0.5)",
+          transition: "var(--compass-transition-normal)"
+        },
+        children: /* @__PURE__ */ jsx(ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          border: "1px solid var(--compass-color-border)",
+          borderRadius: "var(--compass-border-radius-xl)",
+          padding: "calc(var(--compass-spacing-unit) * 0.75)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.25)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 font-medium min-w-0",
+                style: {
+                  color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)",
+                  fontSize: "1.25rem"
+                },
+                children: isQuoteLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+                  "Loading..."
+                ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative", style: { flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    setIsToOpen(!isToOpen);
+                    setIsFromOpen(false);
+                  },
+                  disabled: isSwapping,
+                  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: [
+                    toToken,
+                    /* @__PURE__ */ jsx(ChevronDown, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
+                  ]
+                }
+              ),
+              isToOpen && /* @__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: "140px",
+                    maxHeight: "280px",
+                    overflowY: "auto",
+                    scrollbarWidth: "none"
+                  },
+                  children: toTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setToToken(token);
+                        setIsToOpen(false);
+                      },
+                      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 === toToken ? "var(--compass-color-primary)" : "var(--compass-color-text)",
+                        backgroundColor: token === toToken ? "var(--compass-color-primary-muted, rgba(99, 102, 241, 0.1))" : "transparent",
+                        fontSize: "0.875rem"
+                      },
+                      children: token
+                    },
+                    token
+                  ))
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    quote && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
+      /* @__PURE__ */ jsx("span", { children: "Rate" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "1 ",
+        fromToken,
+        " = ",
+        parseFloat(quote.rate).toFixed(6),
+        " ",
+        toToken
+      ] })
+    ] }),
+    quoteError && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center 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)",
+          gap: "calc(var(--compass-spacing-unit) * 0.5)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { children: quoteError.message })
+        ]
+      }
+    ),
+    swapStatus && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center text-sm",
+        style: {
+          backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
+          color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
+          borderRadius: "var(--compass-border-radius-lg)",
+          padding: "calc(var(--compass-spacing-unit) * 0.75)",
+          gap: "calc(var(--compass-spacing-unit) * 0.5)"
+        },
+        children: [
+          !swapStatus.includes("successful") && /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin" }),
+          swapStatus
+        ]
+      }
+    ),
+    !isConnected ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center",
+        style: {
+          backgroundColor: "var(--compass-color-surface)",
+          border: "1px solid var(--compass-color-border)",
+          borderRadius: "var(--compass-border-radius-lg)",
+          padding: "calc(var(--compass-spacing-unit) * 1) var(--compass-spacing-card)",
+          gap: "calc(var(--compass-spacing-unit) * 0.5)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { size: 20, style: { color: "var(--compass-color-text-tertiary)" } }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-center", style: { color: "var(--compass-color-text-secondary)" }, children: "Connect your wallet to swap" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleSwap,
+        disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
+        className: "w-full font-semibold flex items-center justify-center 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)",
+          gap: "calc(var(--compass-spacing-unit) * 0.5)",
+          fontSize: "0.875rem",
+          transition: "var(--compass-transition-normal)"
+        },
+        children: [
+          isSwapping && /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
+          isSwapping ? "Swapping..." : "Swap"
+        ]
+      }
+    )
+  ] });
+}
 var MARKET_TABS = [
   { value: "variable", label: "VARIABLE" },
   { value: "fixed", label: "FIXED" }
@@ -3783,7 +4099,6 @@ var EVM_CHAIN_IDS = {
   base: 8453,
   arbitrum: 42161
 };
-var SUPPORTED_TOKENS = ["USDC", "USDT", "DAI", "WETH", "SBC", "AUSD"];
 function formatCurrency(amount) {
   if (!amount) return "$0.00";
   const num = typeof amount === "string" ? parseFloat(amount) : amount;
@@ -3835,6 +4150,7 @@ function EarnAccount({
   const [isBalancesModalOpen, setIsBalancesModalOpen] = useState(false);
   const [marketTab, setMarketTab] = useState(defaultMarketTab);
   const [selectedMarket, setSelectedMarket] = useState(null);
+  const [isSwapModalOpen, setIsSwapModalOpen] = useState(false);
   const [isEarningsModalOpen, setIsEarningsModalOpen] = useState(false);
   useEffect(() => {
     setSelectedMarket(null);
@@ -3884,6 +4200,7 @@ function EarnAccount({
     enabled: !!address && isDeployed,
     staleTime: 30 * 1e3
   });
+  const balanceTokens = Object.keys(balancesQuery.data?.balances || {});
   const selectedTokenBalance = balancesQuery.data?.balances?.[selectedToken]?.balance || "0";
   const earnAccountTotalUsd = Object.values(balancesQuery.data?.balances || {}).reduce((sum, b) => sum + parseFloat(b.usdValue || "0"), 0).toString();
   const positionQuery = useQuery({
@@ -4553,39 +4870,59 @@ function EarnAccount({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsBalancesModalOpen(true),
+                  className: "transition-opacity hover:opacity-80",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "font-bold",
+                      style: {
+                        color: "var(--compass-color-text)",
+                        fontSize: compact ? "2rem" : "2.5rem",
+                        lineHeight: "1"
+                      },
+                      children: formatCurrency(earnAccountTotal)
+                    }
+                  )
+                }
+              ),
+              (balanceTokens.length > 0 || showTopUpButton) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "6px", marginTop: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+                balanceTokens.length > 0 && /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: () => setIsBalancesModalOpen(true),
-                    className: "transition-opacity hover:opacity-80",
-                    children: /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "font-bold",
-                        style: {
-                          color: "var(--compass-color-text)",
-                          fontSize: compact ? "2rem" : "2.5rem",
-                          lineHeight: "1"
-                        },
-                        children: formatCurrency(earnAccountTotal)
-                      }
-                    )
+                    onClick: () => setIsSwapModalOpen(true),
+                    className: "flex items-center justify-center font-medium transition-all hover:opacity-80 w-full",
+                    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: "8px 10px",
+                      gap: "6px",
+                      fontSize: "13px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowLeftRight, { size: 14 }),
+                      "Swap"
+                    ]
                   }
                 ),
                 showTopUpButton && /* @__PURE__ */ jsxs(
                   "button",
                   {
                     onClick: () => setIsFundModalOpen(true),
-                    className: "flex items-center font-medium transition-all hover:opacity-80",
+                    className: "flex items-center justify-center font-medium transition-all hover:opacity-80 w-full",
                     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"
+                      padding: "8px 10px",
+                      gap: "6px",
+                      fontSize: "13px"
                     },
                     children: [
                       /* @__PURE__ */ jsx(Plus, { size: 14 }),
@@ -4789,7 +5126,7 @@ function EarnAccount({
                       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
                       minWidth: "100px"
                     },
-                    children: SUPPORTED_TOKENS.map((token) => /* @__PURE__ */ jsx(
+                    children: balanceTokens.map((token) => /* @__PURE__ */ jsx(
                       "button",
                       {
                         onClick: () => {
@@ -5090,402 +5427,134 @@ function EarnAccount({
             {
               onClick: handleFund,
               disabled: isFunding || !fundAmount || parseFloat(fundAmount) <= 0,
-              className: "w-full py-4 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
-              style: {
-                backgroundColor: "var(--compass-color-primary)",
-                color: "white"
-              },
-              children: isFunding ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin" }),
-                "Processing..."
-              ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsx(ArrowDownLeft, { size: 20 }),
-                needsFundSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: "text-xs text-center",
-              style: { color: "var(--compass-color-text-tertiary)" },
-              children: "Gas fees are sponsored"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionModal,
-      {
-        isOpen: isBalancesModalOpen,
-        onClose: () => setIsBalancesModalOpen(false),
-        title: "Balance Breakdown",
-        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: balancesQuery.data?.balances && Object.keys(balancesQuery.data.balances).length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "text-xs font-medium uppercase tracking-wide",
-                style: { color: "var(--compass-color-text-tertiary)" },
-                children: "Available in Account"
-              }
-            ),
-            Object.entries(balancesQuery.data.balances).map(([symbol, data]) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between p-3 rounded-lg",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  border: "1px solid var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: symbol }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(data.balance) }),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatCurrency(data.usdValue) })
-                  ] })
-                ]
-              },
-              symbol
-            ))
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center justify-between pt-3 mt-2",
-              style: { borderTop: "2px solid var(--compass-color-border)" },
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "font-bold text-xl",
-                    style: { color: "var(--compass-color-text)" },
-                    children: formatCurrency(earnAccountTotalUsd)
-                  }
-                )
-              ]
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "text-center py-4",
-            style: { color: "var(--compass-color-text-tertiary)" },
-            children: "No tokens in account"
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      EarningsModal,
-      {
-        isOpen: isEarningsModalOpen,
-        onClose: () => setIsEarningsModalOpen(false),
-        positions,
-        totalEarned,
-        isLoading: positionQuery.isLoading
-      }
-    )
-  ] });
-}
-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
-  };
-}
-// src/components/SwapWidget/types.ts
-var DEFAULT_SWAP_TOKENS = ["USDC", "ETH", "WETH", "WBTC", "DAI", "USDT", "AUSD", "SBC"];
-function SwapWidget({
-  layout = "full",
-  defaultFromToken = "ETH",
-  defaultToToken = "USDC",
-  allowedTokens = [...DEFAULT_SWAP_TOKENS],
-  showReverseButton = true,
-  showSettings = false,
-  onSwapSuccess,
-  onSwapError
-}) {
-  const [fromToken, setFromToken] = useState(defaultFromToken);
-  const [toToken, setToToken] = useState(defaultToToken);
-  const [fromAmount, setFromAmount] = useState("");
-  const [isSwapping, setIsSwapping] = useState(false);
-  const [swapStatus, setSwapStatus] = useState("");
-  const { address, isConnected, signTypedData } = useCompassWallet();
-  const { chainId } = useChain();
-  const { quote, isLoading: isQuoteLoading, error: quoteError } = useSwapQuote({
-    fromToken,
-    toToken,
-    amount: fromAmount,
-    enabled: !!fromAmount && parseFloat(fromAmount) > 0
-  });
-  const handleReverse = useCallback(() => {
-    setFromToken(toToken);
-    setToToken(fromToken);
-    setFromAmount("");
-  }, [fromToken, toToken]);
-  const handleSwap = useCallback(async () => {
-    if (!address || !fromAmount || !quote) return;
-    setIsSwapping(true);
-    setSwapStatus("Preparing swap...");
-    try {
-      const prepareResponse = await fetch("/api/compass/swap/prepare", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: chainId,
-          tokenIn: fromToken,
-          tokenOut: toToken,
-          amountIn: fromAmount
-        })
-      });
-      if (!prepareResponse.ok) {
-        const error = await prepareResponse.json();
-        throw new Error(error.error || "Failed to prepare swap");
-      }
-      const prepareData = await prepareResponse.json();
-      const { eip712, normalizedTypes } = prepareData;
-      if (!eip712) {
-        throw new Error("No EIP-712 data returned from prepare");
-      }
-      setSwapStatus("Please sign the transaction...");
-      const signature = await signTypedData({
-        domain: eip712.domain,
-        types: normalizedTypes || eip712.types,
-        primaryType: "SafeTx",
-        message: eip712.message
-      });
-      setSwapStatus("Executing swap...");
-      const executeResponse = await fetch("/api/compass/swap/execute", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          owner: address,
-          chain: chainId,
-          eip712,
-          signature
-        })
-      });
-      if (!executeResponse.ok) {
-        const error = await executeResponse.json();
-        throw new Error(error.error || "Failed to execute swap");
+              className: "w-full py-4 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+              style: {
+                backgroundColor: "var(--compass-color-primary)",
+                color: "white"
+              },
+              children: isFunding ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin" }),
+                "Processing..."
+              ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsx(ArrowDownLeft, { size: 20 }),
+                needsFundSwap ? `Swap ${fundToken} & Transfer` : "Transfer to Savings"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs text-center",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "Gas fees are sponsored"
+            }
+          )
+        ] })
       }
-      const executeData = await executeResponse.json();
-      const txHash = executeData.txHash;
-      setSwapStatus("Swap successful!");
-      onSwapSuccess?.(fromToken, toToken, fromAmount, quote.outputAmount, txHash);
-      setFromAmount("");
-      setTimeout(() => setSwapStatus(""), 3e3);
-    } catch (error) {
-      setSwapStatus("");
-      onSwapError?.(error);
-    } finally {
-      setIsSwapping(false);
-    }
-  }, [address, fromAmount, quote, chainId, fromToken, toToken, signTypedData, onSwapSuccess, onSwapError]);
-  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 })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(EarnAccountGuard, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
-        /* @__PURE__ */ jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
+    ),
+    /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: isBalancesModalOpen,
+        onClose: () => setIsBalancesModalOpen(false),
+        title: "Balance Breakdown",
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: balancesQuery.data?.balances && Object.keys(balancesQuery.data.balances).length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              "span",
               {
-                type: "number",
-                value: fromAmount,
-                onChange: (e) => setFromAmount(e.target.value),
-                placeholder: "0.00",
-                className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
-                style: { color: "var(--compass-color-text)" }
+                className: "text-xs font-medium uppercase tracking-wide",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "Available in Account"
               }
             ),
-            /* @__PURE__ */ jsx(
-              "select",
+            Object.entries(balancesQuery.data.balances).map(([symbol, data]) => /* @__PURE__ */ jsxs(
+              "div",
               {
-                value: fromToken,
-                onChange: (e) => setFromToken(e.target.value),
-                className: "border text-sm font-medium cursor-pointer flex-shrink-0",
-                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-                children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
-              }
-            )
-          ] })
-        ] }),
-        showReverseButton && /* @__PURE__ */ jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsx(
-          "button",
+                className: "flex items-center justify-between p-3 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-surface)",
+                  border: "1px solid var(--compass-color-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: symbol }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount2(data.balance) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatCurrency(data.usdValue) })
+                  ] })
+                ]
+              },
+              symbol
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between pt-3 mt-2",
+              style: { borderTop: "2px solid var(--compass-color-border)" },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-bold text-xl",
+                    style: { color: "var(--compass-color-text)" },
+                    children: formatCurrency(earnAccountTotalUsd)
+                  }
+                )
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: handleReverse,
-            className: "border hover:opacity-80",
-            style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
-            children: /* @__PURE__ */ jsx(ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
+            className: "text-center py-4",
+            style: { color: "var(--compass-color-text-tertiary)" },
+            children: "No tokens in account"
           }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }),
-              "Loading..."
-            ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: toToken,
-                onChange: (e) => setToToken(e.target.value),
-                className: "border text-sm font-medium cursor-pointer",
-                style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
-                children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      quote && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Rate" }),
-        /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
-          "1 ",
-          fromToken,
-          " = ",
-          parseFloat(quote.rate).toFixed(6),
-          " ",
-          toToken
-        ] })
-      ] }),
-      quoteError && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center 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)",
-            gap: "calc(var(--compass-spacing-unit) * 0.5)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(AlertCircle, { size: 16 }),
-            /* @__PURE__ */ jsx("span", { children: quoteError.message })
-          ]
-        }
-      ),
-      swapStatus && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center text-sm",
-          style: {
-            backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
-            color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            padding: "calc(var(--compass-spacing-unit) * 0.75)",
-            gap: "calc(var(--compass-spacing-unit) * 0.5)"
-          },
-          children: [
-            !swapStatus.includes("successful") && /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin" }),
-            swapStatus
-          ]
-        }
-      ),
-      !isConnected ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex flex-col items-center",
-          style: {
-            backgroundColor: "var(--compass-color-surface)",
-            border: "1px solid var(--compass-color-border)",
-            borderRadius: "var(--compass-border-radius-lg)",
-            fontFamily: "var(--compass-font-family)",
-            padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
-            gap: "calc(var(--compass-spacing-unit) * 0.75)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "text-sm text-center",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: "Connect your wallet to swap"
-              }
-            )
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: handleSwap,
-          disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
-          className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
-          style: {
-            backgroundColor: "var(--compass-color-primary)",
-            color: "var(--compass-color-primary-text)",
-            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.5)",
-            transition: "var(--compass-transition-normal)"
-          },
-          children: [
-            isSwapping && /* @__PURE__ */ jsx(Loader2, { size: 18, className: "animate-spin" }),
-            isSwapping ? "Swapping..." : "Swap"
-          ]
-        }
-      )
-    ] })
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionModal,
+      {
+        isOpen: isSwapModalOpen,
+        onClose: () => setIsSwapModalOpen(false),
+        title: "Swap Tokens",
+        children: /* @__PURE__ */ jsx(
+          SwapForm,
+          {
+            availableFromTokens: balanceTokens,
+            balances: Object.fromEntries(
+              Object.entries(balancesQuery.data?.balances || {}).map(([token, data]) => [token, data.balance])
+            ),
+            onSwapSuccess: () => {
+              setIsSwapModalOpen(false);
+              queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+              balancesQuery.refetch();
+              setTimeout(() => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                balancesQuery.refetch();
+              }, 5e3);
+              setTimeout(() => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                balancesQuery.refetch();
+              }, 15e3);
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EarningsModal,
+      {
+        isOpen: isEarningsModalOpen,
+        onClose: () => setIsEarningsModalOpen(false),
+        positions,
+        totalEarned,
+        isLoading: positionQuery.isLoading
+      }
+    )
   ] });
 }
 function getEarliestDepositTimestamp(deposits) {
@@ -5972,7 +6041,8 @@ function PositionDetailModal({ position, onClose }) {
           className: "relative w-full max-w-md rounded-xl border overflow-hidden max-h-[90vh] overflow-y-auto",
           style: {
             backgroundColor: "var(--compass-color-background)",
-            borderColor: "var(--compass-color-border)"
+            borderColor: "var(--compass-color-border)",
+            scrollbarWidth: "none"
           },
           onClick: (e) => e.stopPropagation(),
           children: [
@@ -6475,7 +6545,7 @@ function useRebalancingData(chainOverride) {
         if (usdValue <= 0) continue;
         balances.push({
           token: symbol,
-          balance: parseFloat(td.balanceFormatted || td.balance_formatted || "0"),
+          balance: parseFloat(td.balance || "0"),
           usdValue
         });
       }
@@ -6761,7 +6831,8 @@ function PortfolioBalanceCard({
   positionCount,
   totalEarned = 0,
   showTopUp = true,
-  onTopUp
+  onTopUp,
+  onSwap
 }) {
   const [showBalancesModal, setShowBalancesModal] = useState(false);
   const tokenBalances = idleBalances.map((b) => ({
@@ -6802,39 +6873,59 @@ function PortfolioBalanceCard({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx(
+            /* @__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)
+                  }
+                )
+              }
+            ),
+            (onSwap || showTopUp && onTopUp) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "6px", marginTop: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
+              onSwap && /* @__PURE__ */ jsxs(
                 "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)
-                    }
-                  )
+                  onClick: onSwap,
+                  className: "flex items-center justify-center font-medium transition-all hover:opacity-80 w-full",
+                  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: "8px 10px",
+                    gap: "6px",
+                    fontSize: "13px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ArrowLeftRight, { size: 14 }),
+                    "Swap"
+                  ]
                 }
               ),
               showTopUp && onTopUp && /* @__PURE__ */ jsxs(
                 "button",
                 {
                   onClick: onTopUp,
-                  className: "flex items-center font-medium transition-all hover:opacity-80",
+                  className: "flex items-center justify-center font-medium transition-all hover:opacity-80 w-full",
                   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"
+                    padding: "8px 10px",
+                    gap: "6px",
+                    fontSize: "13px"
                   },
                   children: [
                     /* @__PURE__ */ jsx(Plus, { size: 14 }),
@@ -7175,7 +7266,6 @@ function AllocationEditor({
     ) })
   ] });
 }
-var SUPPORTED_TOKENS2 = ["USDC", "USDT", "DAI", "WETH", "SBC", "AUSD"];
 var EVM_CHAIN_IDS2 = {
   ethereum: 1,
   base: 8453,
@@ -7236,7 +7326,12 @@ function RebalancingWidget({
   const [txHash, setTxHash] = useState(null);
   const [hasInitializedTargets, setHasInitializedTargets] = useState(false);
   const [isEarningsModalOpen, setIsEarningsModalOpen] = useState(false);
+  const [isSwapModalOpen, setIsSwapModalOpen] = useState(false);
   const [isAddMarketExpanded, setIsAddMarketExpanded] = useState(false);
+  const balanceTokens = useMemo(() => {
+    if (!portfolio?.idleBalances) return [];
+    return portfolio.idleBalances.map((b) => b.token);
+  }, [portfolio?.idleBalances]);
   const [marketTab, setMarketTab] = useState("variable");
   const [selectedMarket, setSelectedMarket] = useState(null);
   const [selectedToken, setSelectedToken] = useState("USDC");
@@ -7255,13 +7350,14 @@ function RebalancingWidget({
     setTxHash(null);
     setHasInitializedTargets(false);
     setIsAddMarketExpanded(false);
+    setIsSwapModalOpen(false);
     setSelectedMarket(null);
     setDepositAmount("");
     setDepositError(null);
     setDepositStatus("");
   }, [CHAIN_ID]);
   useEffect(() => {
-    if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets) {
+    if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets && !isLoading) {
       setTargets(
         portfolio.positions.map((p) => ({
           venueType: p.venueType,
@@ -7273,7 +7369,7 @@ function RebalancingWidget({
       );
       setHasInitializedTargets(true);
     }
-  }, [portfolio, hasInitializedTargets]);
+  }, [portfolio, hasInitializedTargets, isLoading]);
   const state = useMemo(() => {
     if (isLoading) return "loading";
     if (!portfolio || portfolio.positions.length === 0) return "empty";
@@ -7696,7 +7792,7 @@ function RebalancingWidget({
                   ]
                 }
               ),
-              state === "empty" && /* @__PURE__ */ jsxs(
+              state === "empty" && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "p-8 text-center",
@@ -7704,7 +7800,32 @@ function RebalancingWidget({
                     backgroundColor: "var(--compass-color-surface)",
                     borderRadius: "var(--compass-border-radius-xl)"
                   },
-                  children: [
+                  children: !isConnected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-lg font-semibold mb-2",
+                        style: { color: "var(--compass-color-text)" },
+                        children: "Connect your wallet"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm mb-4", style: { color: "var(--compass-color-text-secondary)" }, children: "Connect your wallet to view and manage your DeFi portfolio." }),
+                    login && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: login,
+                        className: "font-semibold transition-all",
+                        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) calc(var(--compass-spacing-unit) * 1.5)",
+                          fontSize: "0.875rem"
+                        },
+                        children: "Connect Wallet"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
                       "p",
                       {
@@ -7714,7 +7835,7 @@ function RebalancingWidget({
                       }
                     ),
                     /* @__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." })
-                  ]
+                  ] })
                 }
               ),
               state !== "loading" && state !== "empty" && portfolio && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
@@ -7728,7 +7849,8 @@ function RebalancingWidget({
                     positionCount: portfolio.positions.length,
                     totalEarned,
                     showTopUp,
-                    onTopUp: () => earnBalanceRef.current?.openTransferModal()
+                    onTopUp: () => earnBalanceRef.current?.openTransferModal(),
+                    onSwap: balanceTokens.length > 0 ? () => setIsSwapModalOpen(true) : void 0
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -7848,7 +7970,7 @@ function RebalancingWidget({
                                   boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
                                   minWidth: "100px"
                                 },
-                                children: SUPPORTED_TOKENS2.map((token) => /* @__PURE__ */ jsx(
+                                children: balanceTokens.map((token) => /* @__PURE__ */ jsx(
                                   "button",
                                   {
                                     onClick: () => {
@@ -8188,6 +8310,30 @@ function RebalancingWidget({
           }
         ) }),
         /* @__PURE__ */ jsx(EarnAccountBalance, { ref: earnBalanceRef, compact: true, hideVisual: true, onTransferComplete: () => refetch() }),
+        /* @__PURE__ */ jsx(
+          ActionModal,
+          {
+            isOpen: isSwapModalOpen,
+            onClose: () => setIsSwapModalOpen(false),
+            title: "Swap Tokens",
+            children: /* @__PURE__ */ jsx(
+              SwapForm,
+              {
+                availableFromTokens: balanceTokens,
+                balances: Object.fromEntries(
+                  (portfolio?.idleBalances || []).map((b) => [b.token, b.balance.toString()])
+                ),
+                onSwapSuccess: () => {
+                  setIsSwapModalOpen(false);
+                  refetch();
+                  setTimeout(() => refetch(), 5e3);
+                  setTimeout(() => refetch(), 15e3);
+                },
+                onSwapError: onError
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(
           EarningsModal,
           {
@@ -8245,7 +8391,6 @@ function ActionList({ actions }) {
 // src/components/CompassEarnWidget/presets.ts
 var allTabs = [
-  { 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 }
@@ -8254,22 +8399,16 @@ function getTabsForPreset(preset) {
   switch (preset) {
     case "full":
       return allTabs;
-    case "swap-only":
-      return allTabs.map((tab) => ({
-        ...tab,
-        enabled: tab.id === "swap"
-      }));
     default:
       return allTabs;
   }
 }
 function getDefaultTab(tabs) {
   const enabledTab = tabs.find((t) => t.enabled);
-  return enabledTab?.id || "swap";
+  return enabledTab?.id || "rebalance";
 }
 function CompassEarnWidget({
   preset = "full",
-  enableSwap,
   enablePositions,
   enableRebalance,
   defaultTab,
@@ -8281,12 +8420,11 @@ function CompassEarnWidget({
     const baseTabs = getTabsForPreset(preset);
     return baseTabs.map((tab) => {
       let enabled = tab.enabled;
-      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, enableSwap, enablePositions, enableRebalance]);
+  }, [preset, 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);
@@ -8327,7 +8465,6 @@ function CompassEarnWidget({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "swap" && /* @__PURE__ */ jsx(SwapWidget, {}),
       activeTab === "rebalance" && /* @__PURE__ */ jsx(RebalancingWidget, {}),
       activeTab === "positions" && /* @__PURE__ */ jsx(
         EarnPositionsList,
@@ -8359,6 +8496,6 @@ var CHAINS = {
   }
 };
-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 };
+export { AccountBalancesModal, ActionModal, ApiProvider, CHAINS, ChainSwitcher, CompassEarnWidget, CompassProvider, DepositWithdrawForm, EarnAccount, EarnAccountBalance, EarnAccountGuard, PnLSummary, RebalancingWidget, SwapForm, ThemeProvider, TransactionHistory, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map