@compass-labs/widgets 0.1.38 → 0.1.40

package/dist/index.js

@@ -6,6 +6,7 @@ var apiSdk = require('@compass-labs/api-sdk');
 var jsxRuntime = require('react/jsx-runtime');
 var chains = require('viem/chains');
 var lucideReact = require('lucide-react');
+var viem = require('viem');
 
 // src/provider/CompassProvider.tsx
 var ApiContext = react.createContext(null);
@@ -92,7 +93,10 @@ var disconnectedWallet = {
   },
   switchChain: null,
   login: null,
-  logout: null
+  logout: null,
+  fundWallet: null,
+  hasExternalWallet: true,
+  sendTransaction: null
 };
 function WalletProvider({ children, wallet }) {
   const value = wallet ? {
@@ -102,7 +106,10 @@ function WalletProvider({ children, wallet }) {
     signTypedData: wallet.signTypedData,
     switchChain: wallet.switchChain ?? null,
     login: wallet.login ?? null,
-    logout: wallet.logout ?? null
+    logout: wallet.logout ?? null,
+    fundWallet: wallet.fundWallet ?? null,
+    hasExternalWallet: wallet.hasExternalWallet ?? true,
+    sendTransaction: wallet.sendTransaction ?? null
   } : disconnectedWallet;
   return /* @__PURE__ */ jsxRuntime.jsx(WalletContext.Provider, { value, children });
 }
@@ -1160,9 +1167,9 @@ function CopyableAddress({
       title: copied ? "Copied!" : `Copy: ${address}`,
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono", style: { color: "var(--compass-color-text)" }, children: displayAddr }),
-          copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 12, className: "flex-shrink-0", style: { color: "var(--compass-color-text-tertiary)" } })
+          copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 14, className: "flex-shrink-0", style: { color: "var(--compass-color-text-secondary)" } })
         ] })
       ]
     }
@@ -1271,25 +1278,29 @@ function WalletStatus({
   );
 }
 function ActionModal({ isOpen, onClose, title, children }) {
+  const modalRef = react.useRef(null);
   react.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
     };
     if (isOpen) {
       document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
     }
     return () => {
       document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
     };
   }, [isOpen, onClose]);
+  const handleOverlayWheel = react.useCallback((e) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      window.scrollBy(0, e.deltaY);
+    }
+  }, []);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { overflowY: "auto", scrollbarWidth: "none" },
+      onWheel: handleOverlayWheel,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1302,21 +1313,27 @@ function ActionModal({ isOpen, onClose, title, children }) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            ref: modalRef,
             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)"
+              fontFamily: "var(--compass-font-family)",
+              maxHeight: "85vh",
+              overflowY: "auto",
+              overscrollBehavior: "contain",
+              scrollbarWidth: "none"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "flex items-center justify-between border-b",
+                  className: "flex items-center justify-between border-b sticky top-0 z-10",
                   style: {
                     borderColor: "var(--compass-color-border)",
-                    padding: "calc(var(--compass-spacing-card) * 0.75) var(--compass-spacing-card)"
+                    padding: "calc(var(--compass-spacing-card) * 0.75) var(--compass-spacing-card)",
+                    backgroundColor: "var(--compass-color-surface)"
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2573,114 +2590,731 @@ function CreditAccountGuard({
     }
   );
 }
-function AccountBalancesModal({
-  isOpen,
-  onClose,
-  balances,
-  totalUsdValue,
-  isLoading = false,
-  earnAccountAddress,
-  walletAddress
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionModal, { isOpen, onClose, title: "Balance Breakdown", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    (walletAddress || earnAccountAddress) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      walletAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: walletAddress, label: "Wallet" }),
-      earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-      lucideReact.Loader2,
-      {
-        size: 24,
-        className: "animate-spin",
-        style: { color: "var(--compass-color-primary)" }
-      }
-    ) }) : balances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+var EVM_CHAIN_IDS = {
+  ethereum: 1,
+  base: 8453,
+  arbitrum: 42161
+};
+function BuyForm({ targetAddress, defaultAsset = "USDC", onComplete }) {
+  const { fundWallet } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const [amount, setAmount] = react.useState("");
+  const [state, setState] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const numericChainId = EVM_CHAIN_IDS[chainId] || 8453;
+  const handleBuy = react.useCallback(async () => {
+    if (!fundWallet || !amount || parseFloat(amount) <= 0) {
+      return;
+    }
+    setState("buying");
+    setError(null);
+    try {
+      await fundWallet({
+        address: targetAddress,
+        chainId: numericChainId,
+        asset: defaultAsset,
+        amount
+      });
+      setState("success");
+      onComplete?.();
+      setTimeout(() => setState("idle"), 3e3);
+    } catch (err) {
+      setState("error");
+      setError(err instanceof Error ? err.message : "Purchase failed. Please try again.");
+    }
+  }, [fundWallet, amount, targetAddress, numericChainId, defaultAsset, onComplete]);
+  const chainName = chainId.charAt(0).toUpperCase() + chainId.slice(1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
       {
-        className: "text-center py-4",
-        style: { color: "var(--compass-color-text-tertiary)" },
-        children: "No tokens in account"
+        className: "text-sm font-medium",
+        style: { color: "var(--compass-color-text)", fontFamily: "var(--compass-font-family)" },
+        children: [
+          "Buy ",
+          defaultAsset,
+          " on ",
+          chainName
+        ]
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "block text-sm mb-1.5",
+          style: { color: "var(--compass-color-text-secondary)", fontFamily: "var(--compass-font-family)" },
+          children: "Amount (USD)"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-xs font-medium uppercase tracking-wide",
+            className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm",
             style: { color: "var(--compass-color-text-tertiary)" },
-            children: "Available in Account"
+            children: "$"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "input",
           {
-            className: "flex flex-col gap-2",
-            style: {
-              maxHeight: "50vh",
-              overflowY: "auto",
-              scrollbarWidth: "none"
+            type: "number",
+            value: amount,
+            onChange: (e) => {
+              setAmount(e.target.value);
+              if (state === "error") {
+                setState("idle");
+                setError(null);
+              }
             },
-            children: balances.filter((token) => parseFloat(token.balance) >= 5e-3).map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            disabled: state === "buying",
+            placeholder: "0.00",
+            className: "w-full border px-3 py-2.5 pl-7 text-sm focus:outline-none disabled:opacity-50",
+            style: {
+              backgroundColor: "var(--compass-color-surface)",
+              borderColor: "var(--compass-color-border)",
+              borderRadius: "var(--compass-border-radius-lg)",
+              color: "var(--compass-color-text)",
+              fontFamily: "var(--compass-font-family)"
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "text-xs",
+        style: { color: "var(--compass-color-text-tertiary)", fontFamily: "var(--compass-font-family)" },
+        children: "Buy crypto with card or bank transfer. Funds are sent directly to your account."
+      }
+    ),
+    state === "success" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-3 text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-success-muted, rgba(34,197,94,0.1))",
+          color: "var(--compass-color-success)",
+          borderRadius: "var(--compass-border-radius-lg)",
+          fontFamily: "var(--compass-font-family)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { size: 16 }),
+          "Purchase initiated. Funds may take a few minutes to arrive."
+        ]
+      }
+    ),
+    state === "error" && error && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-2 p-3 text-sm",
+        style: {
+          backgroundColor: "var(--compass-color-error-muted, rgba(239,68,68,0.1))",
+          color: "var(--compass-color-error)",
+          borderRadius: "var(--compass-border-radius-lg)",
+          fontFamily: "var(--compass-font-family)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
+          error
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleBuy,
+        disabled: state === "buying" || !amount || parseFloat(amount) <= 0,
+        className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        style: {
+          backgroundColor: "var(--compass-color-primary)",
+          color: "white",
+          borderRadius: "var(--compass-border-radius-xl)",
+          fontFamily: "var(--compass-font-family)",
+          transition: "var(--compass-transition-normal)"
+        },
+        children: state === "buying" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+          "Processing..."
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
+          "Buy with card / bank"
+        ] })
+      }
+    )
+  ] });
+}
+var BLOCK_EXPLORERS = {
+  ethereum: "https://etherscan.io",
+  base: "https://basescan.org",
+  arbitrum: "https://arbiscan.io"
+};
+function TxStatus({ state }) {
+  const { chainId } = useChain();
+  if (state.status === "idle") return null;
+  const explorer = BLOCK_EXPLORERS[chainId] || BLOCK_EXPLORERS.ethereum;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "mt-4 p-4 border",
+      style: {
+        borderColor: "var(--compass-color-border)",
+        borderRadius: "var(--compass-border-radius-xl)",
+        fontFamily: "var(--compass-font-family)"
+      },
+      children: [
+        state.status === "preparing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: "h-4 w-4 animate-spin",
+              style: { color: "var(--compass-color-primary)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Preparing transaction..." })
+        ] }),
+        state.status === "signing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: "h-4 w-4 animate-spin",
+              style: { color: "var(--compass-color-warning)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Waiting for signature..." })
+        ] }),
+        state.status === "broadcasting" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: "h-4 w-4 animate-spin",
+              style: { color: "var(--compass-color-primary)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Broadcasting transaction..." })
+        ] }),
+        state.status === "submitted" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Loader2,
+                {
+                  className: "h-4 w-4 animate-spin",
+                  style: { color: "var(--compass-color-primary)" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text)" }, children: "Transaction submitted" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
               {
-                className: "flex items-center justify-between p-3 rounded-lg",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  border: "1px solid var(--compass-color-border)",
-                  flexShrink: 0
-                },
+                href: `${explorer}/tx/${state.txHash}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex items-center gap-1.5 text-xs hover:opacity-70 transition-opacity",
+                style: { color: "var(--compass-color-text-secondary)" },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: token.symbol }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount(token.balance) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUSD(token.usdValue) })
-                  ] })
+                  "View on explorer",
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
                 ]
-              },
-              token.symbol
-            ))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex items-center justify-between pt-3 mt-2",
-          style: { borderTop: "2px solid var(--compass-color-border)" },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-xs mt-2",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: "Waiting for on-chain confirmation. Balances will update automatically."
+            }
+          )
+        ] }),
+        state.status === "confirmed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
+              lucideReact.CheckCircle,
               {
-                className: "font-bold text-xl",
-                style: { color: "var(--compass-color-text)" },
-                children: formatUSD(totalUsdValue)
+                className: "h-4 w-4",
+                style: { color: "var(--compass-color-success)" }
               }
-            )
-          ]
-        }
-      )
-    ] })
-  ] }) });
-}
-var TRANSFER_TOKENS = ["USDC", "SBC"];
-var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
-  compact = false,
-  hideVisual = false,
-  onTransferComplete
-}, ref) {
-  const [isModalOpen, setIsModalOpen] = react.useState(false);
-  const [activeAction, setActiveAction] = react.useState("deposit");
-  const [selectedToken, setSelectedToken] = react.useState(TRANSFER_TOKENS[0]);
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-success)" }, children: "Transaction confirmed" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: `${explorer}/tx/${state.txHash}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center gap-1.5 text-xs hover:opacity-70 transition-opacity",
+              style: { color: "var(--compass-color-text-secondary)" },
+              children: [
+                "View on explorer",
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
+              ]
+            }
+          )
+        ] }),
+        state.status === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.XCircle,
+            {
+              className: "h-4 w-4 mt-0.5 shrink-0",
+              style: { color: "var(--compass-color-error)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "break-all",
+              style: { color: "var(--compass-color-error)" },
+              children: state.error
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function useTxPolling(options = {}) {
+  const { chainId } = useChain();
+  const queryClient = reactQuery.useQueryClient();
+  const pollIntervalRef = react.useRef(null);
+  const clearPolling = react.useCallback(() => {
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => clearPolling();
+  }, [clearPolling]);
+  const startPolling = react.useCallback(
+    (txHash, setTxState) => {
+      clearPolling();
+      let polls = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        polls++;
+        for (const key of options.queryKeysToInvalidate ?? []) {
+          queryClient.invalidateQueries({ queryKey: key });
+        }
+        try {
+          const res = await fetch(
+            `/api/compass/tx/receipt?hash=${txHash}&chain=${chainId}`
+          );
+          const data = await res.json();
+          if (data.status === "success") {
+            clearPolling();
+            setTxState({ status: "confirmed", txHash });
+            return;
+          } else if (data.status === "reverted") {
+            clearPolling();
+            setTxState({ status: "failed", error: "Transaction reverted" });
+            return;
+          }
+        } catch (err) {
+          if (err instanceof TypeError && err.message.includes("fetch")) ; else {
+            console.warn("[useTxPolling] Unexpected error polling tx receipt:", err);
+          }
+        }
+        if (polls >= 24) {
+          clearPolling();
+          setTxState({ status: "failed", error: "Unable to confirm transaction. Please check a block explorer to verify." });
+        }
+      }, 5e3);
+    },
+    [chainId, clearPolling, queryClient, options.queryKeysToInvalidate]
+  );
+  return { startPolling, clearPolling };
+}
+var USDC_ADDRESSES = {
+  ethereum: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+  base: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+  arbitrum: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831"
+};
+var ERC20_TRANSFER_ABI = [
+  {
+    type: "function",
+    name: "transfer",
+    inputs: [
+      { name: "to", type: "address" },
+      { name: "amount", type: "uint256" }
+    ],
+    outputs: [{ name: "", type: "bool" }],
+    stateMutability: "nonpayable"
+  }
+];
+async function waitForReceipt(txHash, chainId) {
+  const maxPolls = 60;
+  for (let i = 0; i < maxPolls; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 3e3));
+    try {
+      const res = await fetch(`/api/compass/tx/receipt?hash=${txHash}&chain=${chainId}`);
+      const data = await res.json();
+      if (data.status === "success") return;
+      if (data.status === "reverted") throw new Error("Withdrawal transaction reverted");
+    } catch (err) {
+      if (err instanceof Error && err.message.includes("reverted")) throw err;
+    }
+  }
+  throw new Error("Unable to confirm withdrawal. Please check a block explorer to verify.");
+}
+function SendForm({ onComplete, product = "earn", productAccountAddress }) {
+  const { sendTransaction, signTypedData, address } = useEmbeddableWallet();
+  const { chainId } = useChain();
+  const { earnAccountAddress, isDeployed } = useEarnAccount();
+  const [recipient, setRecipient] = react.useState("");
   const [amount, setAmount] = react.useState("");
-  const [transferState, setTransferState] = react.useState("idle");
-  const [statusMessage, setStatusMessage] = react.useState("");
-  const [error, setError] = react.useState(null);
-  const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
-  const { address, isConnected, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
+  const [txState, setTxState] = react.useState({ status: "idle" });
+  const { startPolling } = useTxPolling({
+    queryKeysToInvalidate: product === "credit" ? [["creditBalances"], ["creditPositions"], ["eoaBalances"]] : [["earnAccountBalances"], ["eoaBalances"]]
+  });
+  const { data: earnBalanceData } = reactQuery.useQuery({
+    queryKey: ["earnAccountBalances", chainId, address],
+    queryFn: async () => {
+      if (!address) return null;
+      const response = await fetch(
+        `/api/compass/earn-account/balances?owner=${address}&chain=${chainId}`
+      );
+      if (!response.ok) return null;
+      return response.json();
+    },
+    enabled: !!address && isDeployed && product === "earn",
+    staleTime: 30 * 1e3
+  });
+  const { data: creditBalanceData } = reactQuery.useQuery({
+    queryKey: ["creditBalances", productAccountAddress, chainId],
+    queryFn: async () => {
+      if (!productAccountAddress) return null;
+      const response = await fetch(
+        `/api/compass/credit/balances?owner=${productAccountAddress}&chain=${chainId}`
+      );
+      if (!response.ok) return null;
+      return response.json();
+    },
+    enabled: !!productAccountAddress && product === "credit",
+    staleTime: 30 * 1e3
+  });
+  const availableBalance = product === "credit" ? creditBalanceData?.find((b) => b.tokenSymbol === "USDC")?.amount || "0" : earnBalanceData?.balances?.["USDC"]?.balance || "0";
+  const tokenAddress = USDC_ADDRESSES[chainId];
+  const isValidAddress = recipient.length > 0 && viem.isAddress(recipient);
+  const isValidAmount = amount.length > 0 && parseFloat(amount) > 0;
+  const exceedsBalance = isValidAmount && parseFloat(amount) > parseFloat(availableBalance);
+  const isBusy = txState.status !== "idle" && txState.status !== "confirmed" && txState.status !== "failed";
+  const canSend = isValidAddress && isValidAmount && !exceedsBalance && !!sendTransaction && !!signTypedData && !isBusy;
+  const handleSend = react.useCallback(async () => {
+    if (!sendTransaction || !signTypedData || !isValidAddress || !isValidAmount || !tokenAddress) return;
+    try {
+      setTxState({ status: "preparing" });
+      const prepareRes = await fetch("/api/compass/transfer/prepare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          token: "USDC",
+          amount,
+          action: "WITHDRAW",
+          ...product === "credit" ? { product: "credit" } : {}
+        })
+      });
+      if (!prepareRes.ok) {
+        const errData = await prepareRes.json();
+        throw new Error(errData.error || "Failed to prepare withdrawal");
+      }
+      const prepareData = await prepareRes.json();
+      setTxState({ status: "signing" });
+      const withdrawSig = await signTypedData({
+        domain: prepareData.domain,
+        types: prepareData.normalizedTypes,
+        primaryType: prepareData.primaryType,
+        message: prepareData.message
+      });
+      setTxState({ status: "broadcasting" });
+      const executeRes = await fetch("/api/compass/transfer/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          owner: address,
+          chain: chainId,
+          eip712: prepareData.eip712,
+          signature: withdrawSig,
+          ...product === "credit" ? { product: "credit" } : {}
+        })
+      });
+      if (!executeRes.ok) {
+        const errData = await executeRes.json();
+        throw new Error(errData.error || "Withdrawal failed");
+      }
+      const { txHash: withdrawHash } = await executeRes.json();
+      await waitForReceipt(withdrawHash, chainId);
+      setTxState({ status: "signing" });
+      const data = viem.encodeFunctionData({
+        abi: ERC20_TRANSFER_ABI,
+        functionName: "transfer",
+        args: [recipient, viem.parseUnits(amount, 6)]
+      });
+      const sendHash = await sendTransaction({ to: tokenAddress, data });
+      setTxState({ status: "submitted", txHash: sendHash });
+      startPolling(sendHash, setTxState);
+      setAmount("");
+      setRecipient("");
+      onComplete?.();
+    } catch (err) {
+      setTxState({ status: "failed", error: err instanceof Error ? err.message : "Transaction failed" });
+    }
+  }, [sendTransaction, signTypedData, recipient, amount, address, chainId, tokenAddress, isValidAddress, isValidAmount, onComplete, startPolling, product]);
+  const chainName = chainId.charAt(0).toUpperCase() + chainId.slice(1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-sm font-medium",
+        style: { color: "var(--compass-color-text)", fontFamily: "var(--compass-font-family)" },
+        children: [
+          "Send USDC on ",
+          chainName
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "block text-sm mb-1.5",
+          style: { color: "var(--compass-color-text-secondary)", fontFamily: "var(--compass-font-family)" },
+          children: "Recipient Address"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: recipient,
+          onChange: (e) => {
+            setRecipient(e.target.value);
+            if (txState.status === "failed") setTxState({ status: "idle" });
+          },
+          disabled: isBusy,
+          placeholder: "0x...",
+          className: "w-full border px-3 py-2.5 text-sm focus:outline-none disabled:opacity-50 font-mono",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            borderColor: recipient && !isValidAddress ? "var(--compass-color-error)" : "var(--compass-color-border)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            color: "var(--compass-color-text)",
+            fontFamily: "var(--compass-font-family)"
+          }
+        }
+      ),
+      recipient && !isValidAddress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", style: { color: "var(--compass-color-error)" }, children: "Invalid Ethereum address" }),
+      isValidAddress && recipient.toLowerCase() === address?.toLowerCase() && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", style: { color: "var(--compass-color-warning, #f59e0b)" }, children: "This is your own wallet address" }),
+      isValidAddress && earnAccountAddress && recipient.toLowerCase() === earnAccountAddress.toLowerCase() && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", style: { color: "var(--compass-color-warning, #f59e0b)" }, children: "This is your savings account address" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "block text-sm mb-1.5",
+          style: { color: "var(--compass-color-text-secondary)", fontFamily: "var(--compass-font-family)" },
+          children: "Amount"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "number",
+            value: amount,
+            onChange: (e) => {
+              setAmount(e.target.value);
+              if (txState.status === "failed") setTxState({ status: "idle" });
+            },
+            disabled: isBusy,
+            placeholder: "0.00",
+            className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
+            style: {
+              backgroundColor: "var(--compass-color-surface)",
+              borderColor: "var(--compass-color-border)",
+              borderRadius: "var(--compass-border-radius-lg)",
+              color: "var(--compass-color-text)",
+              fontFamily: "var(--compass-font-family)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+            style: { color: "var(--compass-color-text-tertiary)" },
+            children: "USDC"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setAmount(availableBalance),
+          className: "text-xs mt-1",
+          style: { color: "var(--compass-color-primary)", cursor: "pointer", background: "none", border: "none", padding: 0 },
+          children: [
+            "Available: ",
+            parseFloat(availableBalance).toFixed(2),
+            " USDC"
+          ]
+        }
+      ),
+      exceedsBalance && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", style: { color: "var(--compass-color-error)" }, children: "Amount exceeds available balance" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "text-xs",
+        style: { color: "var(--compass-color-text-tertiary)", fontFamily: "var(--compass-font-family)" },
+        children: "Send USDC from your account to any address. Requires 2 signatures. Gas fees are sponsored."
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: txState }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleSend,
+        disabled: !canSend,
+        className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        style: {
+          backgroundColor: "var(--compass-color-primary)",
+          color: "white",
+          borderRadius: "var(--compass-border-radius-xl)",
+          fontFamily: "var(--compass-font-family)",
+          transition: "var(--compass-transition-normal)"
+        },
+        children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+          "Sending..."
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+          "Send USDC"
+        ] })
+      }
+    )
+  ] });
+}
+function AccountBalancesModal({
+  isOpen,
+  onClose,
+  balances,
+  totalUsdValue,
+  isLoading = false,
+  earnAccountAddress,
+  walletAddress
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ActionModal, { isOpen, onClose, title: "Balance Breakdown", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    (walletAddress || earnAccountAddress) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      walletAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: walletAddress, label: "Wallet" }),
+      earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Loader2,
+      {
+        size: 24,
+        className: "animate-spin",
+        style: { color: "var(--compass-color-primary)" }
+      }
+    ) }) : balances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "text-center py-4",
+        style: { color: "var(--compass-color-text-tertiary)" },
+        children: "No tokens in account"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-xs font-medium uppercase tracking-wide",
+            style: { color: "var(--compass-color-text-tertiary)" },
+            children: "Available in Account"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex flex-col gap-2",
+            style: {
+              maxHeight: "50vh",
+              overflowY: "auto",
+              scrollbarWidth: "none"
+            },
+            children: balances.filter((token) => parseFloat(token.balance) >= 5e-3).map((token) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between p-3 rounded-lg",
+                style: {
+                  backgroundColor: "var(--compass-color-surface)",
+                  border: "1px solid var(--compass-color-border)",
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", style: { color: "var(--compass-color-text)" }, children: token.symbol }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", style: { color: "var(--compass-color-text)" }, children: formatAmount(token.balance) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: formatUSD(token.usdValue) })
+                  ] })
+                ]
+              },
+              token.symbol
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between pt-3 mt-2",
+          style: { borderTop: "2px solid var(--compass-color-border)" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", style: { color: "var(--compass-color-text)" }, children: "Total" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "font-bold text-xl",
+                style: { color: "var(--compass-color-text)" },
+                children: formatUSD(totalUsdValue)
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+var TRANSFER_TOKEN = "USDC";
+var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
+  compact = false,
+  hideVisual = false,
+  onTransferComplete
+}, ref) {
+  const { address, isConnected, signTypedData, switchChain, walletChainId, fundWallet, hasExternalWallet, sendTransaction } = useEmbeddableWallet();
   const { chainId, chain } = useChain();
   const { earnAccountAddress, isDeployed } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
+  const showBuyTab = !!fundWallet;
+  const showSendTab = !!sendTransaction && !hasExternalWallet;
+  const buyOnly = !hasExternalWallet && showBuyTab && !sendTransaction;
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [activeAction, setActiveAction] = react.useState(
+    !hasExternalWallet && fundWallet ? "buy" : "deposit"
+  );
+  const selectedToken = TRANSFER_TOKEN;
+  const [amount, setAmount] = react.useState("");
+  const [txState, setTxState] = react.useState({ status: "idle" });
+  const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
+  const { startPolling, clearPolling } = useTxPolling({
+    queryKeysToInvalidate: [["earnAccountBalances"], ["eoaBalances"]]
+  });
   const { data: balanceData, isLoading: balancesLoading } = reactQuery.useQuery({
     queryKey: ["earnAccountBalances", chainId, address],
     queryFn: async () => {
@@ -2697,25 +3331,22 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     staleTime: 30 * 1e3
   });
   const { data: eoaBalances } = reactQuery.useQuery({
-    queryKey: ["eoaBalances", chainId, address, TRANSFER_TOKENS.join(",")],
+    queryKey: ["eoaBalances", chainId, address, TRANSFER_TOKEN],
     queryFn: async () => {
       if (!address) return {};
-      const balances = {};
-      for (const token of TRANSFER_TOKENS) {
-        try {
-          const response = await fetch(
-            `/api/compass/token/balance?chain=${chainId}&token=${token}&address=${address}`
-          );
-          if (response.ok) {
-            const data = await response.json();
-            balances[token] = data.balance || "0";
-          }
-        } catch {
+      try {
+        const response = await fetch(
+          `/api/compass/token/balance?chain=${chainId}&token=${TRANSFER_TOKEN}&address=${address}`
+        );
+        if (response.ok) {
+          const data = await response.json();
+          return { [TRANSFER_TOKEN]: data.balance || "0" };
         }
+      } catch {
       }
-      return balances;
+      return {};
     },
-    enabled: !!address && activeAction === "deposit",
+    enabled: !!address && hasExternalWallet && activeAction === "deposit",
     staleTime: 30 * 1e3
   });
   const earnBalances = balanceData?.balances || {};
@@ -2734,10 +3365,9 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
   }
   const resetForm = react.useCallback(() => {
     setAmount("");
-    setTransferState("idle");
-    setStatusMessage("");
-    setError(null);
-  }, []);
+    setTxState({ status: "idle" });
+    clearPolling();
+  }, [clearPolling]);
   const handleOpenModal = () => {
     resetForm();
     setIsModalOpen(true);
@@ -2752,7 +3382,8 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
   const handleActionChange = (action) => {
     setActiveAction(action);
     setAmount("");
-    setError(null);
+    setTxState({ status: "idle" });
+    clearPolling();
   };
   const getMaxBalance = () => {
     if (activeAction === "deposit") {
@@ -2760,37 +3391,28 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     }
     return earnBalanceAmounts[selectedToken] || "0";
   };
-  const handleQuickAmount = (percentage) => {
-    const max = parseFloat(getMaxBalance());
-    if (isNaN(max)) return;
-    setAmount(formatAmount(max * percentage));
-  };
   const handleTransfer = react.useCallback(async () => {
     if (!address || !amount || !signTypedData) return;
-    setError(null);
+    setTxState({ status: "preparing" });
     try {
       const targetChainId = chain.viemChain.id;
       if (walletChainId !== void 0 && walletChainId !== targetChainId) {
         if (!switchChain) {
           throw new Error(`Please switch your wallet to ${chain.name} (chain ID ${targetChainId}) to continue. Your wallet is currently on chain ID ${walletChainId}.`);
         }
-        setStatusMessage(`Switching network to ${chain.name}...`);
         try {
           await switchChain(targetChainId);
-        } catch (switchError) {
+        } catch {
           throw new Error(`Please switch your wallet to ${chain.name} to continue. Your wallet is on chain ID ${walletChainId}, but ${chain.name} requires chain ID ${targetChainId}.`);
         }
       } else if (switchChain && walletChainId === void 0) {
-        setStatusMessage("Switching network...");
         try {
           await switchChain(targetChainId);
-        } catch (switchError) {
+        } catch {
           throw new Error(`Please switch your wallet to ${chain.name} to continue`);
         }
       }
       if (activeAction === "deposit") {
-        setTransferState("checking_approval");
-        setStatusMessage("Checking token approval...");
         const approveResponse = await fetch("/api/compass/transfer/approve", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -2809,16 +3431,14 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
           if (approvalData.requiresTransaction) {
             throw new Error("This token requires a transaction-based approval. Please approve manually.");
           }
-          setTransferState("awaiting_approval_signature");
-          setStatusMessage("Please sign the approval...");
+          setTxState({ status: "signing" });
           const approvalSignature = await signTypedData({
             domain: approvalData.domain,
             types: approvalData.normalizedTypes,
             primaryType: "Permit",
             message: approvalData.message
           });
-          setTransferState("approving");
-          setStatusMessage("Executing approval...");
+          setTxState({ status: "broadcasting" });
           const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
@@ -2835,8 +3455,7 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
           }
         }
       }
-      setTransferState("awaiting_transfer_signature");
-      setStatusMessage("Preparing transfer...");
+      setTxState({ status: "signing" });
       const prepareResponse = await fetch("/api/compass/transfer/prepare", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -2853,15 +3472,13 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
         throw new Error(errData.error || "Failed to prepare transfer");
       }
       const prepareData = await prepareResponse.json();
-      setStatusMessage("Please sign the transfer...");
       const transferSignature = await signTypedData({
         domain: prepareData.domain,
         types: prepareData.normalizedTypes,
         primaryType: prepareData.primaryType,
         message: prepareData.message
       });
-      setTransferState("transferring");
-      setStatusMessage("Executing transfer...");
+      setTxState({ status: "broadcasting" });
       const executeResponse = await fetch("/api/compass/transfer/execute", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -2877,17 +3494,12 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
         throw new Error(errData.error || "Transfer failed");
       }
       const { txHash } = await executeResponse.json();
-      setTransferState("success");
-      setStatusMessage("Transfer successful!");
+      setTxState({ status: "submitted", txHash });
+      startPolling(txHash, setTxState);
       onTransferComplete?.(activeAction, selectedToken, amount, txHash);
-      queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
-      queryClient.invalidateQueries({ queryKey: ["eoaBalances"] });
-      setTimeout(() => {
-        resetForm();
-      }, 2e3);
+      setAmount("");
     } catch (err) {
-      setTransferState("error");
-      setError(err instanceof Error ? err.message : "Transfer failed");
+      setTxState({ status: "failed", error: err instanceof Error ? err.message : "Transfer failed" });
     }
   }, [
     address,
@@ -2899,14 +3511,13 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     walletChainId,
     signTypedData,
     switchChain,
-    queryClient,
     onTransferComplete,
-    resetForm
+    startPolling
   ]);
   if (!isConnected) {
     return null;
   }
-  const isProcessing = transferState !== "idle" && transferState !== "success" && transferState !== "error";
+  const isProcessing = txState.status !== "idle" && txState.status !== "confirmed" && txState.status !== "failed";
   if (!isDeployed && !hideVisual) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2988,178 +3599,151 @@ var EarnAccountBalance = react.forwardRef(function EarnAccountBalance2({
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionModal,
       {
-        isOpen: isModalOpen,
-        onClose: handleCloseModal,
-        title: "Transfer Funds",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "flex gap-1 p-1",
-              style: {
-                backgroundColor: "var(--compass-color-background)",
-                borderRadius: "var(--compass-border-radius-lg)",
-                fontFamily: "var(--compass-font-family)"
-              },
-              children: ["deposit", "withdraw"].map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  onClick: () => handleActionChange(action),
-                  disabled: isProcessing,
-                  className: "flex-1 py-2 text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
-                  style: {
-                    backgroundColor: activeAction === action ? "var(--compass-color-surface)" : "transparent",
-                    color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)",
-                    borderRadius: "var(--compass-border-radius-md)"
-                  },
-                  children: [
-                    action === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }),
-                    action
-                  ]
-                },
-                action
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
-              {
-                className: "text-sm font-medium mb-1 block",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: "Token"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TokenSelector,
-              {
-                tokens: TRANSFER_TOKENS,
-                selectedToken,
-                onSelect: setSelectedToken,
-                balances: activeAction === "deposit" ? eoaBalances : earnBalanceAmounts,
-                disabled: isProcessing
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
-                {
-                  className: "text-sm font-medium",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: "Amount"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                "Available: ",
-                formatAmount(getMaxBalance()),
-                " ",
-                selectedToken
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-center gap-2 p-3 border",
-                style: {
-                  backgroundColor: "var(--compass-color-background)",
-                  borderColor: "var(--compass-color-border)",
-                  borderRadius: "var(--compass-border-radius-lg)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      type: "number",
-                      value: amount,
-                      onChange: (e) => {
-                        setAmount(e.target.value);
-                        setError(null);
-                      },
-                      placeholder: "0.00",
-                      disabled: isProcessing,
-                      className: "flex-1 bg-transparent outline-none text-lg font-mono",
-                      style: { color: "var(--compass-color-text)" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "text-sm font-medium",
-                      style: { color: "var(--compass-color-text-secondary)" },
-                      children: selectedToken
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: [0.25, 0.5, 1].map((pct) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => handleQuickAmount(pct),
-              disabled: isProcessing,
-              className: "flex-1 py-1.5 text-xs font-medium transition-colors",
-              style: {
-                backgroundColor: "var(--compass-color-secondary)",
-                color: "var(--compass-color-text-secondary)",
-                borderRadius: "var(--compass-border-radius-md)"
-              },
-              children: pct === 1 ? "Max" : `${pct * 100}%`
-            },
-            pct
-          )) }),
-          error && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "p-3 text-sm",
-              style: {
-                backgroundColor: "var(--compass-color-error-muted)",
-                color: "var(--compass-color-error)",
-                borderRadius: "var(--compass-border-radius-lg)"
-              },
-              children: error
-            }
-          ),
-          statusMessage && !error && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "p-3 text-sm text-center",
-              style: {
-                backgroundColor: transferState === "success" ? "var(--compass-color-success-muted)" : "var(--compass-color-primary-muted)",
-                color: transferState === "success" ? "var(--compass-color-success)" : "var(--compass-color-primary)",
-                borderRadius: "var(--compass-border-radius-lg)"
-              },
-              children: statusMessage
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+        isOpen: isModalOpen,
+        onClose: handleCloseModal,
+        title: showSendTab ? "Manage Funds" : buyOnly ? "Add Funds" : "Transfer Funds",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          buyOnly ? null : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              onClick: handleTransfer,
-              disabled: isProcessing || !amount || parseFloat(amount) <= 0,
-              className: "w-full py-3 font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+              className: "flex gap-1 p-1",
               style: {
-                backgroundColor: "var(--compass-color-primary)",
-                color: "var(--compass-color-primary-text)",
+                backgroundColor: "var(--compass-color-background)",
                 borderRadius: "var(--compass-border-radius-lg)",
                 fontFamily: "var(--compass-font-family)"
               },
               children: [
-                isProcessing && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
-                isProcessing ? "Processing..." : activeAction === "deposit" ? "Deposit to Earn Account" : "Withdraw to Wallet"
-              ]
+                ...showSendTab ? ["buy", "send"] : ["deposit", "withdraw", ...showBuyTab ? ["buy"] : []]
+              ].map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleActionChange(action),
+                  disabled: isProcessing,
+                  className: "flex-1 py-2 text-sm font-medium capitalize transition-all flex items-center justify-center gap-2",
+                  style: {
+                    backgroundColor: activeAction === action ? "var(--compass-color-surface)" : "transparent",
+                    color: activeAction === action ? "var(--compass-color-text)" : "var(--compass-color-text-secondary)",
+                    borderRadius: "var(--compass-border-radius-md)"
+                  },
+                  children: [
+                    action === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : action === "withdraw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }) : action === "send" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
+                    action
+                  ]
+                },
+                action
+              ))
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
+          activeAction === "send" ? /* @__PURE__ */ jsxRuntime.jsx(
+            SendForm,
             {
-              className: "text-xs text-center",
-              style: { color: "var(--compass-color-text-tertiary)" },
-              children: "Gas fees are sponsored by Compass"
+              onComplete: () => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                queryClient.invalidateQueries({ queryKey: ["eoaBalances"] });
+              }
             }
-          )
+          ) : activeAction === "buy" || buyOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+            BuyForm,
+            {
+              targetAddress: earnAccountAddress || "",
+              onComplete: () => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                queryClient.invalidateQueries({ queryKey: ["eoaBalances"] });
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "label",
+                {
+                  className: "text-sm font-medium mb-1 block",
+                  style: { color: "var(--compass-color-text-secondary)" },
+                  children: "Amount"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-2 p-3 border",
+                  style: {
+                    backgroundColor: "var(--compass-color-background)",
+                    borderColor: "var(--compass-color-border)",
+                    borderRadius: "var(--compass-border-radius-lg)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "number",
+                        value: amount,
+                        onChange: (e) => {
+                          setAmount(e.target.value);
+                          if (txState.status === "failed") setTxState({ status: "idle" });
+                        },
+                        placeholder: "0.00",
+                        disabled: isProcessing,
+                        className: "flex-1 bg-transparent outline-none text-lg font-mono",
+                        style: { color: "var(--compass-color-text)" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "text-sm font-medium",
+                        style: { color: "var(--compass-color-text-secondary)" },
+                        children: "USDC"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setAmount(formatAmount(getMaxBalance())),
+                  className: "text-xs mt-1",
+                  style: { color: "var(--compass-color-primary)", cursor: "pointer", background: "none", border: "none", padding: 0 },
+                  children: [
+                    "Available: ",
+                    formatAmount(getMaxBalance()),
+                    " USDC"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: activeAction === "deposit" ? `Approves the token transfer, then transfers USDC from your ${!hasExternalWallet ? "embedded " : ""}wallet into your savings account. Requires 2 signatures.${!hasExternalWallet ? " Note: deposit and withdraw use your embedded wallet, not your bank account." : ""}` : `Moves USDC from your savings account back to your ${!hasExternalWallet ? "embedded " : ""}wallet. Requires 1 signature.${!hasExternalWallet ? " Gas fees are sponsored." : ""}` }),
+            /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: txState }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleTransfer,
+                disabled: isProcessing || !amount || parseFloat(amount) <= 0,
+                className: "w-full py-3 font-medium transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+                style: {
+                  backgroundColor: "var(--compass-color-primary)",
+                  color: "var(--compass-color-primary-text)",
+                  borderRadius: "var(--compass-border-radius-lg)",
+                  fontFamily: "var(--compass-font-family)"
+                },
+                children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
+                  " Processing..."
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 16 }),
+                  " ",
+                  activeAction === "deposit" ? "Transfer to Savings Account" : "Withdraw to Wallet"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-xs text-center",
+                style: { color: "var(--compass-color-text-tertiary)" },
+                children: "Gas fees are sponsored by Compass"
+              }
+            )
+          ] })
         ] })
       }
     )
@@ -3214,7 +3798,7 @@ function truncate(value, decimals) {
   const factor = Math.pow(10, decimals);
   return (Math.floor(value * factor) / factor).toFixed(decimals);
 }
-var BLOCK_EXPLORERS = {
+var BLOCK_EXPLORERS2 = {
   ethereum: "https://etherscan.io",
   base: "https://basescan.org",
   arbitrum: "https://arbiscan.io"
@@ -3685,7 +4269,7 @@ function SwapForm({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "a",
             {
-              href: `${BLOCK_EXPLORERS[chainId] || BLOCK_EXPLORERS.ethereum}/tx/${lastTxHash}`,
+              href: `${BLOCK_EXPLORERS2[chainId] || BLOCK_EXPLORERS2.ethereum}/tx/${lastTxHash}`,
               target: "_blank",
               rel: "noopener noreferrer",
               style: { display: "flex", alignItems: "center", gap: "4px", color: "var(--compass-color-text-secondary)", fontSize: "0.75rem", textDecoration: "none" },
@@ -3875,8 +4459,7 @@ function MarketSelector({
                 },
                 children: [
                   getTypeLabel(selectedMarket.type),
-                  " \xB7 ",
-                  formatTvl(selectedMarket.tvl)
+                  selectedMarket.type !== "aave" ? ` \xB7 ${formatTvl(selectedMarket.tvl)}` : ""
                 ]
               }
             )
@@ -3982,8 +4565,7 @@ function MarketSelector({
                     },
                     children: [
                       getTypeLabel(market.type),
-                      " \xB7 ",
-                      formatTvl(market.tvl)
+                      market.type !== "aave" ? ` \xB7 ${formatTvl(market.tvl)}` : ""
                     ]
                   }
                 )
@@ -4012,7 +4594,7 @@ function MarketSelector({
     )
   ] });
 }
-var BLOCK_EXPLORERS2 = {
+var BLOCK_EXPLORERS3 = {
   ethereum: "https://etherscan.io",
   base: "https://basescan.org",
   arbitrum: "https://arbiscan.io"
@@ -4174,7 +4756,7 @@ function PositionCard({ position, chainId }) {
                 tx.txHash && /* @__PURE__ */ jsxRuntime.jsx(
                   "a",
                   {
-                    href: `${BLOCK_EXPLORERS2[chainId || "ethereum"] || BLOCK_EXPLORERS2.ethereum}/tx/${tx.txHash}`,
+                    href: `${BLOCK_EXPLORERS3[chainId || "ethereum"] || BLOCK_EXPLORERS3.ethereum}/tx/${tx.txHash}`,
                     target: "_blank",
                     rel: "noopener noreferrer",
                     style: { color: "var(--compass-color-text-tertiary)", lineHeight: 0 },
@@ -4308,161 +4890,29 @@ function EarningsModal({ isOpen, onClose, positions, totalEarned, isLoading, cha
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
                     fontSize: "0.8125rem",
                     fontWeight: 600,
-                    color: totalRealized >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
-                  }, children: [
-                    totalRealized >= 0 ? "+" : "",
-                    formatCurrency(totalRealized)
-                  ] })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-              flex: 1,
-              overflowY: "auto",
-              scrollbarWidth: "none",
-              padding: "16px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "10px"
-            }, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "32px 0", color: "var(--compass-color-text-tertiary)", fontSize: "0.875rem" }, children: "Loading positions..." }) : positions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "32px 0" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--compass-color-text-secondary)", fontSize: "0.9375rem", margin: "0 0 4px" }, children: "No active positions yet" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem", margin: 0 }, children: "Deposit into a market to start earning" })
-            ] }) : positions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(PositionCard, { position, chainId }, position.id)) })
-          ]
-        }
-      )
-    }
-  );
-}
-var BLOCK_EXPLORERS3 = {
-  ethereum: "https://etherscan.io",
-  base: "https://basescan.org",
-  arbitrum: "https://arbiscan.io"
-};
-function TxStatus({ state }) {
-  const { chainId } = useChain();
-  if (state.status === "idle") return null;
-  const explorer = BLOCK_EXPLORERS3[chainId] || BLOCK_EXPLORERS3.ethereum;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "mt-4 p-4 border",
-      style: {
-        borderColor: "var(--compass-color-border)",
-        borderRadius: "var(--compass-border-radius-xl)",
-        fontFamily: "var(--compass-font-family)"
-      },
-      children: [
-        state.status === "preparing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.Loader2,
-            {
-              className: "h-4 w-4 animate-spin",
-              style: { color: "var(--compass-color-primary)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Preparing transaction..." })
-        ] }),
-        state.status === "signing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.Loader2,
-            {
-              className: "h-4 w-4 animate-spin",
-              style: { color: "var(--compass-color-warning)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Waiting for signature..." })
-        ] }),
-        state.status === "broadcasting" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.Loader2,
-            {
-              className: "h-4 w-4 animate-spin",
-              style: { color: "var(--compass-color-primary)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-secondary)" }, children: "Broadcasting transaction..." })
-        ] }),
-        state.status === "submitted" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.Loader2,
-                {
-                  className: "h-4 w-4 animate-spin",
-                  style: { color: "var(--compass-color-primary)" }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text)" }, children: "Transaction submitted" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
-              {
-                href: `${explorer}/tx/${state.txHash}`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "flex items-center gap-1.5 text-xs hover:opacity-70 transition-opacity",
-                style: { color: "var(--compass-color-text-secondary)" },
-                children: [
-                  "View on explorer",
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: "text-xs mt-2",
-              style: { color: "var(--compass-color-text-tertiary)" },
-              children: "Waiting for on-chain confirmation. Balances will update automatically."
-            }
-          )
-        ] }),
-        state.status === "confirmed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.CheckCircle,
-              {
-                className: "h-4 w-4",
-                style: { color: "var(--compass-color-success)" }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-success)" }, children: "Transaction confirmed" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: `${explorer}/tx/${state.txHash}`,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "flex items-center gap-1.5 text-xs hover:opacity-70 transition-opacity",
-              style: { color: "var(--compass-color-text-secondary)" },
-              children: [
-                "View on explorer",
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })
-              ]
-            }
-          )
-        ] }),
-        state.status === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.XCircle,
-            {
-              className: "h-4 w-4 mt-0.5 shrink-0",
-              style: { color: "var(--compass-color-error)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "break-all",
-              style: { color: "var(--compass-color-error)" },
-              children: state.error
-            }
-          )
-        ] })
-      ]
+                    color: totalRealized >= 0 ? "var(--compass-color-success)" : "var(--compass-color-error)"
+                  }, children: [
+                    totalRealized >= 0 ? "+" : "",
+                    formatCurrency(totalRealized)
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+              flex: 1,
+              overflowY: "auto",
+              scrollbarWidth: "none",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px"
+            }, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "32px 0", color: "var(--compass-color-text-tertiary)", fontSize: "0.875rem" }, children: "Loading positions..." }) : positions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "32px 0" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--compass-color-text-secondary)", fontSize: "0.9375rem", margin: "0 0 4px" }, children: "No active positions yet" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem", margin: 0 }, children: "Deposit into a market to start earning" })
+            ] }) : positions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(PositionCard, { position, chainId }, position.id)) })
+          ]
+        }
+      )
     }
   );
 }
@@ -4470,7 +4920,7 @@ function truncate2(value, decimals) {
   const factor = Math.pow(10, decimals);
   return (Math.floor(value * factor) / factor).toFixed(decimals);
 }
-var EVM_CHAIN_IDS = {
+var EVM_CHAIN_IDS2 = {
   ethereum: 1,
   base: 8453,
   arbitrum: 42161
@@ -4511,8 +4961,8 @@ function EarnAccount({
   chain: chainProp,
   height = "600px"
 }) {
-  const { address, isConnected, login, logout, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
-  const { isDeployed } = useEarnAccount();
+  const { address, isConnected, login, logout, signTypedData, switchChain, walletChainId, fundWallet, hasExternalWallet, sendTransaction } = useEmbeddableWallet();
+  const { isDeployed, earnAccountAddress } = useEarnAccount();
   const { chainId: contextChainId } = useChain();
   const CHAIN_ID = chainProp || contextChainId;
   const queryClient = reactQuery.useQueryClient();
@@ -4526,10 +4976,15 @@ function EarnAccount({
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = react.useState(false);
   const [isFundModalOpen, setIsFundModalOpen] = react.useState(false);
   const [fundAmount, setFundAmount] = react.useState("");
-  const [fundAction, setFundAction] = react.useState("deposit");
+  const [fundAction, setFundAction] = react.useState(
+    !hasExternalWallet && fundWallet ? "buy" : "deposit"
+  );
   const [fundStep, setFundStep] = react.useState("idle");
   const [fundTxState, setFundTxState] = react.useState({ status: "idle" });
   const fundPollRef = react.useRef(null);
+  const showBuyTab = !!fundWallet;
+  const showSendTab = !!sendTransaction && !hasExternalWallet;
+  const fundBuyOnly = !hasExternalWallet && showBuyTab && !sendTransaction;
   const actionPollRef = react.useRef(null);
   const actionTimeoutRef = react.useRef(null);
   const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
@@ -4569,7 +5024,7 @@ function EarnAccount({
   const fundIsValid = Number(fundAmount) > 0 && !!address && isDeployed;
   const fundPhase = getFundPhase(fundStep);
   const ensureCorrectChain = react.useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS[CHAIN_ID];
+    const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
     if (!targetChainId) return;
     if (walletChainId !== void 0 && walletChainId !== targetChainId) {
       if (!switchChain) {
@@ -4593,7 +5048,7 @@ function EarnAccount({
         return null;
       }
     },
-    enabled: !!address && isFundModalOpen && fundAction === "deposit",
+    enabled: !!address && hasExternalWallet && isFundModalOpen && fundAction === "deposit",
     staleTime: 15 * 1e3
   });
   const walletBalance = walletBalanceQuery.data?.balance || "0";
@@ -4877,7 +5332,10 @@ function EarnAccount({
           setFundTxState({ status: "failed", error: "Transaction reverted" });
           return;
         }
-      } catch {
+      } catch (err) {
+        if (err instanceof TypeError && err.message.includes("fetch")) ; else {
+          console.warn("[EarnAccount] Unexpected error polling tx receipt:", err);
+        }
       }
       if (polls >= 24) {
         clearFundPolling();
@@ -5672,31 +6130,7 @@ function EarnAccount({
                         ]
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", style: { gap: "6px", marginTop: activeTab === "deposit" && maxAmount >= 10 ? "8px" : "0" }, children: activeTab === "deposit" && maxAmount > 0 && [10, 20, 30].filter((v) => v <= maxAmount).map((val) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: () => {
-                        setAmount(val.toString());
-                        setError(null);
-                      },
-                      disabled: isProcessing,
-                      className: "text-xs font-medium",
-                      style: {
-                        padding: "4px 12px",
-                        backgroundColor: parseFloat(amount) === val ? "transparent" : "var(--compass-color-surface)",
-                        border: parseFloat(amount) === val ? "1.5px solid var(--compass-color-primary)" : "1.5px solid var(--compass-color-border)",
-                        color: parseFloat(amount) === val ? "var(--compass-color-primary)" : "var(--compass-color-text-secondary)",
-                        borderRadius: "var(--compass-border-radius-xl)",
-                        transition: "all 150ms ease"
-                      },
-                      children: [
-                        "$",
-                        val
-                      ]
-                    },
-                    val
-                  )) })
+                  ] })
                 ]
               }
             ),
@@ -5792,13 +6226,13 @@ function EarnAccount({
         onClose: () => {
           setIsFundModalOpen(false);
           setFundAmount("");
-          setFundAction("deposit");
+          setFundAction(fundBuyOnly ? "buy" : showSendTab ? "buy" : "deposit");
           setFundStep("idle");
           setFundTxState({ status: "idle" });
         },
-        title: "Transfer Funds",
+        title: showSendTab ? "Manage Funds" : fundBuyOnly ? "Add Funds" : "Transfer Funds",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          fundBuyOnly ? null : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: "flex gap-1 p-1",
@@ -5807,7 +6241,9 @@ function EarnAccount({
                 borderRadius: "var(--compass-border-radius-lg)",
                 fontFamily: "var(--compass-font-family)"
               },
-              children: ["deposit", "withdraw"].map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+              children: [
+                ...showSendTab ? ["buy", "send"] : ["deposit", "withdraw", ...showBuyTab ? ["buy"] : []]
+              ].map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   onClick: () => handleFundActionChange(tab),
@@ -5820,7 +6256,7 @@ function EarnAccount({
                     border: "none"
                   },
                   children: [
-                    tab === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }),
+                    tab === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : tab === "withdraw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }) : tab === "send" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
                     tab
                   ]
                 },
@@ -5828,137 +6264,158 @@ function EarnAccount({
               ))
             }
           ),
-          (fundIsBusy || fundStep === "confirmed") && fundAction === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+          fundAction === "send" ? /* @__PURE__ */ jsxRuntime.jsx(
+            SendForm,
             {
-              className: "flex gap-3 p-3 text-xs",
-              style: {
-                backgroundColor: "var(--compass-color-surface)",
-                borderRadius: "var(--compass-border-radius-lg)",
-                fontFamily: "var(--compass-font-family)"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  FundStepIndicator,
-                  {
-                    number: 1,
-                    label: "Approve",
-                    state: fundPhase > 1 ? "done" : fundPhase === 1 ? "active" : "pending"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  FundStepIndicator,
-                  {
-                    number: 2,
-                    label: "Transfer",
-                    state: fundStep === "confirmed" ? "done" : fundPhase > 1 ? "active" : "pending"
-                  }
-                )
-              ]
+              onComplete: () => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                queryClient.invalidateQueries({ queryKey: ["walletBalance"] });
+                queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
+              }
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+          ) : fundAction === "buy" || fundBuyOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+            BuyForm,
+            {
+              targetAddress: earnAccountAddress || "",
+              onComplete: () => {
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                queryClient.invalidateQueries({ queryKey: ["walletBalance"] });
+                queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            (fundIsBusy || fundStep === "confirmed") && fundAction === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                className: "block text-sm mb-1.5",
+                className: "flex gap-3 p-3 text-xs",
                 style: {
-                  color: "var(--compass-color-text-secondary)",
+                  backgroundColor: "var(--compass-color-surface)",
+                  borderRadius: "var(--compass-border-radius-lg)",
                   fontFamily: "var(--compass-font-family)"
                 },
-                children: "Amount"
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FundStepIndicator,
+                    {
+                      number: 1,
+                      label: "Approve",
+                      state: fundPhase > 1 ? "done" : fundPhase === 1 ? "active" : "pending"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FundStepIndicator,
+                    {
+                      number: 2,
+                      label: "Transfer",
+                      state: fundStep === "confirmed" ? "done" : fundPhase > 1 ? "active" : "pending"
+                    }
+                  )
+                ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+                "label",
                 {
-                  type: "number",
-                  value: fundAmount,
-                  onChange: (e) => {
-                    setFundAmount(e.target.value);
-                    setFundTxState({ status: "idle" });
-                  },
-                  disabled: fundIsBusy,
-                  placeholder: "0.00",
-                  className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
+                  className: "block text-sm mb-1.5",
                   style: {
-                    backgroundColor: "var(--compass-color-surface)",
-                    borderColor: "var(--compass-color-border)",
-                    borderRadius: "var(--compass-border-radius-lg)",
-                    color: "var(--compass-color-text)",
+                    color: "var(--compass-color-text-secondary)",
                     fontFamily: "var(--compass-font-family)"
-                  }
+                  },
+                  children: "Amount"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: fundAmount,
+                    onChange: (e) => {
+                      setFundAmount(e.target.value);
+                      setFundTxState({ status: "idle" });
+                    },
+                    disabled: fundIsBusy,
+                    placeholder: "0.00",
+                    className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
+                    style: {
+                      backgroundColor: "var(--compass-color-surface)",
+                      borderColor: "var(--compass-color-border)",
+                      borderRadius: "var(--compass-border-radius-lg)",
+                      color: "var(--compass-color-text)",
+                      fontFamily: "var(--compass-font-family)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+                    style: { color: "var(--compass-color-text-tertiary)" },
+                    children: "USDC"
+                  }
+                )
+              ] }),
+              fundMaxBalance !== "0" && /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
                 {
-                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+                  className: "text-xs mt-1",
                   style: { color: "var(--compass-color-text-tertiary)" },
-                  children: "USDC"
+                  children: [
+                    "Available:",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setFundAmount(truncate2(parseFloat(fundMaxBalance), 2)),
+                        disabled: fundIsBusy,
+                        style: { color: "var(--compass-color-primary)", background: "none", border: "none", padding: 0, cursor: "pointer", fontSize: "inherit" },
+                        children: [
+                          truncate2(parseFloat(fundMaxBalance), 2),
+                          " USDC"
+                        ]
+                      }
+                    )
+                  ]
                 }
               )
             ] }),
-            fundMaxBalance !== "0" && /* @__PURE__ */ jsxRuntime.jsxs(
+            !fundIsBusy && fundStep !== "confirmed" && fundStep !== "failed" && fundTxState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: "text-xs mt-1",
-                style: { color: "var(--compass-color-text-tertiary)" },
-                children: [
-                  "Available:",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: () => setFundAmount(truncate2(parseFloat(fundMaxBalance), 2)),
-                      disabled: fundIsBusy,
-                      style: { color: "var(--compass-color-primary)", background: "none", border: "none", padding: 0, cursor: "pointer", fontSize: "inherit" },
-                      children: [
-                        truncate2(parseFloat(fundMaxBalance), 2),
-                        " USDC"
-                      ]
-                    }
-                  )
-                ]
+                className: "text-xs",
+                style: {
+                  color: "var(--compass-color-text-tertiary)",
+                  fontFamily: "var(--compass-font-family)"
+                },
+                children: fundAction === "deposit" ? `Approves the token transfer, then transfers USDC from your ${!hasExternalWallet ? "embedded " : ""}wallet into your savings account. Requires 2 signatures.${!hasExternalWallet ? " Note: deposit and withdraw use your embedded wallet, not your bank account." : ""}` : `Moves USDC from your savings account back to your ${!hasExternalWallet ? "embedded " : ""}wallet. Requires 1 signature.${!hasExternalWallet ? " Gas fees are sponsored." : ""}`
               }
-            )
-          ] }),
-          !fundIsBusy && fundStep !== "confirmed" && fundStep !== "failed" && fundTxState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: "text-xs",
-              style: {
-                color: "var(--compass-color-text-tertiary)",
-                fontFamily: "var(--compass-font-family)"
-              },
-              children: fundAction === "deposit" ? "Approves the token transfer, then transfers USDC from your wallet into your savings account. Requires 2 signatures." : "Transfers USDC from your savings account back to your wallet. Requires 1 signature."
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleFundTransfer,
-              disabled: !fundIsValid || fundIsBusy,
-              className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
-              style: {
-                backgroundColor: "var(--compass-color-primary)",
-                color: "var(--compass-color-primary-text)",
-                borderRadius: "var(--compass-border-radius-xl)",
-                fontFamily: "var(--compass-font-family)",
-                transition: "all 200ms ease",
-                border: "none"
-              },
-              children: fundIsBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
-                fundButtonLabel()
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" }),
-                fundAction === "deposit" ? "Transfer to Savings Account" : "Withdraw to Wallet"
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: fundTxState })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleFundTransfer,
+                disabled: !fundIsValid || fundIsBusy,
+                className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+                style: {
+                  backgroundColor: "var(--compass-color-primary)",
+                  color: "var(--compass-color-primary-text)",
+                  borderRadius: "var(--compass-border-radius-xl)",
+                  fontFamily: "var(--compass-font-family)",
+                  transition: "all 200ms ease",
+                  border: "none"
+                },
+                children: fundIsBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+                  fundButtonLabel()
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" }),
+                  fundAction === "deposit" ? "Transfer to Savings Account" : "Withdraw to Wallet"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: fundTxState })
+          ] })
         ] })
       }
     ),
@@ -7765,19 +8222,24 @@ function getPhase(step) {
   if (step === "approving" || step === "signing-approval") return 1;
   return 2;
 }
-var EVM_CHAIN_IDS2 = {
+var EVM_CHAIN_IDS3 = {
   ethereum: 1,
   base: 8453,
   arbitrum: 42161
 };
 function TopUpModal({ isOpen, onClose }) {
-  const { address, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
+  const { address, signTypedData, switchChain, walletChainId, fundWallet, hasExternalWallet, sendTransaction } = useEmbeddableWallet();
   const { chainId } = useChain();
-  const { isDeployed } = useCreditAccount();
+  const { isDeployed, creditAccountAddress } = useCreditAccount();
   const queryClient = reactQuery.useQueryClient();
   const prices = useTokenPrices();
   const token = "USDC";
-  const [action, setAction] = react.useState("deposit");
+  const [action, setAction] = react.useState(
+    !hasExternalWallet && fundWallet ? "buy" : "deposit"
+  );
+  const showBuyTab = !!fundWallet;
+  const showSendTab = !!sendTransaction && !hasExternalWallet;
+  const buyOnly = !hasExternalWallet && showBuyTab && !sendTransaction;
   const [amount, setAmount] = react.useState("");
   const [step, setStep] = react.useState("idle");
   const [txState, setTxState] = react.useState({ status: "idle" });
@@ -7826,7 +8288,7 @@ function TopUpModal({ isOpen, onClose }) {
   const isValid = Number(amount) > 0 && !!address && isDeployed;
   const isBusy = step === "approving" || step === "signing-approval" || step === "preparing-transfer" || step === "signing-transfer" || step === "executing";
   const ensureCorrectChain = react.useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS2[CHAIN_ID];
+    const targetChainId = EVM_CHAIN_IDS3[CHAIN_ID];
     if (!targetChainId) return;
     if (walletChainId !== void 0 && walletChainId !== targetChainId) {
       if (!switchChain) {
@@ -8028,7 +8490,10 @@ function TopUpModal({ isOpen, onClose }) {
           setTxState({ status: "failed", error: "Transaction reverted" });
           return;
         }
-      } catch {
+      } catch (err) {
+        if (err instanceof TypeError && err.message.includes("fetch")) ; else {
+          console.warn("[TopUpModal] Unexpected error polling tx receipt:", err);
+        }
       }
       if (polls >= 24) {
         clearPolling();
@@ -8064,8 +8529,8 @@ function TopUpModal({ isOpen, onClose }) {
     color: "var(--compass-color-text-secondary)",
     fontFamily: "var(--compass-font-family)"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionModal, { isOpen, onClose, title: "Transfer Funds", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ActionModal, { isOpen, onClose, title: showSendTab ? "Manage Funds" : buyOnly ? "Add Funds" : "Transfer Funds", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    !buyOnly && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "flex gap-1 p-1",
@@ -8074,7 +8539,9 @@ function TopUpModal({ isOpen, onClose }) {
           borderRadius: "var(--compass-border-radius-lg)",
           fontFamily: "var(--compass-font-family)"
         },
-        children: ["deposit", "withdraw"].map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: [
+          ...showSendTab ? ["buy", "send"] : showBuyTab ? ["deposit", "withdraw", "buy"] : ["deposit", "withdraw"]
+        ].map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: () => handleActionChange(tab),
@@ -8086,7 +8553,7 @@ function TopUpModal({ isOpen, onClose }) {
               borderRadius: "var(--compass-border-radius-md)"
             },
             children: [
-              tab === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }),
+              tab === "deposit" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownLeft, { size: 14 }) : tab === "withdraw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { size: 14 }) : tab === "send" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 }),
               tab
             ]
           },
@@ -8094,122 +8561,143 @@ function TopUpModal({ isOpen, onClose }) {
         ))
       }
     ),
-    (isBusy || step === "confirmed") && action === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    action === "send" ? /* @__PURE__ */ jsxRuntime.jsx(
+      SendForm,
       {
-        className: "flex gap-3 p-3 text-xs",
-        style: {
-          backgroundColor: "var(--compass-color-surface)",
-          borderRadius: "var(--compass-border-radius-lg)",
-          fontFamily: "var(--compass-font-family)"
-        },
-        children: [
+        product: "credit",
+        productAccountAddress: creditAccountAddress || void 0,
+        onComplete: () => {
+          queryClient.invalidateQueries({ queryKey: ["creditBalances"] });
+          queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
+        }
+      }
+    ) : action === "buy" || buyOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+      BuyForm,
+      {
+        targetAddress: creditAccountAddress || "",
+        onComplete: () => {
+          queryClient.invalidateQueries({ queryKey: ["creditBalances"] });
+          queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      (isBusy || step === "confirmed") && action === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex gap-3 p-3 text-xs",
+          style: {
+            backgroundColor: "var(--compass-color-surface)",
+            borderRadius: "var(--compass-border-radius-lg)",
+            fontFamily: "var(--compass-font-family)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StepIndicator,
+              {
+                number: 1,
+                label: "Approve",
+                state: phase > 1 ? "done" : phase === 1 ? "active" : "pending"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StepIndicator,
+              {
+                number: 2,
+                label: "Transfer",
+                state: step === "confirmed" ? "done" : phase > 1 ? "active" : "pending"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm mb-1.5", style: labelStyle, children: "Amount" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            StepIndicator,
+            "input",
             {
-              number: 1,
-              label: "Approve",
-              state: phase > 1 ? "done" : phase === 1 ? "active" : "pending"
+              type: "number",
+              value: amount,
+              onChange: (e) => {
+                setAmount(e.target.value);
+                setTxState({ status: "idle" });
+              },
+              disabled: isBusy,
+              placeholder: "0.00",
+              className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
+              style: inputStyle
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            StepIndicator,
+            "span",
             {
-              number: 2,
-              label: "Transfer",
-              state: step === "confirmed" ? "done" : phase > 1 ? "active" : "pending"
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+              style: { color: "var(--compass-color-text-tertiary)" },
+              children: token
             }
           )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm mb-1.5", style: labelStyle, children: "Amount" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+        ] }),
+        formatUsdEstimate(amount, token, prices) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
           {
-            type: "number",
-            value: amount,
-            onChange: (e) => {
-              setAmount(e.target.value);
-              setTxState({ status: "idle" });
-            },
-            disabled: isBusy,
-            placeholder: "0.00",
-            className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
-            style: inputStyle
+            className: "text-xs mt-1",
+            style: { color: "var(--compass-color-text-tertiary)" },
+            children: [
+              "\u2248",
+              " ",
+              formatUsdEstimate(amount, token, prices)
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        maxBalance && maxBalance !== "0" && /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
           {
-            className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+            className: "text-xs mt-1",
             style: { color: "var(--compass-color-text-tertiary)" },
-            children: token
+            children: [
+              "Available: ",
+              truncate6(parseFloat(maxBalance), 2),
+              " ",
+              token
+            ]
           }
         )
       ] }),
-      formatUsdEstimate(amount, token, prices) && /* @__PURE__ */ jsxRuntime.jsxs(
+      !isBusy && step !== "confirmed" && step !== "failed" && txState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
-          className: "text-xs mt-1",
-          style: { color: "var(--compass-color-text-tertiary)" },
-          children: [
-            "\u2248",
-            " ",
-            formatUsdEstimate(amount, token, prices)
-          ]
+          className: "text-xs",
+          style: {
+            color: "var(--compass-color-text-tertiary)",
+            fontFamily: "var(--compass-font-family)"
+          },
+          children: action === "deposit" ? `Approves the token transfer, then transfers tokens from your ${!hasExternalWallet ? "embedded " : ""}wallet into your credit account. Requires 2 signatures.${!hasExternalWallet ? " Note: deposit and withdraw use your embedded wallet, not your bank account." : ""}` : `Moves tokens from your credit account back to your ${!hasExternalWallet ? "embedded " : ""}wallet. Requires 1 signature.${!hasExternalWallet ? " Gas fees are sponsored." : ""}`
         }
       ),
-      maxBalance && maxBalance !== "0" && /* @__PURE__ */ jsxRuntime.jsxs(
-        "p",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          className: "text-xs mt-1",
-          style: { color: "var(--compass-color-text-tertiary)" },
-          children: [
-            "Available: ",
-            truncate6(parseFloat(maxBalance), 2),
-            " ",
-            token
-          ]
+          onClick: handleTransfer,
+          disabled: !isValid || isBusy,
+          className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+          style: {
+            backgroundColor: "var(--compass-color-primary)",
+            color: "white",
+            borderRadius: "var(--compass-border-radius-xl)",
+            fontFamily: "var(--compass-font-family)",
+            transition: "var(--compass-transition-normal)"
+          },
+          children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+            buttonLabel()
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" }),
+            action === "deposit" ? "Transfer to Credit Account" : "Withdraw to Wallet"
+          ] })
         }
-      )
-    ] }),
-    !isBusy && step !== "confirmed" && step !== "failed" && txState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: "text-xs",
-        style: {
-          color: "var(--compass-color-text-tertiary)",
-          fontFamily: "var(--compass-font-family)"
-        },
-        children: action === "deposit" ? "Approves the token transfer, then transfers tokens from your wallet into your credit account. Requires 2 signatures." : "Transfers tokens from your credit account back to your wallet. Requires 1 signature."
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: handleTransfer,
-        disabled: !isValid || isBusy,
-        className: "w-full py-3 px-4 text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
-        style: {
-          backgroundColor: "var(--compass-color-primary)",
-          color: "white",
-          borderRadius: "var(--compass-border-radius-xl)",
-          fontFamily: "var(--compass-font-family)",
-          transition: "var(--compass-transition-normal)"
-        },
-        children: isBusy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
-          buttonLabel()
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" }),
-          action === "deposit" ? "Transfer to Credit Account" : "Withdraw to Wallet"
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: txState })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: txState })
+    ] })
   ] }) });
 }
 function StepIndicator({
@@ -8237,9 +8725,10 @@ function CreditSwapModal({ isOpen, onClose }) {
   const prices = useTokenPrices();
   const { txState, executeBundle, resetState } = useCreditBundle();
   const tokens = CREDIT_TOKENS;
-  const fromToken = "USDC";
-  const [toToken, setToToken] = react.useState(tokens.find((t) => t !== fromToken) || tokens[0] || "WETH");
+  const [fromToken, setFromToken] = react.useState("USDC");
+  const [toToken, setToToken] = react.useState(tokens.find((t) => t !== "USDC") || tokens[0] || "WETH");
   const [fromAmount, setFromAmount] = react.useState("");
+  const [isFromOpen, setIsFromOpen] = react.useState(false);
   const [isToOpen, setIsToOpen] = react.useState(false);
   react.useEffect(() => {
     if (isOpen) {
@@ -8247,6 +8736,12 @@ function CreditSwapModal({ isOpen, onClose }) {
       resetState();
     }
   }, [isOpen]);
+  react.useEffect(() => {
+    if (fromToken === toToken) {
+      const alt = tokens.find((t) => t !== fromToken);
+      if (alt) setToToken(alt);
+    }
+  }, [fromToken, toToken, tokens]);
   const fromBalance = balances?.find((b) => b.tokenSymbol === fromToken);
   const fromBalanceAmount = fromBalance ? parseFloat(fromBalance.amount) : 0;
   const estimatedOutput = (() => {
@@ -8325,24 +8820,76 @@ function CreditSwapModal({ isOpen, onClose }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  fontWeight: 500,
-                  backgroundColor: "var(--compass-color-background)",
-                  border: "1.5px solid var(--compass-color-border)",
-                  color: "var(--compass-color-text)",
-                  borderRadius: "var(--compass-border-radius-md)",
-                  padding: "4px 8px",
-                  fontSize: "0.8125rem",
-                  flexShrink: 0
-                },
-                children: fromToken
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setIsFromOpen(!isFromOpen),
+                  disabled: isBusy,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    fontWeight: 500,
+                    backgroundColor: "var(--compass-color-background)",
+                    border: "1.5px solid var(--compass-color-border)",
+                    color: "var(--compass-color-text)",
+                    borderRadius: "var(--compass-border-radius-md)",
+                    padding: "4px 8px",
+                    gap: "4px",
+                    fontSize: "0.8125rem",
+                    cursor: isBusy ? "not-allowed" : "pointer"
+                  },
+                  children: [
+                    fromToken,
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, style: { color: "var(--compass-color-text-tertiary)" } })
+                  ]
+                }
+              ),
+              isFromOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: "100%",
+                    marginTop: "4px",
+                    zIndex: 10,
+                    backgroundColor: "var(--compass-color-surface)",
+                    border: "1.5px solid var(--compass-color-border)",
+                    borderRadius: "var(--compass-border-radius-lg)",
+                    boxShadow: "var(--compass-shadow-md)",
+                    minWidth: "120px",
+                    maxHeight: "200px",
+                    overflowY: "auto",
+                    scrollbarWidth: "none"
+                  },
+                  children: tokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setFromToken(token);
+                        setFromAmount("");
+                        setIsFromOpen(false);
+                      },
+                      style: {
+                        display: "block",
+                        width: "100%",
+                        textAlign: "left",
+                        padding: "6px 10px",
+                        fontSize: "0.8125rem",
+                        fontWeight: 500,
+                        color: token === fromToken ? "var(--compass-color-primary)" : "var(--compass-color-text)",
+                        backgroundColor: token === fromToken ? "var(--compass-color-primary-muted)" : "transparent",
+                        border: "none",
+                        cursor: "pointer"
+                      },
+                      children: token
+                    },
+                    token
+                  ))
+                }
+              )
+            ] })
           ] })
         ]
       }
@@ -8549,7 +9096,7 @@ function CreditAccount({
   onBorrow: _onBorrow,
   onRepay: _onRepay
 }) {
-  const { address, isConnected, login, logout } = useEmbeddableWallet();
+  const { address, isConnected, login, logout, hasExternalWallet } = useEmbeddableWallet();
   const { isDeployed, creditAccountAddress } = useCreditAccount();
   const { chainId } = useChain();
   const { data: positions, isLoading: positionsLoading } = useCreditPositions();
@@ -8575,6 +9122,25 @@ function CreditAccount({
     return { ...b, usdValue };
   }).filter((b) => b.usdValue >= 0.01).sort((a, b) => a.tokenSymbol.localeCompare(b.tokenSymbol));
   const totalIdleUsd = balancesWithUsd.reduce((sum, b) => sum + b.usdValue, 0);
+  const { data: walletBalance } = reactQuery.useQuery({
+    queryKey: ["embeddedWalletBalance", chainId, address, "USDC"],
+    queryFn: async () => {
+      if (!address) return "0";
+      try {
+        const response = await fetch(
+          `/api/compass/token/balance?chain=${chainId}&token=USDC&address=${address}`
+        );
+        if (response.ok) {
+          const data = await response.json();
+          return data.balance || "0";
+        }
+      } catch {
+      }
+      return "0";
+    },
+    enabled: !!address && hasExternalWallet,
+    staleTime: 30 * 1e3
+  });
   const totalInterestEarnedUsd = (() => {
     if (!positions) return 0;
     let total = 0;
@@ -9575,6 +10141,7 @@ function PositionDetailModal({ position, onClose }) {
   const isPendle = position.venue === "pendle";
   const duration = formatDuration(position.entryTimestamp);
   const expiryDate = formatExpiryUTC(position.expiry);
+  const modalRef = react.useRef(null);
   react.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -9582,296 +10149,312 @@ function PositionDetailModal({ position, onClose }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
+  const handleOverlayWheel = react.useCallback((e) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      window.scrollBy(0, e.deltaY);
+    }
+  }, []);
   const hasStats = position.apy || isPendle && (duration || expiryDate) || position.pnl;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { backgroundColor: "rgba(0, 0, 0, 0.7)" },
+      onWheel: handleOverlayWheel,
       onClick: onClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          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)",
-            scrollbarWidth: "none"
-          },
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "sticky top-0 flex items-center justify-between p-4 border-b",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  borderColor: "var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "h2",
-                      {
-                        className: "font-semibold text-lg",
-                        style: { color: "var(--compass-color-text)" },
-                        children: position.name
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: "text-sm",
-                        style: { color: "var(--compass-color-text-secondary)" },
-                        children: position.venueName
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: onClose,
-                      className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
-                      style: { backgroundColor: "var(--compass-color-background)" },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, style: { color: "var(--compass-color-text-secondary)" } })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", style: { borderColor: "var(--compass-color-border)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: "text-sm mb-1",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: "Current Balance"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: "text-3xl font-bold",
-                  style: { color: "var(--compass-color-text)" },
-                  children: formatUSD(position.balanceUsd)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "p",
-                {
-                  className: "text-sm font-mono mt-1",
-                  style: { color: "var(--compass-color-text-secondary)" },
-                  children: [
-                    formatAmount(position.balance),
-                    " ",
-                    position.assetSymbol
-                  ]
-                }
-              )
-            ] }) }),
-            hasStats && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 p-4 border-b", style: { borderColor: "var(--compass-color-border)" }, children: [
-              position.apy && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Percent, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "APY" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "p",
-                      {
-                        className: "font-semibold",
-                        style: { color: "var(--compass-color-success)" },
-                        children: [
-                          parseFloat(position.apy).toFixed(2),
-                          "%"
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              isPendle && duration && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Duration" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: "font-semibold",
-                        style: { color: "var(--compass-color-text)" },
-                        children: duration
-                      }
-                    )
-                  ]
-                }
-              ),
-              isPendle && expiryDate && /* @__PURE__ */ jsxRuntime.jsxs(
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { backgroundColor: "rgba(0, 0, 0, 0.7)" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: modalRef,
+            className: "relative w-full max-w-md rounded-xl border max-h-[85vh] overflow-y-auto",
+            style: {
+              backgroundColor: "var(--compass-color-background)",
+              borderColor: "var(--compass-color-border)",
+              scrollbarWidth: "none",
+              overscrollBehavior: "contain"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
+                  className: "sticky top-0 flex items-center justify-between p-4 border-b",
+                  style: {
+                    backgroundColor: "var(--compass-color-surface)",
+                    borderColor: "var(--compass-color-border)"
+                  },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Expiry (UTC)" })
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "h2",
+                        {
+                          className: "font-semibold text-lg",
+                          style: { color: "var(--compass-color-text)" },
+                          children: position.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: "text-sm",
+                          style: { color: "var(--compass-color-text-secondary)" },
+                          children: position.venueName
+                        }
+                      )
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
+                      "button",
                       {
-                        className: "font-semibold",
-                        style: { color: "var(--compass-color-text)" },
-                        children: expiryDate
+                        onClick: onClose,
+                        className: "p-2 rounded-lg hover:opacity-80 transition-opacity",
+                        style: { backgroundColor: "var(--compass-color-background)" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, style: { color: "var(--compass-color-text-secondary)" } })
                       }
                     )
                   ]
                 }
               ),
-              position.pnl && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "p-3 rounded-lg",
-                  style: { backgroundColor: "var(--compass-color-surface)" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-                      isPnlPositive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { size: 14, style: { color: "var(--compass-color-error)" } }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Total P&L" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "p",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", style: { borderColor: "var(--compass-color-border)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "text-sm mb-1",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: "Current Balance"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "text-3xl font-bold",
+                    style: { color: "var(--compass-color-text)" },
+                    children: formatUSD(position.balanceUsd)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "p",
+                  {
+                    className: "text-sm font-mono mt-1",
+                    style: { color: "var(--compass-color-text-secondary)" },
+                    children: [
+                      formatAmount(position.balance),
+                      " ",
+                      position.assetSymbol
+                    ]
+                  }
+                )
+              ] }) }),
+              hasStats && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 p-4 border-b", style: { borderColor: "var(--compass-color-border)" }, children: [
+                position.apy && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "p-3 rounded-lg",
+                    style: { backgroundColor: "var(--compass-color-surface)" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Percent, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "APY" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "p",
+                        {
+                          className: "font-semibold",
+                          style: { color: "var(--compass-color-success)" },
+                          children: [
+                            parseFloat(position.apy).toFixed(2),
+                            "%"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isPendle && duration && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "p-3 rounded-lg",
+                    style: { backgroundColor: "var(--compass-color-surface)" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Duration" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: "font-semibold",
+                          style: { color: "var(--compass-color-text)" },
+                          children: duration
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isPendle && expiryDate && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "p-3 rounded-lg",
+                    style: { backgroundColor: "var(--compass-color-surface)" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Expiry (UTC)" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: "font-semibold",
+                          style: { color: "var(--compass-color-text)" },
+                          children: expiryDate
+                        }
+                      )
+                    ]
+                  }
+                ),
+                position.pnl && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "p-3 rounded-lg",
+                    style: { backgroundColor: "var(--compass-color-surface)" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                        isPnlPositive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { size: 14, style: { color: "var(--compass-color-success)" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { size: 14, style: { color: "var(--compass-color-error)" } }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "Total P&L" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: "font-semibold mb-3",
+                    style: { color: "var(--compass-color-text)" },
+                    children: "Transaction History"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  position.deposits.map((tx, i) => {
+                    const date = formatDate(tx.timestamp);
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
                       {
-                        className: "font-semibold",
-                        style: {
-                          color: isPnlPositive ? "var(--compass-color-success)" : "var(--compass-color-error)"
-                        },
+                        className: "flex items-center justify-between p-3 rounded-lg",
+                        style: { backgroundColor: "var(--compass-color-surface)" },
                         children: [
-                          isPnlPositive ? "+" : "",
-                          formatUSD(position.pnl.totalPnl)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            (position.deposits.length > 0 || position.withdrawals.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "h3",
-                {
-                  className: "font-semibold mb-3",
-                  style: { color: "var(--compass-color-text)" },
-                  children: "Transaction History"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                position.deposits.map((tx, i) => {
-                  const date = formatDate(tx.timestamp);
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "flex items-center justify-between p-3 rounded-lg",
-                      style: { backgroundColor: "var(--compass-color-surface)" },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "p",
-                            {
-                              className: "font-medium",
-                              style: { color: "var(--compass-color-success)" },
-                              children: [
-                                "+",
-                                formatAmount(tx.amount),
-                                " ",
-                                position.assetSymbol
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "p",
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "p",
+                              {
+                                className: "font-medium",
+                                style: { color: "var(--compass-color-success)" },
+                                children: [
+                                  "+",
+                                  formatAmount(tx.amount),
+                                  " ",
+                                  position.assetSymbol
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "p",
+                              {
+                                className: "text-xs",
+                                style: { color: "var(--compass-color-text-tertiary)" },
+                                children: date ? `Deposit - ${date}` : "Deposit"
+                              }
+                            )
+                          ] }),
+                          tx.txHash && /* @__PURE__ */ jsxRuntime.jsx(
+                            "a",
                             {
-                              className: "text-xs",
-                              style: { color: "var(--compass-color-text-tertiary)" },
-                              children: date ? `Deposit - ${date}` : "Deposit"
+                              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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
                             }
                           )
-                        ] }),
-                        tx.txHash && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
-                          }
-                        )
-                      ]
-                    },
-                    `deposit-${i}`
-                  );
-                }),
-                position.withdrawals.map((tx, i) => {
-                  const date = formatDate(tx.timestamp);
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "flex items-center justify-between p-3 rounded-lg",
-                      style: { backgroundColor: "var(--compass-color-surface)" },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "p",
-                            {
-                              className: "font-medium",
-                              style: { color: "var(--compass-color-error)" },
-                              children: [
-                                "-",
-                                formatAmount(tx.amount),
-                                " ",
-                                position.assetSymbol
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "p",
+                        ]
+                      },
+                      `deposit-${i}`
+                    );
+                  }),
+                  position.withdrawals.map((tx, i) => {
+                    const date = formatDate(tx.timestamp);
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "flex items-center justify-between p-3 rounded-lg",
+                        style: { backgroundColor: "var(--compass-color-surface)" },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "p",
+                              {
+                                className: "font-medium",
+                                style: { color: "var(--compass-color-error)" },
+                                children: [
+                                  "-",
+                                  formatAmount(tx.amount),
+                                  " ",
+                                  position.assetSymbol
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "p",
+                              {
+                                className: "text-xs",
+                                style: { color: "var(--compass-color-text-tertiary)" },
+                                children: date ? `Withdrawal - ${date}` : "Withdrawal"
+                              }
+                            )
+                          ] }),
+                          tx.txHash && /* @__PURE__ */ jsxRuntime.jsx(
+                            "a",
                             {
-                              className: "text-xs",
-                              style: { color: "var(--compass-color-text-tertiary)" },
-                              children: date ? `Withdrawal - ${date}` : "Withdrawal"
+                              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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
                             }
                           )
-                        ] }),
-                        tx.txHash && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14, style: { color: "var(--compass-color-text-tertiary)" } })
-                          }
-                        )
-                      ]
-                    },
-                    `withdraw-${i}`
-                  );
-                })
+                        ]
+                      },
+                      `withdraw-${i}`
+                    );
+                  })
+                ] })
               ] })
-            ] })
-          ]
-        }
-      )
+            ]
+          }
+        )
+      ]
     }
   );
 }
@@ -10640,7 +11223,7 @@ function AllocationEditor({
     ) })
   ] });
 }
-var EVM_CHAIN_IDS3 = {
+var EVM_CHAIN_IDS4 = {
   ethereum: 1,
   base: 8453,
   arbitrum: 42161
@@ -10674,7 +11257,7 @@ function RebalancingWidget({
 }) {
   const { chainId: contextChainId, setChainId } = useChain();
   const CHAIN_ID = chain || contextChainId;
-  const { address, signTypedData, isConnected, login, logout, switchChain, walletChainId } = useEmbeddableWallet();
+  const { address, signTypedData, isConnected, login, logout, switchChain, walletChainId, fundWallet, hasExternalWallet } = useEmbeddableWallet();
   const { earnAccountAddress } = useEarnAccount();
   const queryClient = reactQuery.useQueryClient();
   const { portfolio, earnAccountMarkets, isMarketsLoading, isLoading, isError, error, refetch } = useRebalancingData(chain);
@@ -10710,6 +11293,7 @@ function RebalancingWidget({
   const [txHash, setTxHash] = react.useState(null);
   const [txConfirmed, setTxConfirmed] = react.useState(false);
   const [hasInitializedTargets, setHasInitializedTargets] = react.useState(false);
+  const [originalAllocations, setOriginalAllocations] = react.useState({});
   const [isSwapModalOpen, setIsSwapModalOpen] = react.useState(false);
   const [isBalancesModalOpen, setIsBalancesModalOpen] = react.useState(false);
   const [isAddMarketExpanded, setIsAddMarketExpanded] = react.useState(false);
@@ -10722,12 +11306,14 @@ function RebalancingWidget({
   const [selectedToken, setSelectedToken] = react.useState("USDC");
   const [depositAmount, setDepositAmount] = react.useState("");
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = react.useState(false);
-  const [isProcessing, setIsProcessing] = react.useState(false);
-  const [depositError, setDepositError] = react.useState(null);
-  const [depositStatus, setDepositStatus] = react.useState("");
+  const [depositTxState, setDepositTxState] = react.useState({ status: "idle" });
   const earnBalanceRef = react.useRef(null);
+  const { startPolling: startDepositPolling, clearPolling: clearDepositPolling } = useTxPolling({
+    queryKeysToInvalidate: [["earnAccountBalances"], ["rebalancing"]]
+  });
   react.useEffect(() => {
     setTargets([]);
+    setOriginalAllocations({});
     setPreviewPlan(null);
     setServerPreview(null);
     setWidgetState("editing");
@@ -10739,20 +11325,26 @@ function RebalancingWidget({
     setIsSwapModalOpen(false);
     setSelectedMarket(null);
     setDepositAmount("");
-    setDepositError(null);
-    setDepositStatus("");
-  }, [CHAIN_ID]);
+    setDepositTxState({ status: "idle" });
+    clearDepositPolling();
+  }, [CHAIN_ID, clearDepositPolling]);
   react.useEffect(() => {
     if (portfolio && portfolio.positions.length > 0 && !hasInitializedTargets && !isLoading) {
+      const origAllocs = {};
       setTargets(
-        portfolio.positions.map((p) => ({
-          venueType: p.venueType,
-          venueAddress: p.venueAddress,
-          venueName: p.venueName,
-          token: p.token,
-          targetPercent: parseFloat(p.allocationPercent.toFixed(2))
-        }))
+        portfolio.positions.map((p) => {
+          const pct = parseFloat(p.allocationPercent.toFixed(2));
+          origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
+          return {
+            venueType: p.venueType,
+            venueAddress: p.venueAddress,
+            venueName: p.venueName,
+            token: p.token,
+            targetPercent: pct
+          };
+        })
       );
+      setOriginalAllocations(origAllocs);
       setHasInitializedTargets(true);
     }
   }, [portfolio, hasInitializedTargets, isLoading]);
@@ -10784,15 +11376,21 @@ function RebalancingWidget({
   }, [portfolio, targets, hasChanges, defaultSlippage, minRebalanceThresholdUsd]);
   const handleResetToCurrent = react.useCallback(() => {
     if (!portfolio) return;
+    const origAllocs = {};
     setTargets(
-      portfolio.positions.map((p) => ({
-        venueType: p.venueType,
-        venueAddress: p.venueAddress,
-        venueName: p.venueName,
-        token: p.token,
-        targetPercent: parseFloat(p.allocationPercent.toFixed(2))
-      }))
+      portfolio.positions.map((p) => {
+        const pct = parseFloat(p.allocationPercent.toFixed(2));
+        origAllocs[`${p.venueType}-${p.venueAddress.toLowerCase()}`] = pct;
+        return {
+          venueType: p.venueType,
+          venueAddress: p.venueAddress,
+          venueName: p.venueName,
+          token: p.token,
+          targetPercent: pct
+        };
+      })
     );
+    setOriginalAllocations(origAllocs);
     setPreviewPlan(null);
     setServerPreview(null);
     setWidgetState("editing");
@@ -10810,7 +11408,7 @@ function RebalancingWidget({
     setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: rounded } : t));
   }, []);
   const ensureCorrectChain = react.useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS3[CHAIN_ID];
+    const targetChainId = EVM_CHAIN_IDS4[CHAIN_ID];
     if (!targetChainId) return;
     if (walletChainId !== void 0 && walletChainId !== targetChainId) {
       if (!switchChain) {
@@ -10835,7 +11433,8 @@ function RebalancingWidget({
             venueType: t.venueType === "vault" ? "VAULT" : t.venueType === "aave" ? "AAVE" : "PENDLE_PT",
             venueAddress: t.venueAddress,
             targetPercent: t.targetPercent,
-            token: t.token
+            token: t.token,
+            originalPercent: originalAllocations[`${t.venueType}-${t.venueAddress.toLowerCase()}`] ?? 0
           })),
           slippage: defaultSlippage
         })
@@ -10853,7 +11452,7 @@ function RebalancingWidget({
       setWidgetState("error");
       onError?.(err instanceof Error ? err : new Error("Preview failed"));
     }
-  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError, ensureCorrectChain]);
+  }, [portfolio, hasChanges, address, CHAIN_ID, targets, defaultSlippage, clientPreview, onError, ensureCorrectChain, originalAllocations]);
   const handleExecute = react.useCallback(async () => {
     if (!serverPreview?.eip712 || !address) return;
     setWidgetState("signing");
@@ -10941,13 +11540,11 @@ function RebalancingWidget({
   };
   const handleDeposit = react.useCallback(async () => {
     if (!selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || !address || !signTypedData) return;
-    setIsProcessing(true);
-    setDepositError(null);
+    setDepositTxState({ status: "preparing" });
     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}`
         );
@@ -10961,7 +11558,6 @@ function RebalancingWidget({
           throw new Error("Invalid swap quote - no output amount");
         }
         const actualDepositAmount = (parseFloat(estimatedOutput) * 0.99999).toString();
-        setDepositStatus("Preparing swap and deposit...");
         const bundleActions = [
           {
             body: {
@@ -10995,7 +11591,7 @@ function RebalancingWidget({
           throw new Error(errorData.error || "Failed to prepare bundle");
         }
         const { eip712, normalizedTypes, domain, message } = await prepareResponse.json();
-        setDepositStatus("Please sign the transaction...");
+        setDepositTxState({ status: "signing" });
         await ensureCorrectChain();
         const signature = await signTypedData({
           domain,
@@ -11003,7 +11599,7 @@ function RebalancingWidget({
           primaryType: "SafeTx",
           message
         });
-        setDepositStatus("Executing swap and deposit...");
+        setDepositTxState({ status: "broadcasting" });
         const executeResponse = await fetch("/api/compass/bundle/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -11021,7 +11617,6 @@ function RebalancingWidget({
         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",
@@ -11038,7 +11633,7 @@ function RebalancingWidget({
           throw new Error(errData.error || "Failed to prepare deposit");
         }
         const prepareData = await prepareResponse.json();
-        setDepositStatus("Please sign the transaction...");
+        setDepositTxState({ status: "signing" });
         await ensureCorrectChain();
         const signature = await signTypedData({
           domain: prepareData.domain,
@@ -11046,7 +11641,7 @@ function RebalancingWidget({
           primaryType: "SafeTx",
           message: prepareData.message
         });
-        setDepositStatus("Executing deposit...");
+        setDepositTxState({ status: "broadcasting" });
         const executeResponse = await fetch("/api/compass/deposit/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -11064,7 +11659,8 @@ function RebalancingWidget({
         const result = await executeResponse.json();
         resultTxHash = result.txHash;
       }
-      setDepositStatus("Deposit successful!");
+      setDepositTxState({ status: "submitted", txHash: resultTxHash });
+      startDepositPolling(resultTxHash, setDepositTxState);
       setDepositAmount("");
       queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
       queryClient.invalidateQueries({ queryKey: ["rebalancing"] });
@@ -11076,15 +11672,11 @@ function RebalancingWidget({
           refetch();
         }, delay);
       }
-      setTimeout(() => setDepositStatus(""), 3e3);
     } catch (err) {
-      setDepositError(err instanceof Error ? err.message : "Deposit failed");
-      setDepositStatus("");
+      setDepositTxState({ status: "failed", error: err instanceof Error ? err.message : "Deposit failed" });
       onError?.(err instanceof Error ? err : new Error("Deposit failed"));
-    } finally {
-      setIsProcessing(false);
     }
-  }, [selectedMarket, depositAmount, address, signTypedData, selectedToken, needsSwap, CHAIN_ID, ensureCorrectChain, queryClient, refetch, onError]);
+  }, [selectedMarket, depositAmount, address, signTypedData, selectedToken, needsSwap, CHAIN_ID, ensureCorrectChain, queryClient, refetch, onError, startDepositPolling]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", style: { gap: "0", fontFamily: "var(--compass-font-family)", height, overflow: "hidden", borderRadius: "var(--compass-border-radius-xl)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", scrollbarWidth: "none", display: "flex", flexDirection: "column" }, children: [
       showChainSwitcher && !chain && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0 4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ChainSwitcher, {}) }),
@@ -11113,8 +11705,19 @@ function RebalancingWidget({
             }
           )
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold mb-2", style: { color: "var(--compass-color-text)" }, children: "No positions found" }),
-          /* @__PURE__ */ jsxRuntime.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." })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold mb-2", style: { color: "var(--compass-color-text)" }, children: fundWallet && !hasExternalWallet ? "Fund your account to start" : "No positions found" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mb-4", style: { color: "var(--compass-color-text-secondary)" }, children: fundWallet && !hasExternalWallet ? "Buy crypto to get started with your DeFi portfolio." : "Deposit into a vault, Aave market, or Pendle market to start rebalancing." }),
+          fundWallet && earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", maxWidth: "320px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            BuyForm,
+            {
+              targetAddress: earnAccountAddress,
+              onComplete: () => {
+                queryClient.invalidateQueries({ queryKey: ["rebalancingPortfolio"] });
+                queryClient.invalidateQueries({ queryKey: ["earnAccountBalances"] });
+                refetch();
+              }
+            }
+          ) })
         ] }) }),
         state !== "loading" && state !== "empty" && portfolio && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", style: { padding: "16px 16px 12px" }, children: [
@@ -11281,7 +11884,7 @@ function RebalancingWidget({
                       selectedMarket,
                       onMarketSelect: (market) => {
                         setSelectedMarket(market);
-                        setDepositError(null);
+                        if (depositTxState.status === "failed") setDepositTxState({ status: "idle" });
                       },
                       isLoading: isMarketsLoading
                     }
@@ -11304,10 +11907,10 @@ function RebalancingWidget({
                               value: depositAmount,
                               onChange: (e) => {
                                 setDepositAmount(e.target.value);
-                                setDepositError(null);
+                                if (depositTxState.status === "failed") setDepositTxState({ status: "idle" });
                               },
                               placeholder: "0.00",
-                              disabled: isProcessing,
+                              disabled: depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed",
                               className: "flex-1 font-bold bg-transparent outline-none",
                               style: {
                                 color: "var(--compass-color-text)",
@@ -11323,7 +11926,7 @@ function RebalancingWidget({
                               "button",
                               {
                                 onClick: () => setIsTokenDropdownOpen(!isTokenDropdownOpen),
-                                disabled: isProcessing,
+                                disabled: depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed",
                                 className: "flex items-center font-semibold",
                                 style: {
                                   backgroundColor: "var(--compass-color-surface-hover, var(--compass-color-surface))",
@@ -11360,7 +11963,7 @@ function RebalancingWidget({
                                     onClick: () => {
                                       setSelectedToken(token);
                                       setIsTokenDropdownOpen(false);
-                                      setDepositError(null);
+                                      if (depositTxState.status === "failed") setDepositTxState({ status: "idle" });
                                     },
                                     className: "w-full text-left font-medium",
                                     style: {
@@ -11386,7 +11989,7 @@ function RebalancingWidget({
                             "button",
                             {
                               onClick: () => setDepositAmount(earnBalancesQuery.toString()),
-                              disabled: isProcessing,
+                              disabled: depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed",
                               className: "font-semibold",
                               style: { color: "var(--compass-color-primary)", fontSize: "0.8125rem", background: "none", border: "none", padding: 0 },
                               children: [
@@ -11423,26 +12026,12 @@ function RebalancingWidget({
                       ]
                     }
                   ),
-                  depositError && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "flex items-center",
-                      style: {
-                        backgroundColor: "var(--compass-color-error-muted)",
-                        color: "var(--compass-color-error)",
-                        borderRadius: "var(--compass-border-radius-lg)",
-                        padding: "12px 14px",
-                        gap: "8px",
-                        fontSize: "0.875rem"
-                      },
-                      children: depositError
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(TxStatus, { state: depositTxState }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       onClick: !isConnected && login ? login : handleDeposit,
-                      disabled: isConnected && (isProcessing || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery),
+                      disabled: isConnected && (depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery),
                       className: "w-full font-bold",
                       style: {
                         backgroundColor: "var(--compass-color-primary)",
@@ -11453,26 +12042,13 @@ function RebalancingWidget({
                         fontSize: "1rem",
                         transition: "all 200ms ease",
                         border: "none",
-                        opacity: isConnected && (isProcessing || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery) ? 0.4 : 1
+                        opacity: isConnected && (depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" || !selectedMarket || !depositAmount || parseFloat(depositAmount) <= 0 || parseFloat(depositAmount) > earnBalancesQuery) ? 0.4 : 1
                       },
-                      children: !isConnected ? "Connect Wallet" : isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
+                      children: !isConnected ? "Connect Wallet" : depositTxState.status !== "idle" && depositTxState.status !== "confirmed" && depositTxState.status !== "failed" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center", style: { gap: "8px" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
                         "Processing..."
                       ] }) : !selectedMarket ? "Select a market" : needsSwap ? "Swap & Deposit" : "Deposit"
                     }
-                  ),
-                  depositStatus && !depositError && /* @__PURE__ */ jsxRuntime.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: "10px 12px"
-                      },
-                      children: depositStatus
-                    }
                   )
                 ] }),
                 clientPreview && clientPreview.actions.length > 0 && state === "editing" && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11489,11 +12065,7 @@ function RebalancingWidget({
                       clientPreview.warnings.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-col gap-1", children: clientPreview.warnings.map((w, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs", style: { color: "var(--compass-color-warning, #eab308)" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { size: 12, className: "flex-shrink-0 mt-0.5" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: w })
-                      ] }, i)) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs mt-2", style: { color: "var(--compass-color-text-tertiary)" }, children: [
-                        "Estimated gas savings: ",
-                        clientPreview.estimatedGasSavings
-                      ] })
+                      ] }, i)) })
                     ]
                   }
                 ),
@@ -11736,46 +12308,8 @@ function RebalancingWidget({
           onClose: () => setIsBalancesModalOpen(false),
           title: "Balance Breakdown",
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "12px" }, children: [
-            address && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  borderRadius: "var(--compass-border-radius-lg)",
-                  padding: "10px 16px",
-                  border: "1.5px solid var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Wallet" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    address.slice(0, 6),
-                    "...",
-                    address.slice(-4)
-                  ] })
-                ]
-              }
-            ),
-            earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between",
-                style: {
-                  backgroundColor: "var(--compass-color-surface)",
-                  borderRadius: "var(--compass-border-radius-lg)",
-                  padding: "10px 16px",
-                  border: "1.5px solid var(--compass-color-border)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--compass-color-text-tertiary)", fontSize: "0.8125rem" }, children: "Product Account" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--compass-color-text)", fontSize: "0.8125rem", fontFamily: "monospace" }, children: [
-                    earnAccountAddress.slice(0, 6),
-                    "...",
-                    earnAccountAddress.slice(-4)
-                  ] })
-                ]
-              }
-            ),
+            address && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address, label: "Wallet" }),
+            earnAccountAddress && /* @__PURE__ */ jsxRuntime.jsx(CopyableAddress, { address: earnAccountAddress, label: "Product Account" }),
             portfolio && portfolio.idleBalances.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",